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

import './proj-config-list-mod.css';
import {
    Alert,
    Button, Col, Flex, Form, Input,
    message, Modal, Row, Spin,
} from "antd";
import { useNavigate, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import FaiconSelect from "../../../components/faicon/FaIconSelect.tsx";
import ModField, { IModField } from "../../../components/modfield/ModField.tsx";
import { post } from "../../../util/AjaxUtils.ts";
import { MAX_MOD_SIZE, MAX_MOD_SIZE_FREE, MIN_MOD_SIZE, MIN_MOD_SIZE_FREE } from "./ProjConfigModList.tsx";

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

type PropsType = {
    isFree?: boolean;
}

export default function ProjConfigModSave(props: PropsType) {
    const nav = useNavigate();
    const pathParams = useParams();
    const [messageApi, contextHolder] = message.useMessage();
    const [form] = Form.useForm<FormFieldType>();
    const [loading, setLoading] = useState<boolean>(false);
    const [isModIconModalOpen, setIsModIconModalOpen] = useState(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [selectedModIcon, setSelectedModIcon] = useState<string>('fa fa-list');
    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 - 210;

    useEffect(() => {
        form.setFieldsValue({
            modIcon: 'fa fa-list'
        })
    }, [])

    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`, marginTop: '18px', overflow: 'auto' }}>
                <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%' }}
                        onFinish={() => {
                            setIsEditModalOpen(true);
                        }}
                        autoComplete="off"
                    >
                        <Row gutter={15}>
                            <Col span={10}>
                                <Form.Item<FormFieldType>
                                    label="菜单名称"
                                    name="modName"
                                    extra="此内容会作为菜单名生成菜单，最多8个字"
                                    rules={[{ required: true, message: '请输入菜单名称' },
                                    // {
                                    //     validator: (_, value) => {
                                    //         const reg = /^[\u4e00-\u9fa5]+$/; // 中文字符的正则表达式
                                    //         if (!reg.test(value)) {
                                    //             return Promise.reject('请输入中文字符');
                                    //         }
                                    //         return Promise.resolve();
                                    //     }
                                    // },
                                    ]}
                                >
                                    <Input placeholder="请输入菜单名称" maxLength={8} />
                                </Form.Item>
                                <Form.Item<FormFieldType>
                                    label="菜单说明"
                                    name="modDesc"
                                    extra="此内容会作为功能描述生成到操作手册中，请详细描述，最多600字"
                                    rules={[{ required: true, message: '请输入菜单说明' },
                                    // {
                                    //     validator: (_, value) => {
                                    //         const reg = /^[\u4e00-\u9fa5]+$/; // 中文字符的正则表达式
                                    //         if (!reg.test(value)) {
                                    //             return Promise.reject('请输入中文字符');
                                    //         }
                                    //         return Promise.resolve();
                                    //     }
                                    // }
                                    ]}
                                >
                                    <Input.TextArea placeholder="请输入菜单说明" rows={6} maxLength={600} />
                                </Form.Item>
                                <Form.Item<FormFieldType>
                                    label="菜单图标"
                                    name="modIcon"
                                    extra="菜单图标会显示在菜单栏中"
                                    rules={[{ required: true, message: '请输入菜单图标' }]}
                                >
                                    <Button size="large" onClick={() => {
                                        setIsModIconModalOpen(true);
                                    }}><i className={selectedModIcon}></i></Button>
                                </Form.Item>
                            </Col>
                            <Col span={14}>
                                <Form.Item<FormFieldType>
                                    name="fields"
                                    rules={[{ required: true, message: '请添加菜单属性' }
                                    ]}
                                >
                                    <ModField
                                        isEdit={true}
                                        isFree={props.isFree}
                                        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="primary"
                                        htmlType="submit"
                                        // style={{backgroundColor: 'var(--color-primary)'}}
                                        size='large'
                                    >
                                        保存
                                    </Button>
                                    <Button type="default" htmlType="button"
                                        size='large'
                                        onClick={() => {
                                            nav(-1);
                                        }}>
                                        返回
                                    </Button>
                                </Flex>
                            </div>
                        </Form.Item>
                    </Form>

                </div>
            </div>
            <Modal title="提示"
                okText="确定"
                cancelText="取消"
                open={isEditModalOpen}
                onOk={() => {
                    
                    setIsEditModalOpen(false);

                    const reg = /^[\u4e00-\u9fa5]+$/; // 中文字符的正则表达式
                    console.log( ((form.getFieldValue('fields'))[0].fieldDesc ));
                   
                   
                    if (!reg.test((form.getFieldValue('fields'))[0].fieldDesc)) {
                        messageApi.error('描述必须为中文')
                    }else{
                        post({
                            messageApi,
                            url: `/api/proj-mod/save`,
                            body: {
                                projId: pathParams.projId,
                                modName: form.getFieldValue('modName'),
                                modDesc: form.getFieldValue('modDesc'),
                                modIcon: form.getFieldValue('modIcon'),
                                fields: form.getFieldValue('fields'),
                            },
                            onBefore() {
                                setLoading(true);
                            },
                            onSuccess() {
                                messageApi.success('添加成功');
                                setTimeout(function () {
                                    // 刷新当前页面
                                    // location.reload();
                                    // 返回上一页
                                    nav(-1);
                                }, 1000);
                            },
                            onFinally() {
                                setLoading(false);
                            }
                        })
                    }
                 

                }}
                onCancel={() => {
                    setIsEditModalOpen(false);
                }}>
                <div>确定提交吗？</div>
            </Modal>
            <Modal title="选择图标"
                footer={false}
                open={isModIconModalOpen}
                onCancel={() => {
                    setIsModIconModalOpen(false);
                }}>
                <div style={{ maxHeight: '400px', overflow: 'auto' }}>
                    <FaiconSelect selectedIcon={selectedModIcon}
                        handleClick={(icon) => {
                            form.setFieldValue('modIcon', icon);
                            setSelectedModIcon(icon);
                        }}
                    />
                </div>
            </Modal>
            <Spin tip="正在提交..." spinning={loading} fullscreen />
        </>
    )

}