refactor: 将 menu 的 data.ts 融合到 index.vue 中

apps/web-antd/src/views/system/menu/data.ts

@@ -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,
-    },
-  ];
-}

apps/web-antd/src/views/system/menu/index.vue

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
+import type { OnActionClickFn, OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  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) {
+function onRefresh() {
-  formModalApi.setData(row).open();
+  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() {
+function onEdit(row: SystemMenuApi.SystemMenu) {
-  formModalApi.setData({}).open();
+  formModalApi.setData(row).open();
 }
 
 /** 删除菜单 */
@@ -57,25 +79,89 @@ async function onDelete(row: SystemMenuApi.SystemMenu) {
   }
 }
 
-/** 表格操作按钮的回调函数 */
+/** 切换树形展开/收缩状态 */
-function onActionClick({
+const isExpanded = ref(false);
-  code,
+function toggleExpand() {
-  row,
+  isExpanded.value = !isExpanded.value;
-}: OnActionClickParams<SystemMenuApi.SystemMenu>) {
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
-  switch (code) {
-    case 'append': {
-      onAppend(row);
-      break;
-    }
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
 }
+
+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'"