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 disabled label="全部" value=""></el-option>

            <el-option label="行政班" :value="0"></el-option>
            <el-option label="教学班" :value="1"></el-option>
          </el-select>

          <el-select class="sel" @change="_QueryData(5)" v-model="query.role" placeholder="选择角色">
            <el-option disabled label="请选择" :value="9"></el-option>
            <el-option label="年级组长" :value="'年级组长'"></el-option>
            <el-option label="班主任" :value="'班主任'"></el-option>
            <el-option label="任课老师" :value="'任课老师'"></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>

              <el-popconfirm v-show="showDel" title="确定清除所选教师的任课信息吗？" @confirm="remove">

                <img slot="reference" class="clear" src="../../../assets/images/shuazi.svg" alt="" />

              </el-popconfirm>

            </p>

            <el-checkbox-group v-model="clearTeacher" @change="handleCheckedChange">

              <ul ref="teacherRef">

                <li class="teacher-item" v-for="item in teacherList" :key="item.id">

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

                  <p class="name" :class="showTId == item.id ? 'active' : ''" @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.teacherGradeList && teacherDetail.teacherGradeList.length">
              <p class="h-title">年级组长</p>
              <ul class="grade-info">
                <li class="grade-li" v-for="item in teacherDetail.teacherGradeList" :key="item.classId">
                  <el-popconfirm title="确定删除吗？" @confirm="delTeacherManager(item, 0)" v-if="!code">
                    <i class="el-icon-delete" slot="reference"></i>
                  </el-popconfirm>
                  <div class="grade-item">
                    <p class="grade-name">
                      {{ item.gradeName }}
                    </p>
                    <div class="grade-class">
                      <p>
                        <i class="fa fa-address-book-o"></i>学生：{{ item.studentNum }}个
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </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>
        </div>
      </div>

      <el-dialog :append-to-body="true" :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 :append-to-body="true" :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-main">
              <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>
                <el-select v-if="item.roleId == 3" v-model="item.gradeId" placeholder="选择年级">
                  <el-option v-for="item in gradeList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <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>

            </div>

          </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: [],

        RoleList: [
          //角色
          {

            value: 3,
            label: "年级组长"
          },
          {

            value: 6,
            label: "班主任",
          },
          {
            value: 7,
            label: "任课老师",
          },

          // {
          //   value: 8,
          //   label: "备课组长",
          // },

        ],

        teacherRoleList: [
          //角色

          {

            value: 3,
            label: "年级组长"
          },
          {

            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: false, 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 = this.$store.getters.csCode;

      this._QueryData(4);

      await this._QueryDataGrade(1); //筛选用
      await this._QueryDataGrade(2); //配置角色用

      // this._RoleList();

    },

    mounted() {
      // this.$refs.teacherRef.style.maxHeight = 'calc(100% - ' + this.$refs.teacherRef.getBoundingClientRect().top + 'px)';
    },

    methods: {

      async changeType() {

        this.query.gradeClassSub = [];

        // this.query.type = 0;

        this.query.teacherName = "";
        this.query.phone = "";

        // if (this.query.classType === 0) {
        //   this.teacherRoleList = [...this.RoleList];
        // } else {
        //   this.teacherRoleList = this.RoleList.slice(1, 3);
        // }

        this._QueryData(6);

        await this._QueryDataGrade(1);

      },

      //选择删除
      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: [],

          gradeId: "",

        });
      },

      //删除教师角色

      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() {

        if (this.setTercherType == 1) {

          delete this.rulesTeacher.roleList;

        } else {
          this.rulesTeacher.roleList = [
            { required: true, message: "请选择角色信息", trigger: "blur" },

          ];

        }

        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(10);

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

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

            return false;
          }
        });
      },

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

      setTeacharForm() {

        let ERR_OK = this.formTeacher.roleList.length > 0;

        if (ERR_OK) {
          let [managerList, teacherCourseList, gradeGroupList] = [[], [], []];

          console.log(this.formTeacher.roleList)

          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 if (item.roleId == 3) {
              gradeGroupList.push({
                grade: item.gradeId

              })

            }

          });
          return {
            managerList,
            teacherCourseList,
            gradeGroupList,
          };
        } else {

          if (this.setTercherType == 2)
            return false;
          return true;

        }
      },

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

      toTeacherForm() {

        this.formTeacher.roleList = [];

        //班主任 

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

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

            classId: [item.grade, item.classId],

          });
        });

        //任课老师

        let teacherClassId = [];

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

          teacherClassId.push([
            item.grade,
            item.subjectName,

            this.classList.find((items) => items.value == item.classId).value,

          ]);
        });
        if (teacherClassId.length) {

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

            classId: [...teacherClassId],

          });

        }

        //年级组长
        this.formTeacher.teacherGradeList?.map((item) => {
          this.formTeacher.roleList.push({
            id: randomWord(true, 16, 20),
            roleId: 3,
            gradeId: item.grade
          });
        });
        console.log(this.formTeacher)

      },

      //删除教师角色

      async delTeacherManager(obj, type) {
        let query;
        switch (type) {

          case 0:
            query = {
              garde: obj.grade,
            };
            break;

          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(10);

        } 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.classType = "";

          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.classType = "";

          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;

        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(type) {
        let query = {};
        if (type == 1) {
          query.type = this.query.classType;

        } else if (type == 3) {
          query.type = 0;

        }

        //年级数据

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

          ...query,

        });

        if (status === 0) {

          if (type == 1) {
            this.gradeClassSubList = [];
            if (this.query.classType == 0) {
              this.gradeClassList = [];
            }
          }

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

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

              if (type == 2) {

                //学校-科目-班级
                this.gradeSubListClass.push({

                  value: item.grade,
                  label: item.gradeName,
                  id: item.grade,

                  children: item.subjectNames.map((items) => {
                    let child = [];
                    item.classList.map((clazz) => {
                      if (clazz.subjectName) {
                        if (items == clazz.subjectName) {
                          child.push({
                            value: clazz.id,
                            label: clazz.className,
                          });
                        }
                      } else {
                        child.push({
                          value: clazz.id,
                          label: clazz.className,
                        });
                      }
                    });

                    return {

                      value: items,
                      label: items,
                      children: child,

                    };
                  }),
                });

              } else if (type == 1) {

                if (this.query.classType == 0) {

                  // 学校-年级
                  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],
                      };
                    }),
                  });
                } else {
                  //学校-年级-科目
                  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: [
                          {
                            value: clazz.subjectName,
                            label: clazz.subjectName,
                          },
                        ],
                      };
                    }),
                  });
                }

              }
  

              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 {

    height: calc(100% - 80px);

    display: flex;
    background: #f8f8f8;
    border-radius: 10px;

    min-height: 400px;

    .teacher-list {
      width: 240px;
  
      @media screen and (min-device-height: 1601px) {
        max-height: 85vh;
      }
  
      @media screen and (max-device-height: 1600px) and (min-device-height: 1081px) {
        max-height: 85vh;
      }
  
      @media screen and (max-device-height: 1080px) and (min-device-height: 769px) {
        max-height: 72vh;
      }
  
      @media screen and (max-device-height: 769px) {
        max-height: 95vh;
      }
  

      overflow-y: auto;
  

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

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

      .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 0.3s;

  
          &:hover {
            transform: scale(1.1);
          }
        }

      }

      .teacher-item {
        font-size: 16px;
        color: #7f7f7f;
        line-height: 36px;

        padding-left: 12px;

        display: flex;
  

        .name {
          cursor: pointer;

          &:hover {
            color: #667ffd;
          }

          &.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;

            padding-right: 5px;

          }

          .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-main {
    float: left;
  }
  

  .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>