Merge pull request #1330 from colinin/fix-display-menu

fix: fix the display of the upper-level menu

apps/vben5/packages/@abp/platform/src/components/menus/MenuDrawer.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
 import type { MenuDto } from '../../types';
 import type { DataItemDto } from '../../types/dataDictionaries';
+import type { MenuDrawerState } from './types';
 
 import { ref } from 'vue';
 
 import { useVbenDrawer, useVbenForm } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import {
+import { formatToDate, formatToDateTime, isNullOrWhiteSpace } from '@abp/core';
-  formatToDate,
-  formatToDateTime,
-  isNullOrWhiteSpace,
-  listToTree,
-} from '@abp/core';
 import { Button, Card, message, Steps } from 'ant-design-vue';
 
 import { useMenusApi } from '../../api';
@@ -38,7 +34,7 @@ const parentMenu = ref<MenuDto>();
 const menuMetas = ref<DataItemDto[]>([]);
 const activeTabKey = ref<TabKey>('basic');
 
-const { createApi, getAllApi, getApi, updateApi } = useMenusApi();
+const { createApi, getApi, updateApi } = useMenusApi();
 const { getApi: getLayoutApi, getPagedListApi: getLayoutsApi } =
   useLayoutsApi();
 const { getApi: getDataDictionaryApi } = useDataDictionariesApi();
@@ -85,20 +81,14 @@ const [BasicForm, basicFormApi] = useVbenForm({
       },
     },
     {
-      component: 'ApiTreeSelect',
+      component: 'TreeSelect',
       componentProps: {
         allowClear: true,
-        api: async () => {
+        fieldNames: {
-          const { items } = await getAllApi();
+          label: 'displayName',
-          return listToTree(items, {
+          value: 'id',
-            id: 'id',
-            pid: 'parentId',
-          });
         },
-        labelField: 'displayName',
         onChange: onParentIdChange,
-        valueField: 'id',
-        childrenField: 'children',
       },
       fieldName: 'parentId',
       label: $t('AppPlatform.DisplayName:ParentMenu'),
@@ -183,6 +173,7 @@ async function onNextStep() {
 
 async function onInit() {
   metaFormApi.removeSchemaByFields(menuMetas.value.map((x) => x.name));
+  const { editMenu, rootMenus } = drawerApi.getData<MenuDrawerState>();
   basicFormApi.resetForm();
   metaFormApi.resetForm();
   activeTabKey.value = 'basic';
@@ -191,18 +182,18 @@ async function onInit() {
   submiting.value = false;
   menuMetas.value = [];
   currentStep.value = 0;
-  const { id, layoutId, parentId } = drawerApi.getData<MenuDto>();
+  onInitRootMenus(rootMenus);
-  if (!isNullOrWhiteSpace(layoutId)) {
+  if (!isNullOrWhiteSpace(editMenu?.layoutId)) {
-    await onLayoutChange(layoutId);
+    await onLayoutChange(editMenu!.layoutId);
-    await basicFormApi.setFieldValue('layoutId', layoutId);
+    await basicFormApi.setFieldValue('layoutId', editMenu!.layoutId);
   }
-  if (isNullOrWhiteSpace(id)) {
+  if (isNullOrWhiteSpace(editMenu?.id)) {
-    await basicFormApi.setFieldValue('parentId', parentId);
+    await basicFormApi.setFieldValue('parentId', editMenu!.parentId);
-    await onParentIdChange(parentId);
+    await onParentIdChange(editMenu!.parentId);
     drawerApi.setState({ title: $t('AppPlatform.Menu:AddNew') });
     return;
   }
-  const dto = await getApi(id);
+  const dto = await getApi(editMenu!.id);
   await basicFormApi.setValues(dto);
   // 编辑模式无需使用前缀
   await onParentIdChange(undefined);
@@ -252,6 +243,17 @@ async function onLayoutChange(layoutId?: string) {
   }
 }
 
+function onInitRootMenus(rootMenus: MenuDto[]) {
+  basicFormApi.updateSchema([
+    {
+      fieldName: 'parentId',
+      componentProps: {
+        treeData: rootMenus,
+      },
+    },
+  ]);
+}
+
 function onInitMetaFormSchemas() {
   metaFormApi.removeSchemaByFields(menuMetas.value.map((x) => x.name));
   const metaValues: Record<string, any> = {};

apps/vben5/packages/@abp/platform/src/components/menus/MenuTable.vue

@@ -4,6 +4,7 @@ import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
 import type { VbenFormProps } from '@vben/common-ui';
 
 import type { MenuDto } from '../../types/menus';
+import type { MenuDrawerState } from './types';
 
 import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
 
@@ -33,7 +34,7 @@ const { deleteApi, getAllApi } = useMenusApi();
 const { getPagedListApi: getLayoutsApi } = useLayoutsApi();
 
 const expandRowKeys = ref<string[]>([]);
-const dataDictionaries = ref<MenuDto[]>([]);
+const menus = ref<MenuDto[]>([]);
 const pageState = reactive({
   current: 1,
   size: 10,
@@ -185,7 +186,7 @@ async function onGet() {
       pid: 'parentId',
     });
     pageState.total = treeItems.length;
-    dataDictionaries.value = treeItems;
+    menus.value = treeItems;
     onPageChange();
   } finally {
     gridApi.setLoading(false);
@@ -201,7 +202,7 @@ function onExpandChange() {
 }
 
 function onPageChange() {
-  const items = dataDictionaries.value.slice(
+  const items = menus.value.slice(
     (pageState.current - 1) * pageState.size,
     pageState.current * pageState.size,
   );
@@ -216,15 +217,21 @@ function onPageChange() {
 }
 
 function onCreate(row?: MenuDto) {
-  drawerApi.setData({
+  drawerApi.setData<MenuDrawerState>({
-    layoutId: row?.layoutId,
+    editMenu: {
-    parentId: row?.id,
+      layoutId: row?.layoutId,
+      parentId: row?.id,
+    },
+    rootMenus: menus.value,
   });
   drawerApi.open();
 }
 
 function onUpdate(row: MenuDto) {
-  drawerApi.setData(row);
+  drawerApi.setData<MenuDrawerState>({
+    editMenu: row,
+    rootMenus: menus.value,
+  });
   drawerApi.open();
 }
 

apps/vben5/packages/@abp/platform/src/components/menus/types.ts

@@ -1,3 +1,16 @@
+import type { MenuDto } from '../../types/menus';
+
 type MenuSubject = 'role' | 'user';
 
-export type { MenuSubject };
+type EditMenu = {
+  id?: string;
+  layoutId?: string;
+  parentId?: string;
+};
+
+type MenuDrawerState = {
+  editMenu?: EditMenu;
+  rootMenus: MenuDto[];
+};
+
+export type { MenuDrawerState, MenuSubject };