baoman / Ezquiz_Platform

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>分班</span>
      </template>
    </back-box>
    <div class="page-content">
      <el-steps :active="step" align-center class="step">
        <el-step title="1 解散班级"></el-step>
        <el-step title="2 导入班级名单"></el-step>
        <el-step title="3 分班后任课老师"></el-step>
      </el-steps>
      <ul v-loading="loading">
        <li v-show="step == 0" style="padding:0px 200px;">
          <el-row class="row-subfix" style="margin-top: 20px;">
            <el-row class="row-subfix">
              <div class="row-line">
                <span class="line-subfix">选择年级：</span>
                <span class="line-value">
                  <el-select class="sel" v-model="grade" placeholder="选择年级" @change="changeGrade">
                    <el-option v-for="item in gradeList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-row>
            <el-row class="row-subfix" style="margin-top: 20px;">
              <span class="line-subfix" style="float: left;">选择班级：</span>
              <div class="row-line"
                style="float: left;  background:rgb(245,247,250);padding:15px;width: calc(100% - 220px);  border-radius:5px;">
                <span class="line-value" style="min-height: 300px;border-radius: 4px; background: rgb(247,247,250);">
                  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                    @change="handleCheckAllChange">全选</el-checkbox>
                  <el-checkbox-group v-model="checkedClass" style="margin-top: 15px;">
                    <el-checkbox v-for="(item, index) in classList" :label="item.id" :key="item.id">
                      {{ item.className }}
                    </el-checkbox>
                  </el-checkbox-group>
                </span>
              </div>
            </el-row>
          </el-row>
          <el-row class="row-subfix form-item" style="margin-top: 20px;">
            <span class="line-subfix" style="float: left;"> <i class="el-icon-warning" /></span>
            <div class="row-line" style="float: left; width: calc(100% - 220px);  border-radius:5px;">
              <div>请谨慎操作，班级归档后，学生解除班级关系且相关老师任课信息将不存在。</div>
              <div style="margin-top: 10px;opacity: 0.7;">如需保存解散前的班级名单与任课信息，可点击“保存名单”按钮。</div>
            </div>
          </el-row>
          <div style="margin:0px auto;width: 30%;">
            <el-button style="background: rgb(218,225,235) ;color:black;border:none !important;"
              @click="toClazz">取消</el-button>
            <el-button type="primary" @click="_downNameList">保存名单</el-button>
            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" title="确定要将所选班级解散吗吗？"
              @confirm="_ClassArchiving">
              <el-button slot="reference" v-loading="loadingDown"
                style="background: rgb(242,168,65) ;color:white;margin-left: 10px;border:none !important;">确定解散</el-button>
            </el-popconfirm>
          </div>
        </li>
        <li v-show="step == 1">
          <el-row class="row-subfix form-item">
            <div class="row-line" style="float: left;">
              <div>通过导入EXCEL文件方式添加班级名单，请按需求下载对应班级类型板并填写班级名单信息后，导入系统：</div>
              <div style="margin-top: 10px;opacity: 0.7;margin-left:20px;">
                行政班定义：由固定学生、固定教室构成，由专门的班主任进行管理;
              </div>
              <div style="margin-top: 5px;opacity: 0.7;margin-left:20px;">
                教学班定义：由不同行政班的学生临时组成，没有专门的班主任，是在选课制基础上，由于教学的需要而产生的。
              </div>
            </div>
          </el-row>
          <el-row class="row-subfix form-item" style="margin-top: 20px;">
            <el-button :icon="'el-icon-document'" @click="_downTemplate(0)">下载行政班名单模板</el-button>
            <el-button :icon="'el-icon-document'" @click="_downTemplate(1)">下载教学班名单模板</el-button>
          </el-row>
          <el-row class="row-subfix form-item" style="margin-top: 20px;">
            <upload id="downTeacher" drag :url="urlClazz"
              style="border:rgb(219,226,235) dashed 1px;width: 100%;padding:40px 0px;border-radius: 5px;"
              @upSuccess="upStudentSuccess" fileName="学生名单模板">
              <p class="down-txt" slot="down">
                通过Excel名单导入学生名单模板
              </p>
            </upload>
          </el-row>
        </li>
        <li v-show="step == 2">
          <el-row class="row-subfix form-item">
            <div class="row-line" style="float: left;">
              <div>通过导入EXCEL文件方式添加教师任课信息，请按需求下载板并填写任课信息后，导入系统:</div>
            </div>
          </el-row>
          <el-row class="row-subfix form-item" style="margin-top: 20px;">
            <el-button :icon="'el-icon-document'" @click="_downTemplate(2)">下载任课信息模板</el-button>
          </el-row>
          <el-row class="row-subfix form-item" style="margin-top: 20px;">
            <upload id="downTeacher" drag :url="urlTeacher"
              style="border:rgb(219,226,235) dashed 1px;width: 100%;padding:40px 0px;border-radius: 5px;"
              @upSuccess="upTeacherSuccess" fileName="任课老师名单模板">
              <p class="down-txt" slot="down">
                通过Excel名单导入任课老师名单模板
              </p>
            </upload>
          </el-row>
        </li>
        <li v-show="step != 0">
          <div class="btn-box">
            <el-button class="btn" round @click="step -= 1">上一步</el-button>
            <el-button v-show="step != 2" class="btn" type="primary" round @click="step += 1">下一步</el-button><el-button
              v-show="step == 2" class="btn" type="primary" round @click="toClazz">完成</el-button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { downloadFile } from "utils";
export default {
  data() {
    return {
      loading: false,
      loadingClass: false,
      loadingDown: false,
      step: 0,
      grade: "",
      gradeList: [],
      checkAll: false,
      checkedClass: [],
      classList: [],
      urlClazz: "/api_html/school/manager/importClassAndStudent",
      urlTeacher: "/api_html/school/manager/importTeacher",
      isIndeterminate: true
    };
  },
  watch: {
    checkedClass(value) {
      this.checkAll = value.length == this.classList.length;
      this.isIndeterminate = value.length > 0 && value.length < this.classList.length;
    }
  },
  created() {
    this._QueryDataGrade();
  },
  methods: {
    async _downNameList() {
      this.loadingDown = true;
      await this.downStudentExcel();
      await this.downTeacherExcel();
      this.loadingDown = false;
    },
    handleCheckAllChange(val) {
      if (val) this.checkedClass = this.classList.map(item => item.id);
      else this.checkedClass = [];
    },
    async _downTemplate(type) {

      var template = type == 0 ? this.$request.classAndStudentTemplate : this.$request.tClassAndStudentTemplate;

      if (type == 2) template = await this.$request.teacherTemplate;
      console.log(type)
      let data = await template();

      if (data && !data.code) {

        let blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });

        downloadFile(type == 2 ? "教师任课信息" : type == 0 ? "行政班名单模板" : "教学班名单模板", blob);
      }
      else {
        this.$message.error(data.info);
      }
      // const classAndStudentTemplate =
      //   type == 0
      //     ? this.$request.classAndStudentTemplate ? type == 2 :
      //       await this.$request.teacherTemplate()
      //     : this.$request.tClassAndStudentTemplate;
      // let data = await classAndStudentTemplate();
      // if (data && !data.code) {
      //   let blob = new Blob([data], {
      //     type: "application/vnd.ms-excel;charset=utf-8",
      //   });
      //   downloadFile(type == 0 ? type == 2 ? "教师任课信息模板" : "行政班名单模板" : "教学班名单模板", blob);
      // } else {
      //   this.$message.error(data.info);
      // }
    },
    toClazz() {
      this.$router.push({
        path: "/setUpClazz",
      });
    },
    //切换年级
    changeGrade() {
      this._QueryClass();
    },
    //学生名单上传成功回调
    upStudentSuccess(res) {
      this.$message.closeAll();
      this.$message({
        showClose: true,
        message: `成功（${res.data.success}）`,
        type: "success",
        duration: 10000,
      });
    },
    //任课老师名单上传成功回调
    upTeacherSuccess(res) {
      this.$message.closeAll();
      this.$message({
        showClose: true,
        message: `成功（${res.data.success}）`,
        type: "success",
        duration: 10000,
      });
    },
    //导出学生名单
    async downStudentExcel() {

      const exportClassAndStudent = this.$request.exportClassAndStudent;

      let data = await exportClassAndStudent();

      if (data) {
        let blob = new Blob([data], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        downloadFile(`班级名单.xlsx`, blob);
      } else {
        this.$message.error("下载失败");
      }
    },
    //导出任课老师名单
    async downTeacherExcel() {

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

      if (data) {
        let blob = new Blob([data], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        downloadFile(`教师名单.xlsx`, blob);
      } else {
        this.$message.error("下载失败");
      }
      // let data = await this.$request.exportNoClassTeacher();

      // if (data) {
      //   let blob = new Blob([data], {
      //     type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      //   });
      //   downloadFile("未分配教师 名单.xlsx", blob);
      // } else {
      //   this.$message.error("下载失败");
      // }
    },
    //班级归档
    async _ClassArchiving() {
      if (!this.checkedClass.length) {
        this.$message.warning("班级不能为空，请选择班级～");
        return;
      }
      this.loading = true;
      const { status, info } = await this.$request.classArchiving({
        classIds: [...this.checkedClass],
      });
      this.loading = false;
      if (status === 0) {
        this.$message.success("班级归档成功！");
        this.step = 1;
        this._QueryDataGrade();
      } 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.grade,
              label: item.gradeName,
            };
          }) || [];
        this.grade = this.gradeList[0]?.value;
        this._QueryClass();
      } else {
        this.$message.error(info);
      }
    },
    //班级列表
    async _QueryClass() {
      this.classList = [];
      this.loadingClass = true;
      const { data, status, info } = await this.$request.schoolClassList({
        grade: this.grade,
        type: 0
      });
      this.loadingClass = false;
      if (status === 0) {
        this.classList = (data.list && [...data.list]) || [];
        this.checkedClass = this.classList.map(item => item.id);
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.step {
  margin-bottom: 40px;
}

.form-item {
  width: 70%;
  display: flex;
  margin: 0 auto 20px;

  .check-box {
    flex: 1;
  }

  .all-check {
    margin-right: 30px;
  }

  &:first-of-type {
    .s-txt {
      line-height: 40px;
    }
  }

  .s-txt {
    width: 160px;
    flex-shrink: 0;
  }

  .sel {
    :deep(.el-input__inner) {
      border-radius: 20px;
    }
  }

  :deep(.el-checkbox) {
    margin-bottom: 12px;
  }

  .tips {
    display: flex;
    align-items: center;
    color: #666;
  }

  .el-icon-warning {
    font-size: 20px;
    color: #ec7f8c;
    margin-right: 10px;
  }
}

.btn-box {
  width: 80%;
  margin: 60px auto 0;
  display: flex;
  justify-content: flex-end;

  .btn {
    margin: 0 10px;
  }
}

.step-item {
  text-align: center;
}

.step-item2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;
  font-weight: 500;

  .p2 {
    font-size: 16px;
    margin: 0 0 20px -68px;

    .btn {
      margin-right: 14px;
    }
  }

  .p1 {
    width: 450px;
    text-align: left;
    margin-bottom: 20px;
  }
}

:deep(.down-txt) {
  justify-content: center;
  padding-left: 0;
}
</style>