From 76f6bf936b859cdb7a3c7af9d40591420a84580a Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Tue, 12 Dec 2023 14:53:02 +0800
Subject: [PATCH] auto select menu permission after select button permission

---
 frontend/src/views/Role/Role.vue              | 13 +++---
 .../src/views/Role/components/RoleDetail.vue  | 43 +++++++++++++++----
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/frontend/src/views/Role/Role.vue b/frontend/src/views/Role/Role.vue
index 92c80cb..de36bf2 100644
--- a/frontend/src/views/Role/Role.vue
+++ b/frontend/src/views/Role/Role.vue
@@ -37,12 +37,12 @@
         </PGTable>
 
         <el-dialog :title="roleOperateTitle" v-model="showRoleOperate">
-            <UpdateRole v-if="operate === 'UpdateRole'" :role="editedRole" />
+            <UpdateRole v-if="operate === 'UpdateRole'" :role="selectedRole" />
             <AddRole v-if="operate === 'AddRole'" @rolesUpdated="updateRoles" @close="showRoleOperate = false"/>
         </el-dialog>
 
         <el-drawer :title="roleDetailTitle" v-model="showPermission" direction="rtl">
-            <RoleDetail :showEdit="showPermissionEdit" :role="editedRole" />
+            <RoleDetail :showEdit="showPermissionEdit" :role="selectedRole" />
         </el-drawer>
     </div>
 </template>
@@ -91,14 +91,15 @@ const showPermission = ref(false)
 const showPermissionEdit = ref(false)
 
 function showRoleDetail(role: any) {
+    selectedRole.value = role
     roleDetailTitle.value = "权限详情"
-    showPermissionEdit.value = false
+    showPermissionEdit.value = true
     showPermission.value = true
 }
 
-const editedRole = ref({})
+const selectedRole = ref({})
 function onEditRolePermission(role: any) {
-    editedRole.value = role
+    selectedRole.value = role
     roleDetailTitle.value = "编辑权限"
     showPermissionEdit.value = true
     showPermission.value = true
@@ -109,7 +110,7 @@ const showRoleOperate = ref(false)
 const operate = ref("")
 
 function onEditRoleInfo(role:any) {
-    editedRole.value = role
+    selectedRole.value = role
     roleOperateTitle.value = "编辑角色"
     showRoleOperate.value = true
     operate.value = "UpdateRole"
diff --git a/frontend/src/views/Role/components/RoleDetail.vue b/frontend/src/views/Role/components/RoleDetail.vue
index a15e617..63349c1 100644
--- a/frontend/src/views/Role/components/RoleDetail.vue
+++ b/frontend/src/views/Role/components/RoleDetail.vue
@@ -1,11 +1,12 @@
 <template>
     <div>
-        <el-tree ref="treeRef" :data="authData" :show-checkbox="showEdit" node-key="menuName" :check-strictly="strictly"
-            :default-expanded-keys="[2, 3]" :default-checked-keys="checkedKeys">
+        <el-tree ref="treeRef" :data="authData" :show-checkbox="showEdit" node-key="menuName" default-expand-all
+            :check-strictly="strictly" :default-expanded-keys="[2, 3]" :default-checked-keys="checkedKeys"
+            @check-change="onCheckChanged">
         </el-tree>
 
         <div class="footer" v-if="showEdit">
-            <el-button>取 消</el-button>
+            <el-button @click="onResetSelected">重 置</el-button>
             <el-button type="primary" @click="onChangePermission">确 定</el-button>
         </div>
     </div>
@@ -33,14 +34,14 @@ const props = defineProps({
     }
 })
 
-onMounted(() => {
-
-})
-
 const roleData = ref([])
 const checkedKeys = ref<string[]>([])
 const strictly = ref(true)
 
+onMounted(() => {
+    checkedKeys.value = props.role.menus.split(',').concat(props.role.buttons);
+})
+
 function onChangePermission() {
     let menus: string[] = []
     let buttons: string[] = []
@@ -60,7 +61,7 @@ function onChangePermission() {
         if (resp.code === RespCodeOK) {
             // TODO:
 
-            ElMessage.success("change role permission success:"+ resp.msg)
+            ElMessage.success("change role permission success:" + resp.msg)
         } else {
             ElMessage.error("failed to change role permission:" + resp.msg)
         }
@@ -69,6 +70,32 @@ function onChangePermission() {
     })
 }
 
+function onCheckChanged(data: any, checked: boolean) {
+    // 选中button权限时，自动选中页面权限
+    if (checked) {
+        if (!('isMenu' in data) || !data.isMenu) {
+            let checkedMenu: any = null
+            for (let i = 0; i < authData.length; i++) {
+                let childrens = authData[i].children
+                for (let n = 0; n < childrens.length; n++) {
+                    if (childrens[n].id == data.id) {
+                        console.log("found")
+                        checkedMenu = authData[i]
+                    }
+                }
+            }
+
+            if (checkedMenu) {
+                treeRef.value.setChecked(checkedMenu.menuName, true)
+            }
+        }
+    }
+}
+
+function onResetSelected() {
+    treeRef.value.setCheckedNodes([]);
+}
+
 </script>
 
 <style lang="scss" scoped>
-- 
Gitee