From 080d6dec41acb2e6e5dd72c11ec051e5ba2ae534 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Fri, 3 Nov 2023 14:01:58 +0800
Subject: [PATCH] fix(menus): there are multiple refreshing menus meta.

---
 .../platform/menu/components/MenuTable.vue    | 24 +++++++++++++++----
 .../platform/menu/components/TableData.ts     | 19 ++++++++++++---
 .../platform/menu/hooks/useMenuFormContext.ts | 13 ++++++----
 3 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/apps/vue/src/views/platform/menu/components/MenuTable.vue b/apps/vue/src/views/platform/menu/components/MenuTable.vue
index 0ed5c3892..a806102fe 100644
--- a/apps/vue/src/views/platform/menu/components/MenuTable.vue
+++ b/apps/vue/src/views/platform/menu/components/MenuTable.vue
@@ -2,12 +2,22 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="handleAddNew">{{ L('Menu:AddNew') }}</a-button>
+        <a-button v-auth="['Platform.Menu.Create']" type="primary" @click="handleAddNew">{{ L('Menu:AddNew') }}</a-button>
       </template>
       <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'action'">
+        <template v-if="column.key === 'displayName'">
+          <Icon v-if="record.meta.icon" style="margin-right: 10px;" :icon="record.meta.icon" />
+          <span>{{ record.displayName }}</span>
+        </template>
+        <template v-else-if="column.key === 'action'">
           <TableAction
             :actions="[
+              {
+                auth: 'Platform.Menu.Create',
+                label: L('Menu:AddNew'),
+                icon: 'ant-design:plus-outlined',
+                onClick: handleAddNew.bind(null, record),
+              },
               {
                 auth: 'Platform.Menu.Update',
                 label: L('Edit'),
@@ -35,6 +45,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useLocalization } from '/@/hooks/abp/useLocalization';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Icon } from '/@/components/Icon';
   import { useDrawer } from '/@/components/Drawer';
   import { getDataColumns } from './TableData';
   import { getSearchFormSchemas } from './ModalData';
@@ -70,7 +81,7 @@
     canResize: false,
     formConfig: getSearchFormSchemas(),
     actionColumn: {
-      width: 160,
+      width: 280,
       title: L('Actions'),
       dataIndex: 'action',
     },
@@ -78,8 +89,11 @@
 
   const [registerDrawer, { openDrawer }] = useDrawer();
   
-  function handleAddNew() {
-    openDrawer(true, {});
+  function handleAddNew(record?: Recordable) {
+    openDrawer(true, {
+      layoutId: record?.layoutId,
+      parentId: record?.id,
+    });
   }
 
   function handleEdit(record: Recordable) {
diff --git a/apps/vue/src/views/platform/menu/components/TableData.ts b/apps/vue/src/views/platform/menu/components/TableData.ts
index cc8607548..600f61fa0 100644
--- a/apps/vue/src/views/platform/menu/components/TableData.ts
+++ b/apps/vue/src/views/platform/menu/components/TableData.ts
@@ -29,41 +29,54 @@ export function getDataColumns(): BasicColumn[] {
       dataIndex: 'name',
       align: 'left',
       width: 150,
+      resizable: true,
       sorter: (a: Menu, b: Menu) => a.name.localeCompare(b.name),
     },
     {
       title: L('DisplayName:DisplayName'),
       dataIndex: 'displayName',
+      align: 'left',
       width: 180,
+      resizable: true,
       sorter: (a: Menu, b: Menu) => a.displayName.localeCompare(b.displayName),
     },
     {
       title: L('DisplayName:Path'),
       dataIndex: 'path',
-      width: 180,
+      align: 'left',
+      width: 260,
+      resizable: true,
       sorter: (a: Menu, b: Menu) => a.path.localeCompare(b.path),
     },
     {
       title: L('DisplayName:Component'),
       dataIndex: 'component',
-      width: 180,
+      align: 'left',
+      width: 240,
+      resizable: true,
       sorter: (a: Menu, b: Menu) => a.component.localeCompare(b.component),
     },
     {
       title: L('DisplayName:UIFramework'),
       dataIndex: 'framework',
+      align: 'left',
       width: 180,
+      resizable: true,
       sorter: (a: Menu, b: Menu) => a.framework.localeCompare(b.framework),
     },
     {
       title: L('DisplayName:Description'),
       dataIndex: 'description',
+      align: 'left',
+      resizable: true,
       width: 250,
     },
     {
       title: L('DisplayName:Redirect'),
       dataIndex: 'redirect',
-      width: 'auto',
+      align: 'left',
+      width: 180,
+      resizable: true,
     },
   ];
 }
diff --git a/apps/vue/src/views/platform/menu/hooks/useMenuFormContext.ts b/apps/vue/src/views/platform/menu/hooks/useMenuFormContext.ts
index 17d422b2d..c6015c505 100644
--- a/apps/vue/src/views/platform/menu/hooks/useMenuFormContext.ts
+++ b/apps/vue/src/views/platform/menu/hooks/useMenuFormContext.ts
@@ -127,10 +127,10 @@ export function useMenuFormContext({ menuModel, formElRef, framework }: UseMenuF
           onChange(val) {
             fetchLayoutResource(val);
           },
-          onOptionsChange() {
-            const menu = unref(menuModel);
-            fetchLayoutResource(menu.layoutId);
-          },
+          // onOptionsChange() {
+          //   const menu = unref(menuModel);
+          //   fetchLayoutResource(menu.layoutId);
+          // },
         },
       },
       {
@@ -252,7 +252,10 @@ export function useMenuFormContext({ menuModel, formElRef, framework }: UseMenuF
         schemas.push(x);
         formEl?.appendSchemaByField(x, '');
       });
-      formEl?.setFieldsValue(unref(menuModel));
+      formEl?.setFieldsValue({
+        ...unref(menuModel),
+        layoutId: layoutId,
+      });
     }
   }