210 lines
9.2 KiB
TypeScript
210 lines
9.2 KiB
TypeScript
import './proj-edit-step.css';
|
|
import {Breadcrumb, Cascader, Col, DatePicker, message, Row, Select} from "antd";
|
|
import locale from 'antd/es/date-picker/locale/zh_CN';
|
|
import {Link, useParams} from "react-router-dom";
|
|
import {useEffect, useState} from "react";
|
|
import {get} from "../../../util/AjaxUtils.ts";
|
|
import {Form, Input} from 'antd';
|
|
import {AxiosResponse} from "axios";
|
|
import dayjs, {Dayjs} from 'dayjs';
|
|
import {ITree} from "../../../interfaces/dict/IDict.ts";
|
|
|
|
type FieldType = {
|
|
authorName: string;
|
|
authorIdCardType: string;
|
|
authorIdCard: string;
|
|
authorNation: string;
|
|
authorProvince: string;
|
|
authorEstablishDate: Dayjs;
|
|
};
|
|
|
|
interface Option {
|
|
value?: string | number | null;
|
|
label: React.ReactNode;
|
|
children?: Option[];
|
|
isLeaf?: boolean;
|
|
id: string;
|
|
pId: string;
|
|
}
|
|
|
|
export default function ProjEditStep4Show() {
|
|
const pathParams = useParams();
|
|
const [messageApi, contextHolder] = message.useMessage();
|
|
const [form] = Form.useForm<FieldType>();
|
|
const [areaArray, setAreaArray] = useState<Option[]>([]);
|
|
const height = window.innerHeight - 180;
|
|
const dateFormat = 'YYYY年MM月DD日';
|
|
|
|
const listArea = (pId: string) => {
|
|
return new Promise<ITree[]>((resolve) => {
|
|
get<ITree[]>({
|
|
messageApi,
|
|
url: '/api/area/list-area-ztree',
|
|
config: {
|
|
params: {
|
|
id: pId
|
|
}
|
|
},
|
|
onSuccess({data}) {
|
|
resolve(data);
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
get({
|
|
messageApi,
|
|
url: `/api/proj/get/edit-step4/${pathParams.projId}`,
|
|
onSuccess({data}: AxiosResponse) {
|
|
form.setFieldsValue({
|
|
authorName: data.authorName,
|
|
authorIdCardType: data.authorIdCardType ? data.authorIdCardType : 'BUSINESS_LICENSE',
|
|
authorIdCard: data.authorIdCard,
|
|
authorNation: data.authorNation ? data.authorNation : '中国',
|
|
authorProvince: data.authorProvince ? data.authorProvince.split(',') : '',
|
|
authorEstablishDate: dayjs(data.authorEstablishDate, 'YYYY-MM-DD'),
|
|
})
|
|
}
|
|
})
|
|
listArea('0').then(data => {
|
|
const options: Option[] = data.map(item => {
|
|
return {
|
|
value: item.name,
|
|
label: item.name,
|
|
isLeaf: !item.isParent,
|
|
id: item.id,
|
|
pId: item.pId
|
|
}
|
|
})
|
|
setAreaArray(options);
|
|
});
|
|
}, [])
|
|
|
|
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={12}>
|
|
<Form.Item<FieldType>
|
|
label="姓名或公司名称"
|
|
name="authorName"
|
|
rules={[{required: true, message: '请输入姓名或公司名称'}]}
|
|
>
|
|
<Input placeholder="请输入姓名或公司名称"/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item<FieldType>
|
|
label="成立日期"
|
|
name="authorEstablishDate"
|
|
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="authorIdCardType"
|
|
rules={[{required: true, message: '请选择证件类型'}]}
|
|
>
|
|
<Select
|
|
placeholder="请选择样证件类型"
|
|
onChange={(value: string) => {
|
|
console.log(`selected ${value}`);
|
|
}}
|
|
options={[
|
|
{value: 'BUSINESS_LICENSE', label: '营业执照'},
|
|
{value: 'ID_CARD', label: '身份证'},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item<FieldType>
|
|
label="证件号"
|
|
name="authorIdCard"
|
|
rules={[{required: true, message: '请输入证件号'}]}
|
|
>
|
|
<Input placeholder="请输入证件号"/>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row gutter={15}>
|
|
<Col span={12}>
|
|
<Form.Item<FieldType>
|
|
label="国籍"
|
|
name="authorNation"
|
|
rules={[{required: true, message: '请选择国籍'}]}
|
|
>
|
|
<Select
|
|
placeholder="请选择国籍"
|
|
options={[
|
|
{value: '中国', label: '中国'},
|
|
]}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item<FieldType>
|
|
label="省市"
|
|
name="authorProvince"
|
|
rules={[{required: true, message: '请选择省市'}]}
|
|
>
|
|
<Cascader options={areaArray}
|
|
loadData={(selectedOptions: Option[]) => {
|
|
const targetOption = selectedOptions[selectedOptions.length - 1];
|
|
listArea(targetOption.id).then(data => {
|
|
targetOption.children = data.map(item => {
|
|
return {
|
|
value: item.name,
|
|
label: item.name,
|
|
isLeaf: !item.isParent,
|
|
id: item.id,
|
|
pId: item.pId
|
|
}
|
|
});
|
|
setAreaArray([
|
|
...areaArray
|
|
])
|
|
});
|
|
}}
|
|
placeholder="请选择省市"
|
|
changeOnSelect/>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
|
|
} |