101 lines
1.9 KiB
TypeScript
101 lines
1.9 KiB
TypeScript
import React, {useState} from 'react';
|
|
import {
|
|
Card,
|
|
Table,
|
|
Typography,
|
|
TableColumnProps,
|
|
Button,
|
|
Space,
|
|
Message
|
|
} from '@arco-design/web-react';
|
|
import {useQuery} from 'react-query';
|
|
import Form from './form';
|
|
import {deleteMenu, getTreeMenu} from '@/api/menu';
|
|
import {getColumns, TableOptions} from './constants';
|
|
import {useHistory} from "react-router";
|
|
|
|
const {Title} = Typography;
|
|
|
|
function ConfigManage() {
|
|
const reactQueryKey = useHistory().location.pathname;
|
|
const [visible, setVisible] = useState(false);
|
|
const [record, setRecord] = useState(null);
|
|
|
|
const onDelete = async ({id}) => {
|
|
await deleteMenu(id);
|
|
Message.success('删除成功！');
|
|
await refetch();
|
|
};
|
|
|
|
const tableCallback = async (type: TableOptions, record: any) => {
|
|
switch (type) {
|
|
case TableOptions.EDIT:
|
|
showModal(record)
|
|
break;
|
|
case TableOptions.DELETE:
|
|
await onDelete(record);
|
|
break
|
|
}
|
|
}
|
|
|
|
const columns: TableColumnProps[] = getColumns(tableCallback)
|
|
|
|
const fetchData = async () => {
|
|
const {data} = await getTreeMenu();
|
|
return data
|
|
};
|
|
|
|
const {
|
|
data,
|
|
isLoading,
|
|
isFetching,
|
|
refetch
|
|
} = useQuery(
|
|
[reactQueryKey], fetchData);
|
|
|
|
const showModal = (payload?) => {
|
|
payload && setRecord(payload);
|
|
setVisible(true);
|
|
};
|
|
|
|
const handleConfirm = async () => {
|
|
setRecord(null);
|
|
setVisible(false);
|
|
await refetch();
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setRecord(null);
|
|
setVisible(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Card>
|
|
<Form
|
|
handleConfirm={handleConfirm}
|
|
handleCancel={handleCancel}
|
|
visible={visible}
|
|
record={record}
|
|
/>
|
|
<Title heading={6}>菜单管理</Title>
|
|
|
|
<Space style={{marginBottom: 12}}>
|
|
<Button type="primary" onClick={() => showModal()}>新建菜单</Button>
|
|
</Space>
|
|
|
|
<Table
|
|
rowKey="id"
|
|
loading={isLoading || isFetching}
|
|
columns={columns}
|
|
pagination={false}
|
|
data={data}
|
|
/>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|
|
|
|
|
|
export default ConfigManage;
|