101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
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-primary)'}}>
|
||
提交并付款
|
||
</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>
|
||
</>
|
||
)
|
||
} |