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

import './proj-edit-step.css';
import {Breadcrumb, Col, Flex, message, Modal, Row, Spin, Checkbox, Divider} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {get, put} from "../../../util/AjaxUtils.ts";
import {Button, Form, Input} from 'antd';
import {AxiosResponse} from "axios";
import {IEnvHard, IEnvLang, IEnvSoft, IEnvTechnical} from "../../../interfaces/proj/IEnv.ts";

const {TextArea} = Input;

type FieldType = {
    envHard: string;
    envHardCustom: string;
    envSoft: string;
    envSoftCustom: string;
    envLang: string;
    envLangCustom: string;
    envTechnical: string;
    envTechnicalCustom: string;
};

type FormFieldType = {
    envHard: string[];
    envHardCustom: string;
    envSoft: string[];
    envSoftCustom: string;
    envLang: string[];
    envLangCustom: string;
    envTechnical: string[];
    envTechnicalCustom: string;
};

export default function ProjEditStep3() {
    const nav = useNavigate();
    const pathParams = useParams();
    const [messageApi, contextHolder] = message.useMessage();
    const [form] = Form.useForm<FormFieldType>();
    const [loading, setLoading] = useState<boolean>(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [envHardArray, setEnvHardArray] = useState<IEnvHard[]>([]);
    const [envSoftArray, setEnvSoftArray] = useState<IEnvSoft[]>([]);
    const [envLangArray, setEnvLangArray] = useState<IEnvLang[]>([]);
    const [envTechnicalArray, setEnvTechnicalArray] = useState<IEnvTechnical[]>([]);
    const height = window.innerHeight - 180;

    const listEnvHard = () => {
        return new Promise<IEnvHard[]>((resolve) => {
            get<IEnvHard[]>({
                messageApi,
                url: '/api/proj-env-hard/list',
                onSuccess({data}) {
                    resolve(data);
                }
            })
        })
    }
    const listEnvSoft = () => {
        return new Promise<IEnvSoft[]>((resolve) => {
            get<IEnvSoft[]>({
                messageApi,
                url: '/api/proj-env-soft/list',
                onSuccess({data}) {
                    resolve(data);
                }
            })
        })
    }
    const listEnvLang = () => {
        return new Promise<IEnvLang[]>((resolve) => {
            get<IEnvLang[]>({
                messageApi,
                url: '/api/proj/env/lang/list',
                onSuccess({data}) {
                    resolve(data);
                }
            })
        })
    }
    const listEnvTechnical = () => {
        return new Promise<IEnvTechnical[]>((resolve) => {
            get<IEnvTechnical[]>({
                messageApi,
                url: '/api/proj/env/technical/list',
                onSuccess({data}) {
                    resolve(data);
                }
            })
        })
    }

    const getData = () => {
        return new Promise<FieldType>((resolve) => {
            get({
                messageApi,
                url: `/api/proj/get/edit-step3/${pathParams.projId}`,
                onSuccess({data}: AxiosResponse) {
                    resolve(data);
                }
            })
        })
    }

    const render = async () => {
        const envHards = await listEnvHard();
        const envSofts = await listEnvSoft();
        const envLangs = await listEnvLang();
        const envTechnicals = await listEnvTechnical();
        const data = await getData();
        setEnvHardArray(envHards);
        setEnvSoftArray(envSofts);
        setEnvLangArray(envLangs);
        setEnvTechnicalArray(envTechnicals);

        form.setFieldsValue({
            envHard: data.envHard.split(','),
            envHardCustom: data.envHardCustom,
            envSoft: data.envSoft.split(','),
            envSoftCustom: data.envSoftCustom,
            envLang: data.envLang.split(','),
            envLangCustom: data.envLangCustom,
            envTechnical: data.envTechnical.split(','),
            envTechnicalCustom: data.envTechnicalCustom,
        })
    }

    useEffect(() => {
        render();
    }, [])

    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="form-container" style={{height: `${height}px`}}>
                <div className="form-body">
                    <Form
                        name="basic"
                        form={form}
                        layout="vertical"
                        labelCol={{span: 8}}
                        wrapperCol={{span: 24}}
                        style={{width: '1000px'}}
                        onFinish={() => {
                            setIsEditModalOpen(true);
                        }}
                        autoComplete="off"
                    >
                        <Form.Item<FormFieldType>
                            label="硬件环境"
                            name="envHard"
                            rules={[{required: true, message: '请选择硬件环境'}]}
                        >
                            <Checkbox.Group style={{width: '100%'}}>
                                <Row>{envHardArray.map((item, index) => {
                                    return (
                                        <Col span={4} key={`envHard-${index}`}>
                                            <Checkbox value={item.projEnvHardId} style={{ lineHeight: '32px' }}>{item.type} - {item.content}</Checkbox>
                                        </Col>
                                    )
                                })}</Row>
                            </Checkbox.Group>
                        </Form.Item>
                        <Form.Item<FormFieldType>
                            label="其他"
                            name="envHardCustom"
                            rules={[{required: false, message: '请输入其他硬件环境'}]}
                        >
                            <TextArea rows={3} placeholder="请输入其他硬件环境"/>
                        </Form.Item>
                        <Divider dashed />

                        <Form.Item<FormFieldType>
                            label="软件环境"
                            name="envSoft"
                            rules={[{required: true, message: '请选择软件环境'}]}
                        >
                            <Checkbox.Group style={{width: '100%'}}>
                                <Row>{envSoftArray.map((item, index) => {
                                    return (
                                        <Col span={4} key={`envHard-${index}`}>
                                            <Checkbox value={item.projEnvSoftId} style={{ lineHeight: '32px' }}>{item.type} - {item.content}</Checkbox>
                                        </Col>
                                    )
                                })}</Row>
                            </Checkbox.Group>
                        </Form.Item>
                        <Form.Item<FormFieldType>
                            label="其他"
                            name="envSoftCustom"
                            rules={[{required: false, message: '请输入其他软件环境'}]}
                        >
                            <TextArea rows={3} placeholder="请输入其他软件环境"/>
                        </Form.Item>
                        <Divider dashed />

                        <Form.Item<FormFieldType>
                            label="编程语言"
                            name="envLang"
                            rules={[{required: true, message: '请选择编程语言'}]}
                        >
                            <Checkbox.Group style={{width: '100%'}}>
                                <Row>{envLangArray.map((item, index) => {
                                    return (
                                        <Col span={4} key={`envHard-${index}`}>
                                            <Checkbox value={item.projEnvLangId} style={{ lineHeight: '32px' }}>{item.content}</Checkbox>
                                        </Col>
                                    )
                                })}</Row>
                            </Checkbox.Group>
                        </Form.Item>
                        <Form.Item<FormFieldType>
                            label="其他"
                            name="envLangCustom"
                            rules={[{required: false, message: '请输入其他编程语言'}]}
                        >
                            <TextArea rows={3} placeholder="请输入其他编程语言"/>
                        </Form.Item>
                        <Divider dashed />

                        <Form.Item<FormFieldType>
                            label="技术特点"
                            name="envTechnical"
                            rules={[{required: true, message: '请选择编程语言'}]}
                        >
                            <Checkbox.Group style={{width: '100%'}}>
                                <Row>{envTechnicalArray.map((item, index) => {
                                    return (
                                        <Col span={4} key={`envHard-${index}`}>
                                            <Checkbox value={item.projEnvTechnicalId} style={{ lineHeight: '32px' }}>{item.content}</Checkbox>
                                        </Col>
                                    )
                                })}</Row>
                            </Checkbox.Group>
                        </Form.Item>
                        <Form.Item<FormFieldType>
                            label="其他"
                            name="envTechnicalCustom"
                            rules={[{required: false, message: '请输入其他技术特点'}]}
                        >
                            <TextArea rows={3} placeholder="请输入其他技术特点"/>
                        </Form.Item>
                        <Divider dashed />
                        <Form.Item wrapperCol={{span: 24}}>
                            <Flex align="center" justify="center" gap="large">
                                <Button type="primary"
                                        htmlType="submit"
                                        style={{backgroundColor: 'var(--color-primary)'}}>
                                    保存
                                </Button>
                                <Button type="default" htmlType="button" onClick={() => {
                                    nav(-1);
                                }}>
                                    返回
                                </Button>
                            </Flex>
                        </Form.Item>
                    </Form>
                </div>
            </div>
            <Modal title="提示"
                   okText="确定"
                   cancelText="取消"
                   open={isEditModalOpen}
                   onOk={() => {
                       setIsEditModalOpen(false);
                       put({
                           messageApi,
                           url: `/api/proj/update/edit-step3/${pathParams.projId}`,
                           body: {
                               envHard: form.getFieldValue('envHard').join(','),
                               envHardCustom: form.getFieldValue('envHardCustom'),
                               envSoft: form.getFieldValue('envSoft').join(','),
                               envSoftCustom: form.getFieldValue('envSoftCustom'),
                               envLang: form.getFieldValue('envLang').join(','),
                               envLangCustom: form.getFieldValue('envLangCustom'),
                               envTechnical: form.getFieldValue('envTechnical').join(','),
                               envTechnicalCustom: form.getFieldValue('envTechnicalCustom'),
                           },
                           onBefore() {
                               setLoading(true);
                           },
                           onSuccess() {
                               messageApi.open({
                                   type: 'success',
                                   content: '编辑成功'
                               })
                           },
                           onFinally() {
                               setLoading(false);
                           }
                       })
                   }}
                   onCancel={() => {
                       setIsEditModalOpen(false);
                   }}>
                <div>确定提交吗？</div>
            </Modal>
            <Spin tip="正在提交..." spinning={loading} fullscreen/>
        </>
    )

}