489 lines
14 KiB
TypeScript
489 lines
14 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { Button, Form, Input, Select, Modal, message, Popconfirm, PageHeader, Spin } from 'antd';
|
|
import { DeleteOutlined } from '@ant-design/icons';
|
|
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
|
|
|
|
const { Option } = Select;
|
|
import {
|
|
fetchMenuList,
|
|
fetchMenuTreeList,
|
|
updateMenu,
|
|
deleteMenu,
|
|
createMenu,
|
|
MenuData
|
|
} from "@/pages/System/Menu/service";
|
|
|
|
// 菜单数据结构，扩展服务接口
|
|
type MenuItem = MenuData & {
|
|
id: string;
|
|
menuId: string;
|
|
key: string;
|
|
createBy?: string;
|
|
createDate?: string;
|
|
updateBy?: string;
|
|
updateDate?: string;
|
|
isCache?: number;
|
|
children?: MenuItem[]; // 用于处理树结构
|
|
};
|
|
|
|
// 工具函数：将平铺数组转为树形结构
|
|
function listToTree<T extends { menuId: string; parentId?: string; children?: T[] }>(list: T[], parentId: string = '0'): T[] {
|
|
return list
|
|
.filter(item => (item.parentId ?? '0') === parentId)
|
|
.map(item => ({
|
|
...item,
|
|
children: listToTree(list, item.menuId)
|
|
}));
|
|
}
|
|
|
|
// 菜单管理组件
|
|
|
|
const MenuManagement: React.FC = () => {
|
|
const [form] = Form.useForm();
|
|
const [folder, setFolder] = useState(false);
|
|
const [btn, setBtn] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [menuList, setMenuList] = useState<MenuItem[]>([]);
|
|
const [visible, setVisible] = useState(false);
|
|
const [editingItem, setEditingItem] = useState<MenuItem | null>(null);
|
|
const [title, setTitle] = useState<string>('');
|
|
const [spin, setSpin] = useState<boolean>(false);
|
|
const actionRef = useRef<ActionType>();
|
|
const [pageData, setPageData] = useState<any>({
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
});
|
|
|
|
const layout = {
|
|
labelCol: { span: 6 },
|
|
wrapperCol: { span: 13 },
|
|
};
|
|
|
|
const fetchMenu = async (params: any) => {
|
|
setSpin(true);
|
|
try {
|
|
const result = await fetchMenuTreeList(params);
|
|
const flatData = result.data?.records || result.data || [];
|
|
let res = {
|
|
data: flatData,
|
|
total: result.data?.total || flatData.length,
|
|
success: true,
|
|
pageSize: result.data?.size || 10,
|
|
current: result.data?.current || 1
|
|
}
|
|
console.log(res);
|
|
return res;
|
|
} catch (error) {
|
|
message.error('获取菜单列表失败');
|
|
return {
|
|
data: [],
|
|
total: 0,
|
|
success: false,
|
|
pageSize: 10,
|
|
current: 1
|
|
};
|
|
} finally {
|
|
setSpin(false);
|
|
}
|
|
};
|
|
|
|
// 处理编辑
|
|
const handleEdit = (item: MenuItem) => {
|
|
debugger;
|
|
setEditingItem(item);
|
|
form.setFieldsValue({
|
|
id: item.menuId,
|
|
parentId: item.parentId,
|
|
// parentName: item.parentName,
|
|
menuName: item.menuName,
|
|
menuOrder: item.menuOrder,
|
|
menuUrl: item.menuUrl,
|
|
componet: item.componet,
|
|
menuFrame: item.menuFrame,
|
|
isCache: item.isCache,
|
|
menuType: item.menuType,
|
|
menuVisible: item.menuVisible,
|
|
menuStatus: item.menuStatus,
|
|
menuPerms: item.menuPerms,
|
|
menuIcon: item.menuIcon,
|
|
remark: item.remark,
|
|
menuScope: item.menuScope,
|
|
menuOu: item.menuOu,
|
|
menuAuth: item.menuAuth,
|
|
menuSuspension: item.menuSuspension,
|
|
menuDefault: item.menuDefault,
|
|
tenantId: item.tenantId,
|
|
versions: item.versions,
|
|
menuDesc: item.menuDesc,
|
|
});
|
|
setVisible(true);
|
|
};
|
|
|
|
const handleDelete = async (menuItem: MenuItem) => {
|
|
Modal.confirm({
|
|
title: '确认删除该菜单？',
|
|
onOk: async () => {
|
|
try {
|
|
await deleteMenu(menuItem.menuId);
|
|
message.success('删除成功');
|
|
actionRef.current?.reload();
|
|
} catch (error) {
|
|
message.error('删除失败');
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
// 处理新增子菜单
|
|
const handleAddSub = (parentItem: MenuItem) => {
|
|
setEditingItem({
|
|
...parentItem,
|
|
menuId: '-1', // 临时标识新增项
|
|
});
|
|
form.setFieldsValue({
|
|
id: null,
|
|
menuName: '',
|
|
menuOrder: 0,
|
|
menuUrl: '',
|
|
componet: '',
|
|
menuFrame: 'N',
|
|
isCache: 0,
|
|
menuType: 'menu',
|
|
menuVisible: 'show',
|
|
menuStatus: 'valid',
|
|
menuPerms: '',
|
|
menuIcon: '',
|
|
remark: '',
|
|
parentId: parentItem.menuId,
|
|
menuScope: '',
|
|
menuOu: '',
|
|
menuAuth: 'N',
|
|
menuSuspension: 'N',
|
|
menuDefault: 'N',
|
|
tenantId: '',
|
|
versions: 1,
|
|
menuDesc: ''
|
|
});
|
|
setVisible(true);
|
|
setTitle('新增子菜单');
|
|
};
|
|
// 表格列配置
|
|
const columns: ProColumns<MenuItem>[] = [
|
|
{
|
|
title: '菜单名称',
|
|
dataIndex: 'menuName',
|
|
key: 'menuName',
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '排序',
|
|
dataIndex: 'menuOrder',
|
|
key: 'menuOrder',
|
|
search: false,
|
|
},
|
|
{
|
|
title: '权限标识',
|
|
dataIndex: 'menuPerms',
|
|
key: 'menuPerms',
|
|
search: false,
|
|
},
|
|
{
|
|
title: '组件路径',
|
|
dataIndex: 'componet',
|
|
key: 'componet',
|
|
search: false,
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'menuStatus',
|
|
key: 'menuStatus',
|
|
valueEnum: {
|
|
'valid': { text: '正常', status: 'Success' },
|
|
'invalid': { text: '停用', status: 'Error' },
|
|
},
|
|
},
|
|
{
|
|
title: '创建时间',
|
|
dataIndex: 'createDate',
|
|
key: 'createDate',
|
|
valueType: 'dateTime',
|
|
search: false,
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
valueType: 'option',
|
|
render: (_: any, record: MenuItem) => [
|
|
<Button key="edit" type="link" onClick={() => handleEdit(record)}>修改</Button>,
|
|
<Button key="add" type="link" onClick={() => handleAddSub(record)}>新增</Button>,
|
|
<Popconfirm
|
|
key="delete"
|
|
title="确定要删除吗?"
|
|
onConfirm={() => handleDelete(record)}
|
|
okText="确定"
|
|
cancelText="取消"
|
|
>
|
|
<Button icon={<DeleteOutlined />} danger>
|
|
删除
|
|
</Button>
|
|
</Popconfirm>
|
|
],
|
|
},
|
|
];
|
|
|
|
// 显示模态框
|
|
const handleAdd = () => {
|
|
setEditingItem(null);
|
|
form.resetFields();
|
|
// 设置新增时的默认值
|
|
form.setFieldsValue({
|
|
menuType: 'menu',
|
|
menuFrame: 'N',
|
|
menuVisible: 'show',
|
|
menuStatus: 'valid',
|
|
menuAuth: 'N',
|
|
menuSuspension: 'N',
|
|
menuDefault: 'N',
|
|
versions: 1,
|
|
isCache: 0,
|
|
parentId: '0',
|
|
});
|
|
setVisible(true);
|
|
setTitle('新增菜单');
|
|
};
|
|
|
|
// 模态框确定按钮处理
|
|
const handleOk = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
if (!values.parentId) values.parentId = '0';
|
|
if (editingItem && editingItem.menuId !== '-1') {
|
|
// 编辑操作
|
|
await updateMenu(values);
|
|
message.success('修改成功');
|
|
} else {
|
|
// 新增操作
|
|
await createMenu(values);
|
|
message.success('创建成功');
|
|
}
|
|
closeModal();
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
// 关闭模态框
|
|
const closeModal = () => {
|
|
actionRef.current?.reload();
|
|
form.resetFields();
|
|
setVisible(false);
|
|
};
|
|
|
|
// 模态框取消按钮处理
|
|
const handleCancel = () => {
|
|
closeModal();
|
|
};
|
|
|
|
const handleMenuTypeChange = (value: string) => {
|
|
if (value === 'folder') {
|
|
setFolder(true)
|
|
setBtn(false)
|
|
} else if (value === 'operation') {
|
|
setBtn(true)
|
|
setFolder(false)
|
|
} else {
|
|
setFolder(false)
|
|
setBtn(false)
|
|
}
|
|
};
|
|
|
|
|
|
return (
|
|
<Spin spinning={spin}>
|
|
<PageHeader title="菜单管理" />
|
|
<div style={{ maxHeight: innerHeight - 130, height: innerHeight - 130 }} className='xsy-entrust bgCWhite'>
|
|
<ProTable<MenuItem>
|
|
actionRef={actionRef}
|
|
columns={columns}
|
|
options={false}
|
|
bordered={false}
|
|
className='tableSearch'
|
|
size='small'
|
|
search={{ labelWidth: 'auto', span: 6 }}
|
|
request={(params) => fetchMenu(params)}
|
|
toolBarRender={() => [
|
|
<Button key="add" onClick={handleAdd} type="primary">
|
|
新增
|
|
</Button>,
|
|
]}
|
|
pagination={{
|
|
defaultPageSize: 10,
|
|
showSizeChanger: false,
|
|
onChange: (page, pageSize) => setPageData({ pageNo: page, pageSize: pageSize }),
|
|
onShowSizeChange: (current, size) => setPageData({ pageNo: current, pageSize: size }),
|
|
}}
|
|
onReset={() => { setPageData({ pageNo: 1, pageSize: 10 }) }}
|
|
rowKey="menuId"
|
|
expandable={{ defaultExpandAllRows: false }}
|
|
/>
|
|
<Modal
|
|
title={title}
|
|
visible={visible}
|
|
width="70%"
|
|
centered
|
|
destroyOnClose={true}
|
|
bodyStyle={{ maxHeight: window.innerHeight * 0.96 - 108, overflowY: 'auto', paddingTop: 0 }}
|
|
onOk={handleOk}
|
|
onCancel={handleCancel}
|
|
>
|
|
<Form form={form} {...layout}>
|
|
<Form.Item
|
|
name="id"
|
|
hidden={true}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="parentId" hidden={true}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuType"
|
|
label="菜单类型"
|
|
rules={[{required: true, message: '请选择菜单类型'}]}
|
|
>
|
|
<Select placeholder="请选择" onChange={handleMenuTypeChange}>
|
|
<Option value="folder">目录</Option>
|
|
<Option value="menu">菜单</Option>
|
|
<Option value="operation">按钮</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuName"
|
|
label="菜单名称"
|
|
rules={[{required: true, message: '请输入菜单名称'}]}
|
|
>
|
|
<Input placeholder="请输入菜单名称"/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuOrder"
|
|
label="排序"
|
|
rules={[{required: true, message: '请输入排序'}]}
|
|
>
|
|
<Input placeholder="请输入排序"/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuFrame"
|
|
label="是否为外链"
|
|
hidden={btn}
|
|
>
|
|
<Select placeholder="请选择" defaultValue="N">
|
|
<Option value="Y">是</Option>
|
|
<Option value="N">否</Option>
|
|
<Option value="S">3.0内部外链</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuUrl"
|
|
label="路由地址"
|
|
hidden={btn}
|
|
>
|
|
<Input placeholder="请输入路由地址"/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="query"
|
|
label="路由参数"
|
|
hidden={folder || btn}
|
|
>
|
|
<Input placeholder="请输入路由参数"/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="componet"
|
|
label="组件路径"
|
|
hidden={folder || btn}
|
|
>
|
|
<Input placeholder="请输入组件路径"/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuPerms"
|
|
label="权限标识"
|
|
hidden={folder && !btn}
|
|
>
|
|
<Input placeholder="请输入权限标识"/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuIcon"
|
|
label="菜单图标"
|
|
hidden={btn}
|
|
>
|
|
<Input placeholder="请输入菜单图标"/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="isCache"
|
|
label="是否缓存"
|
|
hidden={folder || btn}
|
|
rules={[{type: 'number', message: '请输入正确的数值'}]}
|
|
>
|
|
<Select placeholder="请选择" defaultValue={0}>
|
|
<Option value={0}>缓存</Option>
|
|
<Option value={1}>不缓存</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuVisible"
|
|
label="显示状态"
|
|
hidden={btn}
|
|
rules={[{required: true, message: '请选择显示状态'}]}
|
|
>
|
|
<Select placeholder="请选择" defaultValue="show">
|
|
<Option value="show">显示</Option>
|
|
<Option value="hide">隐藏</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuStatus"
|
|
label="菜单状态"
|
|
>
|
|
<Select placeholder="请选择" defaultValue="valid">
|
|
<Option value="valid">正常</Option>
|
|
<Option value="invalid">停用</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuScope"
|
|
label="系统区分标识"
|
|
>
|
|
<Input placeholder="请输入系统区分标识"/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuAuth"
|
|
label="是否授权"
|
|
>
|
|
<Select placeholder="请选择" defaultValue="N">
|
|
<Option value="Y">是</Option>
|
|
<Option value="N">否</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuDefault"
|
|
label="是否默认展示"
|
|
>
|
|
<Select placeholder="请选择" defaultValue="N">
|
|
<Option value="Y">是</Option>
|
|
<Option value="N">否</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="menuDesc"
|
|
label="信息描述"
|
|
>
|
|
<Input.TextArea placeholder="请输入信息描述"/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</div>
|
|
</Spin>
|
|
);
|
|
};
|
|
|
|
export default MenuManagement;
|