135 lines
5.9 KiB
TypeScript
135 lines
5.9 KiB
TypeScript
import './proj-config-list-mod.css';
|
||
import {
|
||
Alert,
|
||
Breadcrumb, Button, Col, Flex, Form, Input,
|
||
message, Row,
|
||
} from "antd";
|
||
import {Link, useNavigate, useParams} from "react-router-dom";
|
||
import {useEffect, useState} from "react";
|
||
import ModField, {IModField} from "../../../components/modfield/ModField.tsx";
|
||
import {get} from "../../../util/AjaxUtils.ts";
|
||
|
||
type FormFieldType = {
|
||
projId: string;
|
||
modName: string;
|
||
modDesc: string;
|
||
modIcon: string;
|
||
fields: IModField[];
|
||
}
|
||
|
||
export default function ProjConfigModShow() {
|
||
const nav = useNavigate();
|
||
const pathParams = useParams();
|
||
const [messageApi, contextHolder] = message.useMessage();
|
||
const [form] = Form.useForm<FormFieldType>();
|
||
const [selectedModIcon, setSelectedModIcon] = useState<string>('fa fa-list');
|
||
const [fields, setFields] = useState<IModField[]>([]);
|
||
|
||
const height = window.innerHeight - 180;
|
||
|
||
useEffect(() => {
|
||
get({
|
||
messageApi,
|
||
url: `api/proj-mod/get/${pathParams.projModId}`,
|
||
onSuccess({data}) {
|
||
form.setFieldsValue({
|
||
projId: data.projId,
|
||
modName: data.modName,
|
||
modDesc: data.modDesc,
|
||
modIcon: data.modIcon,
|
||
fields: data.fields,
|
||
});
|
||
setSelectedModIcon(data.modIcon);
|
||
setFields(data.fields)
|
||
}
|
||
})
|
||
}, [])
|
||
|
||
return (
|
||
<>
|
||
{contextHolder}
|
||
<Breadcrumb
|
||
items={[
|
||
{title: <Link to={'/'}>首页</Link>},
|
||
{title: <Link to={'/proj-create'}>创建项目</Link>},
|
||
{title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
|
||
{title: <Link to={`/proj-edit/config-mod-list/${pathParams.projId}`}>系统菜单管理</Link>},
|
||
{title: '查看菜单'},
|
||
]}
|
||
/>
|
||
<div className="mod-edit-container" style={{height: `${height}px`}}>
|
||
<Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info"/>
|
||
<div className="mod-content">
|
||
<Form
|
||
name="basic"
|
||
form={form}
|
||
layout="vertical"
|
||
labelCol={{span: 8}}
|
||
wrapperCol={{span: 24}}
|
||
style={{width: '100%'}}
|
||
autoComplete="off"
|
||
>
|
||
<Row gutter={15}>
|
||
<Col span={10}>
|
||
<Form.Item<FormFieldType>
|
||
label="菜单名称"
|
||
name="modName"
|
||
extra="此内容会作为菜单名生成菜单，最多8个字"
|
||
rules={[{required: true, message: '请输入菜单名称'}]}
|
||
>
|
||
<Input placeholder="请输入菜单名称" maxLength={8} readOnly/>
|
||
</Form.Item>
|
||
<Form.Item<FormFieldType>
|
||
label="菜单说明"
|
||
name="modDesc"
|
||
extra="此内容会作为功能描述生成到操作手册中，请详细描述，最多600字"
|
||
rules={[{required: true, message: '请输入菜单说明'}]}
|
||
>
|
||
<Input.TextArea placeholder="请输入菜单说明" rows={6} maxLength={600} readOnly/>
|
||
</Form.Item>
|
||
<Form.Item<FormFieldType>
|
||
label="菜单图标"
|
||
name="modIcon"
|
||
extra="菜单图标会显示在菜单栏中"
|
||
rules={[{required: true, message: '请输入菜单图标'}]}
|
||
>
|
||
<Button size="large"><i className={selectedModIcon}></i></Button>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={14}>
|
||
<Form.Item<FormFieldType>
|
||
name="fields"
|
||
rules={[{required: true, message: '请添加菜单属性'}]}
|
||
>
|
||
<ModField modFiledArray={fields}
|
||
isEdit={false}
|
||
scrollHeight={height - 380}
|
||
handleChange={(dataArray) => {
|
||
if (!dataArray) {
|
||
return;
|
||
}
|
||
form.setFieldValue('fields', dataArray);
|
||
}}/>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Form.Item wrapperCol={{span: 24}}>
|
||
<div style={{paddingTop: '15px'}}>
|
||
<Flex align="center" justify="center" gap="large">
|
||
<Button type="default" htmlType="button" onClick={() => {
|
||
nav(-1);
|
||
}}>
|
||
返回
|
||
</Button>
|
||
</Flex>
|
||
</div>
|
||
</Form.Item>
|
||
</Form>
|
||
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
|
||
} |