考试安排增加全选功能

src/views/education/examManagement/examArrangement/applicableProducts/checkGoodsList.vue

@@ -53,7 +53,17 @@
           <el-button :size="size" @click="init">重置</el-button>
         </div>
         <div>
-          <el-checkbox-group v-model="goodsActiveList">
+          <el-checkbox
+            style="margin: 20px 0 10px"
+            :indeterminate="isIndeterminate"
+            v-model="checkAll"
+            @change="handleCheckAllChange"
+            >全选</el-checkbox
+          >
+          <el-checkbox-group
+            v-model="goodsActiveList"
+            @change="handleCheckedChange"
+          >
             <ul class="ul_style">
               <li
                 style="margin-bottom: 6px"
@@ -90,12 +100,29 @@ export default {
       formData: {},
       goodsList: [],
       goodsActiveList: [],
+      checkAll: false,
+      isIndeterminate: true,
     };
   },
   methods: {
+    handleCheckAllChange(val) {
+      this.goodsActiveList = val ? this.getAllIdArr() : this.getData.goodsId;
+      this.isIndeterminate = false;
+    },
+    getAllIdArr() {
+      return this.goodsList.map((e) => e.goodsId);
+    },
+    handleCheckedChange(value) {
+      let checkedCount = value.length;
+      this.checkAll =
+        this.goodsList.length && checkedCount === this.goodsList.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.goodsList.length;
+    },
     openBoxGoods(getData) {
-      this.goodsActiveList = [];
       this.getData = JSON.parse(JSON.stringify(getData));
+      this.goodsActiveList = this.getData.goodsId;
+      this.handleCheckedChange(this.goodsActiveList);
       this.getSujects();
       this.init();
       this.dialogGoods = true;
@@ -144,7 +171,6 @@ export default {
   align-items: center;
 }
 .ul_style {
-  margin-top: 20px;
   max-height: 500px;
   overflow: auto;
 }