全选功能

src/views/user/role/DialogForm.vue

@@ -9,15 +9,21 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="角色名称">
-            <el-input v-model="form.name" autocomplete="off" />
+            <el-input v-model="form.name" autocomplete="off"/>
           </el-form-item>
         </el-col>
       </el-row>
       <el-form-item label="备注说明">
-        <el-input v-model="form.remark" type="textarea" autocomplete="off" />
+        <el-input v-model="form.remark" type="textarea" autocomplete="off"/>
       </el-form-item>
       <el-form-item v-for="authority in listAllAuthorities" :key="authority.id" :label="authority.remark">
-        <el-checkbox :key="authority.id" :label="authority.id" @change="checkAll">
+        <el-checkbox
+          :key="authority.id"
+          :label="authority.id"
+          :value="allCheckedState[authority.id] === 2"
+          :indeterminate="allCheckedState[authority.id] === 1"
+          @change="checkAll(authority)"
+        >
           全选
         </el-checkbox>
         <el-checkbox-group v-model="form.listAuthorities">
@@ -25,6 +31,7 @@
             v-for="children in authority.children"
             :key="children.id"
             :label="children.id"
+            @change="changeAllCheckedState(authority)"
           >
             {{ children.remark + '[' + children.name + ']' }}
           </el-checkbox>
@@ -48,14 +55,20 @@ export default {
       visible: false,
       isLoading: false,
       listAllAuthorities: [],
-      form: {}
+      form: {
+        listAuthorities: []
+      },
+      allCheckedState: {}
     }
   },
+  computed: {},
   created() {
   },
   methods: {
     open(data) {
       this.visible = true
+      this.listAllAuthorities = []
+      this.allCheckedState = {}
       if (!data.listAuthorities) {
         data.listAuthorities = []
       }
@@ -64,12 +77,53 @@ export default {
       this.isLoading = true
       findAllAuthorities().then(listAllAuthorities => {
         this.listAllAuthorities = listAllAuthorities
+        this.listAllAuthorities.forEach(authority => {
+          this.changeAllCheckedState(authority)
+        })
       }).finally(() => {
         this.isLoading = false
       })
     },
-    checkAll(v) {
-      console.log(v)
+    changeAllCheckedState(authority) {
+      console.log(this.form.listAuthorities)
+      console.log(authority)
+      let findCount = 0
+      authority.children.forEach(o => {
+        if (this.form.listAuthorities.indexOf(o.id) !== -1) {
+          findCount++
+        }
+      })
+      if (findCount === 0) {
+        this.allCheckedState[authority.id] = 0
+      } else if (findCount === authority.children.length) {
+        this.allCheckedState[authority.id] = 2
+      } else {
+        this.allCheckedState[authority.id] = 1
+      }
+    },
+    checkAll(authority) {
+      const ids = []
+      authority.children.forEach(o => {
+        ids.push(o.id)
+      })
+      let needRemoveAll = true
+      ids.forEach(id => {
+        if (this.form.listAuthorities.indexOf(id) === -1) {
+          needRemoveAll = false
+          this.form.listAuthorities.push(id)
+          this.allCheckedState[authority.id] = 2
+        }
+      })
+      if (needRemoveAll) {
+        const tmp = []
+        this.form.listAuthorities.forEach(id => {
+          if (ids.indexOf(id) === -1) {
+            tmp.push(id)
+          }
+        })
+        this.form.listAuthorities = tmp
+        this.allCheckedState[authority.id] = 0
+      }
     },
     handleSubmit() {
       console.log(this.form)