tashow-manager/src/pages/system/menu/config.tsx

// src/pages/system/menu/config.tsx
import {
  type ProColumns,
  type ProFormColumnsType,
  ProFormRadio,
  ProFormText,
} from '@ant-design/pro-components';
import { Switch } from 'antd';
import { getSimpleMenusList, type MenuVO } from '@/services/system/menu';
import { handleTree } from '@/utils/tree';

export const baseMenuColumns: ProColumns<MenuVO>[] = [
  {
    title: '菜单名称',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 60,
    hideInSearch: true,
    render: (_, record: MenuVO) => (
      <span>
        {record.icon ? <i className={`anticon ${record.icon}`} /> : '—'}
      </span>
    ),
  },
  {
    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: '状态',
    dataIndex: 'status',
    width: 80,
    render: (_, record: MenuVO) => (
      <Switch
        checked={record.status === 1}
        disabled={true} // 可后续改为可编辑
      />
    ),
  },
];

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',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入菜单名称',
        },
      ],
    },
  },
  {
    title: '菜单类型',
    dataIndex: 'type',
    valueType: 'radioButton',
    fieldProps: {
      placeholder: '请选择菜单类型',
      options: [
        { label: '目录', value: 1 },
        { label: '菜单', value: 2 },
        { label: '按钮', value: 3 },
      ],
    },
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入菜单类型',
        },
      ],
    },
  },
  {
    title: '菜单图标',
    dataIndex: 'icon',
    fieldProps: {
      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: 'path',
    tooltip:
      '访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头',
    fieldProps: {
      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: '组件地址',
    dataIndex: 'component',
    fieldProps: {
      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,
            },
          }}
        />
      );
    },
  },
  {
    title: '组件名称',
    dataIndex: 'componentName',
    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: '权限标识',
    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: 'radio',
    fieldProps: {
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ],
    },
  },
  {
    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,
            },
          }}
        />
      );
    },
  },
];