添加年级功能优化

src/components/manage/main/UserGroupManagement.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-loading="loading">
     <div style="display: flex">
       <div>
         <!--<div class="block">
@@ -26,9 +26,10 @@
         <el-button
           type="primary"
           icon="el-icon-plus"
-          @click="CreatGroup()"
-          >添加年级</el-button
+          @click="dialogVisible = true"
         >
+          添加年级
+        </el-button>
       </div>
     </div>
     <!--记录展示start-->
@@ -52,29 +53,55 @@
             type="danger"
             size="small"
             @click="deleteGroup(scope.row)"
-            >删除</el-button
           >
+            删除
+          </el-button>
           <!-- <el-button type="text" @click="open">点击打开 Message Box</el-button>-->
           <el-button
             v-if="scope.row.groupName != '默认年级'"
             type="primary"
             size="small"
             @click="updateGroupName(scope.row)"
-            >更新组名</el-button
           >
+            更新组名
+          </el-button>
           <el-button
             type="primary"
             size="small"
             @click="getGroupUserList(scope.row)"
-            >查看成员</el-button
-          >
-          <el-button type="primary" size="small" @click="goGroupAuth(scope.row)"
-            >查看权限</el-button
           >
+            查看成员
+          </el-button>
+          <el-button type="primary" size="small" @click="goGroupAuth(scope.row)">
+            查看权限
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
     <!--记录展示end-->
+
+    <el-dialog
+      title="添加年级"
+      :visible.sync="dialogVisible"
+      width="680px"
+      :before-close="handleClose"
+    >
+
+      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+      <div style="margin: 15px 0;"></div>
+      <el-checkbox-group v-model="checkedGrades" @change="handleCheckedCitiesChange">
+        <el-checkbox v-for="grade in gradeOptions" :label="grade" :key="grade">
+          {{ grade }}
+        </el-checkbox>
+      </el-checkbox-group>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button v-loading="loading" :disabled="loading" type="primary" @click="creatGroupBatch">
+          确 定
+        </el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -86,13 +113,20 @@ export default {
       institutionNo: "", //学校编码
       tableData: [], //年级数据
       ids: [],
+
+      isIndeterminate: false,
+      checkAll: false,
+      gradeOptions: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '高一年级', '高二年级', '高三年级'],
+      checkedGrades: [],
+      dialogVisible: false,
+      loading: false
     };
   },
   created() {
     this.institutionNo = sessionStorage.getItem(
       "f7a42fe7211f98ac7a60a285ac3a9527"
-    );
-    this.getData();
+    )
+    this.getData()
   },
   methods: {
     getData() {
@@ -103,57 +137,69 @@ export default {
           this.tableData = response.data;
           // console.log(response.data)
         }
-      );
+      )
+    },
+
+    handleClose() {
+      this.checkedGrades = []
+      this.isIndeterminate = false
+      this.checkAll = false
+      this.dialogVisible = false
+    },
+
+    handleCheckAllChange(val) {
+      this.checkedGrades = val ? this.gradeOptions : []
+      this.isIndeterminate = false
+    },
+
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.gradeOptions.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.gradeOptions.length;
     },
-    //添加年级
-    CreatGroup() {
-      this.$prompt("请输入组名", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
 
+    // 添加年级
+    creatGroupBatch() {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+      let tempGradeArr = []
+      let tempArr = tempGradeArr.map((item) => {
+        return this.creatGroup(item)
       })
-        .then(({ value }) => {
-            if (value.trim() == "") {
-              this.$message.warning("输入不能为空")
-            return  ;
-          }
-          this.$http.post(
-            "/group/add",
-            {
-              groupName: value.trim(),
-              institutionNo: this.institutionNo,
-            },
-            (response) => {
-              //console.log("结果", response);
-              if (response.code == 200) {
-                this.$message({
-                  message: "添加新组: " + value + "  成功",
-                  type: "success",
-                });
-                this.getData();
-              } else {
-                this.$message({
-                  message: "添加失败",
-                  type: "error",
-                });
-                this.getData();
-              }
-            }
-          );
+      Promise.all(tempArr).then(() => {
+        this.loading = false
+        this.handleClose()
+        this.getData()
+      }).catch((err) => {
+        this.loading = false
+        console.log('发生错误： ', err)
+      })
+    },
 
-          // this.$message({
-          //   type: "success",
-          //   message: "添加新组: " + value + "  成功",
-          // });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "取消输入",
-          });
-        });
-      this.getData();
+    creatGroup(gradeName) {
+      return new Promise((resolve, reject) => {
+        this.$http.post(
+          "/group/add",
+          {
+            groupName: gradeName.trim(),
+            institutionNo: this.institutionNo,
+          },
+          (response) => {
+            //console.log("结果", response);
+            if (response.code == 200) {
+              resolve()
+            } else {
+              reject()
+            }
+          }, () => {
+            reject()
+          }
+        )
+      })
     },
+
     //删除组
     deleteGroup(row) {
       this.$confirm("此操作将永久删除该组, 是否继续?", "提示", {
@@ -248,4 +294,24 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  .el-checkbox {
+    margin: 18px 16px;
+  }
+
+  .el-dialog__footer {
+    .el-button {
+      .el-loading-spinner {
+        margin-top: 0;
+        transform: translateY(-50%);
+
+        .circular {
+          width: 28px;
+          height: 28px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/MainTable.vue

@@ -276,10 +276,17 @@ export default {
   position: relative;
 }
 </style>
-<style scoped>
+<style lang="scss" scoped>
 .wrap {
   width: 1200px;
   margin: 0 auto;
+  height: calc(100vh - 70px);
+
+  .cardList {
+    height: calc(100% - 150px);
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
 }
 
 .link {