87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import './proj-config-list-mod.css';
|
|
import {Alert, Breadcrumb, message, Table, TableProps,} from "antd";
|
|
import {Link, useParams} from "react-router-dom";
|
|
import {useEffect, useState} from "react";
|
|
import {get} from "../../../util/AjaxUtils.ts";
|
|
|
|
export const MAX_MOD_SIZE = 2;
|
|
|
|
interface DataType {
|
|
projModId: string;
|
|
projId: string;
|
|
projMenuId: string;
|
|
menuTitle: string;
|
|
menuIcon: string;
|
|
menuUrl: string;
|
|
orderNo: string;
|
|
}
|
|
|
|
export default function ProjConfigMenuListShow() {
|
|
|
|
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-menu/list',
|
|
config: {
|
|
params: {
|
|
projId: pathParams.projId
|
|
}
|
|
},
|
|
onSuccess({data}) {
|
|
setDataArray([...data]);
|
|
}
|
|
})
|
|
}
|
|
|
|
const columns: TableProps<DataType>['columns'] = [
|
|
{
|
|
title: '菜单标题',
|
|
dataIndex: 'menuTitle',
|
|
align: 'center',
|
|
width: 250
|
|
},
|
|
{
|
|
title: '菜单连接',
|
|
dataIndex: 'menuUrl',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: '顺序',
|
|
dataIndex: 'orderNo',
|
|
align: 'center',
|
|
width: 120,
|
|
},
|
|
];
|
|
|
|
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="此数据在添加模块候自动生成，编辑顺序列可修改" type="info"/>
|
|
<div className="mod-list" style={{marginTop: '15px'}}>
|
|
<Table columns={columns} dataSource={dataArray} pagination={{pageSize: 20}}
|
|
scroll={{y: height - 160}} size="middle" bordered key="dataTable" rowKey="projModId"/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
|
|
} |