refactor: 租户套餐菜单替换为新版

apps/web-antd/src/views/system/tenantPackage/tenant-package-drawer.vue

@@ -1,23 +1,24 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import type { MenuOption } from '#/api/system/menu/model';
+
+import { computed, nextTick, ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep, eachTree, listToTree } from '@vben/utils';
+import { cloneDeep, eachTree } from '@vben/utils';
 
 import { omit } from 'lodash-es';
 
 import { useVbenForm } from '#/adapter/form';
-import { menuList, tenantPackageMenuTreeSelect } from '#/api/system/menu';
+import { menuTreeSelect, tenantPackageMenuTreeSelect } from '#/api/system/menu';
 import {
   packageAdd,
   packageInfo,
   packageUpdate,
 } from '#/api/system/tenant-package';
-import { TreeSelectPanel } from '#/components/tree';
+import { MenuSelectTable } from '#/components/tree';
 
 import { drawerSchema } from './data';
-import TreeItem from './tree-item';
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -36,25 +37,34 @@ const [BasicForm, formApi] = useVbenForm({
   wrapperClass: 'grid-cols-2',
 });
 
-async function setupMenuTreeSelect(id?: number | string) {
+const menuTree = ref<MenuOption[]>([]);
+async function setupMenuTree(id?: number | string) {
   if (id) {
     const resp = await tenantPackageMenuTreeSelect(id);
+    const menus = resp.menus;
+    // i18n处理
+    eachTree(menus, (node) => {
+      node.label = $t(node.label);
+    });
+    // 设置菜单信息
+    menuTree.value = resp.menus;
+    // keys依赖于menu 需要先加载menu
+    await nextTick();
     await formApi.setFieldValue('menuIds', resp.checkedKeys);
+  } else {
+    const resp = await menuTreeSelect();
+    // i18n处理
+    eachTree(resp, (node) => {
+      node.label = $t(node.label);
+    });
+    // 设置菜单信息
+    menuTree.value = resp;
+    // keys依赖于menu 需要先加载menu
+    await nextTick();
+    await formApi.setFieldValue('menuIds', []);
   }
 }
 
-const menuTree = ref<any[]>([]);
-async function setupMenuTree() {
-  const resp = await menuList();
-  const treeData = listToTree(resp, { id: 'menuId' });
-  // i18n处理
-  eachTree(treeData, (node) => {
-    node.menuName = $t(node.menuName);
-  });
-  // 设置菜单信息
-  menuTree.value = treeData;
-}
-
 const [BasicDrawer, drawerApi] = useVbenDrawer({
   onCancel: handleCancel,
   onConfirm: handleConfirm,
@@ -72,20 +82,14 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       // 通过setupMenuTreeSelect设置
       await formApi.setValues(omit(record, ['menuIds']));
     }
-    /**
-     * 加载菜单树和已勾选菜单
-     */
-    await Promise.all([setupMenuTree(), setupMenuTreeSelect(id)]);
+    // init菜单 注意顺序要放在赋值record之后 内部watch会依赖record
+    await setupMenuTree(id);
 
     drawerApi.drawerLoading(false);
   },
 });
 
-/**
- * 这里拿到的是一个数组ref
- */
-const menuSelectRef = ref();
-
+const menuSelectRef = ref<InstanceType<typeof MenuSelectTable>>();
 async function handleConfirm() {
   try {
     drawerApi.drawerLoading(true);
@@ -94,7 +98,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;
@@ -123,22 +127,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">
-        <TreeSelectPanel
-          ref="menuSelectRef"
-          v-bind="slotProps"
-          :check-strictly="formApi.form.values.menuCheckStrictly"
-          :expand-all-on-init="false"
-          :field-names="{ title: 'menuName', key: 'menuId' }"
-          :tree-data="menuTree"
-          @check-strictly-change="handleMenuCheckStrictlyChange"
-        >
-          <template #title="data">
-            <TreeItem :data="data" />
-          </template>
-        </TreeSelectPanel>
+        <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>