system-copyright-react/src/route/proj/ProjNew.tsx

import './proj-new.css';
import {Link, useNavigate, useParams, useSearchParams} from "react-router-dom";
import {Breadcrumb, Button, Flex, Form, Input, message, Modal, Spin} from "antd";
import {useEffect, useState} from "react";
import {get, post} from "../../util/AjaxUtils.ts";
import {IProjCharge, ProjAdditionalType, ProjChargeType} from "../../interfaces/proj/IProj.ts";

const {TextArea} = Input;

type ProjInfo = {
    projName: string;
    projIntroduction: string;
};

export default function ProjNew() {
    const nav = useNavigate();
    const pathParams = useParams();
    const [queryParams] = useSearchParams();

    const [messageApi, contextHolder] = message.useMessage();
    const [loading, setLoading] = useState<boolean>(false);
    const height = window.innerHeight - 150;
    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [chargePrice, setChargePrice] = useState(0);
    const [projInfo, setProjInfo] = useState<ProjInfo>({
        projName: '',
        projIntroduction: '',
    });
    const [createProjId, setCreateProjId] = useState('');
    const listProjChargeAdditional: string[] = [];

    useEffect(() => {
        get({
            messageApi: messageApi,
            url: '/api/proj/charge/get',
            onSuccess({data}) {
                const charge = data as IProjCharge;
                let price = 0;
                switch (pathParams.projChargeType) {
                    case ProjChargeType.ALL:
                        price = charge.proj.all;
                        break;
                    case ProjChargeType.MATERIAL_AGENT:
                        price = charge.proj.materialAgent;
                        break;
                    case ProjChargeType.MATERIAL_AGENT_URGENT:
                        price = charge.proj.materialAgentUrgent;
                        break;
                    case ProjChargeType.MATERIAL:
                        price = charge.proj.material;
                        break;
                    case ProjChargeType.FREE:
                        price = charge.proj.free;
                        break;
                    default:
                        messageApi.error({
                            type: 'error',
                            content: '价格类型错误',
                        })
                }
                if (queryParams.get('pkg')) {
                    price += charge.additional.pkg;
                    listProjChargeAdditional.push(ProjAdditionalType.PKG);
                }
                if (queryParams.get('videoDemo')) {
                    price += charge.additional.videoDemo;
                    listProjChargeAdditional.push(ProjAdditionalType.VIDEO_DEMO);
                }
                setChargePrice(price);
            }
        })
    }, []);

    return (
        <>
            {contextHolder}
            <Breadcrumb
                items={[
                    {title: <Link to={'/'}>首页</Link>},
                    {title: <Link to={'/proj-create'}>创建项目</Link>},
                    {title: '新建项目'},
                ]}
            />
            <div style={{height: `${height}px`, overflow: 'auto'}}>
                <div className="proj-new">
                    <div className="proj-title">请完善项目的基本信息</div>
                    <div className="proj-form">
                        <Form
                            name="basic"
                            layout={'vertical'}
                            labelCol={{span: 24}}
                            wrapperCol={{span: 24}}
                            style={{width: 500}}
                            initialValues={{remember: true}}
                            onFinish={(formData) => {
                                setIsCreateModalOpen(true);
                                setProjInfo({
                                    projName: formData.projName,
                                    projIntroduction: formData.projIntroduction
                                })
                            }}
                            autoComplete="off"
                        >
                            <Form.Item<ProjInfo>
                                label="系统标题"
                                name="projName"
                                rules={[{required: true, message: '请输入系统标题'}]}
                            >
                                <Input placeholder="请输入系统标题"/>
                            </Form.Item>

                            <Form.Item<ProjInfo>
                                label="简单描述"
                                name="projIntroduction"
                                rules={[{required: true, message: '请输入简单描述'}]}
                            >
                                <TextArea rows={6} placeholder="请用一段话简单描述系统"/>
                            </Form.Item>

                            <Form.Item>
                                <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>
            </div>
            <Modal title="提示"
                   okText="确定"
                   cancelText="取消"
                   open={isCreateModalOpen}
                   onOk={() => {
                       setIsCreateModalOpen(false);
                       post({
                           messageApi,
                           url: '/api/proj/create',
                           body: {
                               projName: projInfo.projName,
                               projIntroduction: projInfo.projIntroduction,
                               projChargeType: pathParams.projChargeType,
                               listProjChargeAdditional: listProjChargeAdditional
                           },
                           onBefore() {
                               setLoading(true);
                           },
                           onSuccess({data}) {
                               setIsEditModalOpen(true);
                               setCreateProjId(data.data);
                           },
                           onFinally() {
                               setLoading(false);
                           }
                       })
                   }}
                   onCancel={() => {
                       setIsCreateModalOpen(false);
                   }}>
                <div>该操作会扣除 {chargePrice / 100} 元，确定操作码？</div>
            </Modal>
            <Modal title="提示"
                   okText="确定"
                   cancelText="取消"
                   open={isEditModalOpen}
                   onOk={() => {
                       nav(`/proj-edit/${createProjId}`);
                   }}
                   onCancel={() => {
                       setIsEditModalOpen(false);
                   }}>
                <div>项目创建成功，开始编辑项目？</div>
            </Modal>
            <Spin tip="正在提交..." spinning={loading} fullscreen/>
        </>
    )
}