首页 > 其他分享 >一对多数据关系处理利器:JVS子表格组件详解

一对多数据关系处理利器:JVS子表格组件详解

时间:2023-11-09 18:06:31浏览次数:28  
标签:表格 JVS 新增 表单 详解 组件 采购 数据 子表

在数字化时代,表单已经成为企业、机构和个人收集、整理、分析数据的重要工具。然而,随着数据复杂性的增长,传统的单一表单往往难以满足需求。JVS低代码表单引擎中子表格允许在主表单中嵌套另一个子表数据,使得数据的收集和组织更加有序、高效。尤其在处理多对一或多对多的关系数据时,如订单与订单项、任务与子任务,子表格的作用更加凸显。接下来我通过两个具体场景,详细解析如何在表单配置中运用子表格,实现数据的高效管理和操作。

表格组件(子表)

在表单配置中,子表格是一种特殊的表单元素,它允许用户在一个主表单中嵌套另一个子表数据,以便收集和组织更复杂的数据。子表格通常用于处理具有多对一或多对多关系的数据,例如订单和订单项,或者任务和子任务等。我们先看两个具体的场景。

场景一:

我们先看一个配置效果:

一对多数据关系处理利器:JVS子表格组件详解_表单引擎

上图展示了两个数据模型(耗材采购和耗材采购明细记录),在耗材采购订单列表页中录入采购数据和采购明细数据,保存后,系统自动在子表中新增对应数据。

这里核心实现的场景是:新增表单中表格数据自动保存到关联模型中。

那么我们来看下具体的配置过程

示例场景:采购单中存在采购商品详情、资产入库单中存在多个入库资产等一对多的场景,采购单新增数据并填写多行采购商品。

1、设计“主表单”采购列表页,如下图所示,添加所需要的字段。

一对多数据关系处理利器:JVS子表格组件详解_表单_02

2、创建“子表单”商品明细,添加所需字段。此模型中需要添加“主表单”中的流水号字段,才会直接默认存入此字段数据,否则字段数据不会保存。同时主表单流水号字段使用【流水号】组件。主表单中仅有一个流水号组件时才会生效。

一对多数据关系处理利器:JVS子表格组件详解_字段_03

3、配置采购单新增表单,配置表格组件相关设置,关联模型选择明细列表模型,在表格中拖入模型字段对应的组件。主表单模型流水号(采购订单编码),不需要添加到表格中,由于模型中包含主表单的流水号字段所以会自动保存。

一对多数据关系处理利器:JVS子表格组件详解_表单引擎_04

①:创建耗材采购列表的新增表单时,设置表单的名称

②:系统会自动关联本表单的主模型(耗材采购 数据模型)

③:将子表格引入表单画布中

④:点击选中表单画布中的子表格

⑤:设置子表格关联的数据模型(耗材采购详情 子表单模型)

一对多数据关系处理利器:JVS子表格组件详解_字段_05

⑥:引入子表格的具体展示选项,并且设置好字段的数据关联与可用性等具体设置

一对多数据关系处理利器:JVS子表格组件详解_表单引擎_06

⑦:设置数据筛选条件,这里表示只展示通过采购订单编号的子表数据

一对多数据关系处理利器:JVS子表格组件详解_数据_07

4、配置新增表单新增后事件,启用逻辑引擎,用于将主表单的数据提交后往子表中插入数据

一对多数据关系处理利器:JVS子表格组件详解_表单引擎_08

5、在后置事件业务逻辑中,我们可以配置启动流程节点,或者更新订单模型字段数据。表格中的数据,会自动保存到明细列表模型中。

一对多数据关系处理利器:JVS子表格组件详解_表单_09

场景二:

我们再来看下另外一个长场景:用户修改子表数据时,同时存在有新增表格数据,我们先来看下具体效果:

一对多数据关系处理利器:JVS子表格组件详解_数据_10

通常用于批量处理数据设计表格组件实现时,可以满足新增行数据并修改表格中数据。

示例下图“商品列表”顶部按钮【批量入库】。

一对多数据关系处理利器:JVS子表格组件详解_字段_11

设计“批量入库”表单提交时触发逻辑实现数据的更新或新增操作。

注意需要新增自定义表单按钮配置逻辑。

一对多数据关系处理利器:JVS子表格组件详解_字段_12

1、进入逻辑设计页面,表格中的数据格式为数组,所以选择【循环容器】节点来处理表格数据。

一对多数据关系处理利器:JVS子表格组件详解_低代码_13

一对多数据关系处理利器:JVS子表格组件详解_低代码_14

2、再进入循环容器画布,选择更新模型和新增数据节点。如果是修改走更新模型节点,新增则走新增数据节点。

根据是否含有行id来控制逻辑走新增还是更新路线,在连线上加函数公式来判断。

单击连线设置如下,修改的数据已存在有行id则更新表格数据。下图也可以直接使用逻辑函数“ISNOTEMPTY”。

一对多数据关系处理利器:JVS子表格组件详解_字段_15

当新增数据时还没有行id则走新增节点。

一对多数据关系处理利器:JVS子表格组件详解_表单_16

最后提交并保存逻辑设计,回到列表页可查看效果。

在线demo:https://frame.bctools.cn/

基础框架开源地址:https://gitee.com/software-minister/jvs

标签:表格,JVS,新增,表单,详解,组件,采购,数据,子表
From: https://blog.51cto.com/u_15454015/8285008

相关文章

  • 云主机使用的硬盘类型及对应的存储类型详解
    本文分享自天翼云开发者社区《云主机使用的硬盘类型及对应的存储类型详解》,作者:不知不觉随着云计算的普及,云主机已成为企业和个人用户的重要选择。云主机为用户提供了灵活、可伸缩的计算资源,并且具有高可用性、高可扩展性以及易于管理的特点。在云主机的使用过程中,硬盘类型和存储......
  • 【开源三方库】Easyui:基于OpenAtom OpenHarmony ArkUI深度定制的组件框架
     万冬阳公司:中国科学院软件所小组:知识体系工作组 简介Easyui是一套基于ArkTS语言开发的轻量、可靠的移动端组件库,它是对OpenAtom OpenHarmony(以下简称“OpenHarmony”) ArkUI进行深度定制的组件框架。Easyui可扩展性较强,可以基于源码进行二次开发,修改原有组件以及新增......
  • OpenGL 基础光照详解
    1.光照显示世界中,光照环境往往是相对复杂的。因为假设太阳作为世界的唯一光源,那么太阳光照在物体A上A将阳光进行反射后,A又做为一个新的光源共同作用于另一个物体B。所以于B来讲光源是复杂的。然而这只是其中一个因素,受制于天气、温度等其他情况我们需要考虑的因素更多。在OpenGL......
  • Ansible自动化部署工具-组件及语法介绍
    大家好,我是蓝胖子,我认为自动化运维要做的事情就是把运维过程中的某些步骤流程化,代码化,这样在以后执行类似的操作的时候就可以解放双手了,让程序自动完成。避免出错,Ansible就是这方面非常好用的工具。它能将我们的安装软件,部署等过程进行代码编排,程序化我们的部署步骤。今天,我们就......
  • 详解JQuery框架的五大选择器(转载)
    本文分享自华为云社区《【JQuery框架】五大选择器“全家桶”详解!!!》,原文作者:灰小猿。选择器基本操作首先我们需要了解选择器使用的基本操作,该基本操作可以分为三步:1、事件绑定选择器的使用需要进行事件的绑定,一般来说我们可以将事件绑定到一个按钮上去,通过按钮的点击来触发相......
  • 神经网络入门篇:详解神经网络概述和表示
    神经网络概述(NeuralNetworkOverview)先开始快速浏览一下如何实现神经网络。上篇博客了解了逻辑回归,了解了这个模型(见图1.1.1)如何与下面公式1.1建立联系。图1.1.1:公式1.1:\[\left. \begin{array}{l} x\\ w\\ b \end{array} \right\} \implies{z={w}^Tx+b}\]如上所......
  • Lambda表达式详解
    什么是Lambda表达式Lambda表达式是一种匿名函数,它可以用于创建可传递给其他函数或方法的简洁代码块。Lambda表达式可以在需要函数或委托的任何地方使用,并且通常用于简化代码和提高可读性。Lambda表达式的语法Lambda表达式的基本语法如下所示:(parameter_list)=>expression......
  • C3P0连接池详解及配置
    数据库连接是一个耗费大量资源且相当慢的操作,所以为了提高性能和连接速度,诞生了连接池这样的概念。在多用户并发操作过程中,连接池尤为重要。它是将那些已连接的数据库连接存放在一个容器里(连接池),这样以后别人要连接数据库的时候,将不会重新建立数据库连接(这样蜗牛的慢动作谁都受......
  • BlockingQueue队列详解
    /**本例介绍一个特殊的队列:BlockingQueue,如果BlockQueue是空的,从BlockingQueue取东西的操作将会被阻断进入等待状态,直到BlockingQueue进了东西才会被唤醒.同样,如果BlockingQueue是满的,任何试图往里存东西的操作也会被阻断进入等待状态,直到BlockingQueue里有空间才会被......
  • maven pom文件详解
    代码下载地址:http://www.blogjava.net/hellxoul/archive/2013/05/16/399345.html<projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/......