班级分班

梁保满
1 parent 0454f787
Showing 5 changed files with 386 additions and 3 deletions
src/assets/images/fenban.png
src/router/index.js
src/views/standard/setUp/archived.vue
src/views/standard/setUp/clazz.vue
src/views/standard/setUp/student.vue
@@ -42,8 +42,9 @@ const SetUpConglomerate = () =&gt; import(&quot;@/views/standard/setUp/conglomerate&quot;)
 const SetUpSchool = () => import("@/views/standard/setUp/school")
 const SetUpTeacher = () => import("@/views/standard/setUp/teacher")
 const SetUpStudent = () => import("@/views/standard/setUp/student")
-const SetUpClazz = () => import("@/views/standard/setUp/clazz")
 const ArchivedClazz = () => import("@/views/standard/setUp/archivedClazz")
+const SetUpClazz = () => import("@/views/standard/setUp/clazz")
+const Archived = () => import("@/views/standard/setUp/archived")
  
 const PersonalAsk = () => import("@/views/personal/ask/index")
 const PersonalAskAnalysis = () => import("@/views/personal/ask/analysis")
@@ -324,6 +325,14 @@ let addrouters = [
         hidden: true,
         children: []
       },
+      {
+        path: "/archived",
+        iconCls: "fa fa-list-ul",
+        name: '分班',
+        component: Archived,
+        hidden: true,
+        children: []
+      },
     ]
   },
   {
+<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="gradeName"
+              placeholder="选择年级"
+              @change="changeGrade"
+            >
+              <el-option
+                v-for="item in gradeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+              <el-option label="未分配" :value="80"></el-option>
+              <el-option label="已毕业" :value="81"></el-option>
+            </el-select>
+          </div>
+          <div class="form-item">
+            <span class="s-txt">确定班级：</span>
+            <i class="el-icon-loading" v-show="loadingClass"></i>
+            <el-checkbox-group v-model="classIds">
+              <el-checkbox v-for="item in classList" :label="item.id">{{
+                item.className
+              }}</el-checkbox>
+            </el-checkbox-group>
+          </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="classIds = []">取消</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="urlStudent"
+              @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>
+export default {
+  data() {
+    return {
+      loading: false,
+      loadingClass: false,
+      step: 1,
+      gradeName: "",
+      gradeList: [],
+      classIds: [],
+      classList: [],
+      urlStudent: "",
+      urlTeacher: "",
+    };
+  },
+  created() {
+    this._QueryDataGrade();
+  },
+  methods: {
+    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, info, status } =
+        await this.$request.studentClickerTemplateUrl();
+      this.loadingDown = false;
+      if (status == 0) {
+        const a = document.createElement("a");
+        a.href = data.downloadUrl;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+      } else {
+        this.$message.error(info);
+      }
+    },
+    //导出任课老师名单
+    async downTeacherExcel() {
+      this.loadingDown = true;
+      let { data, info, status } =
+        await this.$request.teacherClickerTemplateUrl();
+      this.loadingDown = false;
+      if (status == 0) {
+        const a = document.createElement("a");
+        a.href = data.downloadUrl;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+      } else {
+        this.$message.error(info);
+      }
+    },
+    //班级归档
+    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.gradeName,
+              label: item.gradeName,
+            };
+          }) || [];
+        this.gradeName = 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({
+        gradeName: this.gradeName,
+      });
+      this.loadingClass = false;
+      if (status === 0) {
+        this.classList = [...data.list] || [];
+        this.classIds = [];
+      } 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;
+  &: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>
 \ No newline at end of file
@@ -25,6 +25,9 @@
             @click="exportTeacherExl"
           ></el-button>
         </el-tooltip>
+        <el-tooltip effect="dark" content="分班" placement="bottom">
+          <img @click="toArchived" src="../../../assets/images/fenban.png" class="fenban" alt="" />
+        </el-tooltip>
       </template>
     </back-box>
     <div class="page-content">
@@ -241,6 +244,11 @@ export default {
     this._QuerySubject();
   },
   methods: {
+    toArchived(){
+      this.$router.push({
+        path:'/archived'
+      })
+    },
     openSubject(obj) {
       this.formClass.gradeName = obj.gradeName;
       this.subjectNames = [...obj.subjectNames];
@@ -350,7 +358,7 @@ export default {
       });
       if (status === 0) {
         this.$message.success(info);
-        let idx = this.subjectNames.findIndex(sub => item==sub)
+        let idx = this.subjectNames.findIndex((sub) => item == sub);
         this.subjectNames.splice(idx, 1, item.value);
         item.default = item.value;
       } else {
@@ -461,6 +469,11 @@ export default {
 </script>
  
 <style lang="scss" scoped>
+.fenban{
+  width:28px;
+  margin-left:10px;
+  cursor: pointer;
+}
 .page-tit {
   margin-bottom: 20px;
 }
@@ -568,7 +568,6 @@ export default {
       }
     },
     async _QueryDataGrade() {
-      this.loading = true;
       const { data, status, info } = await this.$request.gradeList();
       if (status === 0) {
         this.gradeList =