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-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">教师列表</p>
          <ul class="teacher-ul">
            <li
              class="teacher-item"
              v-for="item in teacherList"
              :key="item.id"
              :class="showTId == item.id ? 'active' : ''"
              @click="showTeacher(item)"
            >
              {{ item.realName
              }}<template v-if="setClass(item)"
                >（{{ setClass(item) }}）</template
              >
            </li>
          </ul>
        </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: {
        gradeClassSub: [],
        type: 0,
        teacherName: "",
        phone: "",
      },
      subjectList: [],
      gradeList: [],
      classList: [],
      gradeClassSubList: [],
      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" },
        ],
      },
    };
  },
  async created() {
    this.code = localStorage.getItem("csCode") || "";
    this._QueryData(4);
    await this._QuerySubject();
    await this._QueryDataGrade();
    this._RoleList();
    await this._QueryClass();
  },
  methods: {
    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,
              ...obj,
            });
          } else {
            res = await this.$request.updateTeacher({
              teacherId: this.formTeacher.id,
              teacherName: this.formTeacher.teacherName,
              loginName: this.formTeacher.loginName,
              sex: this.formTeacher.sex,
              ...obj,
            });
          }
          if (res.status === 0) {
            this.$message.success(res.info);
            this.diaTeacher = false;
            this._QueryData(5);
          } 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;
      }
    },
    toTeacherForm() {
      //教师角色数据转换为form格式数据
      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,
        ...query,
      });
      if (status === 0) {
        this._QueryData(5);
      } 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;
      }
      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 = [];
      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 _QuerySubject() {
      const { data, status, info } = await this.$request.subjectList();
      if (status === 0) {
        this.subjectList = [...data?.subjectNames] || [];
      } else {
        this.$message.error(info);
      }
    },
    async _QueryDataGrade() {
      //年级数据
      const { data, status, info } = await this.$request.gradeList();
      if (status === 0) {
        this.gradeList =
          data.list?.map((item) => {
            let subList = item.subjectNames?.map((items) => {
              return {
                value: items,
                label: items,
              };
            });
            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,
                    };
                  }),
                };
              }),
            });
            return {
              value: item.grade,
              label: item.gradeName,
              id: item.grade,
              children: [...subList],
            };
          }) || [];
      } else {
        this.$message.error(info);
      }
    },
    async _QueryClass() {
      //班级数据
      const { data, status, info } = await this.$request.schoolClassList();
      if (status === 0) {
        let gradeSubList = {};
        this.gradeList.map((item) => {
          gradeSubList[item.label] = [...item.children];
        });
        this.classList =
          data.list.map((item) => {
            return {
              value: item.id,
              label: `${item.className}（${item.gradeName}）`,
              grade: item.grade,
              gradeName: item.gradeName,
              children: gradeSubList[item.gradeName],
            };
          }) || [];
        this.gradeClassList = formatGradeClass([...data.list]);
      } 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: scroll;
    &::-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;
      // border-radius: 10px 10px 0 0;
    }
    .teacher-item {
      font-size: 16px;
      color: #7f7f7f;
      line-height: 36px;
      cursor: pointer;
      padding-left: 12px;
      &: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>