JeecgBoot 2.1.1 代码生成器AI版本发布

ant-design-vue-jeecg/src/views/system/modules/UserRoleModal.vue

@@ -18,6 +18,7 @@
           :treeData="treeData"
           @expand="onExpand"
           @select="onTreeNodeSelect"
+          :selectedKeys="selectedKeys"
           :expandedKeys="expandedKeysss"
           :checkStrictly="checkStrictly">
           <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
@@ -30,8 +31,10 @@
     <div class="drawer-bootom-button">
       <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
         <a-menu slot="overlay">
+          <!-- 简化Tree逻辑，使用默认checkStrictly为false的行为，即默认父子关联
           <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
           <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
+          -->
           <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
           <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
           <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
@@ -67,25 +70,28 @@
         treeData: [],
         defaultCheckedKeys:[],
         checkedKeys:[],
+        halfCheckedKeys:[],
         expandedKeysss:[],
         allTreeKeys:[],
         autoExpandParent: true,
-        checkStrictly: true,
+        checkStrictly: false,
         title:"角色权限配置",
         visible: false,
         loading: false,
+        selectedKeys:[]
       }
     },
     methods: {
       onTreeNodeSelect(id){
-        this.$refs.datarule.show(id[0],this.roleId)
-      },
-      onCheck (o) {
-        if(this.checkStrictly){
-          this.checkedKeys = o.checked;
-        }else{
-          this.checkedKeys = o
+        if(id && id.length>0){
+          this.selectedKeys = id
         }
+        this.$refs.datarule.show(this.selectedKeys[0],this.roleId)
+      },
+      onCheck (checkedKeys, { halfCheckedKeys }) {
+        // 保存选中的和半选中的，后面保存的时候合并提交
+        this.checkedKeys = checkedKeys
+        this.halfCheckedKeys = halfCheckedKeys
       },
       show(roleId){
         this.roleId=roleId
@@ -116,24 +122,18 @@
         this.checkedKeys = this.allTreeKeys
       },
       cancelCheckALL () {
-        //this.checkedKeys = this.defaultCheckedKeys
         this.checkedKeys = []
       },
-      switchCheckStrictly (v) {
-        if(v==1){
-          this.checkStrictly = false
-        }else if(v==2){
-          this.checkStrictly = true
-        }
-      },
       handleCancel () {
         this.close()
       },
       handleSubmit(){
         let that = this;
+        let checkedKeys = [...that.checkedKeys, ...that.halfCheckedKeys]
+        const permissionIds = checkedKeys.join(",")
         let params =  {
           roleId:that.roleId,
-          permissionIds:that.checkedKeys.join(","),
+          permissionIds,
           lastpermissionIds:that.defaultCheckedKeys.join(","),
         };
         that.loading = true;
@@ -150,6 +150,15 @@
           }
         })
       },
+      convertTreeListToKeyLeafPairs(treeList, keyLeafPair = []) {
+        for(const {key, isLeaf, children} of treeList) {
+          keyLeafPair.push({key, isLeaf})
+          if(children && children.length > 0) {
+            this.convertTreeListToKeyLeafPairs(children, keyLeafPair)
+          }
+        }
+        return keyLeafPair;
+      },
     },
   watch: {
     visible () {
@@ -157,11 +166,23 @@
         queryTreeListForRole().then((res) => {
           this.treeData = res.result.treeList
           this.allTreeKeys = res.result.ids
+          const keyLeafPairs = this.convertTreeListToKeyLeafPairs(this.treeData)
           queryRolePermission({roleId:this.roleId}).then((res)=>{
-              this.checkedKeys = [...res.result];
-              this.defaultCheckedKeys = [...res.result];
-              this.expandedKeysss = this.allTreeKeys;
-              //console.log(this.defaultCheckedKeys)
+            // 过滤出 leaf node 即可，即选中的
+            // Tree组件中checkStrictly默认为false的时候，选中子节点，父节点会自动设置选中或半选中
+            // 保存 checkedKeys 以及 halfCheckedKeys 以便于未做任何操作时提交表单数据
+            const checkedKeys = [...res.result].filter(key => {
+              const keyLeafPair = keyLeafPairs.filter(item => item.key === key)[0]
+              return keyLeafPair && keyLeafPair.isLeaf
+            })
+            const halfCheckedKeys = [...res.result].filter(key => {
+              const keyLeafPair = keyLeafPairs.filter(item => item.key === key)[0]
+              return keyLeafPair && !keyLeafPair.isLeaf
+            })
+            this.checkedKeys = [...checkedKeys];
+            this.halfCheckedKeys = [...halfCheckedKeys]
+            this.defaultCheckedKeys = [...halfCheckedKeys, ...checkedKeys];
+            this.expandedKeysss = this.allTreeKeys;
           })
         })
       }