一、概述
一个添加或者修改页面，通常包括： 页面标题、面包屑、表单，表单验证、固定底部的按纽栏等。
这就涉及到：PageContainer页面容器组件+ProForm高级表单组件+ProFormFields 表单项（或者ProFormList、ProFormFieldSet、ProFormDependency ）。
还有一些特殊的表单页面：例如Json来生成表单，则用SchemaForm，筛选条件的表单QueryFilter / LightFilter，分步操作的表单StepsForm、浮层弹窗表单（ModalForm 和 DrawerForm ）
二、涉及组件介绍：
（1）可以给一个表单整体一个初始对象值（即每一个数据域均有一个名字，自动匹配），也可以给具体某一个ProFormFields表单项初始值，用属性initialValues进行设置，同时表单项之间可以联动。
（2）在ProForm内也支持用自定义组件，即可以用Ant design本身的基础组件。
（3）支持在打开表单中通过url参数设置默认值。
（4）支持把底部的保存等按纽固定页脚。
<ProForm
submitter={{
render: (_, dom) => <FooterToolbar>{dom}</FooterToolbar>,
}}
onFinish={async (values) => console.log(values)}
>整体代码示例：
import React from 'react';
import { message } from 'antd';
import ProForm, { ProFormText, ProFormDateRangePicker, ProFormSelect } from '@ant-design/pro-form';
const waitTime = (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
export default () => {
return (
<ProForm<{
name: string;
company: string;
}>
onFinish={async (values) => {
await waitTime(2000);
console.log(values);
message.success('提交成功');
}}
initialValues={{
name: '蚂蚁设计有限公司',
useMode: 'chapter',
}}
>
<ProForm.Group>
<ProFormText
width="md"
name="name"
label="签约客户名称"
tooltip="最长为 24 位"
placeholder="请输入名称"
/>
<ProFormText width="md" name="company" label="我方公司名称" placeholder="请输入名称" />
</ProForm.Group>
<ProForm.Group>
<ProFormText
name={['contract', 'name']}
width="md"
label="合同名称"
placeholder="请输入名称"
/>
<ProFormDateRangePicker width="md" name={['contract', 'createTime']} label="合同生效时间" />
</ProForm.Group>
<ProForm.Group>
<ProFormSelect
options={[
{
value: 'chapter',
label: '盖章后生效',
},
]}
readonly
width="xs"
name="useMode"
label="合同约定生效方式"
/>
<ProFormSelect
width="xs"
options={[
{
value: 'time',
label: '履行完终止',
},
]}
name="unusedMode"
label="合同约定失效效方式"
/>
</ProForm.Group>
<ProFormText width="sm" name="id" label="主合同编号" />
<ProFormText name="project" width="md" disabled label="项目名称" initialValue="xxxx项目" />
<ProFormText width="xs" name="mangerName" disabled label="商务经理" initialValue="启途" />
</ProForm>
);
};
