fix: DEFECT-1375修复角色菜单保存未保存半选中菜单

ww
1 parent bd736be5
Showing 3 changed files with 31 additions and 71 deletions
src/components/Tree/src/Tree.vue
src/views/system/role/RoleDrawer.vue
src/views/tenant/role/RoleDrawer.vue
--- a/src/components/Tree/src/Tree.vue
View file @dd06472
+++ b/src/components/Tree/src/Tree.vue
View file @dd06472
@@ -397,22 +397,6 @@
           );
         });
       }
-      /**
-       * 只针对表格分页和组织列表分页的Tree（不是通过弹窗显示，默认是关闭的并且图标显示）
-       * 如果是其他弹窗出来的Tree（会造成默认是关闭的并且图标显示），则在对应页面重写css样式即可
-       * <style scoped lang="less">
-        :deep(.vben-basic-tree) {
-          width: 100% !important;
-        }
-        :deep(.is-unflod) {
-          display: none !important;
-        }
-        :deep(.is-flod) {
-          display: none !important;
-        }
-        </style>
-        TODO下次优化通过传配置值来动态显示那些页面需要默认展开或收起
-       */
       return () => {
         const { title, helpMessage, toolbar, search, checkable } = props;
         const showTitle = title || toolbar || search || slots.headerTitle;
@@ -454,51 +438,6 @@
   });
 </script>
 <style lang="less">
-  // 使用媒体查询兼容 1920 1280 1024 800
-  @media screen and (max-width: 1980px) {
-    .fold-left {
-      z-index: 1;
-      cursor: pointer;
-      position: absolute;
-      top: 0.85rem;
-      left: 1.1vw;
-    }
-
-    .fold-right {
-      z-index: 1;
-      cursor: pointer;
-      position: absolute;
-      top: 0.85rem;
-      left: 18.2vw;
-    }
-  }
-  @media screen and (max-width: 1280px) {
-    .fold-right {
-      z-index: 1;
-      cursor: pointer;
-      position: absolute;
-      top: 0.85rem;
-      left: 17.5vw;
-    }
-  }
-  @media screen and (max-width: 1024px) {
-    .fold-right {
-      z-index: 1;
-      cursor: pointer;
-      position: absolute;
-      top: 0.85rem;
-      left: 14.2vw;
-    }
-  }
-  @media screen and (max-width: 800px) {
-    .fold-right {
-      z-index: 1;
-      cursor: pointer;
-      position: absolute;
-      top: 0.85rem;
-      left: 18vw;
-    }
-  }
   @prefix-cls: ~'@{namespace}-basic-tree';
   .@{prefix-cls} {
--- a/src/views/system/role/RoleDrawer.vue
View file @dd06472
+++ b/src/views/system/role/RoleDrawer.vue
View file @dd06472
@@ -16,6 +16,7 @@
             toolbar
             ref="treeRef"
             :treeData="treeData"
+            @check="handleCheckClick"
             :replace-fields="{ title: 'name', key: 'id' }"
             :checkedKeys="roleMenus"
             title="菜单分配"
@@ -58,6 +59,7 @@
       const treeRef = ref<Nullable<TreeActionType>>();
       const checked = ref<string[]>([]); //需要选中的节点
       const spinning = ref(false);
+      const checkedKeysWithHalfChecked = ref<string[]>([]);
       const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 100,
@@ -126,7 +128,9 @@
               roleId.value = data.record.id;
               //通过角色id去获取角色对应的菜单的ids
-              roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+              checkedKeysWithHalfChecked.value = roleMenus.value = await getMenusIdsByRoleId(
+                data.record.id
+              );
               excludeHalfCheckedKeys(unref(treeData));
               await nextTick();
               unref(treeRef)?.setCheckedKeys(roleMenus.value);
@@ -147,14 +151,13 @@
         setDrawerProps({ confirmLoading: true });
         const { createMessage } = useMessage();
         try {
-          const menu = (unref(treeRef)?.getCheckedKeys() as string[]) || [];
           const values = await validate();
           const req = {
             id: roleId.value,
             name: values.name,
             remark: values.remark,
             status: values.status,
-            menu,
+            menu: unref(checkedKeysWithHalfChecked),
           };
           if (req.menu == undefined) return createMessage.error('请勾选权限菜单');
           saveOrUpdateRoleInfoWithMenu(req).then(() => {
@@ -239,6 +242,13 @@
         return needExcludeKeys;
       };
+      const handleCheckClick = (selectedKeys: string[], event: CheckEvent) => {
+        checkedKeysWithHalfChecked.value = [
+          ...selectedKeys,
+          ...(event.halfCheckedKeys as string[]),
+        ];
+      };
+
       return {
         spinning,
         registerDrawer,
@@ -248,6 +258,7 @@
         treeData,
         roleMenus,
         treeRef,
+        handleCheckClick,
       };
     },
   });
--- a/src/views/tenant/role/RoleDrawer.vue
View file @dd06472
+++ b/src/views/tenant/role/RoleDrawer.vue
View file @dd06472
@@ -15,6 +15,7 @@
             :treeData="treeData"
             :replaceFields="{ title: 'name', key: 'id' }"
             :checkedKeys="roleMenus"
+            @check="handleCheckClick"
             checkable
             toolbar
             ref="treeRef"
@@ -30,7 +31,7 @@
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './role.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree';
+  import { BasicTree, CheckEvent, TreeActionType, TreeItem } from '/@/components/Tree';
   const { t } = useI18n(); //加载国际化
   // 加载菜单数据
   import { getAdminMenuList, getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu';
@@ -58,6 +59,7 @@
       const treeRef = ref<Nullable<TreeActionType>>(null);
       const checked = ref<string[]>([]); //需要选中的节点
       const spinning = ref(false);
+      const checkedKeysWithHalfChecked = ref<string[]>([]);
       const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 90,
@@ -85,7 +87,6 @@
         const roleType = RoleEnum.TENANT_ADMIN;
         try {
           spinning.value = true;
-          // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
           if (!unref(treeData).length) {
             // 获取全部的菜单
@@ -108,7 +109,10 @@
             roleId.value = data.record.id;
             //通过角色id去获取角色对应的菜单的ids
-            roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+            checkedKeysWithHalfChecked.value = roleMenus.value = await getMenusIdsByRoleId(
+              data.record.id
+            );
+
             excludeHalfCheckedKeys(unref(treeData));
             await nextTick();
@@ -125,10 +129,8 @@
       const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
       async function handleSubmit() {
-        setDrawerProps({ loading: true });
-        setDrawerProps({ confirmLoading: true });
+        setDrawerProps({ loading: true, confirmLoading: true });
         const { createMessage } = useMessage();
-        const menu = (unref(treeRef)?.getCheckedKeys() as string[]) || [];
         try {
           const values = await validate();
           const req = {
@@ -137,7 +139,7 @@
             remark: values.remark,
             status: values.status,
             roleType: RoleEnum.TENANT_ADMIN,
-            menu,
+            menu: unref(checkedKeysWithHalfChecked),
           };
           if (req.menu == undefined) return createMessage.error('请勾选权限菜单');
           const res = await saveOrUpdateRoleInfoWithMenu(req);
@@ -226,6 +228,13 @@
         return needExcludeKeys;
       };
+      const handleCheckClick = (selectedKeys: string[], event: CheckEvent) => {
+        checkedKeysWithHalfChecked.value = [
+          ...selectedKeys,
+          ...(event.halfCheckedKeys as string[]),
+        ];
+      };
+
       return {
         spinning,
         registerDrawer,
@@ -235,6 +244,7 @@
         treeData,
         roleMenus,
         treeRef,
+        handleCheckClick,
       };
     },
   });