system-copyright-react/src/route/proj/edit/ProjConfigModShow.tsx

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";
import {MAX_MOD_SIZE, MAX_MOD_SIZE_FREE, MIN_MOD_SIZE, MIN_MOD_SIZE_FREE} from "./ProjConfigModList.tsx";

type FormFieldType = {
    projId: string;
    modName: string;
    modDesc: string;
    modIcon: string;
    fields: IModField[];
}

type PropsType = {
    isFree?: boolean;
}

export default function ProjConfigModShow(props: PropsType) {
    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 minSize = props.isFree ? MIN_MOD_SIZE_FREE : MIN_MOD_SIZE;
    const maxSize = props.isFree ? MAX_MOD_SIZE_FREE : MAX_MOD_SIZE;

    const height = window.innerHeight - 180;

    useEffect(() => {
        get<any>({
            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: <a onClick={() => {
                            if(props.isFree) {
                                nav(`/proj-efree/${pathParams.projId}`)
                            } else {
                                `/proj-edit/${pathParams.projId}`
                            }
                        }}>编辑项目</a>
                    },
                    {
                        title: <a onClick={() => {
                            nav(-1);
                        }}>系统菜单管理</a>
                    },
                    {title: '查看菜单'},
                ]}
            />
            <div className="mod-edit-container" style={{height: `${height}px`}}>
                <Alert message={`菜单指的是系统的功能，最少${minSize}个菜单，最多${maxSize}个菜单`} 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>
        </>
    )

}