143 lines
3.9 KiB
TypeScript
143 lines
3.9 KiB
TypeScript
import { ActionType, FormInstance, ProTable } from "@ant-design/pro-components";
|
|
import { Button } from "antd";
|
|
import { useRef, useState } from "react";
|
|
import { connect } from "umi";
|
|
import { handleGetMenuList } from "./service";
|
|
|
|
const menuIndex: React.FC<{ currentUser: any }> = (props) => {
|
|
const { currentUser } = props
|
|
|
|
const actionRef = useRef<ActionType>();
|
|
const formRef = useRef<FormInstance>();
|
|
// 打开新增的悬浮框
|
|
const [openAddModal, setOpenAddModal] = useState<boolean>(false)
|
|
// 显示新增和编辑的悬浮框
|
|
|
|
|
|
// 表格组件
|
|
const columns: any = [
|
|
{
|
|
title: "菜单名称",
|
|
dataIndex: "menuName",
|
|
width: 300,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: "菜单图标",
|
|
dataIndex: "menuIcon",
|
|
width: 120,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: "菜单索引",
|
|
dataIndex: "id",
|
|
width: 180,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'hidden',
|
|
hideInSearch: true,
|
|
width: 180,
|
|
},
|
|
{
|
|
title: '说明',
|
|
dataIndex: 'desc',
|
|
width: 200,
|
|
hideInSearch: true
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'option',
|
|
valueType: 'option',
|
|
hideInDescriptions: true,
|
|
width: 260,
|
|
render: (_, record) => { }
|
|
}
|
|
]
|
|
// 表格子集的columns
|
|
const childrenColumns: any = [
|
|
{
|
|
title: "模块名称",
|
|
dataIndex: "menuName",
|
|
width: 300,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: "模块地址",
|
|
dataIndex: "",
|
|
width: 120,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: "模块索引",
|
|
dataIndex: "id",
|
|
width: 180,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'hidden',
|
|
hideInSearch: true,
|
|
width: 180,
|
|
},
|
|
{
|
|
title: '说明',
|
|
dataIndex: 'desc',
|
|
width: 200,
|
|
hideInSearch: true
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'option',
|
|
valueType: 'option',
|
|
hideInDescriptions: true,
|
|
width: 260,
|
|
render: (_, record) => { }
|
|
}
|
|
]
|
|
|
|
return (
|
|
<div>
|
|
<ProTable
|
|
actionRef={actionRef}
|
|
formRef={formRef}
|
|
columns={columns}
|
|
bordered
|
|
expandable={{
|
|
expandRowByClick: true
|
|
}}
|
|
rowKey={(record) => {
|
|
return `${record?.id}`
|
|
}}
|
|
scroll={{ x: "100%", y: 'calc(100vh - 400px)' }}
|
|
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>菜单管理</span>}
|
|
request={async (params) => {
|
|
const req: any = {
|
|
|
|
}
|
|
const data = await handleGetMenuList()
|
|
console.log('data', data);
|
|
if (data && data.length > 0) {
|
|
return { data, success: true }
|
|
}
|
|
return { data: [], success: true }
|
|
}}
|
|
toolbar={{
|
|
actions: [
|
|
<Button type="primary" onClick={(e) => {
|
|
setOpenAddModal(true)
|
|
}}>
|
|
新增分类
|
|
</Button>
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.data
|
|
}))(menuIndex);
|