system-copyright-react/src/route/proj/edit/ProjConfigModEdit.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 { get, put } 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;
    projModId?: string
    closeModal?: any
    projId?:string
}

export default function ProjConfigModEdit(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 [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 - 230;

    useEffect(() => {
        // console.log('嘻嘻嘻',props.projModId);

        get<any>({
            messageApi,
            url: `api/proj-mod/get/${props.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`, marginTop: '17px', 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: '请输入菜单名称' }]}
                                >
                                    <Input placeholder="请输入菜单名称" maxLength={8} />
                                </Form.Item>
                                <Form.Item<FormFieldType>
                                    label="菜单说明"
                                    name="modDesc"
                                    extra="此内容会作为功能描述生成到操作手册中，请详细描述，最多600字"
                                    rules={[{ required: true, message: '请输入菜单说明' }]}
                                >
                                    <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 modFiledArray={fields}
                                        isEdit={true}
                                        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"
                                        size='large'
                                    // style={{backgroundColor: 'var(--color-primary)'}}
                                    >
                                        保存
                                    </Button>
                                    <Button type="default" htmlType="button"
                                        size='large'
                                        onClick={() => {
                                            props.closeModal()
                                            get<any>({
                                                messageApi,
                                                url: `api/proj-mod/get/${props.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)
                                                }
                                            })
                                        }}>
                                        返回
                                    </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'))));


                    const isChinese =
                        (form.getFieldValue('fields')).every((item: { fieldDesc: string; }) => {
                            return /^([\u4e00-\u9fa5a-zA-Z]+)$/.test(item.fieldDesc);
                        });

                    // console.log(isChinese);

                    if (!isChinese) {
                        messageApi.error('描述由中文和字母组成')
                    } else {
                        put({
                            messageApi,
                            url: `/api/proj-mod/update/${props.projModId}`,
                            body: {
                                projId: form.getFieldValue('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);
                                    props.closeModal()
                                }, 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 />
        </>
    )

}