126 lines
3.6 KiB
TypeScript
126 lines
3.6 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 {SearchOutlined} from "@ant-design/icons";
|
|||
|
|
import {get} from "../../../util/AjaxUtils.ts";
|
|||
|
|
|
|||
|
|
export const MAX_MOD_SIZE = 15;
|
|||
|
|
|
|||
|
|
interface DataType {
|
|||
|
|
projModId: string;
|
|||
|
|
projId: string;
|
|||
|
|
modContext: string;
|
|||
|
|
modName: string;
|
|||
|
|
modUrl: string;
|
|||
|
|
modDesc: string;
|
|||
|
|
modIcon: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function ProjConfigModListShow() {
|
|||
|
|
const nav = useNavigate();
|
|||
|
|
const pathParams = useParams();
|
|||
|
|
const [messageApi, contextHolder] = message.useMessage();
|
|||
|
|
const [dataArray, setDataArray] = useState<DataType[]>();
|
|||
|
|
|
|||
|
|
const height = window.innerHeight - 165;
|
|||
|
|
|
|||
|
|
const renderData = () => {
|
|||
|
|
get<DataType>({
|
|||
|
|
messageApi,
|
|||
|
|
url: '/api/proj-mod/list',
|
|||
|
|
config: {
|
|||
|
|
params: {
|
|||
|
|
projId: pathParams.projId
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onSuccess({data}) {
|
|||
|
|
setDataArray([...data]);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const columns: TableProps<DataType>['columns'] = [
|
|||
|
|
{
|
|||
|
|
title: '菜单标题',
|
|||
|
|
dataIndex: 'modName',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 180
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '菜单说明',
|
|||
|
|
dataIndex: 'modDesc',
|
|||
|
|
align: 'center',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '图标',
|
|||
|
|
dataIndex: 'modIcon',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 80,
|
|||
|
|
render: (_text) => {
|
|||
|
|
return <i className={_text}> </i>
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '菜单地址',
|
|||
|
|
dataIndex: 'menuUrl',
|
|||
|
|
align: 'center',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '创建时间',
|
|||
|
|
dataIndex: 'gmtCreate',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 180
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '操作',
|
|||
|
|
dataIndex: 'option',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 100,
|
|||
|
|
render: (_text, record) => {
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Button type="default" size="small"
|
|||
|
|
style={{marginRight: '5px'}}
|
|||
|
|
onClick={() => {
|
|||
|
|
nav(`/proj-edit/config-mod-show/${pathParams.projId}/${record.projModId}`)
|
|||
|
|
}}>
|
|||
|
|
<SearchOutlined/>
|
|||
|
|
</Button>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
renderData();
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
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" style={{marginTop: '15px'}}>
|
|||
|
|
<Table columns={columns} dataSource={dataArray} pagination={{pageSize: 20}}
|
|||
|
|
scroll={{y: height - 210}} size="middle" bordered key="dataTable" rowKey="projModId"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
}
|