diff --git a/src/pages/system/menu/config.tsx b/src/pages/system/menu/config.tsx index 8018186..a1d591b 100644 --- a/src/pages/system/menu/config.tsx +++ b/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[] = [ { @@ -16,6 +19,7 @@ export const baseMenuColumns: ProColumns[] = [ title: '图标', dataIndex: 'icon', width: 60, + hideInSearch: true, render: (_, record: MenuVO) => ( {record.icon ? : '—'} @@ -26,21 +30,25 @@ export const baseMenuColumns: ProColumns[] = [ 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[] = [ ]; 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 ( + + ); }, }, { - 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 ( + + ); }, }, { - 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 ( + + ); }, }, { @@ -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 ( + + ); + }, }, { - 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 ( + + ); + }, + }, + { + 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 ( + + ); + }, + }, + { + 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 ( + + ); + }, + }, + { + 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 ( + + ); + }, + }, ]; diff --git a/src/pages/system/menu/index.tsx b/src/pages/system/menu/index.tsx index 383a9cc..9ea4eeb 100644 --- a/src/pages/system/menu/index.tsx +++ b/src/pages/system/menu/index.tsx @@ -1,8 +1,9 @@ // src/pages/system/menu/index.tsx -import { PlusOutlined } from '@ant-design/icons'; +import { PlusOutlined, ReloadOutlined } from '@ant-design/icons'; import type { ActionType, ProColumns } from '@ant-design/pro-components'; -import { Popconfirm } from 'antd'; +import { useModel } from '@umijs/max'; +import { Modal, Popconfirm } from 'antd'; import React, { useCallback, useRef, useState } from 'react'; import ConfigurableDrawerForm, { type ConfigurableDrawerFormRef, @@ -10,6 +11,8 @@ import ConfigurableDrawerForm, { import EnhancedProTable from '@/components/EnhancedProTable'; import type { ToolbarAction } from '@/components/EnhancedProTable/types'; import { formStatusType } from '@/constants'; +import { useMessage } from '@/hooks/antd/useMessage'; +import { CACHE_KEY, useCache } from '@/hooks/web/useCache'; import { createMenu, deleteMenu, @@ -24,10 +27,11 @@ import { baseMenuColumns, formColumns } from './config'; const SystemMenu = () => { const configurableDrawerRef = useRef(null); const tableRef = useRef(null); - + const { wsCache } = useCache(); + const message = useMessage(); // 消息弹窗 const [type, setType] = useState<'create' | 'update'>('create'); const [id, setId] = useState(0); - + const { initialState, setInitialState } = useModel('@@initialState'); const handleEdit = (record: MenuVO) => { setType('update'); setId(record.id); @@ -47,7 +51,19 @@ const SystemMenu = () => { }; const handleAdd = () => { setType('create'); - configurableDrawerRef.current?.open({}); + configurableDrawerRef.current?.open({ type: 1 }); + }; + + const handleReload = async () => { + try { + await message.confirm('即将更新缓存刷新浏览器！', '刷新菜单缓存'); + // 清空，从而触发刷新 + // wsCache.delete(CACHE_KEY.USER); + // wsCache.delete(CACHE_KEY.ROLE_ROUTERS); + await initialState?.fetchUserInfo?.(); + // 刷新浏览器 + location.reload(); + } catch {} }; const handleSubmit = useCallback( @@ -74,6 +90,13 @@ const SystemMenu = () => { icon: , onClick: handleAdd, }, + { + key: 'reload', + label: '刷新菜单缓存', + type: 'primary', + icon: , + onClick: handleReload, + }, ]; const actionColumns: ProColumns = { @@ -108,7 +131,7 @@ const SystemMenu = () => { columns={columns} request={onFetch} toolbarActions={toolbarActions} - headerTitle="租户列表" + headerTitle="菜单管理" showIndex={false} showSelection={false} /> @@ -118,6 +141,7 @@ const SystemMenu = () => { title={formStatusType[type]} columns={formColumns(type)} onSubmit={handleSubmit} + width={900} /> );