全选,半选

src/views/business_ETA_manage/businessAuth.vue

@@ -8,7 +8,7 @@
             </div>
         </div>
         <div class="auth-wrap">
-            <el-checkbox v-model="checkAll" style="margin-bottom: 20px;">全选</el-checkbox>
+            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" style="margin-bottom: 20px;">全选</el-checkbox>
             <el-tree 
                 v-loading="treeLoading"
                 ref="checkboxTree"
@@ -17,7 +17,8 @@
                 :default-expand-all="false"
                 show-checkbox 
                 node-key="MenuId"
-                :default-checked-keys="defaultCheckedKeys">
+                :default-checked-keys="defaultCheckedKeys"
+                @check-change="()=>{handleCheckChange()}">
             </el-tree>
         </div>
     </div>
@@ -31,7 +32,8 @@ export default {
             authList:[],
             defaultCheckedKeys:[],
             treeLoading:false,
-            checkAll:false
+            checkAll:false,
+            isIndeterminate:false
         };
     },
     watch:{
@@ -40,7 +42,9 @@ export default {
                 const topLevelNodes = this.authList.map(i=>i.MenuId)
                 this.$refs.checkboxTree.setCheckedKeys(topLevelNodes)
             }else{
-                this.$refs.checkboxTree.setCheckedKeys([])
+                if(!this.isIndeterminate){
+                    this.$refs.checkboxTree.setCheckedKeys([])
+                }
             }
         }
     },
@@ -58,6 +62,7 @@ export default {
                 const {List,ChoiceList=[],HalfChoiceList=[]} = res.Data
                 this.authList = List||[]
                 this.defaultCheckedKeys = ChoiceList.filter((item)=>!HalfChoiceList.some((halfItem)=>item===halfItem))
+                this.handleCheckChange(ChoiceList,HalfChoiceList)
             })
         },
         async handleBtnClik(type){
@@ -81,6 +86,24 @@ export default {
                 this.$message.success('权限设置成功')
             }
             this.$router.push('/businessETAList')
+        },
+        handleCheckChange(choiceList,HalfChoiceList){
+            const keys = choiceList||this.$refs.checkboxTree.getCheckedKeys()
+            const halfKeys = HalfChoiceList||this.$refs.checkboxTree.getHalfCheckedKeys()
+            const ChoiceList = Array.from(new Set([...keys,...halfKeys]))
+            const topLevelNodes = this.authList.map(i=>i.MenuId)
+            let nodeLength = 0
+            topLevelNodes.forEach(i=>{
+                if(ChoiceList.includes(i)){nodeLength++}
+                if(!ChoiceList.includes(i)){nodeLength--}
+            })
+            if(nodeLength===topLevelNodes.length){
+                this.checkAll = true
+                this.isIndeterminate = false
+            }else{
+                this.checkAll = false
+                this.isIndeterminate = Boolean(ChoiceList.length)
+            }
         }
     },
     mounted(){