From e554106eb971a1b91444376a2366dd265be19c48 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Mon, 6 Jan 2025 14:32:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8=E6=96=B0?=
 =?UTF-8?q?=E7=89=88=E8=8F=9C=E5=8D=95=E5=8B=BE=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/system/role/data.tsx  |  2 +-
 apps/web-antd/src/views/system/role/index.vue | 16 +++------
 .../src/views/system/role/role-drawer.vue     | 36 +++++++++++--------
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/apps/web-antd/src/views/system/role/data.tsx b/apps/web-antd/src/views/system/role/data.tsx
index 85692a28..31b5d19f 100644
--- a/apps/web-antd/src/views/system/role/data.tsx
+++ b/apps/web-antd/src/views/system/role/data.tsx
@@ -1,3 +1,4 @@
+import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { DictEnum } from '@vben/constants';
@@ -5,7 +6,6 @@ import { getPopupContainer } from '@vben/utils';
 
 import { Tag } from 'ant-design-vue';
 
-import { type FormSchemaGetter } from '#/adapter/form';
 import { getDictOptions } from '#/utils/dict';
 
 /**
diff --git a/apps/web-antd/src/views/system/role/index.vue b/apps/web-antd/src/views/system/role/index.vue
index 3b280a64..d72ecab0 100644
--- a/apps/web-antd/src/views/system/role/index.vue
+++ b/apps/web-antd/src/views/system/role/index.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { useAccess } from '@vben/access';
-import {
-  Page,
-  useVbenDrawer,
-  useVbenModal,
-  type VbenFormProps,
-} from '@vben/common-ui';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
 import {
@@ -22,11 +20,7 @@ import {
   Space,
 } from 'ant-design-vue';
 
-import {
-  useVbenVxeGrid,
-  vxeCheckboxChecked,
-  type VxeGridProps,
-} from '#/adapter/vxe-table';
+import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
 import {
   roleChangeStatus,
   roleExport,
diff --git a/apps/web-antd/src/views/system/role/role-drawer.vue b/apps/web-antd/src/views/system/role/role-drawer.vue
index 340966cf..8e31b7d5 100644
--- a/apps/web-antd/src/views/system/role/role-drawer.vue
+++ b/apps/web-antd/src/views/system/role/role-drawer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -8,7 +8,7 @@ import { cloneDeep, eachTree } from '@vben/utils';
 import { useVbenForm } from '#/adapter/form';
 import { menuTreeSelect, roleMenuTreeSelect } from '#/api/system/menu';
 import { roleAdd, roleInfo, roleUpdate } from '#/api/system/role';
-import { TreeSelectPanel } from '#/components/tree';
+import { MenuSelectTable } from '#/components/tree';
 
 import { drawerSchema } from './data';
 
@@ -36,7 +36,6 @@ const menuTree = ref<any[]>([]);
 async function setupMenuTree(id?: number | string) {
   if (id) {
     const resp = await roleMenuTreeSelect(id);
-    formApi.setFieldValue('menuIds', resp.checkedKeys);
     const menus = resp.menus;
     // i18n处理
     eachTree(menus, (node) => {
@@ -44,15 +43,20 @@ async function setupMenuTree(id?: number | string) {
     });
     // 设置菜单信息
     menuTree.value = resp.menus;
+    // keys依赖于menu 需要先加载menu
+    await nextTick();
+    await formApi.setFieldValue('menuIds', resp.checkedKeys);
   } else {
     const resp = await menuTreeSelect();
-    formApi.setFieldValue('menuIds', []);
     // i18n处理
     eachTree(resp, (node) => {
       node.label = $t(node.label);
     });
     // 设置菜单信息
     menuTree.value = resp;
+    // keys依赖于menu 需要先加载menu
+    await nextTick();
+    await formApi.setFieldValue('menuIds', []);
   }
 }
 
@@ -81,7 +85,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
 /**
  * 这里拿到的是一个数组ref
  */
-const menuSelectRef = ref();
+const menuSelectRef = ref<InstanceType<typeof MenuSelectTable>>();
 
 async function handleConfirm() {
   try {
@@ -91,7 +95,7 @@ async function handleConfirm() {
       return;
     }
     // 这个用于提交
-    const menuIds = menuSelectRef.value?.[0]?.getCheckedKeys() ?? [];
+    const menuIds = menuSelectRef.value?.getCheckedKeys() ?? [];
     // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
     const data = cloneDeep(await formApi.getValues());
     data.menuIds = menuIds;
@@ -120,17 +124,19 @@ function handleMenuCheckStrictlyChange(value: boolean) {
 </script>
 
 <template>
-  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[800px]">
     <BasicForm>
       <template #menuIds="slotProps">
-        <!-- check-strictly为readonly 不能通过v-model绑定 -->
-        <TreeSelectPanel
-          ref="menuSelectRef"
-          v-bind="slotProps"
-          :check-strictly="formApi.form.values.menuCheckStrictly"
-          :tree-data="menuTree"
-          @check-strictly-change="handleMenuCheckStrictlyChange"
-        />
+        <div class="h-[600px] w-full">
+          <!-- check-strictly为readonly 不能通过v-model绑定 -->
+          <MenuSelectTable
+            ref="menuSelectRef"
+            :checked-keys="slotProps.value"
+            :association="formApi.form.values.menuCheckStrictly"
+            :menus="menuTree"
+            @update:association="handleMenuCheckStrictlyChange"
+          />
+        </div>
       </template>
     </BasicForm>
   </BasicDrawer>