Ant Design Pro(5)-6.高级表单ProForm

ProForm 高级表单

一. 简介

ProForm 在原来的 Form的基础上增加一些语法糖和更多的布局设置，帮助我们快速的开发一个表单。同时添加一些默认行为，让我们的表单默认好用。ProForm 没有黑科技，只是 antd 的 Form 的封装，如果要使用自定义的组件可以用 Form.Item 包裹后使用，支持混用

包含分步表单，Modal 表单，Drawer 表单，查询表单，轻量筛选等多种 layout
可以覆盖大部分的使用场景，脱离复杂而且繁琐的表单布局工作，更少的代码完成更多的功能。

二. 使用

当你想快速实现一个表单但不想花太多时间去布局时 ProForm 是最好的选择。

ProForm 是基于 antd Form 的可降级封装，与
antd功能完全对齐，但是在其之上还增加一些预设行为和多种布局。这些布局之间可以无缝切换，并且拥有公共的 API。

布局	使用场景
ProForm	标准 Form，增加了 onFinish 中自动 loading 和 根据 request 自动获取默认值的功能。
ModalFormDrawerForm	在 ProForm 的基础上增加了 trigger ，无需维护 visible 状态
QueryFilter	一般用于作为筛选表单，需要配合其他数据展示组件使用
LightFilter	一般用于作为行内内置的筛选，比如卡片操作栏和 表格操作栏。
StepsForm	分步表单，需要配置 StepForm 使用。

一个表单除了 Form 之外还是需要一系列的表单项，ProForm 自带了数量可观的表单项, 这些组件本质上是 Form.Item 和
组件的结合，我们可以把他们当成一个 FormItem 来使用，并且支持各种 props。每个表单项都支持 fieldProps
属性来支持设置输入组件的props。 我们支持了 placeholder 的透传，你可以直接在组件上设置 placeholder

组件列表:

组件	使用场景
ProFormText	用于输入各类文本
ProFormText.Password	用于输入密码
ProFormDigit	用于输入数字，它自带了一个格式化(保留 2 位小数，最小值为 0)，有需要你可以关掉它。
ProFormTextArea	用于输入多行文本
ProFormCaptcha	用于输入验证码， 一般需要与发送验证码接口一起使用
ProFormDatePicker	日期选择器用于输入日期
ProFormDateTimePicker	日期+时间选择器，用于输入日期和时间
ProFormDateRangePicker	日期区间选择器用于输入一个日期区间
ProFormDateTimeRangePicker	日期+时间区间选择器，用于输入一个日期+时间的区间
ProFormSelect	支持 request 和 valueEnum 两种方式来生成子项，用于从两项以上中选择一项
ProFormTreeSelect	支持 request 和 valueEnum 两种方式来生成子项，用于从两项以上中选择一项
ProFormCheckbox	在 Checkbox 基础上支持了 layout，也支持 request 和 valueEnum 两种方式来生成子项
ProFormRadio.Group	在 Radio 基础上也支持 request 和 valueEnum 两种方式来生成子项，用于单选某项，但是可以展示出来所有选项。
ProFormSlider	当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。
ProFormUploadButton	按钮样式的上传文件
ProFormUploadDragger	区域的上传文件，一般用于突出上传文件的表单中
ProFormMoney	通用金额输入组件
ProFormSegmented	分段控制器

三. 实战

基础用法

使用每个组件我们都需要通过Import引入进来

import { ProForm, ProFormRadio, ProFormText, CheckCard } from '@ant-design/pro-components';
import { Col, message, Row, Space } from 'antd';
import { useState } from 'react';
import { proFormTest } from '@/services/ant-design-pro/api';

type LayoutType = Parameters<typeof ProForm>[0]['layout'];
const LAYOUT_TYPE_HORIZONTAL = 'horizontal';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
const handleClick = async (props: any) => {

  console.log("获取前端参数")
  console.log(props)
  const respone = await proFormTest(props)

  console.log(respone)
}

export default () => {
  const [formLayoutType] = useState<LayoutType>(LAYOUT_TYPE_HORIZONTAL);

  const formItemLayout =
    formLayoutType === LAYOUT_TYPE_HORIZONTAL
      ? {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      }
      : null;

  return (
    <div>
      <CheckCard
        avatar="https://gw.alipayobjects.com/zos/bmw-prod/f601048d-61c2-44d0-bf57-ca1afe7fd92e.svg"
        title="示例一"
        description="这里是表单提交页交互demo,适用于登录，编辑，添加等功能。"
      />

      <ProForm<{
        name?: string;
        password?: string;
      }>
        {...formItemLayout}
        layout={formLayoutType}
        submitter={{
          render: (props, doms) => {
            return formLayoutType === LAYOUT_TYPE_HORIZONTAL ? (
              <Row>
                <Col span={14} offset={4}>
                  <Space>{doms}</Space>
                </Col>
              </Row>
            ) : (
              doms
            );
          },
        }}
        onFinish={async (values) => {
          await waitTime(2000);
          console.log(values);
          handleClick(values);
          message.success('提交成功');
        }}
      >
        <ProFormRadio.Group
          style={{
            margin: 16,
          }}
        />
        <ProFormText width="md" name="name" label="姓名" placeholder="请输入姓名" />
        <ProFormText.Password
          name='password'
          width="md"
          label="密码"
          placeholder="请输入密码"
        />
      </ProForm>
    </div>
  );
};

这个页面中的proFormTest方法可以参考上一节request的使用