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

相关推荐
golang学习记1 分钟前
从0死磕全栈之Next.js 自定义 Server 指南:何时使用及如何实现
前端
张可爱2 分钟前
从奶茶店悟透 JavaScript:递归、继承、浮点数精度、尾递归全解析(通俗易懂版)
前端
梵得儿SHI17 分钟前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
八月ouc32 分钟前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
苏琢玉35 分钟前
从 Hexo 到 Astro:重构我的个人博客
前端·hexo
Glommer38 分钟前
某音 Js 逆向思路
javascript·逆向
街尾杂货店&41 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈43 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
金梦人生2 小时前
Css性能优化
前端·css