feat: 完善菜单管理

src/pages/system/menu/config.tsx

@@ -1,10 +1,13 @@
 // src/pages/system/menu/config.tsx
-import type {
-  ProColumns,
-  ProFormColumnsType,
+import {
+  type ProColumns,
+  type ProFormColumnsType,
+  ProFormRadio,
+  ProFormText,
 } from '@ant-design/pro-components';
 import { Switch } from 'antd';
-import type { MenuVO } from '@/services/system/menu';
+import { getSimpleMenusList, type MenuVO } from '@/services/system/menu';
+import { handleTree } from '@/utils/tree';
 
 export const baseMenuColumns: ProColumns<MenuVO>[] = [
   {
@@ -16,6 +19,7 @@ export const baseMenuColumns: ProColumns<MenuVO>[] = [
     title: '图标',
     dataIndex: 'icon',
     width: 60,
+    hideInSearch: true,
     render: (_, record: MenuVO) => (
       <span>
         {record.icon ? <i className={`anticon ${record.icon}`} /> : '—'}
@@ -26,21 +30,25 @@ export const baseMenuColumns: ProColumns<MenuVO>[] = [
     title: '排序',
     dataIndex: 'sort',
     width: 80,
+    hideInSearch: true,
   },
   {
     title: '权限标识',
     dataIndex: 'permission',
     width: 150,
+    hideInSearch: true,
   },
   {
     title: '组件路径',
     dataIndex: 'component',
     width: 150,
+    hideInSearch: true,
   },
   {
     title: '组件名称',
     dataIndex: 'componentName',
     width: 150,
+    hideInSearch: true,
   },
   {
     title: '状态',
@@ -56,6 +64,22 @@ export const baseMenuColumns: ProColumns<MenuVO>[] = [
 ];
 
 export const formColumns = (_type: string): ProFormColumnsType[] => [
+  {
+    title: '上级菜单',
+    dataIndex: 'parentId',
+    valueType: 'treeSelect',
+    request: async () => {
+      const res = await getSimpleMenusList();
+      console.log(res);
+      const menu: Tree = { id: 0, name: '主类目', children: [] };
+      menu.children = handleTree(res);
+      return [menu];
+    },
+    fieldProps: {
+      fieldNames: { label: 'name', value: 'id', children: 'children' },
+      placeholder: '请选择上级菜单',
+    },
+  },
   {
     title: '菜单名称',
     dataIndex: 'name',
@@ -69,39 +93,105 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
     },
   },
   {
-    title: '图标',
-    dataIndex: 'icon',
-    valueType: 'select',
+    title: '菜单类型',
+    dataIndex: 'type',
+    valueType: 'radioButton',
     fieldProps: {
-      placeholder: '请选择图标',
+      placeholder: '请选择菜单类型',
       options: [
-        { label: '商品', value: 'icon-product' },
-        { label: '系统', value: 'icon-system' },
-        { label: '用户', value: 'icon-user' },
-        { label: '设置', value: 'icon-setting' },
+        { label: '目录', value: 1 },
+        { label: '菜单', value: 2 },
+        { label: '按钮', value: 3 },
+      ],
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入菜单类型',
+        },
       ],
     },
   },
   {
-    title: '排序',
-    dataIndex: 'sort',
-    valueType: 'digit',
+    title: '菜单图标',
+    dataIndex: 'icon',
     fieldProps: {
-      placeholder: '请输入排序值',
+      placeholder: '请选择图标',
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 3) return null;
+      return (
+        <ProFormText
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
     },
   },
   {
-    title: '权限标识',
-    dataIndex: 'permission',
+    title: '路由地址',
+    dataIndex: 'path',
+    tooltip:
+      '访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头',
     fieldProps: {
-      placeholder: '请输入权限标识',
+      placeholder: '请输入路由地址',
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入菜单路径',
+        },
+      ],
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 3) return null;
+      return (
+        <ProFormText
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
     },
   },
   {
-    title: '组件路径',
+    title: '组件地址',
     dataIndex: 'component',
     fieldProps: {
-      placeholder: '请输入组件路径',
+      placeholder: '请输入组件地址',
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入组件地址',
+        },
+      ],
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type !== 2) return null;
+      return (
+        <ProFormText
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
     },
   },
   {
@@ -110,11 +200,68 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
     fieldProps: {
       placeholder: '请输入组件名称',
     },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type !== 2) return null;
+      return (
+        <ProFormText
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
+    },
   },
   {
-    title: '状态',
+    title: '权限标识',
+    dataIndex: 'permission',
+    tooltip:
+      "Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)",
+    fieldProps: {
+      placeholder: '请输入权限标识',
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 1) return null;
+      return (
+        <ProFormText
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
+    },
+  },
+  {
+    title: '显示排序',
+    dataIndex: 'sort',
+    valueType: 'digit',
+    fieldProps: {
+      style: {
+        width: '100%',
+      },
+      placeholder: '请输入排序值',
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入排序值',
+        },
+      ],
+    },
+  },
+
+  {
+    title: '菜单状态',
     dataIndex: 'status',
-    valueType: 'select',
+    valueType: 'radio',
     fieldProps: {
       options: [
         { label: '启用', value: 1 },
@@ -122,4 +269,82 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
       ],
     },
   },
+  {
+    title: '显示状态',
+    dataIndex: 'visible',
+    valueType: 'radio',
+    tooltip: '选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问',
+    fieldProps: {
+      options: [
+        { label: '显示', value: true },
+        { label: '隐藏', value: false },
+      ],
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 3) return null;
+      return (
+        <ProFormRadio.Group
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
+    },
+  },
+  {
+    title: '总是显示',
+    dataIndex: 'alwaysShow',
+    valueType: 'radio',
+    tooltip: '选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单',
+    fieldProps: {
+      options: [
+        { label: '总是', value: true },
+        { label: '不是', value: false },
+      ],
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 3) return null;
+      return (
+        <ProFormRadio.Group
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
+    },
+  },
+  {
+    dataIndex: 'keepAlive',
+    title: '缓存状态',
+    valueType: 'radio',
+    tooltip: '选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段',
+    fieldProps: {
+      options: [
+        { label: '总是', value: true },
+        { label: '不是', value: false },
+      ],
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 3) return null;
+      return (
+        <ProFormRadio.Group
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
+    },
+  },
 ];