src/views/standard/setUp/archived.vue

<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-step title="4 授课端指引"></el-step>
      </el-steps>
      <ul v-loading="loading">
        <li v-show="step == 0">
          <div class="form-item">
            <span class="s-txt">选择分班年级：</span>
            <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>
          </div>
          <div class="form-item">
            <span class="s-txt">确定班级：</span>
            <i class="el-icon-loading" v-show="loadingClass"></i>
            <div class="check-box" v-if="classList.length && !loadingClass">
              <p class="all-check">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
              </p>
              <el-checkbox-group
                v-model="classIds"
                @change="handleCheckedChange"
              >
                <el-checkbox v-for="item in classList" :label="item.id">{{
                  item.className
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="form-item">
            <span class="s-txt"></span>
            <p class="tips">
              <i class="el-icon-warning"></i
              >请谨慎操作，班级归档后，学生解除班级关系且相关老师任课信息将不存在。
            </p>
          </div>
          <div class="btn-box">
            <el-button class="btn" round @click="toClazz">取消</el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="确定要将所选班级归档吗？"
              @confirm="_ClassArchiving"
            >
              <el-button class="btn" slot="reference" type="primary" round
                >归档</el-button
              >
            </el-popconfirm>
          </div>
        </li>
        <li v-show="step == 1">
          <div class="step-item">
            <up-load
              id="downTeacher"
              :url="urlClazz"
              @upSuccess="upStudentSuccess"
              fileName="学生名单模板"
            >
              <p class="down-txt" slot="down">
                通过Excel名单导入学生名单模板，点击
                <el-link type="primary" @click="downStudentExcel"
                  >导出未分配学生</el-link
                >
                。
              </p>
            </up-load>
          </div>
        </li>
        <li v-show="step == 2">
          <div class="step-item">
            <up-load
              id="downTeacher"
              :url="urlTeacher"
              @upSuccess="upTeacherSuccess"
              fileName="任课老师名单模板"
            >
              <p class="down-txt" slot="down">
                通过Excel名单导入任课老师名单模板，点击
                <el-link type="primary" @click="downTeacherExcel"
                  >导出未分配教师</el-link
                >。
              </p>
            </up-load>
          </div>
        </li>
        <li v-show="step == 3">
          <div class="step-item2">
            <p class="p2">
              <el-button
                class="btn"
                type="success"
                icon="el-icon-check"
                circle
                size="small"
              ></el-button
              >恭喜您，分班已经完成，分班后老师第一次上课时注意事项：
            </p>
            <p class="p1">
              1、点击授课端的设置—应用设置—初始化设置—重新选择绑定班级。
            </p>
            <p class="p1">
              2、点击授课端的设置—班级名册—基站登录—学生完成基站绑定。
            </p>
          </div>
        </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 != 3"
              class="btn"
              type="primary"
              round
              @click="step += 1"
              >下一步</el-button
            ><el-button
              v-show="step == 3"
              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: [],
      classIds: [],
      classList: [],
      urlClazz: "/api_html/school/manager/importClassAndStudent",
      urlTeacher: "/api_html/school/manager/importTeacher",
      checkAll: true,
      isIndeterminate: false,
    };
  },
  created() {
    this._QueryDataGrade();
  },
  methods: {
    handleCheckAllChange(val) {
      this.classIds = val
        ? this.classList.map((item) => {
            return item.id;
          })
        : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.classList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.classList.length;
    },
    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() {
      this.loadingDown = true;
      let data = await this.$request.exportNoClassStudent();
      this.loadingDown = false;
      if (data) {
        let blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        downloadFile("未分配学生名单.xlsx", blob);
      } else {
        this.$message.error("下载失败");
      }
    },
    //导出任课老师名单
    async downTeacherExcel() {
      this.loadingDown = true;
      let data = await this.$request.exportNoClassTeacher();
      this.loadingDown = false;
      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.classIds.length) {
        this.$message.warning("班级不能为空，请选择班级～");
        return;
      }
      this.loading = true;
      const { status, info } = await this.$request.classArchiving({
        classIds: [...this.classIds],
      });
      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,
      });
      this.loadingClass = false;
      if (status === 0) {
        this.classList = (data.list && [...data.list]) || [];
        this.classIds = this.classList.map((item) => {
          return item.id;
        });
        this.checkAll = true;
      } 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>