ProFormList --复杂数据联动ProFormDependency

摘要：  需求： （1）数据联动：测试数据1、2互相依赖，测试数据1<=测试数据2,测试数据2>=测试数据1。 （2）点击添加按钮，添加一行。 （3）自定义操作按钮。...

 需求：

（1）数据联动：测试数据1、2互相依赖，测试数据1<=测试数据2,测试数据2>=测试数据1。

（2）点击添加按钮，添加一行。

（3）自定义操作按钮。

（4）点击自定义操作按钮（禁用），禁用当前行。

代码实现：

import { StopOutlined } from '@ant-design/icons';
import { FormListActionType, ProCard, ProForm, ProFormDependency, ProFormList, ProFormText } from '@ant-design/pro-components';
import { gte, isEmpty, lte } from 'lodash';
import { useRef, useState } from 'react';

const Demo = () => {
    const [refresh, setRefresh] = useState<boolean>(false);
    const actionRef = useRef<
        FormListActionType<{
            name: string;
            [key: string]: any;
        }>
    >();
    const childrenDom = (record: Record<string, any>) => {
        return (
            <ProForm.Group key="group">
                <ProFormDependency name={['test2']}>
                    {(depValues) => {
                        return (
                            <ProFormText
                                disabled={record.disabled}
                                width="md"
                                name="test1"
                                label="测试数据1"
                                rules={[
                                    {
                                        required: true,
                                        message: '必选字段不能为空',
                                    },
                                    {
                                        pattern: /^[-+]?[0-9]+(\.[0-9]+)?$/,
                                        message: '请输入正确的数字',
                                    },
                                    {
                                        validator: async (_, value) => {
                                            if (isEmpty(value) || isEmpty(depValues.test2)) {
                                                return Promise.resolve();
                                            }
                                            if (lte(parseInt(value), parseInt(depValues.test2))) {
                                                return Promise.resolve();
                                            } else {
                                                return Promise.reject(new Error('测试数据1不能大于测试数据2'));
                                            }
                                        },
                                    },
                                ]}
                            />
                        );
                    }}
                </ProFormDependency>
                <ProFormDependency key="globalUseMode" name={['test1']}>
                    {(depValues) => {
                        return (
                            <ProFormText
                                disabled={record.disabled}
                                width="md"
                                name="test2"
                                label="测试数据2"
                                rules={[
                                    {
                                        required: true,
                                        message: '必选字段不能为空',
                                    },
                                    {
                                        pattern: /^[-+]?[0-9]+(\.[0-9]+)?$/,
                                        message: '请输入正确的数字',
                                    },
                                    {
                                        validator: async (_, value) => {
                                            if (isEmpty(value) || isEmpty(depValues.test1)) {
                                                return Promise.resolve();
                                            }
                                            if (gte(parseInt(value), parseInt(depValues.test1))) {
                                                return Promise.resolve();
                                            } else {
                                                return Promise.reject(new Error('测试数据2不能小于测试数据1'));
                                            }
                                        },
                                    },
                                ]}
                            />
                        );
                    }}
                </ProFormDependency>
            </ProForm.Group>
        );
    };
    return (
        <ProForm submitter={false}>
            <ProFormList
                name={'Test'}
                label="Test"
                initialValue={[{}]}
                actionRef={actionRef}
                actionRender={(field, action, defaultActionDom, count) => {
                    return [
                        ...defaultActionDom,
                        <StopOutlined
                            key="disable"
                            style={{ marginLeft: '5px' }}
                            onClick={() => {
                                const data = actionRef.current?.get(field.name);
                                if (data) {
                                    data.disabled = true;
                                    setRefresh(!refresh);
                                }
                            }}
                        />,
                    ];
                }}
                itemRender={({ listDom, action }, { index, record }) => (
                    <ProCard bordered style={{ marginBlockEnd: 8 }} title={`Test${index + 1}`} extra={action} bodyStyle={{ paddingBlockEnd: 0 }}>
                        {childrenDom(record)}
                    </ProCard>
                )}
            />
        </ProForm>
    );
};

export default Demo;

结果展示：

重点代码截图：

（1）数据联动：测试数据1、2互相依赖，测试数据1<=测试数据2,测试数据2>=测试数据1。

（2）点击添加按钮，添加一行。

（3）自定义操作按钮。

（4）点击自定义操作按钮（禁用），禁用当前行。