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

131 lines
5.5 KiB
TypeScript
Raw Normal View History

2024-03-26 11:54:30 +08:00
import './proj-edit-step.css';
import {Breadcrumb, Col, DatePicker, message, Row} from "antd";
import locale from 'antd/es/date-picker/locale/zh_CN';
import {Link, useParams} from "react-router-dom";
import {useEffect} from "react";
import {get} from "../../../util/AjaxUtils.ts";
import {Form, Input} from 'antd';
import {AxiosResponse} from "axios";
import dayjs, {Dayjs} from 'dayjs';
type FieldType = {
projSubName: string;
projVersion: string;
projDevCompleteDate: Dayjs;
companyName: string;
companyNameEn: string;
};
export default function ProjEditStep2Show() {
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
const [form] = Form.useForm<FieldType>();
const height = window.innerHeight - 180;
const dateFormat = 'YYYY年MM月DD日';
useEffect(() => {
get({
messageApi,
url: `/api/proj/get/edit-step2/${pathParams.projId}`,
onSuccess({data}: AxiosResponse) {
form.setFieldsValue({
projSubName: data.projSubName,
projVersion: data.projVersion,
projDevCompleteDate: dayjs(data.projDevCompleteDate, 'YYYY-MM-DD'),
companyName: data.companyName,
companyNameEn: data.companyNameEn,
})
}
})
}, [])
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: '800px'}}
disabled={true}
autoComplete="off"
>
<Row gutter={15}>
<Col span={24}>
<Form.Item<FieldType>
label="项目简称"
name="projSubName"
rules={[{required: false, message: '请输入项目简称'}]}
>
<Input placeholder="请输入项目简称"/>
</Form.Item>
</Col>
</Row>
<Row gutter={15}>
<Col span={12}>
<Form.Item<FieldType>
label="项目版本"
name="projVersion"
rules={[{required: true, message: '请输入项目版本'}]}
>
<Input placeholder="请输入项目版本"/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item<FieldType>
label="开发完成时间"
name="projDevCompleteDate"
rules={[{required: true, message: '请输入开发完成时间'}]}
>
<DatePicker placeholder="请选择开发完成日期"
format={dateFormat}
locale={locale}
style={{width: '100%'}}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={15}>
<Col span={12}>
<Form.Item<FieldType>
label="公司名称"
name="companyName"
extra="公司名称在操作手册中引用"
rules={[{required: true, message: '请输入公司名称'}]}
>
<Input placeholder="请输入公司名称"/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item<FieldType>
label="公司英文名称"
name="companyNameEn"
extra="公司英文名称在操作手册中引用"
rules={[{required: true, message: '请输入公司英文名称'}]}
>
<Input placeholder="请输入公司英文名称"/>
</Form.Item>
</Col>
</Row>
</Form>
</div>
</div>
</>
)
}