antd4 from拆分

期望一个新增页面，由多个表单构成，按钮提交统一校验

思路 需要把各个form实例保存下来，按钮提交时统一触发校验

父组件

<div className={styles.container}>
                <Form.Provider
                    onFormFinish={name => {
                        if (name === 'form1') {
                            // Do something...
                        }
                    }}
                >
                    <BaseInfoForm {...baseInfoProps}></BaseInfoForm>
                    <ProductInfo currentModel={currentModel} />
                    <AccessoriesInfo currentModel={currentModel} />
                    <OtherForm {...otherInfoProps}></OtherForm>
                </Form.Provider>
                <div className={styles.opsButtons}>
                    <Button
                        onClick={() => {
                            dispatch({
                                type: `${currentModel}/overrideStateProps`,
                                payload: {
                                    shouldRouterChange: false,
                                },
                            });
                            history.goBack();
                        }}
                    >
                        取消
                    </Button>
                    <Button type="primary" loading={loadState} onClick={() => handleSave(true)} htmlType="submit">
                        保存
                    </Button>
                </div>

子组件

import React, { useEffect, useRef } from 'react';
import { Input, Select, Form, Card, Col, Row, Radio } from 'antd';
import ContractBatchNumSelect from '@/components/ContractBatchNumSelect';
import NotSuitableForReturnAndExchange from '@/services/NotSuitableForReturnAndExchange';
import WorkOrdersClientSelect from './components/WorkOrdersClientSelect';
import styles from './index.less';

// 输入框最大字符数
export const INPUT_LENGTH_LIMIT = 50;
// 文本框最大字符数
export const TEXT_AREA_LENGTH_LIMIT = 500;
const whethertoshipStatusList = NotSuitableForReturnAndExchange.whethertoshipStatus();
const numberReg = /^[A-Za-z0-9]+$/;
const Option = Select.Option;
const FormItem = Form.Item;
const FormItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
};
const commonInputConfig = {
    maxLength: INPUT_LENGTH_LIMIT,
};
export default ({ currentModel, baseInfo, dispatch }) => {
    const [form] = Form.useForm();
    const { getFieldValue, setFieldsValue } = form;
    const formRef = useRef(null);
    useEffect(() => {
        formRef.current = form;
    }, [form]);
    useEffect(() => {
        dispatch({
            type: `${currentModel}/overrideStateProps`,
            payload: {
                baseForm: formRef,
            },
        });
    }, [dispatch, formRef, currentModel]);
    const handelChangeContractModel = choose => {
        if (choose) {
            const values = {
                client_id: choose.client_id,
                deliverdeliveryClientName: choose.delivery_client_name,
                delivery_client_id: choose.delivery_client_id,
                batch_contract_id: choose.id,
                contract_id: choose.admin_contract_id,
            };
            setFieldsValue({
                ...values,
            });
            dispatch({
                type: `${currentModel}/updateStateProps`,
                payload: {
                    name: 'baseInfo',
                    value: { ...values },
                },
            });
        }
    };
    const onValuesChange = (changedValues, allValues) => {
        const { dates, product_type, ...others } = allValues;
        const params = {
            ...others,
        };
        if (changedValues?.product_type) {
            dispatch({
                type: `${currentModel}/updateStateProps`,
                payload: {
                    name: 'baseInfo',
                    value: { product_id: '', product_type },
                },
            });
            setFieldsValue({
                product_id: '',
                product_type,
            });
        }
        dispatch({
            type: `${currentModel}/updateStateProps`,
            payload: {
                name: 'baseInfo',
                value: { ...params },
            },
        });
        dispatch({
            type: `${currentModel}/overrideStateProps`,
            payload: {
                shouldRouterChange: true,
            },
        });
    };
    return (
        <Form
            name="form2"
            form={form}
            initialValues={{
                client_name: '' || '',
                deliverdeliveryClientName: baseInfo?.deliverdeliveryClientName || '',
            }}
            onValuesChange={onValuesChange}
            {...FormItemLayout}
        >
            <Card title="基本信息" className={styles.card} bordered>
                <Row>
                    <Col span={12}>
                        <FormItem
                            name="client_id"
                            label="客户名称"
                            rules={[{ required: true, message: '请输入选择客户' }]}
                        >
                            {/* <Select
                                            showSearch
                                            allowClear
                                            filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                                            placeholder="请输入选择客户"
                                            // onChange={e => handelChangeClientsList(e)}
                                        >
                                            {clientsList?.map(ele => {
                                                return (
                                                    <Option key={ele.id} value={ele.id}>
                                                        {ele.name}
                                                    </Option>
                                                );
                                            })}
                                        </Select> */}
                            <WorkOrdersClientSelect placeholder="请输入选择客户" />
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem name="title" label="工单标题" rules={[{ required: true, message: '请输入工单标题' }]}>
                            <Input placeholder="请输入工单标题" {...commonInputConfig} />
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            name="batch_contract_id"
                            label="合同编号"
                            rules={[{ required: true, message: '请选择合同编号' }]}
                        >
                            <ContractBatchNumSelect
                                onChangeContract={handelChangeContractModel}
                                form={form}
                                clientId={getFieldValue('client_id')}
                                placeholder="请选择合同编号"
                            />
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem name="deliverdeliveryClientName" label="发货客户">
                            <Input placeholder="选择合同自动带出" disabled />
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            name="delivery_type"
                            label="发货类型"
                            rules={[{ required: true, message: '请选择发货类型' }]}
                        >
                            <Select
                                placeholder="请选择发货类型"
                                showSearch
                                allowClear
                                // disabled={pageType === 'update' && !isCreator && isReviewer}
                            >
                                {whethertoshipStatusList?.map(ele => {
                                    return (
                                        <Option key={ele.key} value={ele.key}>
                                            {ele.name}
                                        </Option>
                                    );
                                })}
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    name="sendBack"
                                    label="寄回运单号"
                                    labelCol={{
                                        xs: { span: 4 },
                                        sm: { span: 6 },
                                        md: { span: 6 },
                                        lg: { span: 6 },
                                    }}
                                    // wrapperCol={{ span: 20 }}
                                >
                                    <Radio.Group>
                                        <Radio value="back" style={{ whiteSpace: 'nowrap' }}>
                                            同城带回
                                        </Radio>
                                        <Radio value="sendBack" style={{ whiteSpace: 'nowrap' }}>
                                            寄回运单号
                                        </Radio>
                                    </Radio.Group>
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                {baseInfo?.sendBack === 'sendBack' ? (
                                    <FormItem
                                        labelCol={{
                                            xs: { span: 4 },
                                            sm: { span: 6 },
                                            md: { span: 6 },
                                            lg: { span: 6 },
                                        }}
                                        // wrapperCol={{ span: 20 }}
                                        name="send_back_waybill_number"
                                        label="申请编号"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入寄回运单号',
                                            },
                                            {
                                                pattern: numberReg,
                                                message: '只能填写字母或数字',
                                            },
                                        ]}
                                    >
                                        <Input placeholder="请输入寄回运单号" />
                                    </FormItem>
                                ) : null}
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            name="final_client"
                            label="最终客户"
                            rules={[
                                {
                                    required: getFieldValue('client_id') === 175,
                                    message: '请输入最终客户',
                                },
                            ]}
                        >
                            <Input placeholder="请输入最终客户" {...commonInputConfig} />
                        </FormItem>
                    </Col>
                </Row>
            </Card>
        </Form>
    );
};

validateFields 触发表单验证

使用promise.all方法来提交实现：

  var p1 = new Promise((resolve, reject) => {
      console.log(1)
      resolve()
    })
    var p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(2)
        resolve()
      }, 1000);
    })
    var p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(3)
        resolve()
      }, 1000);
    })
 
    Promise.all([p1, p2, p3]).then((result) => {
      console.log("执行完毕");
    })

提交校验

    const handleSave = goBack => {
        const baseFormValidateFields = baseForm.current.validateFields();
        const otherFormValidateFields = otherForm.current.validateFields();
        Promise.all([baseFormValidateFields, otherFormValidateFields]).then(result => {
            console.log('执行完毕');
            dispatch({
                type: `${currentModel}/save`,
                payload: {
                    goBack,
                    callback: () => {
                        dispatch({
                            type: 'shipOrderList/getShipOrderList',
                        });
                    },
                },
            });
            dispatch({
                type: `${currentModel}/overrideStateProps`,
                payload: {
                    shouldRouterChange: false,
                },
            });
        });
    };