ProFormList --复杂数据联动ProFormDependency

news2024/9/19 10:56:05

 需求:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1908817.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

后端之路——登录校验前言(Cookie\ Session\ JWT令牌)

前言&#xff1a;Servlet 【登录校验】这个功能技术的基础是【会话技术】&#xff0c;那么在讲【会话技术】的时候必然要谈到【Cookie】和【Session】这两个东西&#xff0c;那么在这之前必须要先讲一下一个很重要但是很多人都会忽略的一个知识点&#xff1a;【Servlet】 什么是…

Android约束布局的概念与属性(2)

目录 3&#xff0e;链式约束4&#xff0e;辅助线 3&#xff0e;链式约束 如果两个或以上控件通过下图的方式约束在一起&#xff0c;就可以认为是他们是一条链&#xff08;如图5为横向的链&#xff0c;纵向同理&#xff09;。 图5 链示意图 如图5所示&#xff0c;在预览图中选…

CTFShow中BJDCTF2020的RE题

encode 写脚本时候发现了应该就是一个 base64 和 RC4 结合 base64 rc4的初始化S盒 rc4的异或加密 好久没有做题&#xff0c;有点忘记了&#xff0c;直接动调 可以把初始 S盒调出来&#xff0c;后面解总是出乱码&#xff0c;也是看了好久的wp才知道v6后面要赋值的字符串是十…

关于Mars3d的入门

关于Mars3d的入门 一. 创建地球&#xff0c;加载瓦片图层二 矢量图层2.1 常用矢量图层2.1.1 GraphicLayer2.1.2 GeoJsonLayer 2.2 矢量图层的点击事件 三 矢量数据四 事件机制 一. 创建地球&#xff0c;加载瓦片图层 // 1. 创建地球let map new mars3d.Map("mars3dContai…

FOC算法

如下图所示的&#xff0c;是FOC算法的整体流程图&#xff0c;下面图中最重要的部分就是SVPWM和3相全桥电路&#xff0c;和送给SVPWM进行运算&#xff0c;运算之后的结果为三个相差120的马鞍波&#xff0c;然后将这三相马鞍波作为控制全桥MOS开关的三个PWM波的占空比&#xff0c…

Vortex GPGPU的硬件设计和代码结构分析

文章目录 前言一、GPGPU是什么&#xff1f;1.1 GPU和GPGPU之间的差异1.2 GPU和CPU之间的集成方式1.3 GPU包含什么&#xff08;列举和VMIPS向量体系结构的差异&#xff09; 二、Vortex GPGPU是什么&#xff1f;2.1 Vortex GPGPU的技术边界和验证环境2.2 Vortex GPGPU的指令集设计…

Kubernetes基于helm部署jenkins

Kubernetes基于helm安装jenkins jenkins支持war包、docker镜像、系统安装包、helm安装等。在Kubernetes上使用Helm安装Jenkins可以简化安装和管理Jenkins的过程。同时借助Kubernetes&#xff0c;jenkins可以实现工作节点的动态调用伸缩&#xff0c;更好的提高资源利用率。通过…

C++ | Leetcode C++题解之第223题矩形面积

题目&#xff1a; 题解&#xff1a; class Solution { public:int computeArea(int ax1, int ay1, int ax2, int ay2, int bx1, int by1, int bx2, int by2) {int area1 (ax2 - ax1) * (ay2 - ay1), area2 (bx2 - bx1) * (by2 - by1);int overlapWidth min(ax2, bx2) - max…

使用void 0替代undefined

在很多大厂的规范里面&#xff0c;有这么一条规定&#xff1a;不让直接使用undefined关键字&#xff0c;而应该使用void 0来替代undefined。 一、void 0是什么意思&#xff1f; void是一个关键字&#xff0c;他后面跟的是一个表达式&#xff0c;不管这个表达式算的是啥&#…

you should not run configure as root, 升级tar出错

为了能用 tar 支持 zstd 的压/解缩包命令&#xff0c;需要升级 tar 到 1.3 以上&#xff0c;下面是下载和编译、安装命令&#xff1a; wget https://mirrors.aliyun.com/gnu/tar/tar-1.32.tar.bz2 tar -jxvf tar-1.32.tar.bz2 cd tar-1.32 ./configure make make install但在执…

Docker定时清理

一、循环调度执行 1、检查cron状态 systemctl status crond 2、创建要执行的shell脚本 vim /home/cleanup_docker.sh #! /bin/bash # 清理临时文件 echo $(date "%H:%M:%S") "执行docker清理命令..." docker system prune -af-a 清理包括未使用的镜像 …

PyJWT,一个基于JSON的轻量级安全通信方式的python库

目录 什么是JWT&#xff1f; JWT的构成 PyJWT库简介 安装PyJWT 生成JWT 验证JWT 使用PyJWT的高级功能 自定义Claims 错误处理 结语 什么是JWT&#xff1f; 在介绍PyJWT这个Python库之前&#xff0c;我们首先需要了解什么是JWT。JWT&#xff0c;全称JSON Web Token&am…

LabVIEW开发商业软件的多角度分析与注意事项

在使用LabVIEW开发商业软件时&#xff0c;有许多方面需要考虑和注意&#xff0c;包括项目管理、架构设计、性能优化、用户体验、安全性、维护与支持等。以下是从多个角度详细分析在LabVIEW中开发商业软件需要注意的事项。 项目管理 需求分析&#xff1a;确保深入了解客户需求&a…

如何在vue3中使用scss

一 要使用scss首先需要下载相关的包 可以在终端使用下面的命令下载相关包 npm install -D sass 二 在src文件下新建一个文件夹叫做styles 在文件夹下创建三个文件 index.scss主要用来引用其他文件 reset.scss用来清除默认的样式 variable.scss用来配置全局属性 三 需要在v…

生物素结合金纳米粒子(Bt@Au-NPs ) biotin-conjugated Au-NPs

一、定义与特点 定义&#xff1a;生物素结合金纳米粒子&#xff0c;简称BtAu-NPs或biotin-conjugated Au-NPs&#xff0c;是指通过特定的化学反应或物理方法将生物素修饰到金纳米粒子表面&#xff0c;形成稳定的纳米复合材料。 特点&#xff1a; 高稳定性&#xff1a;生物素的修…

上位机图像处理和嵌入式模块部署(mcu项目2:串口日志记录器)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 淘宝上面有一个商品蛮好玩的&#xff0c;那就是日志记录器。说是记录器&#xff0c;其实就是一个模块&#xff0c;这个模块的输入是一个ttl串口&am…

2024年信息素养大赛图形化编程小低组复赛真题-附答案 6547网

2024年全国青少年信息素养大赛图形化编程小低组复赛真题 题目总数&#xff1a;6 总分数&#xff1a;100 第1部分 第 1 题 问答题 【编程实现】点击小绿旗&#xff0c;实现将鱼的所有造型印到舞台区 【具体要求】 1. 将鱼显示出来 全部擦除所有内容 2. 将鱼的造型设…

vue学习day03-指令修饰符、v-bind对于样式控制的增强、v-model应用于其他表单元素

7、指令修饰符 &#xff08;1&#xff09;概念&#xff1a; 通过“.”指明一些指令后缀&#xff0c;不同后缀封装了不同的处理操作->简化代码 &#xff08;2&#xff09;按键修饰符 keyup.enter->键盘回车监听 &#xff08;3&#xff09;v-model修饰符 v-model.tri…

报修小程序论文(设计)开题报告

一、课题的背景和意义 近些年来&#xff0c;随着移动互联网巅峰时期的来临&#xff0c;互联网产业逐渐趋于“小、轻、微”的方向发展&#xff0c;符合轻应用时代特点的各类技术受到了不同领域的广泛关注。在诸多产品中&#xff0c;被誉为“运行着程序的网站”之名的微信小程序…

Linux学习笔记(二)账户和组

一、基本概念 用 户&#xff1a;用户id&#xff0c;被称为UID 基本组&#xff1a;账户id&#xff0c;被称为GID。用户只能加一个基本组。 0代表超级管理员&#xff0c;root账号。 附加组&#xff1a;用户能加多个基本组。 二、添加账户和组 创建用户名tom&#xff0c;失效…