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.gradeName"
            placeholder="选择年级"
            @change="_QueryData(1)"
          >
            <el-option
              v-for="item in gradeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            placeholder="请输入老师姓名"
            v-model="query.teacherName"
            class="input-with-select"

            maxlength="30"

            @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"

            class="input-with-select"
            @keyup.enter.native="_QueryData(3)"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="_QueryData(3)"
            ></el-button>
          </el-input>
        </div>
      </div>
      <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 }}（{{ setClass(item) }}）
              </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.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"
                >

                  <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.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 title="导入教师名单" :visible.sync="diaUp" width="600">

        <up-load
          id="downTeacher"
          :url="url"
          @upSuccess="upSuccess"
          fileName="教师名单"
        >

          <p class="down-txt" slot="down">
            通过Excel名单导入教师名单，点击
            <el-link type="danger" @click="downExcel">模板下载</el-link> 。
          </p>
        </up-load>
        <div class="dialog-footer" slot="footer">
          <el-button @click="diaUp = false">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog

        :title="
          isAdd ? '添加教师' : setTercherType == 1 ? '编辑教师信息' : '管理班级'
        "

        :visible.sync="diaTeacher"
        width="400"
      >

        <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"
                collapse
                clearable
                placeholder="选择班级-科目"
                v-model="item.classId"
                :options="classList"
                :props="{ expandTrigger: 'hover' }"
              ></el-cascader>

              <el-cascader
                size="small"

                v-if="item.roleId == 8"
                class="sel-t"
                collapse
                clearable
                placeholder="选择年级-科目"
                v-model="item.classId"
                :options="gradeSubList"
                :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, getBlob } from "@/utils";

  export default {

    data() {
      return {

        code: "",

        loading: false,

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

        diaUp: false,

        diaTeacher: false,
        isAdd: false,

        setTercherType: 1,

        query: {
          gradeName: "",
          teacherName: "",
          phone: "",
        },

        subjectList: [],

        gradeList: [],

        classList: [],
        gradeClassList: [],
        gradeSubList: [],

        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") || "";

      await this._QueryDataGrade();
      this._QueryData(1);

      this._RoleList();
      await this._QuerySubject();
      await this._QueryClass();

    },
    methods: {

      upSuccess() {
        //导入成功
        this.diaUp = false;

        this._QueryData(10);
      },

      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
        );
      },
      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(10);
            } 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) {
              teacherCourseList.push({
                classId: item.classId[0],

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

                subjectName: item.classId[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 == item.className
              ).grade,
              item.classId,
            ],
          });
        });
        this.formTeacher.teacherCourseList?.map((item) => {
          this.formTeacher.roleList.push({
            id: randomWord(true, 16, 20),
            roleId: 7,
            classId: [
              this.classList.find(
                (items) =>
                  items.value == item.classId || items.label == item.className
              ).value,
              item.subjectName,
            ],
          });
        });
        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(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);
        }
      },

      async _QueryData(type) {
        let query = {};
        if (type == 1) {
          query.gradeName = this.query.gradeName;
          this.query.teacherName = "";
          this.query.phone = "";
        } else if (type == 2) {

          if (this.query.teacherName == "") {
            this.$message.warning("请输入老师姓名");
            return;

          }

          query.teacherName = this.query.teacherName;
          this.query.gradeName = "";
          this.query.phone = "";
        } else if (type == 3) {

          if (this.query.phone == "") {
            this.$message.warning("请输入老师手机");
            return;

          }

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

        } else if (type == 10) {
          query = { ...this.query };

        }
        this.loading = true;

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

        //年级数据

        const { data, status, info } = await this.$request.gradeList();
        if (status === 0) {
          this.gradeList =
            data.list?.map((item) => {
              return {
                value: item.gradeName,
                label: item.gradeName,

                id: item.grade,

              };
            }) || [];

          this.query.gradeName = this.gradeList[0]?.value;
        } else {
          this.$message.error(info);
        }
      },

      async _QuerySubject() {
        //科目信息
        const { data, status, info } = await this.$request.subjectList();
        console.log(status);
        if (status === 0) {
          this.subjectList = [...data.subjectNames] || [];
          this.gradeSubList = this.gradeList?.map((item) => {
            return {
              value: item.id,
              label: item.label,
              children: data.subjectNames.map((sub) => {
                return {
                  value: sub,
                  label: sub,
                };
              }),
            };
          });
        } else {
          this.$message.error(info);
        }
      },
      async _QueryClass() {
        //班级数据
        const { data, status, info } = await this.$request.schoolClassList();
        if (status === 0) {
          this.classList =
            data.list.map((item) => {
              return {

                value: item.id,

                label: item.className,
                grade: item.grade,
                children: this.subjectList.map((sub) => {
                  return {
                    value: sub,
                    label: sub,
                  };
                }),
              };
            }) || [];
          this.gradeClassList = formatGradeClass([...data.list]);
        } else {
          this.$message.error(info);
        }
      },

      async downExcel() {

        let { data, status, info } = await this.$request.teacherTemplate();
        debugger;
        if (status == 0) {
          getBlob(data.downloadUrl).then((res) => {
            downloadFile("教师名单模板", res);
          });
        } else {
          this.$message.error(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;

  }

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

      max-height: 60vh;

      overflow-y: scroll;
    }
    .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;
      .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;
    .el-icon-close {
      padding: 5px;
      cursor: pointer;
      margin-left: 16px;
      background: #ccc;
      border-radius: 50%;
    }
  }

  </style>