From ff67eb338047b9d58b1f29034310c2e1e686407b Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 2 Apr 2025 23:16:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=20menu=20=E7=9A=84=20data?=
 =?UTF-8?q?.ts=20=E8=9E=8D=E5=90=88=E5=88=B0=20index.vue=20=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/system/menu/data.ts   |  82 ---------
 apps/web-antd/src/views/system/menu/index.vue | 161 +++++++++++++-----
 2 files changed, 117 insertions(+), 126 deletions(-)
 delete mode 100644 apps/web-antd/src/views/system/menu/data.ts

diff --git a/apps/web-antd/src/views/system/menu/data.ts b/apps/web-antd/src/views/system/menu/data.ts
deleted file mode 100644
index 344908eb1..000000000
--- a/apps/web-antd/src/views/system/menu/data.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemMenuApi } from '#/api/system/menu';
-
-import { DICT_TYPE } from '#/utils/dict';
-
-export function useGridColumns(
-  onActionClick: OnActionClickFn<SystemMenuApi.SystemMenu>,
-): VxeTableGridOptions<SystemMenuApi.SystemMenu>['columns'] {
-  return [
-    {
-      align: 'left',
-      field: 'name',
-      fixed: 'left',
-      slots: { default: 'name' },
-      title: '菜单名称',
-      treeNode: true,
-      minWidth: 250,
-    },
-    {
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.SYSTEM_MENU_TYPE },
-      },
-      field: 'type',
-      title: '菜单类型',
-      minWidth: 100,
-    },
-    {
-      field: 'sort',
-      title: '显示排序',
-      minWidth: 100,
-    },
-    {
-      field: 'permission',
-      title: '权限标识',
-      minWidth: 200,
-    },
-    {
-      field: 'path',
-      title: '组件路径',
-      minWidth: 200,
-    },
-    {
-      field: 'componentName',
-      minWidth: 200,
-      title: '组件名称',
-    },
-    {
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.COMMON_STATUS },
-      },
-      field: 'status',
-      title: '状态',
-      minWidth: 100,
-    },
-    {
-      align: 'right',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'append',
-            text: '新增下级',
-          },
-          'edit', // 默认的编辑按钮
-          'delete', // 默认的删除按钮
-        ],
-      },
-      field: 'operation',
-      fixed: 'right',
-      headerAlign: 'center',
-      showOverflow: false,
-      title: '操作',
-      minWidth: 200,
-    },
-  ];
-}
diff --git a/apps/web-antd/src/views/system/menu/index.vue b/apps/web-antd/src/views/system/menu/index.vue
index 1de2a7276..323bfc3f9 100644
--- a/apps/web-antd/src/views/system/menu/index.vue
+++ b/apps/web-antd/src/views/system/menu/index.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { OnActionClickFn, OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemMenuApi } from '#/api/system/menu';
 
 import { ref } from 'vue';
@@ -10,12 +7,11 @@ import { $t } from '#/locales';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getMenuList, deleteMenu } from '#/api/system/menu';
 import { SystemMenuTypeEnum } from '#/utils/constants';
+import { DICT_TYPE } from '#/utils/dict';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Button, message } from 'ant-design-vue';
 import { IconifyIcon, Plus } from '@vben/icons';
-
-import { useGridColumns } from './data';
 import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
@@ -23,9 +19,35 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 编辑菜单 */
-function onEdit(row: SystemMenuApi.SystemMenu) {
-  formModalApi.setData(row).open();
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({
+   code,
+   row,
+}: OnActionClickParams<SystemMenuApi.SystemMenu>) {
+  switch (code) {
+    case 'append': {
+      onAppend(row);
+      break;
+    }
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+  }
+}
+
+/** 创建菜单 */
+function onCreate() {
+  formModalApi.setData({}).open();
 }
 
 /** 添加下级菜单 */
@@ -33,9 +55,9 @@ function onAppend(row: SystemMenuApi.SystemMenu) {
   formModalApi.setData({ pid: row.id }).open();
 }
 
-/** 创建菜单 */
-function onCreate() {
-  formModalApi.setData({}).open();
+/** 编辑菜单 */
+function onEdit(row: SystemMenuApi.SystemMenu) {
+  formModalApi.setData(row).open();
 }
 
 /** 删除菜单 */
@@ -57,25 +79,89 @@ async function onDelete(row: SystemMenuApi.SystemMenu) {
   }
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<SystemMenuApi.SystemMenu>) {
-  switch (code) {
-    case 'append': {
-      onAppend(row);
-      break;
-    }
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(false);
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+function useGridColumns(
+  onActionClick: OnActionClickFn<SystemMenuApi.SystemMenu>,
+): VxeTableGridOptions<SystemMenuApi.SystemMenu>['columns'] {
+  return [
+    {
+      align: 'left',
+      field: 'name',
+      fixed: 'left',
+      slots: { default: 'name' },
+      title: '菜单名称',
+      treeNode: true,
+      minWidth: 250,
+    },
+    {
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_MENU_TYPE },
+      },
+      field: 'type',
+      title: '菜单类型',
+      minWidth: 100,
+    },
+    {
+      field: 'sort',
+      title: '显示排序',
+      minWidth: 100,
+    },
+    {
+      field: 'permission',
+      title: '权限标识',
+      minWidth: 200,
+    },
+    {
+      field: 'path',
+      title: '组件路径',
+      minWidth: 200,
+    },
+    {
+      field: 'componentName',
+      minWidth: 200,
+      title: '组件名称',
+    },
+    {
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+    },
+    {
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'append',
+            text: '新增下级',
+          },
+          'edit', // 默认的编辑按钮
+          'delete', // 默认的删除按钮
+        ],
+      },
+      field: 'operation',
+      fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
+      title: '操作',
+      minWidth: 200,
+    },
+  ];
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -107,18 +193,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions,
 });
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-/** 切换树形展开/收缩状态 */
-const isExpanded = ref(false);
-function toggleExpand() {
-  isExpanded.value = !isExpanded.value;
-  gridApi.grid.setAllTreeExpand(isExpanded.value);
-}
 </script>
 <template>
   <Page auto-content-height>
@@ -141,7 +215,6 @@ function toggleExpand() {
               icon="carbon:square-outline"
               class="size-full"
             />
-            <!-- TODO @芋艿：这里的 空串的情况 -->
             <IconifyIcon
               v-else-if="row.icon"
               :icon="row.icon || 'carbon:circle-dash'"