ProFormList --复杂数据联动ProFormDependency

需求:

(1)数据联动:测试数据1、2互相依赖,测试数据1<=测试数据2,测试数据2>=测试数据1。

(2)点击添加按钮,添加一行。

(3)自定义操作按钮。

(4)点击自定义操作按钮(禁用),禁用当前行。

代码实现:

TypeScript 复制代码
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)点击自定义操作按钮(禁用),禁用当前行。

相关推荐
牧羊狼的狼2 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手4 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one4 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲4 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell4 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830946 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮6 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel7 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip7 小时前
JavaScript事件流
前端·javascript
小菜全7 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json