131 lines
5.5 KiB
TypeScript
131 lines
5.5 KiB
TypeScript
|
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>
|
||
|
</>
|
||
|
)
|
||
|
|
||
|
}
|