预警全选

shanXiPlatform/src/views/systemManagement/earlyWarningManagement/addEarlyWarningManagement.vue

@@ -51,7 +51,8 @@
         </el-form-item>
         <el-form-item label="检查人员:"  prop="warnTargetArr">
             <div style="border:1px solid #ccc;padding:15px;width:800px ">
-              <el-checkbox-group v-model="formData.warnTargetArr"  :disabled="isDetail" v-if="personList && personList.length>0">
+              <el-checkbox :indeterminate="isIndeterminate" :disabled="isDetail" v-model="checkAll" v-if="personList && personList.length>0" @change="handleCheckAllChange">全选</el-checkbox>
+              <el-checkbox-group v-model="formData.warnTargetArr"  :disabled="isDetail" v-if="personList && personList.length>0"  @change="handleCheckedCitiesChange">
                 <el-checkbox v-for="item in personList" :key="item.uId" :label="item.uId">{{item.personnelName}}</el-checkbox>
               </el-checkbox-group>
               <span v-if="!personList || personList.length == 0" style="color:#cccccc">暂无数据</span>
@@ -231,7 +232,10 @@ export default {
         levelDepotHouse: [{ required: true, message: '请选择预警单位类型', trigger: 'change' }],
       },
       isDetail:false,
-      loading:false
+      loading:false,
+      checkAll: false,
+      isIndeterminate: true,
+      personListIds: []
     }
   },
   mounted() {
@@ -308,6 +312,8 @@ export default {
             warnTargetIdArr.push(Number(item.substring(0, item.indexOf("|"))))
           })
           this.formData.warnTargetArr = JSON.parse(JSON.stringify(warnTargetIdArr))
+          this.checkAll = this.formData.warnTargetArr.length === this.personList.length;
+          this.isIndeterminate = this.formData.warnTargetArr.length > 0 && this.formData.warnTargetArr.length < this.personList.length;
         }
       }).catch((err) => {
         console.log(err)
@@ -369,7 +375,23 @@ export default {
         //   this.personList.push(JSON.parse(JSON.stringify(person)))
         // }
         this.personList = res.data
+        this.personList.forEach(item => {
+          this.personListIds.push(item.uId)
+        })
       })
+    },
+    handleCheckAllChange(val) {
+      if(val){
+        this.formData.warnTargetArr = this.personListIds
+      }else{
+        this.formData.warnTargetArr = []
+      }
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.personList.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.personList.length;
     }
   }
 }