添加新学生管理

src/components/pages/PersonnelManagement/components/classL.vue

@@ -0,0 +1,692 @@
+<template>
+  <div>
+    <el-table
+      ref="table"
+      :key="1"
+      :data="tableData"
+      :fit="true"
+      v-loading="isLoading"
+      style="width: 100%; height: 60%"
+      :header-cell-style="{ background: '#f1f1f1' }"
+    >
+      <el-table-column prop="name" label="班级名称" align="center">
+      </el-table-column>
+      <el-table-column label="所属年级" align="center" v-if="!gidL">
+        <template slot-scope="{ row }">
+          {{ getGrade(row.pid) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="pnum" label="人数" align="center">
+      </el-table-column>
+      <el-table-column label="操作" width="280px">
+        <template slot-scope="scope">
+          <div class="classButtonBox" v-if="gidL">
+            <span @click="deleteClassStudent(scope.row.id)">移除</span>
+          </div>
+          <div class="classButtonBox" v-else>
+            <!-- getStudent() -->
+            <span @click="lookStudent(scope.row.id)">查看学生</span>
+            <span @click="updateG(scope.row.pid, scope.row.id)">修改年级</span>
+            <span @click="openUpdate(scope.row.id, scope.row.name)"
+              >修改名称</span
+            >
+            <span @click="deleteClass(scope.row.id)">删除</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="fontPage">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :page-size="10"
+        :total="total"
+        :current-page="currentPage"
+        @current-change="handleCurrentChange"
+      ></el-pagination>
+    </div>
+    <!-- 添加班级  -->
+    <el-dialog
+      title="添加班级"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="500px"
+      :before-close="handleClose"
+      class="add_student"
+    >
+      <el-form>
+        <el-form-item label="班级名称">
+          <el-input
+            v-model="className"
+            auto-complete="off"
+            placeholder="请输入班级..."
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="insertClass">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 选择班级添加到年级  -->
+    <el-dialog
+      title="选择班级"
+      :visible.sync="dialogVisibleMember"
+      :append-to-body="true"
+      width="500px"
+      height="80%"
+      :before-close="handleClose"
+      class="addNewPP"
+    >
+      <div class="people">
+        <div class="people_top">
+          <div class="people_top_right">
+            <div class="people_search">
+              <el-input
+                placeholder="搜索班级名称"
+                v-model="searchTN"
+                @keyup.enter.native="handleCurrentChange3(1)"
+              ></el-input>
+              <div class="search_img" @click="handleCurrentChange3(1)">
+                <img src="../../../../assets/icon/search.png" alt />
+              </div>
+            </div>
+          </div>
+          <div class="people_nav">选择班级</div>
+        </div>
+        <el-checkbox-group
+          v-model="checkboxList3"
+          class="people_name"
+          v-if="teacherJuri.length"
+          v-loading="isLoading2"
+        >
+          <el-checkbox
+            v-for="item in teacherJuri"
+            :key="item.id"
+            :label="item.id"
+          >
+            <div class="t_j_box">
+              <span>{{ item.name }}</span>
+            </div>
+          </el-checkbox>
+        </el-checkbox-group>
+        <div style="text-align: center; margin-top: 10px" v-else>暂无数据</div>
+      </div>
+      <div style="margin-top: 10px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :page-size="10"
+          :total="total3"
+          v-if="page3 && teacherJuri.length"
+          style="padding-bottom: 20px"
+          :current-page="SelectClasscurrentPage"
+          @current-change="handleCurrentChange3"
+        ></el-pagination>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisibleMember = false">取 消</el-button>
+        <el-button type="primary" @click="addClassStudent">确定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 修改年级 -->
+    <el-dialog
+      title="修改年级"
+      :visible.sync="dialogVisibleGrade"
+      :append-to-body="true"
+      width="500px"
+      :before-close="handleClose"
+      class="add_student"
+    >
+      <el-form>
+        <el-form-item label="选择年级">
+          <el-select
+            v-model="gid"
+            placeholder="请选择班级"
+            class="student_input"
+            clearable
+          >
+            <el-option
+              v-for="(item, index) in grade"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisibleGrade = false">取 消</el-button>
+        <el-button type="primary" @click="updateGrade">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 修改班级 -->
+    <el-dialog
+      title="修改班级名称"
+      :visible.sync="dialogVisible1"
+      :append-to-body="true"
+      width="500px"
+      :before-close="handleClose"
+      class="add_student"
+    >
+      <el-form>
+        <el-form-item label="班级名称">
+          <el-input
+            v-model="className1"
+            auto-complete="off"
+            placeholder="请输入班级..."
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible1 = false">取 消</el-button>
+        <el-button type="primary" @click="updateClass">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import student from "./student.vue";
+export default {
+  props: ["userid", "oid", "org", "role", "searhValue", "gidL"],
+  components: {
+    student
+  },
+  data() {
+    return {
+      currentPage: 1,//table 分页数据
+      tableData: [],//班级table数据
+      isLoading: false,//班级tableLoading
+      total: 0,//班级table数据total
+
+
+      // 选择添加班级添加到年级 
+        dialogVisibleMember: false,
+        teacherJuri: [], //选择班级数据
+        searchTN: "", //搜索框
+        total3: 0,//选择班级数据总数
+        page3: 1, //页数
+        isLoading2:false,
+        SelectClasscurrentPage:1, //选择年级弹框分页
+        checkboxList3: [],// 选择班级弹框已选择数据 
+
+      // 修改年级
+        dialogVisibleGrade: false, //修改年级弹框
+        gid: "",// 修改年级选择的id
+        classid: "", //查看，修改班级学生，班级id
+        grade: [], //年级数据
+
+      // 添加班级弹框 
+        dialogVisible: false, //添加班级
+        className: "",//添加班级名称
+
+      // 修改班级名称 
+        dialogVisible1: false,//修改班级名称
+        className1: ""
+
+
+    };
+  },
+  computed: {
+    getGrade() {
+      // 展示所属年级
+      return function(gid) {
+        let name = "";
+        this.grade.forEach(element => {
+          if (element.id == gid) {
+            name = element.name;
+          }
+        });
+        return name ? name : "暂无";
+      };
+    }
+  },
+  mounted() {
+    this.selectGrage();
+  },
+  methods: {
+
+    //获取班级table数据 gidL包含两个接口
+    getClass() {
+      this.isLoading = true;
+
+      let params = {};
+      if (this.gidL) {
+        params = {
+          cid: this.gidL,
+          oid: this.oid,
+          cn: this.searhValue,
+          page: this.currentPage
+        };
+      } else {
+        params = {
+          cu: "",
+          oid: this.oid,
+          cn: this.searhValue,
+          page: this.currentPage
+        };
+      }
+
+      this.ajax
+        .get(
+          this.$store.state.api + (this.gidL ? "selectClass2" : "selectClass"),
+          params
+        )
+        .then(res => {
+          this.isLoading = false;
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.tableData = res.data[0];
+        })
+        .catch(err => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    //获取班级列表
+    selectGrage() {
+      let params = {
+        oid: this.oid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectGrageBySchool", params)
+        .then(res => {
+          this.grade = res.data[0];
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+    //删除班级
+    deleteClass(id) {
+      let params = {
+        id: id
+      };
+      if (this.time()) {
+        this.$confirm("确定删除此班级吗?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            this.ajax
+              .get(this.$store.state.api + "deleteClass", params)
+              .then(res => {
+                this.$message({
+                  message: "删除成功",
+                  type: "success"
+                });
+                this.getClass();
+              })
+              .catch(err => {
+                this.$message.error("删除失败");
+                console.error(err);
+              });
+          })
+          .catch(() => {});
+      }
+    },
+    time() {
+      if (!this.now) {
+        this.now = new Date().getTime();
+        return true;
+      } else {
+        let time = new Date().getTime();
+        if (time - this.now > 3000) {
+          this.now = time;
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+    // table分页
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getClass();
+    },
+
+    // 年级视图函数调用
+      // 移除班级
+      deleteClassStudent(id) {
+        // uid班级id   cid年级id
+        let params = [{ uid: id, cid: this.gidL }];
+        this.$confirm("确定在本年级移除此班级吗?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            this.ajax
+              .post(this.$store.state.api + "deleteGradeClass", params)
+              .then(res => {
+                this.$message({
+                  message: "操作成功",
+                  type: "success"
+                });
+                this.getClass()
+              })
+              .catch(err => {
+                this.$message.error("操作失败");
+                console.error(err);
+              });
+          })
+          .catch(() => {});
+      },
+
+    // 选择添加班级弹框
+      // 打开选择添加班级
+      addStudent() {
+        this.dialogVisibleMember = true;
+        this.searchTN = "";
+        this.SelectClasscurrentPage = 1;
+        this.getClassStudent();
+      },
+      // 选择班级弹框数据
+      getClassStudent() {
+        this.isLoading2 = true;
+        let params = {
+          oid: this.oid,
+          cid: this.gidL,
+          cn: this.searchTN,
+          page: this.SelectClasscurrentPage,
+          num: 10
+        };
+        this.ajax
+          .get(this.$store.state.api + "getGradeClass", params)
+          .then(res => {
+            this.isLoading2 = false;
+            this.total3 = res.data[0].length > 0 ? res.data[0][0].num : 0;
+            this.teacherJuri = res.data[0];
+          })
+          .catch(err => {
+            this.isLoading2 = false;
+            console.error(err);
+          });
+      },
+      // 选择班级弹框确定添加
+      addClassStudent() {
+        if (!this.checkboxList3.length) {
+          this.$message.error("请选择要添加的班级");
+          return;
+        }
+        let params = [
+          {
+            cid: this.gidL,
+            student: JSON.stringify(this.checkboxList3)
+          }
+        ];
+        this.ajax
+          .post(this.$store.state.api + "addGradeClass", params)
+          .then(res => {
+            this.checkboxList3 = [];
+            this.dialogVisibleMember = false;
+            this.getClass()
+          })
+          .catch(err => {
+            console.error(err);
+          });
+      },
+      // 选择班级弹框分页查询数据
+      handleCurrentChange3(val) {
+        this.SelectClasscurrentPage = val;
+        this.getClassStudent();
+      },
+
+    // 学生视图函数调用
+      // 查看班级学生
+      lookStudent(cid) {
+        this.$emit("lookstudentL", cid);
+      },
+
+    // 关闭弹框
+    handleClose(done) {
+      done();
+    },
+
+    //首页调用新增班级
+    insertClass() {
+      let params = {
+        name: this.className,
+        oid: this.oid,
+        uid: this.userid
+      };
+      this.ajax
+        .get(this.$store.state.api + "insertClass", params)
+        .then(res => {
+          if (res.data[0] && res.data[0][0].classname == 1) {
+            this.$message({
+              message: "不能与其他班级名称相同！",
+              type: "error"
+            });
+          } else {
+            this.$message({
+              message: "新增成功",
+              type: "success"
+            });
+            this.dialogVisible = false;
+            this.getClass();
+            this.className = "";
+          }
+        })
+        .catch(err => {
+          this.$message({
+            message: "新增失败",
+            type: "error"
+          });
+          console.error(err);
+        });
+    },
+
+
+    // 修改年级弹框
+        // 打开修改年级弹框
+        updateG(gid, id) {
+          this.gid = gid;
+          this.classid = id;
+          this.dialogVisibleGrade = true;
+        },
+        // 确定修改年级
+        updateGrade() {
+          this.$confirm("确定修改吗?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+            .then(() => {
+              let params = [
+                {
+                  cid: this.gid,
+                  student: JSON.stringify([this.classid])
+                }
+              ];
+              this.ajax
+                .post(this.$store.state.api + "addGradeClass", params)
+                .then(res => {
+                  this.gid = "";
+                  this.classid = "";
+                  this.dialogVisibleGrade = false;
+                  this.getClass();
+                })
+                .catch(err => {
+                  console.error(err);
+                });
+            })
+            .catch(() => {});
+        },
+
+
+    // 修改班级名称弹框
+        // 打开修改班级名称弹框
+        openUpdate(id, n) {
+          this.classid = id;
+          this.className1 = n;
+          this.dialogVisible1 = true;
+        },
+        //确定修改班级名称弹框
+        updateClass() {
+          let params = {
+            id: this.classid,
+            n: this.className1,
+            oid: this.oid
+          };
+          this.ajax
+            .get(this.$store.state.api + "updateClass", params)
+            .then(res => {
+              if (res.data[0] && res.data[0][0].classname == 1) {
+                this.$message({
+                  message: "不能与其他班级名称相同！",
+                  type: "error"
+                });
+              } else {
+                this.$message({
+                  message: "修改成功",
+                  type: "success"
+                });
+                this.dialogVisible1 = false;
+                this.getClass();
+                this.classid = "";
+                this.className1 = "";
+              }
+            })
+            .catch(err => {
+              this.$message({
+                message: "修改失败",
+                type: "error"
+              });
+              console.error(err);
+            });
+        },
+
+  }
+};
+</script>
+
+<style scoped>
+.fontPage {
+  height: 70px;
+  display: flex;
+  justify-content: end;
+  align-content: center;
+  box-sizing: border-box;
+  padding: 15px 0;
+}
+.classButtonBox span {
+  color: #6b6b6b;
+  font-size: 14px;
+  cursor: pointer;
+}
+.add_student >>> .el-dialog__header {
+  padding: 20px 20px 10px;
+  text-align: center;
+  background: #32455b;
+}
+
+.add_student >>> .el-dialog__title {
+  font-size: 14px !important;
+  color: #fff !important;
+}
+
+.add_student >>> .el-dialog__headerbtn {
+  font-size: 20px !important;
+}
+
+.add_student >>> .el-form-item {
+  display: flex;
+}
+
+.add_student >>> .el-form-item__content {
+  margin: 0 !important;
+}
+
+.add_student >>> .el-dialog__footer {
+  text-align: center !important;
+}
+.header-title {
+  display: flex;
+}
+
+
+.addNewPP >>> .el-dialog {
+  margin-top: 5vh !important;
+}
+
+.addNewPP >>> .el-dialog__body {
+  padding: 5px 20px; 
+}
+.people {
+  border: 1px solid rgb(229 229 229);
+  height: 450px;
+  border-radius: 5px;
+  width: 100%;
+  overflow: auto;
+}
+
+.people_top {
+  display: flex;
+  width: 100%;
+  /* justify-content: space-between; */
+  /* align-items: center; */
+  flex-direction: column;
+  padding: 10px 25px 0;
+  box-sizing: border-box;
+}
+
+.people_top_right {
+  height: 40px;
+  margin-bottom: 10px;
+}
+
+.people_search {
+  display: flex;
+  position: relative;
+}
+
+.people_search >>> .el-input__inner {
+  /* height: 25px; */
+  width: 95%;
+}
+
+.search_img {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.search_img > img {
+  width: 100%;
+  height: 100%;
+}
+
+.people_name {
+  display: flex;
+  justify-content: flex-start;
+  padding: 10px 0 0 25px;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: calc(100% - 140px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-direction: column;
+}
+
+.people_name >>> .el-checkbox {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.people_name >>> .el-checkbox__label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+}
+</style>

src/components/pages/PersonnelManagement/components/grade.vue

@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <el-table
+      ref="table"
+      :key="1"
+      :data="tableData"
+      :fit="true"
+      v-loading="isLoading"
+      :header-cell-style="{ background: '#f1f1f1' }"
+    >
+      <el-table-column
+        prop="name"
+        label="年级名称"
+        min-width="40%"
+        align="center"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="pnum"
+        label="班级数"
+        min-width="40%"
+        align="center"
+      >
+      </el-table-column>
+      <el-table-column label="操作" width="250px">
+        <template slot-scope="scope">
+          <div class="baseFlex">
+            <span @click="getStudent(scope.row.id)">查看班级</span>
+            <span @click="openUpdate(scope.row.id, scope.row.name)">修改</span>
+            <span @click="deleteGrade(scope.row.id)">删除</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="fontPage">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :page-size="10"
+        :total="total"
+        :current-page="currentPage"
+        @current-change="handleCurrentChange"
+      ></el-pagination>
+    </div>
+
+    <el-dialog
+      title="添加年级"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="500px"
+      :before-close="handleClose"
+      class="add_student"
+    >
+      <el-form>
+        <el-form-item label="添加年级" >
+          <el-input
+            v-model="className"
+            auto-complete="off"
+            placeholder="请输入年级..."
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="insertGrade">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="修改年级名称"
+      :visible.sync="dialogVisible1"
+      :append-to-body="true"
+      width="500px"
+      :before-close="handleClose"
+      class="add_student"
+    >
+      <el-form>
+        <el-form-item label="年级名称" >
+          <el-input
+            v-model="className1"
+            auto-complete="off"
+            placeholder="请输入年级..."
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible1 = false">取 消</el-button>
+        <el-button type="primary" @click="updateGrade">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["userid", "oid", "org", "role", "searhValue"],
+
+  data() {
+    return {
+      tableData: [],
+      isLoading: false,
+      total: 0,
+      currentPage: 1,
+
+      // 修改年级名称
+      dialogVisible1: false,
+      className1: "",
+
+      // 添加年级
+      dialogVisible: false,
+      className: ""
+    };
+  },
+  methods: {
+    //获取年级table列表
+    getClass() {
+      this.isLoading = true;
+      let params = {
+        // username: this.$store.state.userInfo.userid,
+        cu: "",
+        oid: this.oid,
+        cn: this.searhValue,
+        page: this.currentPage
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectGrade", params)
+        .then(res => {
+          this.isLoading = false;
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.tableData = res.data[0];
+        })
+        .catch(err => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    handleClose(done) {
+      done();
+    },
+    //删除年级
+    deleteGrade(id) {
+      let params = {
+        id: id,
+      };
+      if (this.time()) {
+        this.$confirm("确定删除此年级吗?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.ajax
+              .get(this.$store.state.api + "deleteGrade", params)
+              .then((res) => {
+                this.$message({
+                  message: "删除成功",
+                  type: "success",
+                });
+                if (this.currentPage != 1 && this.tableData.length == 1) {
+                  this.currentPage - 1;
+                }
+                this.getClass();
+              })
+              .catch((err) => {
+                this.$message.error("删除失败");
+                console.error(err);
+              });
+          })
+          .catch(() => { });
+      }
+    },
+    time() {
+      if (!this.now) {
+        this.now = new Date().getTime();
+        return true;
+      } else {
+        let time = new Date().getTime();
+        if (time - this.now > 3000) {
+          this.now = time;
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+    // 修改年级
+      openUpdate(id, n) {
+        this.classid = id;
+        this.className1 = n;
+        this.dialogVisible1 = true;
+      },
+      //修改年级
+      updateGrade() {
+        let params = {
+          id: this.classid,
+          n: this.className1,
+          oid: this.oid
+        };
+        this.ajax
+          .get(this.$store.state.api + "updateGrade", params)
+          .then(res => {
+            if (res.data[0] && res.data[0][0].classname == 1) {
+              this.$message({
+                message: "不能与其他年级名称相同！",
+                type: "error"
+              });
+            } else {
+              this.$message({
+                message: "修改成功",
+                type: "success"
+              });
+              this.dialogVisible1 = false;
+              this.getClass();
+              this.classid = "";
+              this.className1 = "";
+            }
+          })
+          .catch(err => {
+            this.$message({
+              message: "修改失败",
+              type: "error"
+            });
+            console.error(err);
+          });
+      },
+
+    // 查看班级
+    getStudent(cid) {
+      this.$emit('lookgradeL',cid)
+    },
+
+
+    //首页调用新增年级
+    insertGrade() {
+      let params = {
+        name: this.className,
+        oid: this.oid,
+        uid: this.userid
+      };
+      this.ajax
+        .get(this.$store.state.api + "insertGrade", params)
+        .then(res => {
+          if (res.data[0] && res.data[0][0].classname == 1) {
+            this.$message({
+              message: "不能与其他年级名称相同！",
+              type: "error"
+            });
+          } else {
+            this.$message({
+              message: "新增成功",
+              type: "success"
+            });
+            this.dialogVisible = false;
+            this.sClassName = "";
+            this.getClass();
+            this.className = "";
+          }
+        })
+        .catch(err => {
+          this.$message({
+            message: "新增失败",
+            type: "error"
+          });
+          console.error(err);
+        });
+    },
+
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getClass();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fontPage {
+  height: 70px;
+  display: flex;
+  justify-content: end;
+  align-content: center;
+  box-sizing: border-box;
+  padding: 15px 0;
+}
+.baseFlex > span {
+  color: #6b6b6b;
+  font-size: 14px;
+  cursor: pointer;
+}
+.add_student >>> .el-dialog__header {
+  padding: 20px 20px 10px;
+  text-align: center;
+  background: #32455b;
+}
+
+.add_student >>> .el-dialog__title {
+  font-size: 14px !important;
+  color: #fff !important;
+}
+
+.add_student >>> .el-dialog__headerbtn {
+  font-size: 20px !important;
+}
+
+.add_student >>> .el-form-item__label {
+  margin-left: 65px;
+}
+
+.add_student >>> .el-form-item {
+  display: flex;
+}
+
+.add_student >>> .el-form-item__content {
+  margin: 0 !important;
+}
+
+.add_input {
+  width: 365px;
+}
+
+.add_student >>> .el-dialog__footer {
+  text-align: center !important;
+}
+.header-title {
+  display: flex;
+}
+
+.logoImg {
+  width: 30px;
+}
+
+.logoImg > img {
+  width: 100%;
+  height: 100%;
+}
+
+.title_add_student {
+  margin: 0 auto;
+  color: #fff;
+}
+</style>

src/components/pages/PersonnelManagement/components/student.vue

@@ -0,0 +1,969 @@
+<template>
+  <div>
+    <div class="fontlist" v-loading="isLoading">
+      <div class="listA" v-for="i in tableData" :key="i.userid">
+        <div class="baseFlex">
+          <img :src="i.headportrait ? i.headportrait : tx" alt />
+          <div
+            style="display: flex;flex-direction: column;justify-content: space-between;color: #666666;height: 100%;"
+          >
+            <div style="font-size: 16px;color: #000;">{{ i.username }}</div>
+            <div>{{ i.acc }}</div>
+          </div>
+        </div>
+        <div class="baseFlex">
+          <el-tag size="mini" v-if="i.gname">{{ i.gname }}</el-tag>
+          <el-tag size="mini" v-else type="danger">无年级</el-tag>
+
+          <el-tag size="mini" v-if="i.classname" type="success">{{
+            i.classname
+          }}</el-tag>
+          <el-tag size="mini" v-else type="danger">无班级</el-tag>
+
+         
+            <span @click="iniPassword(i.userid)">初始化密码</span>
+            <span @click="updateStudentA(i)">编辑</span>
+            <template v-if="cidL">
+                <span @click="deleteClassStudent(i.userid)">移出</span>
+            </template>
+            <span v-else @click="deleteStudent(i.userid, i.state)">删除</span>
+
+          
+        </div>
+      </div>
+    </div>
+    <div class="fontPage">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <!-- 添加学生  -->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="600px"
+      :before-close="handleClose"
+      class="add_student"
+    >
+      <div slot="title" class="header-title">
+        <div class="logoImg">
+          <img src="../../../../assets/logo.png" alt />
+        </div>
+        <div class="title_add_student">添加学生</div>
+      </div>
+      <el-form>
+        <el-form-item label="学生姓名" label-width="100px">
+          <span>
+            <el-input
+              placeholder="请输入学生姓名"
+              clearable
+              v-model="sName"
+              class="add_input"
+            ></el-input>
+          </span>
+        </el-form-item>
+        <el-form-item label="学生账号" label-width="100px">
+          <span>
+            <el-input
+              placeholder="请输入学生账号"
+              clearable
+              v-model="sMail"
+              class="add_input"
+            ></el-input>
+          </span>
+        </el-form-item>
+        <el-form-item label="所属学校" label-width="100px">
+          <el-input
+            disabled
+            style="width: 300px"
+            v-model="schoolName"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="班级" label-width="100px">
+          <el-select
+            multiple
+            collapse-tags
+            v-model="sByClass"
+            placeholder="请选择班级"
+            filterable
+          >
+            <el-option
+              v-for="(item, index) in classJuri"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <div style="text-align: center; color: #adb3b7">
+          注：添加学生的账号密码为Coco1234
+        </div>
+      </el-form>
+      <span slot="footer" class="dialog-footer flex">
+        <el-button class="right" @click="insertStudent">确认</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 修改学生  -->
+    <el-dialog
+      :visible.sync="dialogVisibleUpdate"
+      :append-to-body="true"
+      width="600px"
+      :before-close="handleClose"
+      class="add_student"
+    >
+      <div slot="title" class="header-title">
+        <div class="logoImg">
+          <img src="../../../../assets/logo.png" alt />
+        </div>
+        <div class="title_add_student">修改学生</div>
+      </div>
+      <el-form>
+        <el-form-item label="学生名称" label-width="100px">
+          <span>
+            <el-input
+              placeholder="请输入学生姓名"
+              clearable
+              v-model="userinfo.username"
+              class="add_input"
+            ></el-input>
+          </span>
+        </el-form-item>
+        <el-form-item label="学生账号" label-width="100px">
+          <span>
+            <el-input
+              placeholder="请输入学生账号"
+              clearable
+              v-model="userinfo.acc"
+              class="add_input"
+            ></el-input>
+          </span>
+        </el-form-item>
+        <el-form-item label="所属学校" label-width="100px">
+          <el-input
+            disabled
+            style="width: 300px"
+            v-model="schoolName"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="班级" label-width="100px">
+          <el-select
+            multiple
+            collapse-tags
+            v-model="userinfo.classid"
+            v-loading="optionLoading"
+            placeholder="请选择班级"
+          >
+            <el-option
+              v-for="(item, index) in classJuri"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <div style="text-align: center; color: #adb3b7">
+          注：添加学生的账号密码为Coco1234
+        </div>
+      </el-form>
+      <span slot="footer" class="dialog-footer flex">
+        <el-button class="right" @click="updateStudent">修改</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 添加学生到班级  -->
+     <el-dialog
+      title="添加学生"
+      :visible.sync="dialogVisibleMember"
+      :append-to-body="true"
+      width="600px"
+      height="80%"
+      :before-close="handleClose"
+      class="addNewPP"
+    >
+      <div class="people">
+        <div class="people_top">
+          <div class="people_top_right">
+            <div class="people_search">
+              <el-input
+                placeholder="搜索学生姓名"
+                v-model="searchTN"
+                @keyup.enter.native="getClassStudent"
+              ></el-input>
+              <div class="search_img" @click="getClassStudent">
+                <img src="../../../../assets/icon/search.png" alt />
+              </div>
+            </div>
+          </div>
+          <div class="people_nav">选择成员</div>
+        </div>
+        <div
+          class="t_j_box"
+          style="
+            padding: 20px 0 0 25px;
+            width: calc(100% - 55px);
+            margin-left: 25px;
+          "
+        >
+          <span>姓名</span>
+          <span>账号</span>
+        </div>
+        <el-checkbox-group
+          v-model="checkboxList3"
+          class="people_name"
+          v-if="teacherJuri.length"
+          v-loading="isLoading2"
+        >
+          <el-checkbox
+            v-for="item in teacherJuri"
+            :key="item.userid"
+            :label="item.userid"
+          >
+            <div class="t_j_box">
+              <el-tooltip
+                placement="top"
+                :content="item.name ? item.name : '暂无姓名'"
+              >
+                <span>{{ item.name ? item.name : "暂无姓名" }}</span>
+              </el-tooltip>
+              <el-tooltip placement="top" :content="item.username">
+                <span>{{ item.username }}</span>
+              </el-tooltip>
+            </div>
+          </el-checkbox>
+        </el-checkbox-group>
+        <div style="text-align: center; margin-top: 10px" v-else>暂无数据</div>
+      </div>
+      <div style="margin-top: 10px">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :page-size="10"
+          :total="total3"
+          v-if="page3 && teacherJuri.length"
+          style="padding-bottom: 20px"
+          @current-change="handleCurrentChange3"
+        ></el-pagination>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisibleMember = false">取 消</el-button>
+        <el-button type="primary" @click="addClassStudent">确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import pinyin from "../../../../../node_modules/js-pinyin/index";
+
+export default {
+  props: ["userid", "oid", "org", "role", "searhValue","cid","cidL"],
+  data() {
+    return {
+      // 学生视图
+        tableData: [], //学生视图数据
+        tx: require("../../../../assets/avatar.png"),
+        isLoading: false,
+        total: 0,
+        currentPage: 1,
+        pageSize: 10,
+
+      // 班级添加学生弹框
+        dialogVisibleMember:false,
+        isLoading2:false,
+        teacherJuri:[], //数据
+        total3: 0, //学生总数
+        checkboxList3:[], //勾选中的学生
+        page3: 1, //页数
+        searchTN:'', //搜索框
+
+      // 修改学生弹框
+        dialogVisibleUpdate: false,
+        userinfo: {},
+        userinfoA: {},
+        classJuri: [], //班级列表
+        optionLoading: false, //班级列表loading
+
+      // 添加学生弹框
+        dialogVisible: false,
+        sName: "", 
+        sByClass: "", //班级
+        sMail: "", //学生账号
+        sPhone: "",
+        userSuffix: "", //后缀
+        sId: "",
+
+      schoolName: "",//学校名称
+      schoolChar: "",
+
+
+    };
+  },
+  methods: {
+
+
+    // 获取table获取学生
+    getStudent() {
+      this.isLoading = true;
+      let params = {
+        oid: this.oid,
+        cid: this.cid,
+        inp: this.searhValue,
+        page: this.currentPage,
+        num: this.pageSize
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectStudentManage", params)
+        .then(res => {
+          this.isLoading = false;
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.tableData = res.data[0];
+        })
+        .catch(err => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    // 获取创建学生用户后缀
+    getUser() {
+      let params = {
+        userid: this.userid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectUser", params)
+        .then(res => {
+          this.userSuffix = res.data[0][0].accountNumber.split("@")[1];
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+    // 获取学校名称
+    getSchoolName() {
+      let params = {
+        oid: this.oid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectSchoolName2", params)
+        .then(res => {
+          this.schoolName = res.data[0][0].name;
+          const cleanedSchoolName = res.data[0][0].name.replace(
+            /[，。；：！“”‘’（）()]/g,
+            ""
+          ); // 去掉标点符号
+          // console.log(pinyin);
+          // console.log(pinyin.getFullChars(cleanedSchoolName));
+          // console.log(pinyin.getCamelChars(cleanedSchoolName));
+          this.schoolChar = pinyin
+            .getCamelChars(cleanedSchoolName)
+            .toLowerCase();
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+    //获取班级列表
+    getClass() {
+      this.optionLoading = true;
+      let params = {
+        oid: this.oid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectClassBySchool", params)
+        .then(res => {
+          this.optionLoading = false;
+          this.classJuri = res.data[0];
+        })
+        .catch(err => {
+          this.optionLoading = false;
+          console.error(err);
+        });
+    },
+    // 初始化密码
+    iniPassword(id) {
+      this.$confirm("确定" + "初始化" + "此学生的密码吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          let params = [
+            {
+              uid: id,
+              pa: "Coco1234"
+            }
+          ];
+          this.ajax
+            .post(this.$store.state.api + "iniPassword", params)
+            .then(res => {
+              this.$message({
+                message: "初始化密码成功！",
+                type: "success"
+              });
+            })
+            .catch(err => {
+              console.error(err);
+            });
+        })
+        .catch(() => {});
+    },
+    // 删除学生
+    deleteStudent(id, state) {
+      state = 0;
+      let params = [{ uid: id, state: state }];
+      this.$confirm("确定删除此学生吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.ajax
+            .post(this.$store.state.api + "deleteStudent", params)
+            .then(res => {
+              this.$message({
+                message: "操作成功",
+                type: "success"
+              });
+              this.getStudent();
+            })
+            .catch(err => {
+              this.$message.error("操作失败");
+              console.error(err);
+            });
+        })
+        .catch(() => {});
+    },
+    // 修改每页获取个数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.getStudent();
+      console.log(`每页 ${val} 条`);
+    },
+    // 跳转页数
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getStudent();
+      console.log(`当前页: ${val}`);
+    },
+    // 关闭弹框
+    handleClose(done) {
+      done();
+    },
+    time() {
+      if (!this.now) {
+        this.now = new Date().getTime();
+        return true;
+      } else {
+        let time = new Date().getTime();
+        if (time - this.now > 3000) {
+          this.now = time;
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+
+    // 班级添加学生弹框
+        // 首页调用打开班级添加学生弹框
+        diaAdd(){
+          this.dialogVisibleMember = true;
+          this.searchTN = "";
+          this.getClassStudent();
+        },
+        // 添加学生弹框获取数据
+        getClassStudent() {
+          this.isLoading2 = true;
+          let params = {
+            oid: this.oid,
+            cid: this.cid,
+            cn: this.searchTN,
+            page: this.page3,
+            num: 10
+          };
+          this.ajax
+            .get(this.$store.state.api + "getClassStudent", params)
+            .then(res => {
+              this.isLoading2 = false;
+              this.total3 = res.data[0].length > 0 ? res.data[0][0].num : 0;
+              this.teacherJuri = res.data[0];
+            })
+            .catch(err => {
+              this.isLoading2 = false;
+              console.error(err);
+            });
+        },
+        // 确定将学生加入班级
+        addClassStudent() {
+          if (!this.checkboxList3.length) {
+            this.$message.error("请选择要添加班级的学生");
+            return;
+          }
+          let params = [
+            {
+              cid: this.cid,
+              student: JSON.stringify(this.checkboxList3)
+            }
+          ];
+          this.ajax
+            .post(this.$store.state.api + "addClassStudent", params)
+            .then(res => {
+              this.checkboxList3 = [];
+              this.dialogVisibleMember = false;
+              this.getStudent();
+            })
+            .catch(err => {
+              console.error(err);
+            });
+        },
+      
+       
+    //添加学生弹框
+        addStudent() {
+          this.dialogVisible = true;
+          this.sName = "";
+          this.sPhone = "";
+          this.sByClass = "" ;
+          this.sMail='';
+          // this.getClass();
+        },
+        //确认添加学生新增学生前判断是否被注册以及格式问题
+        insertStudent() {
+          this.dialogVisible = true;
+          if (this.sName === "") {
+            this.$message.error("学生姓名不能为空");
+            return;
+          } else if (this.sByClass === "") {
+            this.$message.error("请为学生选择班级");
+            return;
+          } else if (
+            this.sPhone != "" &&
+            !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.sPhone)
+          ) {
+            this.$message.error("手机号格式不正确");
+            return;
+          } else if (this.sMail === "") {
+            this.$message.error("学生账号不能为空");
+            return;
+          }
+
+          let mail = "";
+          if (
+            /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(this.sMail)
+          ) {
+            mail = this.sMail;
+          } else {
+            if (
+              this.org != "" &&
+              this.org != "null" &&
+              this.org != undefined &&
+              this.org &&
+              this.schoolChar
+            ) {
+              mail = this.sMail + "@" + this.schoolChar + "." + this.userSuffix;
+            } else {
+              mail = this.sMail + "@" + this.userSuffix;
+            }
+          }
+          if (this.time()) {
+            let params = { un: mail };
+            this.ajax
+              .get(this.$store.state.api + "findMail", params)
+              .then(res => {
+                if (res.data[0].length > 0) {
+                  this.$message.error("此学生账号已被注册");
+                } else {
+                  this.comfirmAddStudent();
+                }
+              })
+              .catch(err => {
+                console.error(err);
+              });
+          }
+        },
+        // 最终添加学生函数
+        comfirmAddStudent() {
+          let mail = "";
+          if (
+            /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(this.sMail)
+          ) {
+            mail = this.sMail;
+          } else {
+            if (
+              this.org != "" &&
+              this.org != "null" &&
+              this.org != undefined &&
+              this.org &&
+              this.schoolChar
+            ) {
+              mail = this.sMail + "@" + this.schoolChar + "." + this.userSuffix;
+            } else {
+              mail = this.sMail + "@" + this.userSuffix;
+            }
+          }
+          let params = [
+            {
+              username: mail,
+              userpassword: "Coco1234",
+              alias: this.sName,
+              oid: this.oid,
+              ph: this.sPhone,
+              sid: this.sId,
+              cid: this.sByClass.join(","),
+              org: this.org
+            }
+          ];
+          console.log("params", params);
+
+          this.ajax
+            .post(this.$store.state.api + "batchRegistrationOrg", params)
+            .then(res => {
+              this.$message({
+                message: "新增成功",
+                type: "success"
+              });
+
+              this.dialogVisible = false;
+              this.sPhone = "";
+              this.sName = "";
+              // this.sBySchool = [];
+              this.sByClass = [];
+              this.sMail = "";
+              this.getStudent();
+              this.addOp3("1", "", { type: "student_user_add" }, "success");
+            })
+            .catch(err => {
+              this.isLoading = false;
+              this.addOp3("1", "", { type: "student_user_add" }, err);
+
+              this.$message({
+                message: "新增失败",
+                type: "error"
+              });
+              console.error(err);
+            });
+        },
+        // 控制添加学生分页
+        handleCurrentChange3(val) {
+          this.page3 = val;
+          this.getClassStudent();
+        },
+
+
+    // 修改，编辑学生弹框（班级视图的与学生视图的学生编辑修改共用一个修改函数）
+        // 打开编辑学生弹框
+        updateStudentA(res) {
+          this.userinfo = JSON.parse(JSON.stringify(res));
+          this.userinfoA = JSON.parse(JSON.stringify(res));
+          this.userinfo.classid = this.userinfo.classid.split(",");
+
+          this.dialogVisibleUpdate = true;
+        },
+        // 修改学生
+        updateStudent() {
+          if (this.userinfo.username === "") {
+            this.$message.error("学生姓名不能为空");
+            return;
+          } else if (!this.userinfo.classid) {
+            this.$message.error("请为学生选择班级");
+            return;
+          } else if (
+            !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(
+              this.userinfo.acc
+            )
+          ) {
+            this.$message.error("邮箱格式不正确");
+            return;
+          }
+
+          if (this.time()) {
+            if (this.userinfoA.acc != this.userinfo.acc) {
+              let params = { un: this.userinfo.acc };
+              this.ajax
+                .get(this.$store.state.api + "findMail", params)
+                .then(res => {
+                  if (res.data[0].length > 0) {
+                    this.$message.error("此学生账号已被注册");
+                  } else {
+                    this.update_Student();
+                  }
+                })
+                .catch(err => {
+                  console.error(err);
+                });
+            } else {
+              this.update_Student();
+            }
+          }
+        },
+        // 确定修改学生
+        update_Student() {
+          let params = [
+            {
+              userid: this.userinfo.userid,
+              username: this.userinfo.acc,
+              alias: this.userinfo.username,
+              ph: this.userinfo.phonenumber,
+              sid: this.userinfo.studentid,
+              cid: this.userinfo.classid.join(",")
+            }
+          ];
+          console.log("params", params);
+
+          this.ajax
+            .post(this.$store.state.api + "updateStudentInfo", params)
+            .then(res => {
+              this.$message({
+                message: "修改成功",
+                type: "success"
+              });
+              this.dialogVisibleUpdate = false;
+              this.getStudent();
+            })
+            .catch(err => {
+              this.isLoading = false;
+              this.$message({
+                message: "修改失败",
+                type: "error"
+              });
+              console.error(err);
+            });
+        },
+
+    // 班级视图调用学生视图方法 
+        // 将学生移除班级
+        deleteClassStudent(id) {
+          let params = [{ uid: id, cid: this.cidL }];
+          this.$confirm("确定移除此学生在本班级吗?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              this.ajax
+                .post(this.$store.state.api + "deleteClassStudent", params)
+                .then((res) => {
+                  this.$message({
+                    message: "操作成功",
+                    type: "success",
+                  });
+                  this.getStudent();
+                })
+                .catch((err) => {
+                  this.$message.error("操作失败");
+                  console.error(err);
+                });
+            })
+            .catch(() => { });
+        },
+
+
+  },
+  mounted() {
+    this.getUser();
+    this.getSchoolName();
+    this.getClass();
+    // this.getStudent();
+  }
+};
+</script>
+
+<style scoped>
+
+.baseFlex {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 100%;
+}
+.baseFlex > img {
+  /* width: 50px; */
+  height: 100%;
+  object-fit: cover;
+}
+.baseFlex > span {
+  color: #6b6b6b;
+  font-size: 14px;
+  cursor: pointer;
+}
+.fontlist {
+  border-radius: 10px;
+  overflow: auto;
+  background: #fff;
+  flex: 1;
+  min-height: 250px;
+}
+.listA {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px #e7e7e7 solid;
+  height: 70px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 15px;
+  /* background: #fff; */
+}
+.fontPage {
+  height: 70px;
+  display: flex;
+  justify-content: end;
+  align-content: center;
+  box-sizing: border-box;
+  padding: 15px 0;
+}
+.add_student >>> .el-dialog__header {
+  padding: 20px 20px 10px;
+  text-align: center;
+  background: #32455b;
+}
+
+.add_student >>> .el-dialog__title {
+  font-size: 14px !important;
+  color: #fff !important;
+}
+
+.add_student >>> .el-dialog__headerbtn {
+  font-size: 20px !important;
+}
+
+.add_student >>> .el-form-item__label {
+  margin-left: 65px;
+}
+
+.add_student >>> .el-form-item {
+  display: flex;
+}
+
+.add_student >>> .el-form-item__content {
+  margin: 0 !important;
+}
+
+.add_input {
+  width: 365px;
+}
+
+.add_student >>> .el-dialog__footer {
+  text-align: center !important;
+}
+.header-title {
+  display: flex;
+}
+
+.logoImg {
+  width: 30px;
+}
+
+.logoImg > img {
+  width: 100%;
+  height: 100%;
+}
+
+.title_add_student {
+  margin: 0 auto;
+  color: #fff;
+}
+.people {
+  border: 1px solid rgb(229 229 229);
+  height: 495px;
+  border-radius: 5px;
+  width: 100%;
+  overflow: auto;
+}
+
+.people_top {
+  display: flex;
+  width: 100%;
+  /* justify-content: space-between; */
+  /* align-items: center; */
+  flex-direction: column;
+  padding: 10px 25px 0;
+  box-sizing: border-box;
+}
+
+.people_top_right {
+  height: 40px;
+  margin-bottom: 10px;
+}
+
+.people_search {
+  display: flex;
+  position: relative;
+}
+
+.people_search>>>.el-input__inner {
+  /* height: 25px; */
+  width: 95%;
+}
+
+.search_img {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.search_img>img {
+  width: 100%;
+  height: 100%;
+}
+
+.people_name {
+  display: flex;
+  justify-content: flex-start;
+  padding: 10px 0 0 25px;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: calc(100% - 140px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-direction: column;
+}
+
+.people_name>>>.el-checkbox {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.people_name>>>.el-checkbox__label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+}
+
+.addNewPP>>>.el-dialog__body {
+  padding: 5px 20px;
+}
+
+.t_j_box {
+  display: flex;
+}
+
+.t_j_box span:nth-child(1) {
+  width: 50%;
+  overflow: hidden;
+  margin-right: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.t_j_box span:nth-child(2) {
+  width: 50%;
+  overflow: hidden;
+  margin-right: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+</style>

src/components/pages/PersonnelManagement/index.vue

@@ -0,0 +1,381 @@
+<template>
+  <div class="manageper" style="background-color: #FAFAFA;min-height: 100%;">
+    <div class="topTit">
+      <div style="font-size: 22px;font-weight: bold;">
+        <span>学生管理</span>
+        <!-- <span v-if="isCollapse == 0">学生管理</span>
+        <span v-if="isCollapse == 1">班级管理</span>
+        <span v-if="isCollapse == 2">年级管理</span> -->
+      </div>
+      <div></div>
+    </div>
+    <div class="manageper" style="padding: 0 12%;flex: 1;overflow: auto;">
+      <div class="midcon">
+        <el-button size="small" @click="addviewData(0)" type="primary"
+          >添加学生</el-button
+        >
+        <el-button size="small" @click="addviewData(1)" type="primary"
+          >添加班级</el-button
+        >
+        <el-button size="small" @click="addviewData(2)" type="primary"
+          >添加年级</el-button
+        >
+      </div>
+      <div class="viewCut" style="justify-content: space-between;">
+        <div class="viewCut">
+          <el-radio-group @change="cutList()" v-model="isCollapse">
+            <el-radio-button :label="0">学生视图</el-radio-button>
+            <el-radio-button :label="1">班级视图</el-radio-button>
+            <el-radio-button :label="2">年级视图</el-radio-button>
+          </el-radio-group>
+          <el-input
+            @blur="getinpData()"
+            style="width: 200px;"
+            placeholder="搜索学生、班级或年级…"
+            v-model.trim="searhValue"
+          >
+          </el-input>
+          <div style="width: 120px;">
+            <el-select
+              v-if="isCollapse == 0"
+              style="width: 120px;"
+              v-model="cid"
+              clearable
+              :disabled="classLcid ? true : false"
+              @change="changeCid"
+              placeholder="请选择"
+            >
+              <el-option label="显示全部" value=""> </el-option>
+              <el-option
+                v-for="item in classJuri"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="viewCut" v-if="classLcid">
+          <span
+            >班级：{{ classJuri.filter(e => e.id == classLcid)[0].name }}</span
+          >
+          <el-button size="small" @click="addclassStu" type="primary"
+            >添加学生</el-button
+          >
+          <el-button
+            size="small"
+            type="primary"
+            @click="(classLcid = ''), getData()"
+            >返回</el-button
+          >
+        </div>
+
+        <div class="viewCut" v-if="gidL">
+          <span>年级：{{ gradeJuri.filter(e => e.id == gidL)[0].name }}</span>
+          <el-button size="small" @click="addgid" type="primary"
+            >添加年级</el-button
+          >
+          <el-button size="small" type="primary" @click="(gidL = ''), getData()"
+            >返回</el-button
+          >
+        </div>
+      </div>
+
+      <student
+        ref="studentref"
+        v-if="isCollapse == 0 || classLcid"
+        :userid="userid"
+        :oid="oid"
+        :org="org"
+        :role="role"
+        :cid="cid"
+        :cidL="classLcid"
+        :searhValue="searhValue"
+      />
+
+      <classL
+        ref="classLref"
+        v-else-if="isCollapse == 1 || gidL"
+        :userid="userid"
+        :oid="oid"
+        :org="org"
+        :role="role"
+        :gidL="gidL"
+        :searhValue="searhValue"
+        @lookstudentL="lookstudentL"
+      />
+
+      <grade
+        ref="graderef"
+        v-else
+        :userid="userid"
+        :oid="oid"
+        :org="org"
+        :role="role"
+        :searhValue="searhValue"
+        @lookgradeL="lookgradeL"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import pinyin from "../../../../node_modules/js-pinyin/index";
+import student from "./components/student.vue";
+import classL from "./components/classL";
+import grade from "./components/grade.vue";
+import Class from "../studentManage/class.vue";
+
+export default {
+  components: {
+    student,
+    classL,
+    grade,
+    Class
+  },
+  data() {
+    return {
+      searhValue: "", //搜索框
+      isCollapse: 0, //展示视图
+      cid: "", //班级id
+      classLcid: "", //班级id防止与使用cid时冲突
+      gidL: "", //年级视图点击查看班级存储的数据
+      userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
+      role: this.$route.query.role,
+      classJuri: [], //班级列表
+      gradeJuri: "", //年级列表
+      tableData: [] //学生视图数据
+    };
+  },
+  methods: {
+    // 学生视图函数调用
+      // 筛选年级学生
+      changeCid() {
+        // console.log("cid", this.cid);
+        this.$nextTick(() => {
+          this.$refs.studentref.getStudent();
+        });
+      },
+      // 添加学生到班级
+      addclassStu() {
+        this.$refs.studentref.diaAdd();
+      },
+
+    // 班级视图函数调用
+      // 年级添加班级
+      addgid() {
+        this.$refs.classLref.addStudent();
+      },
+      // 查看班级学生
+      lookstudentL(val) {
+        this.classLcid = val;
+        this.cid = val;
+        // this.$nextTick(() => {
+        this.getData();
+        // });
+      },
+
+    //年级视图函数调用
+      // 查看年级班级
+      lookgradeL(val) {
+        this.gidL = val;
+        console.log('this.gidL',this.gidL);
+        
+        this.$nextTick(() => {
+          this.$refs.classLref.getClass();
+        });
+      },
+
+    //获取年级列表
+    getgradeData() {
+      let params = {
+        oid: this.oid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectGrageBySchool", params)
+        .then(res => {
+          this.gradeJuri = res.data[0];
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+
+    //获取班级列表
+    getClassdata() {
+      let params = {
+        oid: this.oid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectClassBySchool", params)
+        .then(res => {
+          this.classJuri = res.data[0];
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+
+    // 添加学生，班级，年级弹框
+    addviewData(val) {
+      this.isCollapse = val;
+      this.gidL = "";
+      this.classLcid = "";
+
+      if (this.isCollapse == 0) {
+        this.$nextTick(() => {
+          this.$refs.studentref.getStudent();
+
+          this.$refs.studentref.addStudent();
+        });
+      } else if (this.isCollapse == 1) {
+        this.$nextTick(() => {
+          this.$refs.classLref.dialogVisible = true;
+          this.$refs.classLref.getClass();
+        });
+      } else {
+        this.$nextTick(() => {
+          this.$refs.graderef.getClass();
+          this.$refs.graderef.dialogVisible = true;
+        });
+      }
+    },
+
+    // 搜索框查询数据
+    getinpData() {
+      // if (!this.searhValue) return;
+      if (this.isCollapse == 0 || this.classLcid) {
+        this.$nextTick(() => {
+          this.$refs.studentref.getStudent();
+        });
+      } else if (this.isCollapse == 1 || this.gidL) {
+        this.$nextTick(() => {
+          this.$refs.classLref.getClass();
+        });
+      } else {
+        this.$nextTick(() => {
+          this.$refs.graderef.getClass();
+        });
+      }
+    },
+    
+    // 搜索框与监听调用获取视图数据
+    getData() {
+      if (this.isCollapse == 0 || this.classLcid) {
+        this.$nextTick(() => {
+          this.$refs.studentref.getStudent();
+        });
+      } else if (this.isCollapse == 1) {
+        this.$nextTick(() => {
+          this.$refs.classLref.getClass();
+        });
+      } else {
+        this.$nextTick(() => {
+          this.$refs.graderef.getClass();
+        });
+      }
+    },
+    // 切换列表
+    cutList() {
+      this.searhValue = "";
+      this.classLcid = "";
+      this.gidL = "";
+      this.cid = "";
+      if (this.isCollapse == 0) {
+        this.$nextTick(() => {
+          this.$refs.studentref.getStudent();
+        });
+      } else if (this.isCollapse == 1) {
+        this.$nextTick(() => {
+          this.$refs.classLref.getClass();
+        });
+      } else {
+        this.$nextTick(() => {
+          this.$refs.graderef.getClass();
+        });
+      }
+    }
+  },
+  mounted() {
+    this.getData();
+    this.getClassdata();
+    this.getgradeData();
+  }
+};
+</script>
+
+<style scoped>
+.manageper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  box-sizing: border-box;
+}
+.topTit {
+  display: flex;
+  width: 100%;
+  background: #fff;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 10%;
+  align-items: center;
+  height: 85px;
+}
+.midcon {
+  height: 85px;
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border-radius: 10px;
+  padding: 0 20px;
+  border: 1px#e7e7e7 solid;
+}
+.viewCut {
+  height: 70px;
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  border-bottom: 1px #e7e7e7 solid;
+}
+.baseFlex {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 100%;
+}
+.baseFlex > img {
+  /* width: 50px; */
+  height: 100%;
+  object-fit: cover;
+}
+.baseFlex > span {
+  color: #6b6b6b;
+  font-size: 14px;
+  cursor: pointer;
+}
+.fontlist {
+  border-radius: 10px;
+  overflow: auto;
+  background: #fff;
+  flex: 1;
+  min-height: 250px;
+}
+.listA {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px #e7e7e7 solid;
+  height: 70px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 15px;
+  /* background: #fff; */
+}
+.fontPage {
+  height: 70px;
+  display: flex;
+  justify-content: end;
+}
+</style>

src/router/index.js

@@ -162,6 +162,7 @@ import workPage from '@/components/pages/workPage/index'
 import workPageNew from '@/components/pages/workPage/index_new'
 import pptEasy from '@/components/pages/pptEasy/addCourse'
 import noticeCenter from '@/components/pages/noticeCenter/index'
+import PersonnelManagement from "@/components/pages/PersonnelManagement";
 
 // 全局修改默认配置，点击空白处不能关闭弹窗
 ElementUI.Dialog.props.closeOnClickModal.default = false
@@ -894,6 +895,14 @@ export default new Router({
       requireAuth: '' // 不需要鉴权
     }
   },
+    {
+      path: "/PersonnelManagement",
+      name: "PersonnelManagement",
+      component: PersonnelManagement,
+      meta: {
+        requireAuth: "" // 不需要鉴权
+      }
+    },
   {
     path: '/learnAna',
     name: 'learnAna',