baoman / Ezquiz_Platform

  <template>

    <div>
      <back-box>
        <template slot="title">
          <span>教师管理</span>
        </template>

        <template slot="btns" v-if="!code">

          <el-tooltip effect="dark" content="导入教师名单" placement="bottom">

            <el-button type="primary" icon="el-icon-upload2" size="mini" plain circle @click="diaUp = true"></el-button>

          </el-tooltip>
          <el-tooltip effect="dark" content="导出教师名单" placement="bottom">

            <el-button type="primary" icon="el-icon-download" size="mini" plain circle
              @click="exportTeacherExl"></el-button>

          </el-tooltip>

          <el-tooltip effect="dark" content="添加教师" placement="bottom">

            <el-button type="primary" icon="el-icon-plus" size="mini" plain circle @click="addTeacherDia"></el-button>

          </el-tooltip>
        </template>
      </back-box>
  
      <div class="answer-header">
        <div class="sel-box">

          <el-select class="sel" v-model="query.classType" @change="changeType" placeholder="选择类型">

            <el-option label="行政班" :value="0"></el-option>
            <el-option label="教学班" :value="1"></el-option>
          </el-select>
          <el-cascader size="small" class="sel sel2" clearable placeholder="选择范围" @change="_QueryData(1)"
            v-model="query.gradeClassSub" :options="gradeClassSubList" :props="{

              multiple: true,
              checkStrictly: true,

            }" collapse-tags :show-all-levels="false"></el-cascader>
          <el-select class="sel" v-model="query.type" @change="_QueryData(4)" placeholder="选择类型">

            <el-option disabled label="请选择" :value="9"></el-option>

            <el-option label="已分配任课信息" :value="0"></el-option>
            <el-option label="未分配任课信息" :value="1"></el-option>

          </el-select>

          <el-input placeholder="请输入老师姓名" v-model="query.teacherName" class="input-with-select" maxlength="30" clearable
            @keyup.enter.native="_QueryData(2)">
            <el-button slot="append" icon="el-icon-search" @click="_QueryData(2)"></el-button>

          </el-input>

          <el-input type="number" oninput="if(value.length > 11) value = value.slice(0,11)" placeholder="请输入老师手机号"
            v-model="query.phone" clearable class="input-with-select" @keyup.enter.native="_QueryData(3)">
            <el-button slot="append" icon="el-icon-search" @click="_QueryData(3)"></el-button>

          </el-input>

          <!-- <el-button class="serach-box" round @click="_QueryData(4)"

            >筛选</el-button

          > -->

        </div>
      </div>

      <p class="total" v-if="teacherList.length">
        共筛选出{{ teacherList.length }}名教师。
      </p>

      <div class="page-content">

        <el-empty :image-size="100" v-if="!teacherList.length && loading == false" description="没有更多数据"></el-empty>

        <div class="teacher-box" v-loading="loading" v-else>
          <div class="teacher-list">

            <p class="h-title" v-loading="removeLoading">

              <el-checkbox v-show="showDel" v-model="AllTeacher" :indeterminate="indeterminate"
                @change="handleCheckAllChange">{{ ""
                }}</el-checkbox>

              <span class="txt">教师列表</span>
              <img v-show="showDel" class="clear" @click="remove" src="../../../assets/images/shuazi.svg" alt="">
            </p>
            <el-checkbox-group v-model="clearTeacher" @change="handleCheckedChange">
              <ul class="teacher-ul">
                <li class="teacher-item" v-for="item in teacherList" :key="item.id"
                  :class="showTId == item.id ? 'active' : ''">

                  <el-checkbox v-show="showDel" :label="item.id">{{ "" }}</el-checkbox>

                  <p @click="showTeacher(item)"> {{ item.realName
                  }}<template v-if="setClass(item)">（{{ setClass(item) }}）</template></p>
                </li>
              </ul>
            </el-checkbox-group>

          </div>
          <div class="teacher-detail">

            <div class="icon-box" v-if="!code">

              <i class="icon el-icon-edit-outline" @click="editTeacher(1)"></i>

              <i class="icon el-icon-circle-plus-outline" @click="editTeacher(2)"></i>

            </div>
            <div class="detail-top">
              <p class="p-item">手机号码：{{ teacherDetail.loginName }}</p>
              <p class="p-item">

                状态：{{ teacherDetail.available == 1 ? "不可用" : "正常" }}

              </p>
              <p class="p-item">
                性别：{{
                  teacherDetail.sex == 1

                  ? "男"
                  : teacherDetail.sex == 2

                    ? "女"
                    : "未知"
                }}
              </p>
            </div>

            <div class="grade-box" v-if="teacherDetail.managerList && teacherDetail.managerList.length">

              <p class="h-title">班主任</p>
              <ul class="grade-info">

                <li class="grade-li" v-for="item in teacherDetail.managerList" :key="item.classId">
                  <el-popconfirm title="确定删除吗？" @confirm="delTeacherManager(item, 1)" v-if="!code">

                    <i class="el-icon-delete" slot="reference"></i>
                  </el-popconfirm>

                  <div class="grade-item">

                    <p class="grade-name">

                      {{ item.gradeName }}-{{ item.className }}

                    </p>

                    <div class="grade-class">
                      <p>
                        <i class="fa fa-address-book-o"></i>学生：{{
                          item.studentCount
                        }}个
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="grade-box" v-if="teacherDetail.teacherCourseList &&
              teacherDetail.teacherCourseList.length
              ">

              <p class="h-title">任课老师</p>
              <ul class="grade-info">

                <li class="grade-li" v-for="item in teacherDetail.teacherCourseList" :key="item.classId + item.subjectName">
                  <el-popconfirm title="确定删除吗？" @confirm="delTeacherManager(item, 2)" v-if="!code">

                    <i class="el-icon-delete" slot="reference"></i>
                  </el-popconfirm>

                  <div class="grade-item">
                    <p class="grade-name">

                      {{ item.gradeName }}-{{ item.className }}（{{

                        item.subjectName
                      }}）

                    </p>
                    <div class="grade-class">
                      <p>
                        <i class="fa fa-address-book-o"></i>学生：{{
                          item.studentCount
                        }}个
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="grade-box" v-if="teacherDetail.teacherGradeList &&
              teacherDetail.teacherGradeList.length
              ">

              <p class="h-title">备课组长</p>

              <ul class="grade-info" v-for="item in teacherDetail.teacherGradeList" :key="item.grade">

                <li class="grade-li">

                  <el-popconfirm title="确定删除吗？" @confirm="delTeacherManager(item, 3)" v-if="!code">

                    <i class="el-icon-delete" slot="reference"></i>
                  </el-popconfirm>

                  <div class="grade-item">
                    <p class="grade-name">

                      {{ item.gradeName }}（{{ item.subjectName }}）

                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <el-dialog :close-on-click-modal="false" title="导入教师名单" :visible.sync="diaUp" width="600">
        <upload id="downTeacher" :url="url" @upSuccess="upSuccess" fileName="教师名单">

          <p class="down-txt" slot="down">
            通过Excel名单导入教师名单，点击
            <el-link type="danger" @click="downExcel">模板下载</el-link> 。
          </p>

        </upload>

        <div class="dialog-footer" slot="footer">
          <el-button @click="diaUp = false">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog :close-on-click-modal="false" :title="isAdd ? '添加教师' : setTercherType == 1 ? '编辑教师信息' : '管理班级'
        " :visible.sync="diaTeacher" width="400" append-to-body>

        <el-form class="form-box" ref="formTeacher" :model="formTeacher" :rules="rulesTeacher" label="" width="160px">

          <el-form-item v-show="!isAdd && setTercherType == 2" label="教师姓名：">
            <span>{{ formTeacher.teacherName }}</span>

          </el-form-item>

          <el-form-item v-show="isAdd || (!isAdd && setTercherType == 1)" label="手机号码：" prop="loginName">

            <el-col :span="10">

              <el-input type="number" oninput="if(value.length > 11) value = value.slice(0,11)"
                v-model.trim="formTeacher.loginName" />

            </el-col>
          </el-form-item>

          <el-form-item v-show="isAdd || (!isAdd && setTercherType == 1)" label="教师姓名：" prop="teacherName">

            <el-col :span="10">
              <el-input maxlength="30" v-model.trim="formTeacher.teacherName" />
            </el-col>
          </el-form-item>

          <el-form-item v-show="isAdd || (!isAdd && setTercherType == 1)" label="性别：" prop="sex">

            <el-radio-group v-model="formTeacher.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-show="isAdd || (!isAdd && setTercherType == 2)" label="教师角色：" prop="roleList">
            <div class="role-list" v-for="(item, index) in formTeacher.roleList" :key="item.id">
              <el-select class="sel-c" v-model="item.roleId" placeholder="选择角色" @change="item.classId = []">
                <el-option v-for="item in teacherRoleList" :key="item.value" :label="item.label" :value="item.value">

                </el-option>
              </el-select>

              <el-cascader size="small" v-if="item.roleId == 6" class="sel-t" collapse clearable placeholder="选择年级-班级"
                v-model="item.classId" :options="gradeClassList" :props="{ expandTrigger: 'hover' }"></el-cascader>
              <el-cascader size="small" v-if="item.roleId == 7" class="sel-t teacher-cascader" collapse clearable
                placeholder="选择年级-科目-班级" v-model="item.classId" :options="gradeSubListClass"
                :props="{ expandTrigger: 'hover', multiple: true }" popperClass="cascader-clazz"></el-cascader>
              <el-cascader size="small" v-if="item.roleId == 8" class="sel-t" collapse clearable placeholder="选择年级-科目"
                v-model="item.classId" :options="gradeList" :props="{ expandTrigger: 'hover' }"></el-cascader>

              <i class="el-icon-close" @click="removeRoleList(index)"></i>
            </div>
            <p class="add-box">
              <el-button icon="el-icon-plus" @click="addRoleList">添加</el-button>
            </p>

          </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">

          <el-button type="primary" @click="addTeacher">确 定</el-button>

          <el-button @click="diaTeacher = false">取 消</el-button>
        </div>
      </el-dialog>

    </div>

  </template>
  
  <script>

  import {
    downloadFile,
    formatGradeClass,
    randomWord,
    setGradeName,
  } from "@/utils";

  export default {

    data() {
      return {

        code: "",

        loading: false,

        url: "/api_html/school/manager/importTeacher",

        diaUp: false,

        diaTeacher: false,
        isAdd: false,

        setTercherType: 1,

        query: {

          classType: 0,

          gradeClassSub: [],
          type: 0,

          teacherName: "",
          phone: "",
        },

        gradeList: [],

        classList: [],

        gradeClassSubList: [],

        gradeClassList: [],

        gradeSubListClass: [],

        teacherList: [],

        teacherRoleList: [
          //角色

          {
            value: 6,
            label: "班主任",
          },
          {
            value: 7,
            label: "任课老师",
          },
          {
            value: 8,
            label: "备课组长",
          },
        ],

        teacherDetail: {
          teacherName: "",
          loginName: "",
          sex: "",
          available: "",
          managerList: [],
          teacherCourseList: [],
          teacherGradeList: [],
        },
        showTId: "", //显示详情 教师ID

        roleList: [],
        formTeacher: {
          teacherName: "",
          loginName: "",
          sex: 1,
          roleList: [],
        },
        rulesTeacher: {
          teacherName: [
            { required: true, message: "请输入联系电话", trigger: "blur" },
          ],
          loginName: [
            { required: true, message: "请输入教师姓名", trigger: "blur" },
          ],
          sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
          roleList: [
            { required: true, message: "请选择角色信息", trigger: "blur" },
          ],

        },

  
        AllTeacher: false,
        indeterminate: false,
        clearTeacher: [],
        removeLoading: false

      };
    },

    computed: {
      showDel: function () {
        return !this.query.gradeClassSub.some(item => {
          return item.length > 1
        })
      }
    },

    async created() {

      this.code = localStorage.getItem("csCode") || "";

      this._QueryData(4);

      await this._QueryDataGrade();

      // this._RoleList();

    },
    methods: {

      async changeType() {
        this.query.gradeClassSub = []
        this.query.type = 0
        this.query.teacherName = ""
        this.query.phone = ""
        this._QueryData(6);
        await this._QueryDataGrade();
      },

      //选择删除
      handleCheckAllChange(val) {
        this.clearTeacher = val
          ? this.teacherList.map((item) => {
            return item.id;
          })
          : [];
        this.indeterminate = false;
      },
      handleCheckedChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.teacherList.length;
        this.indeterminate =
          checkedCount > 0 && checkedCount < this.teacherList.length;
      },

      //清除教师绑定班级信息

      async remove() {

        if (!this.clearTeacher.length) {

          this.$message.warning("请选择要格式化的老师")
          return
        }
        this.removeLoading = true
        let grades = []
        this.query.gradeClassSub.map(item => {
          if (item.length == 1) {
            if (!grades.includes(item[0])) {
              grades.push(item[0]);
            }
          }
        })

        const { data, status, info } = await this.$request.clearTeacherClasses({

          ids: this.clearTeacher,
          type: this.query.classType,
          grades: grades
        });
        this.removeLoading = false
        if (status === 0) {
          this.$message.success(info);
          this._QueryData();
        } else {
          this.$message.error(info);
        }
      },
      //end
  

      gradeName(type) {
        return setGradeName(type);
      },

      //导入成功

      upSuccess(res) {

        this.$message.closeAll();
        this.$message({
          showClose: true,
          message: `成功（${res.data.success}）`,
          type: "success",

          duration: 5000,

        });

        this.diaUp = false;

        this._QueryData(5);

      },

      //添加教师角色

      addRoleList() {

        this.formTeacher.roleList.push({
          id: randomWord(true, 16, 20),
          roleId: "",
          classId: [],
        });
      },

      //删除教师角色

      removeRoleList(index) {

        this.formTeacher.roleList.splice(index, 1);
      },

      //添加教师弹窗

      addTeacherDia() {

        this.isAdd = true;
        this.formTeacher = {
          teacherName: "",
          loginName: "",
          sex: 1,

          roleList: [],

        };
        this.diaTeacher = true;
      },

      //教师角色数量

      setClass(obj) {

        return (
          obj.managerList?.length +
          obj.teacherCourseList?.length +
          obj.teacherGradeList?.length
        );
      },

      getClassName(id) {
        let name;
        this.classList.map((item) => {
          if (item.value == id) {
            name = item.label;
          }
        });
        return name;
      },

      //教师详细数据

      showTeacher(obj) {

        this.showTId = obj.id;
        this.teacherDetail = { ...obj };
      },

      editTeacher(type) {

        this.diaTeacher = true;

        this.setTercherType = type;

        this.isAdd = false;
        for (let key in this.teacherDetail) {
          if (key == "realName") {
            this.formTeacher.teacherName = this.teacherDetail.realName;
          } else {
            this.formTeacher[key] = this.teacherDetail[key];
          }
        }
        this.toTeacherForm();

      },

      //添加教师

      addTeacher() {

        this.$refs.formTeacher.validate(async (valid) => {
          if (valid) {
            let obj = this.setTeacharForm();
            if (!obj) {
              this.$message.error("教师角色数据有误请检查！");
              return;
            }
            let res;
            if (this.isAdd) {
              res = await this.$request.addTeacher({
                teacherName: this.formTeacher.teacherName,
                loginName: this.formTeacher.loginName,
                sex: this.formTeacher.sex,

                type: this.query.classType,

                ...obj,
              });
            } else {

              res = await this.$request.updateTeacher({
                teacherId: this.formTeacher.id,
                teacherName: this.formTeacher.teacherName,
                loginName: this.formTeacher.loginName,
                sex: this.formTeacher.sex,

                type: this.query.classType,

                ...obj,
              });
            }
            if (res.status === 0) {
              this.$message.success(res.info);
              this.diaTeacher = false;

              this._QueryData(6);

            } else {
              this.$message.error(res.info);
            }
          } else {

            this.$message.warning("输入有误请检查！");

            return false;
          }
        });
      },

      //转换保存教师数据格式

      setTeacharForm() {

        let ERR_OK = true;
        this.formTeacher.roleList.map((item) => {
          if (item.classId.length == 0) {
            ERR_OK = false;
          }
        });
        if (ERR_OK) {
          let [managerList, teacherCourseList, gradeGroupList] = [[], [], []];
          this.formTeacher.roleList.map((item) => {
            if (item.roleId == 6) {
              managerList.push({
                classId: item.classId[1],

                className:
                  this.classList.find((items) => items.value == item.classId[1])
                    ?.label || "",

              });
            } else if (item.roleId == 7) {

              item.classId.map((clazz) => {
                teacherCourseList.push({
                  classId: clazz[2],
                  className:
                    this.classList.find((items) => items.value == clazz[2])
                      ?.label || "",
                  subjectName: clazz[1],
                });

              });
            } else {
              gradeGroupList.push({
                grade: item.classId[0],

                gradeName:
                  this.gradeList.find((items) => items.id == item.classId[0])
                    ?.label || "",

                subjectName: item.classId[1],
              });
            }
          });
          return {
            managerList,
            teacherCourseList,
            gradeGroupList,
          };
        } else {
          return false;
        }
      },

      //教师角色数据转换为form格式数据

      toTeacherForm() {

        this.formTeacher.roleList = [];
        this.formTeacher.managerList?.map((item) => {

          this.formTeacher.roleList.push({
            id: randomWord(true, 16, 20),
            roleId: 6,
            classId: [
              this.classList.find(
                (items) =>

                  items.value == item.classId ||
                  items.label.includes(item.className)

              )?.grade,

              item.classId,
            ],
          });
        });

        let teacherClassId = [];

        this.formTeacher.teacherCourseList?.map((item) => {

          teacherClassId.push([
            item.grade,
            item.subjectName,
            this.classList.find(
              (items) =>
                items.value == item.classId ||
                items.label.includes(item.className)
            ).value,
          ]);
        });
        if (teacherClassId.length) {

          this.formTeacher.roleList.push({
            id: randomWord(true, 16, 20),
            roleId: 7,

            classId: [...teacherClassId],

          });

        }

        this.formTeacher.gradeGroupList?.map((item) => {
          this.formTeacher.roleList.push({
            id: randomWord(true, 16, 20),
            roleId: 8,
            classId: [
              this.gradeList.find((items) => items.id == item.classId[0]).id,
              item.subjectName,
            ],
          });
        });
      },

      //删除教师角色

      async delTeacherManager(obj, type) {
        let query;
        switch (type) {
          case 1:
            query = {
              classId: obj.classId,
            };
            break;
          case 2:
            query = {
              classId: obj.classId,
              subjectName: obj.subjectName,
            };
            break;
          case 3:
            query = {
              classId: obj.classId,
              grade: obj.grade,
              subjectName: obj.subjectName,
            };
            break;
        }
        //角色
        const { data, status, info } = await this.$request.delTeacherManager({
          teacherId: obj.teacherId,

          type: this.query.classType,

          ...query,

        });
        if (status === 0) {

          this._QueryData(6);

        } else {
          this.$message.error(info);
        }
      },

      //角色列表
      // async _RoleList() {
      //   const { data, status, info } = await this.$request.roleList();
      //   if (status === 0) {
      //     this.roleList = data.list || [];
      //   } else {
      //     this.$message.error(info);
      //   }
      // },

      setQuery(type) {

        let query = {};

        if (type == 1) {
          query.grades = [];
          query.classIds = [];
          query.subjectNames = [];
          this.query.gradeClassSub?.map((item) => {
            if (item.length == 1) {
              if (!query.grades.includes(item[0])) {
                query.grades.push(item[0]);
              }
            } else if (item.length == 2) {
              if (!query.classIds.includes(item[1])) {
                query.classIds.push(item[1]);
              }
              query.grades.includes(item[0]) && query.grades.remove(item[0]);
            } else if (item.length == 3) {
              if (!query.subjectNames.includes(item[2])) {
                query.subjectNames.push(item[2]);
              }
              query.grades.includes(item[0]) && query.grades.remove(item[0]);
              query.classIds.includes(item[0]) && query.classIds.remove(item[0]);
            }
          });
  
          delete query.gradeClassSub;
          query.grades.length ? "" : delete query.grades;
          query.classIds.length ? "" : delete query.classIds;
          query.subjectNames.length ? "" : delete query.subjectNames;
          this.query.teacherName = "";
          this.query.phone = "";

          this.query.type = 0;

        } else if (type == 2) {

          this.query.type = 9;

          this.query.phone = "";

          this.query.gradeClassSub = [];

          query.teacherName = this.query.teacherName;
          query.type = this.query.type;

        } else if (type == 3) {

          this.query.type = 9;

          this.query.teacherName = "";

          this.query.gradeClassSub = [];

          query.phone = this.query.phone;
          query.type = this.query.type;

        } else if (type == 4) {
          this.query.teacherName = "";
          this.query.phone = "";
          this.query.gradeClassSub = [];
          query.type = this.query.type;

        } else {

          query = { ...this.query };

          query.grades = [];

          query.classIds = [];
          query.subjectNames = [];
          this.query.gradeClassSub?.map((item) => {
            if (item.length == 1) {

              if (!query.grades.includes(item[0])) {
                query.grades.push(item[0]);

              }
            } else if (item.length == 2) {
              if (!query.classIds.includes(item[1])) {
                query.classIds.push(item[1]);
              }

              query.grades.includes(item[0]) && query.grades.remove(item[0]);

            } else if (item.length == 3) {
              if (!query.subjectNames.includes(item[2])) {
                query.subjectNames.push(item[2]);
              }

              query.grades.includes(item[0]) && query.grades.remove(item[0]);

              query.classIds.includes(item[0]) && query.classIds.remove(item[0]);
            }
          });
  
          delete query.gradeClassSub;

          query.grades.length ? "" : delete query.grades;

          query.classIds.length ? "" : delete query.classIds;
          query.subjectNames.length ? "" : delete query.subjectNames;
          query.teacherName.length ? "" : delete query.teacherName;
          query.phone.length ? "" : delete query.phone;

        }

        query.classType = this.query.classType

        return query;
      },
      async _QueryData(type) {
        if (this.loading) return;

        if (type == 2) {
          if (this.query.teacherName == "") {
            this.$message.warning("请输入老师姓名");
            return;
          }
        } else if (type == 3) {
          if (this.query.phone == "") {
            this.$message.warning("请输入老师手机");
            return;
          }
        }

        this.loading = true;

        let query = this.setQuery(type);

        this.teacherList = [];

        this.clearTeacher = []

        const { data, status, info } = await this.$request.teacherList({
          ...query,
        });
        this.loading = false;
        console.log(status);
        if (status === 0) {
          this.teacherList = data.list || [];

          if (type == 10) {
            let detailArr =
              data.list.filter((item) => item.id == this.formTeacher.id) || [];
            this.teacherDetail = (detailArr.length && detailArr[0]) || {
              ...data.list[0],
            };
          } else {
            this.teacherDetail = { ...this.teacherList[0] };
          }
          this.showTId = this.teacherDetail.id;

        } else {
          this.$message.error(info);
        }
      },

      async _QueryDataGrade() {

        //年级数据

        const { data, status, info } = await this.$request.gradeList({
          type: this.query.classType,
        });

        if (status === 0) {

          this.classList = []

          this.gradeClassList = []
          this.gradeClassSubList = []
          this.gradeSubListClass = []

          this.gradeList =
            data.list?.map((item) => {

              let subList = item.subjectNames?.map((items) => {
                return {
                  value: items,
                  label: items,
                };
              });

              this.gradeClassList.push({
                value: item.grade,
                label: item.gradeName,
                id: item.grade,
                children: item.classList.map((clazz) => {
                  return {
                    value: clazz.id,
                    label: clazz.className,
                    id: clazz.id,
                  };
                }),
              });

              this.gradeClassSubList.push({

                value: item.grade,

                label: item.gradeName,

                id: item.grade,

                children: item.classList.map((clazz) => {

                  return {

                    value: clazz.id,
                    label: clazz.className,
                    id: clazz.id,
                    children: [...subList],

                  };
                }),

              });

              this.gradeSubListClass.push({
                value: item.grade,
                label: item.gradeName,
                id: item.grade,
                children: item.subjectNames.map((items) => {
                  return {
                    value: items,
                    label: items,
                    children: item.classList.map((clazz) => {
                      return {
                        value: clazz.id,
                        label: clazz.className,
                      };
                    }),
                  };
                }),
              });

              let classList = item.classList.map((clazz) => {
                return {
                  value: clazz.id,
                  label: `${clazz.className}（${item.gradeName}）`,
                  grade: item.grade,
                  gradeName: item.gradeName,
                };
              })
              this.classList = this.classList.concat(classList)

              return {

                value: item.grade,

                label: item.gradeName,
                id: item.grade,
                children: [...subList],

              };
            }) || [];

        } else {
          this.$message.error(info);
        }
      },

      async downExcel() {

        let data = await this.$request.teacherTemplate();

        if (data && !data.code) {
          let blob = new Blob([data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          downloadFile(`教师名单模版.xlsx`, blob);

        } else {

          this.$message.error(data.info);

        }
      },
      async exportTeacherExl() {
        this.loadingDown = true;
        let data = await this.$request.exportTeacher();
        this.loadingDown = false;
        if (data) {

          let blob = new Blob([data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });

          downloadFile(`教师名单.xlsx`, blob);

        } else {

          this.$message.error("下载失败");

        }
      },
    },
  };
  </script>

  <style lang="scss" scoped>
  .page-content {
    padding: 0 20px 20px;

  }

  .total {
    padding: 0 20px 10px;
    font-size: 14px;
    color: #666;
  }

  .teacher-box {
    display: flex;
    background: #f8f8f8;
    border-radius: 10px;
    overflow: hidden;
    min-height: 400px;

    .teacher-ul {

      max-height: 60vh;

      overflow-y: auto;
  

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #ccc;
      }

    }

    .teacher-list {
      width: 240px;

      .h-title {
        height: 40px;
        line-height: 40px;
        background: #eee;

        display: flex;
        justify-content: space-between;
        align-items: center;
  
        .txt {
          flex: 1;
        }
  
        .clear {
          width: 18px;
          margin-right: 10px;
          cursor: pointer;
          transition: all .3s;
  
          &:hover {
            transform: scale(1.1);
          }
        }

      }

      .teacher-item {
        font-size: 16px;
        color: #7f7f7f;
        line-height: 36px;
        cursor: pointer;
        padding-left: 12px;

        display: flex;
  

        &:hover {
          background: #eee;
        }

        &.active {
          color: #667ffd;

          background: #eee;

        }
      }
    }

    .teacher-detail {
      flex: 1;
      position: relative;

      padding-left: 10px;

      .icon-box {
        position: absolute;
        top: 12px;
        right: 20px;

        .icon {
          font-size: 24px;
          color: #7f7f7f;
          cursor: pointer;
        }

        .el-icon-circle-plus-outline {
          margin-left: 10px;
        }
      }

      .detail-top {
        padding: 12px 20px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        color: #7f7f7f;

        .p-item {
          width: 40%;
          line-height: 28px;
        }
      }

      .grade-box {
        .grade-info {
          display: flex;
          flex-wrap: wrap;
          padding: 20px 20px 0;

  
          &>li {

            margin-right: 20px;
            margin-bottom: 20px;
            position: relative;

            .el-icon-delete {
              position: absolute;
              top: 8px;
              right: 8px;
              padding: 2px;
              cursor: pointer;
              display: none;

              &:hover {
                color: #667ffd;
              }
            }

            &:hover {
              .el-icon-delete {
                display: block;
              }
            }
          }
  
          .grade-item {
            width: 200px;
            box-sizing: border-box;
            padding: 12px 16px;
            border-radius: 10px;
            box-shadow: 1px 1px 3px #888;
          }

          .grade-name {
            font-size: 16px;
            font-weight: bold;
            line-height: 18px;
            padding-bottom: 12px;
          }

          .grade-class {
            display: flex;
            justify-content: space-between;
            font-size: 15px;
            padding-right: 20px;

            .fa {
              font-size: 18px;
              margin-right: 5px;
              color: #a4a4a4;
            }

            .fa-book {
              font-size: 20px;
            }
          }
        }
      }
    }
  }

  .add-box {
    margin-top: 10px;
  }

  .sel-c {
    width: 120px;
    margin-right: 12px;
  }

  .role-list {
    margin-bottom: 10px;

    position: relative;

    .sel-p {
      position: absolute;
      left: 146px;
      top: 0;
      font-size: 13px;
      color: #606266;
    }

    .sel-t {
      :deep(.el-input__inner) {
        background: transparent;
      }
    }

    .el-icon-close {
      padding: 5px;
      cursor: pointer;
      margin-left: 16px;
      background: #ccc;
      border-radius: 50%;
    }
  }

  </style>