中天提出的交互优化

梁保满
1 parent 5cfb0264
Showing 3 changed files with 115 additions and 46 deletions
src/views/standard/analysis/index.vue
src/views/standard/setUp/clazz.vue
src/views/standard/setUp/teacher.vue
@@ -59,10 +59,12 @@
           <span class="s-txt">对比项{{ setBigNum(index) }}：</span>
           <div class="sel-box">
             <el-cascader
+              :ref="'cascader' + index"
               size="small"
               class="sel sel2"
               clearable
               placeholder="选择范围"
+              @change="secGraClaSubChange($event, index)"
               v-model="query.secGraClaSub[index]"
               :options="gradeList"
               :props="props"
@@ -79,7 +81,7 @@
               icon="el-icon-plus"
               size="small"
               round
-              @click="query.secGraClaSub.push([])"
+              @click="addQuery"
               >添加对比项</el-button
             >
             <el-button class="btn" round size="small" @click="getData"
@@ -97,7 +99,7 @@
  
 <script>
 import barChart from "@/components/charts/barChart";
-import { formatDate, downloadFile } from "@/utils";
+import { formatDate } from "@/utils";
 export default {
   components: {
     barChart,
@@ -114,6 +116,7 @@ export default {
         endDay: "",
         day: "",
         secGraClaSub: [],
+        secGraClaSubName: [],
       },
       props: {
         multiple: false,
@@ -181,6 +184,33 @@ export default {
     this._QueryData();
   },
   methods: {
+    addQuery() {
+      this.query.secGraClaSub.push([]);
+      this.query.secGraClaSubName.push("");
+    },
+    filterObj(arr, value) {
+      return arr.filter((item) => {
+        return value == item.value;
+      })[0];
+    },
+    secGraClaSubChange(event, index) {
+      console.log(event)
+      let txt = "";
+      let xx = this.filterObj(this.gradeList, event[0]);
+      txt += xx.label;
+      if (event.length > 1) {
+        let grade = this.filterObj(xx.children, event[1]);
+        txt += "/" + grade.label;
+        if (event.length > 2) {
+          let clazz = this.filterObj(grade.children, event[2]);
+          txt += "/" + clazz.label;
+          if (event.length > 3) {
+            txt += "/" + event[3];
+          }
+        }
+      }
+      this.query.secGraClaSubName[index] = txt;
+    },
     setBigNum(num) {
       let txt = "";
       let bigNum = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
@@ -238,16 +268,17 @@ export default {
     removeQuery(index) {
       let secGraClaSubLen = this.query.secGraClaSub.length;
       let xAxisLen = this.xAxis.length;
+      this.query.secGraClaSub.splice(index, 1);
+      this.query.secGraClaSubName.splice(index, 1);
+      this.xAxis.splice(index, 1);
       if (
         secGraClaSubLen == xAxisLen ||
         (secGraClaSubLen > xAxisLen && index < xAxisLen)
       ) {
-        this.xAxis.pop();
         this.chartData[0].value.splice(index, 1);
         this.chartData[1].value.splice(index, 1);
         this.$refs.barChart.initData(this.xAxis, this.chartData);
       }
-      this.query.secGraClaSub.splice(index, 1);
     },
     handleChangeTimeStart(val) {
       this.query.day = "";
@@ -287,6 +318,7 @@ export default {
         );
         return;
       }
+      this.xAxis = [...this.query.secGraClaSubName];
       this._QueryData();
     },
     setQuery() {
@@ -296,7 +328,7 @@ export default {
         query.params = this.query.secGraClaSub.map((item) => {
           let jsons = {};
           jsons.section = item[0];
-          item.length > 1 ? (jsons.grade = item[1]) : "";
+          item.length > 1 ? (jsons.clazz = item[1]) : "";
           item.length > 2 ? (jsons.classId = item[2]) : "";
           item.length == 4 ? (jsons.subjectName = item[3]) : "";
           return jsons;
@@ -327,9 +359,8 @@ export default {
       if (status === 0) {
         this.chartData[0].value = [];
         this.chartData[1].value = [];
-        this.xAxis = [];
+        this.xAxis = [...this.query.secGraClaSubName];
         data?.list.map((item, index) => {
-          this.xAxis.push("对比项" + this.setBigNum(index));
           this.chartData[0].value.push(item.periodCount);
           this.chartData[1].value.push(item.examCount);
         });
@@ -349,6 +380,7 @@ export default {
       if (status === 0) {
         if (!!data.list) {
           this.query.secGraClaSub = [];
+          this.query.secGraClaSubName = [];
           if (this.role != "ROLE_JITUAN") {
             this.gradeList =
               data.list?.map((item) => {
@@ -382,8 +414,9 @@ export default {
               };
             });
             this.gradeList = this.schoolList.map((item) => {
-              if (this.query.secGraClaSub.length < 10) {
+              if (this.query.secGraClaSub.length < 6) {
                 this.query.secGraClaSub.push([item.id]);
+                this.query.secGraClaSubName.push(item.schoolName);
               }
               return {
                 value: item.id,
@@ -404,6 +437,7 @@ export default {
         if (!!data.list) {
           if (this.role == "ROLE_XUEXIAO") {
             this.query.secGraClaSub = [];
+            this.query.secGraClaSubName = [];
             data.list?.map((item) => {
               let subList = item.subjectNames?.map((items) => {
                 return {
@@ -428,9 +462,12 @@ export default {
               });
             }) || [];
             this.gradeList.map((sec) => {
-              sec.gradeIds.map((items) => {
-                if (this.query.secGraClaSub.length < 10) {
-                  this.query.secGraClaSub.push([sec.value, items]);
+              sec.children.map((items) => {
+                if (this.query.secGraClaSub.length < 6) {
+                  this.query.secGraClaSub.push([sec.value, items.value]);
+                  this.query.secGraClaSubName.push(
+                    `${sec.label}/${items.label}`
+                  );
                 }
               });
             });
@@ -553,6 +590,6 @@ div::-webkit-scrollbar-thumb {
   }
 }
 .chart-box {
-  height: 600px;
+  height: 400px;
 }
 </style>
 \ No newline at end of file
@@ -66,12 +66,12 @@
           >
             <li class="clazz-li" v-for="clazz in item.classList" :key="item.id">
               <div class="clazz-item">
-                <p class="clazz-name">
+                <i
+                  class="el-icon-edit"
+                  @click.stop="setClass(clazz, item.gradeName)"
+                ></i>
+                <p class="clazz-name ellipsis">
                   {{ clazz.className }}
-                  <i
-                    class="el-icon-edit"
-                    @click.stop="setClass(clazz, item.gradeName)"
-                  ></i>
                 </p>
                 <div class="clazz-class">
                   <p>学生：{{ clazz.studentCount }}个</p>
@@ -566,11 +566,17 @@ export default {
     }
  
     .clazz-item {
-      min-width: 100px;
-      box-sizing: border-box;
+      width: 96px;
       padding: 14px 18px 14px 14px;
       border-radius: 10px;
       box-shadow: 1px 1px 3px #888;
+      box-sizing: content-box;
+      position: relative;
+    }
+    .el-icon-edit {
+      position: absolute;
+      right: 5px;
+      top: 5px;
     }
     .clazz-name {
       font-size: 16px;
@@ -578,11 +584,6 @@ export default {
       line-height: 18px;
       padding-bottom: 6px;
       position: relative;
-      .el-icon-edit {
-        position: absolute;
-        right: -16px;
-        top: -10px;
-      }
     }
     .clazz-class {
       // display: flex;
@@ -61,8 +61,8 @@
           placeholder="选择类型"
         >
           <el-option disabled label="请选择" :value="9"></el-option>
-          <el-option label="已分配教师" :value="0"></el-option>
-          <el-option label="未分配教师" :value="1"></el-option>
+          <el-option label="已分配任课信息" :value="0"></el-option>
+          <el-option label="未分配任课信息" :value="1"></el-option>
         </el-select>
         <el-input
           placeholder="请输入老师姓名"
@@ -251,7 +251,12 @@
         </div>
       </div>
     </div>
-    <el-dialog :close-on-click-modal="false" title="导入教师名单" :visible.sync="diaUp" width="600">
+    <el-dialog
+      :close-on-click-modal="false"
+      title="导入教师名单"
+      :visible.sync="diaUp"
+      width="600"
+    >
       <up-load
         id="downTeacher"
         :url="url"
@@ -267,7 +272,8 @@
         <el-button @click="diaUp = false">取 消</el-button>
       </div>
     </el-dialog>
-    <el-dialog :close-on-click-modal="false"
+    <el-dialog
+      :close-on-click-modal="false"
       :title="
         isAdd ? '添加教师' : setTercherType == 1 ? '编辑教师信息' : '管理班级'
       "
@@ -357,10 +363,10 @@
               class="sel-t"
               collapse
               clearable
-              placeholder="选择班级-科目"
+              placeholder="选择年级-科目-班级"
               v-model="item.classId"
-              :options="classList"
-              :props="{ expandTrigger: 'hover' }"
+              :options="gradeSubListClass"
+              :props="{ expandTrigger: 'hover', multiple: true }"
             ></el-cascader>
             <el-cascader
               size="small"
@@ -415,6 +421,7 @@ export default {
       gradeList: [],
       classList: [],
       gradeClassSubList: [],
+      gradeSubListClass: [],
       teacherList: [],
       teacherRoleList: [
         //角色
@@ -602,12 +609,14 @@ export default {
                   ?.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],
+            item.classId.map((clazz) => {
+              teacherCourseList.push({
+                classId: clazz[2],
+                className:
+                  this.classList.find((items) => items.value == clazz[2])
+                    ?.label || "",
+                subjectName: clazz[1],
+              });
             });
           } else {
             gradeGroupList.push({
@@ -645,20 +654,25 @@ export default {
           ],
         });
       });
+      let teacherClassId = [];
       this.formTeacher.teacherCourseList?.map((item) => {
+        teacherClassId.push([
+          item.grade,
+          item.subjectName,
+          this.classList.find(
+            (items) =>
+              items.value == item.classId ||
+              items.label.includes(item.className)
+          ).value,
+        ]);
+      });
+      if (teacherClassId.length) {
         this.formTeacher.roleList.push({
           id: randomWord(true, 16, 20),
           roleId: 7,
-          classId: [
-            this.classList.find(
-              (items) =>
-                items.value == item.classId ||
-                items.label.includes(item.className)
-            ).value,
-            item.subjectName,
-          ],
+          classId: [...teacherClassId],
         });
-      });
+      }
       this.formTeacher.gradeGroupList?.map((item) => {
         this.formTeacher.roleList.push({
           id: randomWord(true, 16, 20),
@@ -865,6 +879,23 @@ export default {
                 };
               }),
             });
+            this.gradeSubListClass.push({
+              value: item.grade,
+              label: item.gradeName,
+              id: item.grade,
+              children: item.subjectNames.map((items) => {
+                return {
+                  value: items,
+                  label: items,
+                  children: item.classList.map((clazz) => {
+                    return {
+                      value: clazz.id,
+                      label: clazz.className,
+                    };
+                  }),
+                };
+              }),
+            });
             return {
               value: item.grade,
               label: item.gradeName,