src/views/basic/setUp/teacher.vue

<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-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 class="teacher-ul">
              <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.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 :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" 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>
        </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: 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 = this.$store.getters.csCode;
    this._QueryData(4);
    await this._QueryDataGrade(1); //筛选用
    await this._QueryDataGrade(2); //配置角色用
    // this._RoleList();
  },
  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] = [[], [], []];
        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
            }) 
          }
          // 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(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 {
  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 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;
        }
        .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>