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-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" :key="item.id" :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">

              <upload id="downTeacher" :url="urlClazz" @upSuccess="upStudentSuccess" fileName="学生名单模板">

                <p class="down-txt" slot="down">
                  通过Excel名单导入学生名单模板，点击

                  <el-link type="primary" @click="downStudentExcel">导出未分配学生</el-link>

                  。
                </p>

              </upload>

            </div>
          </li>
          <li v-show="step == 2">
            <div class="step-item">

              <upload id="downTeacher" :url="urlTeacher" @upSuccess="upTeacherSuccess" fileName="任课老师名单模板">

                <p class="down-txt" slot="down">
                  通过Excel名单导入任课老师名单模板，点击

                  <el-link type="primary" @click="downTeacherExcel">导出未分配教师</el-link>。

                </p>

              </upload>

            </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>