115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
|
import './proj-config-list-mod.css';
|
|||
|
|
import {
|
|||
|
|
Alert,
|
|||
|
|
Breadcrumb, Button,
|
|||
|
|
message,
|
|||
|
|
Table, TableProps,
|
|||
|
|
} from "antd";
|
|||
|
|
import {Link, useNavigate, useParams} from "react-router-dom";
|
|||
|
|
import {useEffect, useState} from "react";
|
|||
|
|
import {EditOutlined, PlusOutlined, DeleteOutlined} from "@ant-design/icons";
|
|||
|
|
import {get} from "../../../util/AjaxUtils.ts";
|
|||
|
|
|
|||
|
|
interface DataType {
|
|||
|
|
projModId: string;
|
|||
|
|
projId: string;
|
|||
|
|
modContext: string;
|
|||
|
|
modName: string;
|
|||
|
|
modUrl: string;
|
|||
|
|
modDesc: string;
|
|||
|
|
modIcon: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const columns: TableProps<DataType>['columns'] = [
|
|||
|
|
{
|
|||
|
|
title: '菜单标题',
|
|||
|
|
dataIndex: 'modName',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 180
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '菜单说明',
|
|||
|
|
dataIndex: 'modDesc',
|
|||
|
|
align: 'center',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '图标',
|
|||
|
|
dataIndex: 'modIcon',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 80
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '菜单地址',
|
|||
|
|
dataIndex: 'menuUrl',
|
|||
|
|
align: 'center',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '创建时间',
|
|||
|
|
dataIndex: 'gmtCreate',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 180
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '操作',
|
|||
|
|
dataIndex: 'option',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 100
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
export default function ProjConfigModList() {
|
|||
|
|
const nav = useNavigate();
|
|||
|
|
const pathParams = useParams();
|
|||
|
|
const [messageApi, contextHolder] = message.useMessage();
|
|||
|
|
const [dataArray, setDataArray] = useState<DataType[]>();
|
|||
|
|
const height = window.innerHeight - 210;
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
get<DataType>({
|
|||
|
|
messageApi,
|
|||
|
|
url: '/api/proj-mod/list',
|
|||
|
|
config: {
|
|||
|
|
params: {
|
|||
|
|
projId: pathParams.projId
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onSuccess({data}) {
|
|||
|
|
data.forEach(item => {
|
|||
|
|
item.modIcon = <i className={item.modIcon}></i>
|
|||
|
|
item.option = (
|
|||
|
|
<>
|
|||
|
|
<Button value="default" type="primary" size="small" style={{marginRight: '5px'}}><EditOutlined /></Button>
|
|||
|
|
<Button value="large" type="primary" size="small" danger><DeleteOutlined /></Button>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
setDataArray([...data])
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
{contextHolder}
|
|||
|
|
<Breadcrumb
|
|||
|
|
items={[
|
|||
|
|
{title: <Link to={'/'}>首页</Link>},
|
|||
|
|
{title: <Link to={'/proj-create'}>创建项目</Link>},
|
|||
|
|
{title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
|
|||
|
|
{title: '系统菜单管理'},
|
|||
|
|
]}
|
|||
|
|
/>
|
|||
|
|
<div className="mod-list-container" style={{height: `${height}px`}}>
|
|||
|
|
<Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info" />
|
|||
|
|
<div className="mod-list">
|
|||
|
|
<div className="table-btn-group">
|
|||
|
|
<Button value="small"><PlusOutlined /> 新增</Button>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<Table columns={columns} dataSource={dataArray} pagination={{ pageSize: 20 }} scroll={{ y: height - 210 }} size="middle" bordered key="dataTable" rowKey="projModId"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
}
|