fix: role manange not save half checked menu keys

ww
1 parent ad0b74c2
Showing 3 changed files with 46 additions and 16 deletions
src/api/sys/model/menuModel.ts
src/views/system/role/RoleDrawer.vue
src/views/tenant/role/RoleDrawer.vue
--- a/src/api/sys/model/menuModel.ts
View file @6860bef
+++ b/src/api/sys/model/menuModel.ts
View file @6860bef
@@ -46,4 +46,5 @@ export interface MenuRecord {
   icon?: string;
   title?: string;
   key?: string;
+  checked?: boolean;
 }
--- a/src/views/system/role/RoleDrawer.vue
View file @6860bef
+++ b/src/views/system/role/RoleDrawer.vue
View file @6860bef
@@ -66,8 +66,6 @@
         showActionButtonGroup: false,
       });
-      const originMenus = ref();
-
       const transformName = (data: TreeData[]) => {
         return data.map((item) => {
           item.name = t(item.name);
@@ -81,8 +79,6 @@
       const userStore = useUserStore();
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
         allCheckedKeys.value = [];
-        originMenus.value = [];
-        allCheckedKeys.value.length = 0;
         resetFields();
         roleId.value = '';
         // 在打开弹窗时清除所有选择的菜单
@@ -110,13 +106,12 @@
           // 更新
           if (unref(isUpdate)) {
-            allCheckedKeys.value = [];
             checked.value = [];
             roleId.value = data.record.id;
             //通过角色id去获取角色对应的菜单的ids
-            originMenus.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id);
-
+            allCheckedKeys.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+            excludeHalfCheckedKeys(unref(treeData));
             await nextTick();
             treeRef.value.setCheckedKeys(roleMenus.value);
             setFieldsValue(data.record);
@@ -141,7 +136,7 @@
             name: values.name,
             remark: values.remark,
             status: values.status,
-            menu: unref(treeRef).getCheckedKeys() || [],
+            menu: unref(allCheckedKeys) || [],
           };
           if (req.menu == undefined) return createMessage.error('请勾选权限菜单');
           saveOrUpdateRoleInfoWithMenu(req).then(() => {
@@ -226,6 +221,25 @@
         return result;
       };
+      const excludeHalfCheckedKeys = (treeData: MenuRecord[]) => {
+        const needExcludeKeys: string[] = [];
+        const query = (data: MenuRecord[]) => {
+          data.forEach((item) => {
+            item.checked = roleMenus.value.includes(item.id);
+            if (item.children && item.children.length) {
+              query(item.children);
+              item.checked = item.children.every((item) => item.checked);
+            }
+            if (!item.checked) {
+              needExcludeKeys.push(item.id);
+            }
+          });
+        };
+        query(treeData);
+        roleMenus.value = unref(roleMenus).filter((key) => !needExcludeKeys.includes(key));
+        return needExcludeKeys;
+      };
+
       return {
         spinning,
         registerDrawer,
--- a/src/views/tenant/role/RoleDrawer.vue
View file @6860bef
+++ b/src/views/tenant/role/RoleDrawer.vue
View file @6860bef
@@ -52,7 +52,7 @@
     emits: ['success', 'register'],
     setup(_, { emit }) {
       const isUpdate = ref(true);
-      const treeData = ref<TreeItem[]>([]);
+      const treeData = ref<TreeData[]>([]);
       const roleMenus = ref<string[]>([]);
       const allCheckedKeys = ref<string[]>([]);
       const roleId = ref('');
@@ -66,8 +66,6 @@
         showActionButtonGroup: false,
       });
-      const originMenus = ref();
-
       const transformName = (data: TreeData[]) => {
         return data.map((item) => {
           item.name = t(item.name);
@@ -80,8 +78,6 @@
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
         allCheckedKeys.value = [];
-        originMenus.value = [];
-        allCheckedKeys.value.length = 0;
         resetFields();
         roleId.value = '';
         // 在打开弹窗时清除所有选择的菜单
@@ -108,12 +104,12 @@
           // 更新
           if (unref(isUpdate)) {
-            allCheckedKeys.value = [];
             checked.value = [];
             roleId.value = data.record.id;
             //通过角色id去获取角色对应的菜单的ids
-            originMenus.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+            allCheckedKeys.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+            excludeHalfCheckedKeys(unref(treeData));
             await nextTick();
             treeRef.value.setCheckedKeys(roleMenus.value);
@@ -140,7 +136,7 @@
             remark: values.remark,
             status: values.status,
             roleType: RoleEnum.TENANT_ADMIN,
-            menu: unref(treeRef).getCheckedKeys() || [],
+            menu: unref(allCheckedKeys) || [],
           };
           if (req.menu == undefined) return createMessage.error('请勾选权限菜单');
           const res = await saveOrUpdateRoleInfoWithMenu(req);
@@ -229,6 +225,25 @@
         return result;
       };
+      const excludeHalfCheckedKeys = (treeData: MenuRecord[]) => {
+        const needExcludeKeys: string[] = [];
+        const query = (data: MenuRecord[]) => {
+          data.forEach((item) => {
+            item.checked = roleMenus.value.includes(item.id);
+            if (item.children && item.children.length) {
+              query(item.children);
+              item.checked = item.children.every((item) => item.checked);
+            }
+            if (!item.checked) {
+              needExcludeKeys.push(item.id);
+            }
+          });
+        };
+        query(treeData);
+        roleMenus.value = unref(roleMenus).filter((key) => !needExcludeKeys.includes(key));
+        return needExcludeKeys;
+      };
+
       return {
         spinning,
         registerDrawer,