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

import './proj-new.css';
import {Link, useNavigate, useParams} from "react-router-dom";
import {Breadcrumb, Button, Flex, Form, type FormProps, Input, Modal} from "antd";
import {useState} from "react";

const {TextArea} = Input;

type FieldType = {
    projTitle: string;
    projDesc: string;
};

export default function ProjNew() {
    const height = window.innerHeight - 150;
    const [isModalOpen, setIsModalOpen] = useState(false);
    const nav = useNavigate();
    const params = useParams();

    const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
        console.log('Success:', values);
        setIsModalOpen(true);
    };

    const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const handleConfirmOk = () => {
        // 扣款
        nav('/proj-edit');
    }

    const handleConfirmCancel = () => {
        setIsModalOpen(false);
    }

    const onBack = () => {
        nav(-1);
    }

    return (
        <>
            <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={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item<FieldType>
                                label="系统标题"
                                name="projTitle"
                                rules={[{required: true, message: '请输入系统标题'}]}
                            >
                                <Input placeholder="请输入系统标题"/>
                            </Form.Item>

                            <Form.Item<FieldType>
                                label="简单描述"
                                name="projDesc"
                                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-orange)'}}>
                                        提交并付款
                                    </Button>
                                    <Button type="default" htmlType="button" onClick={onBack}>
                                        返回上一级
                                    </Button>
                                </Flex>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
            <Modal title="提示" okText="确定" cancelText="取消" open={isModalOpen} onOk={handleConfirmOk}
                   onCancel={handleConfirmCancel}>
                <div>该操作会扣除{params.price}元，确定操作码？</div>
            </Modal>
        </>
    )
}