yang

src/views/backstage/project/index.vue

@@ -225,13 +225,22 @@
       <div>
         <el-form>
           <el-form-item label="已上报的所有村" prop="adminVillageLevelValue">
-            <el-select style="width: 100%" multiple clearable filterable v-model="form.villageSelectValue" placeholder="请选择">
+            <el-select style="width: 100%" 
+              multiple 
+              clearable 
+              filterable 
+              v-model="form.villageSelectValue" 
+              placeholder="请选择"
+              @change="changeSelect"
+              @focus="focus"
+            >
+              <el-checkbox v-model="checkedAll" @change='selectAll'>全选</el-checkbox>
               <el-option
                 v-for="item in villageListOptions"
                 :key="item.value"
                 :label="item.label"
-                :value="item.value">
-              </el-option>
+                :value="item.value"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-form>
@@ -312,7 +321,10 @@ export default {
       defaultProps: {
         children: 'children',
         label: 'label'
-      }
+      },
+
+      // 当前整改任务是否全选了
+      checkedAll: false,
 
     };
   },
@@ -614,11 +626,45 @@ export default {
           this.form.villageSelectValue = JSON.parse(this.form.villageSelectValue);
         }
       });
+    },
+
+    // 派发整改任务-全选
+    selectAll() {
+      let selectedArray = []
+      if (this.checkedAll) {
+        this.villageListOptions.map((item) => {
+          selectedArray.push(item.value)
+        })
+      } else {
+        selectedArray = []
+      }
+      this.form.villageSelectValue = selectedArray
+    },
+    // 值改变时（判断是否全选了）
+    changeSelect(val){
+      if (val.length == this.villageListOptions.length) {
+        this.checkedAll = true
+      } else {
+        this.checkedAll = false
+      }
+    },
+    // 派发整改任务输入框-获取焦点时（判断是否全选了）
+    focus(){
+      let n = this.form.villageSelectValue.length
+      if (n == this.villageListOptions.length) {
+        this.checkedAll = true
+      } else {
+        this.checkedAll = false
+      }
     }
   }
 };
 </script>
 
 <style scoped>
-  
+  .el-checkbox {
+    text-align: right;
+    width: 100%;
+    padding: 10px 20px;
+  }
 </style>