CN114035773B - 一种基于配置的低代码开发表单方法、系统及装置 - Google Patents
一种基于配置的低代码开发表单方法、系统及装置 Download PDFInfo
- Publication number
- CN114035773B CN114035773B CN202210020967.0A CN202210020967A CN114035773B CN 114035773 B CN114035773 B CN 114035773B CN 202210020967 A CN202210020967 A CN 202210020967A CN 114035773 B CN114035773 B CN 114035773B
- Authority
- CN
- China
- Prior art keywords
- configuration
- data
- control
- display
- rendering
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开了一种基于配置的低代码开发表单方法、系统及装置。基于配置的低代码开发表单方法包括定义数据模型,即描述表单配置数据的统一规范Metaform Schema;Metaform Schema规范所描述的表单配置包括表单布局配置、控件参数配置、数据校验配置、交互联动配置;通过可视化表单设计器进行可视化配置;可视化配置包括依据Metaform Schema规范生成表单布局、控件参数、数据校验、交互联动配置;持久化表单:将生成的可视化配置数据保存到数据层的表单配置中;动态渲染:表单渲染组件读取数据层中的表单配置,加载组件库,按照Metaform Schema规范对表单配置进行解析,渲染表单。
Description
技术领域
本发明属于Web前端开发及移动前端开发技术领域,尤其涉及一种动态表单的开发方法、系统及装置。
背景技术
在政府和企业的网站、业务系统、APP等软件中,通过表单收集填表人数据,办理在线事项,是最典型的业务功能之一。不同场景的业务表单,不但数量越来越多,而且需求也越来越灵活多样。
随着业务与技术的沉淀,软件开发向着低代码方向发展,陆续出现了vue-form-making、form-render这样的表单开发和构建方案。专利申请号CN202010620054.3的中国专利公开了一种基于VUE技术的低代码开发表单方法和系统,其方法步骤如下:
1、可视化创建表单,基于网页可拖拽技术,提供表单创建的核心控件,以创建完整的表单;
2、持久化表单,将表单的数据保存到数据库中;
3、设置表单数据模型,从数据库中提取出可用的数据模型信息,在表单配置页面设置表单每个控件对应的数据库表列名称;
4、设置访问权限,设置能够访问表单的填表人角色;
5、填表人访问,填表人通过登录系统登录页进行访问;
6、动态渲染,通过识别填表人的角色,在菜单中显示填表人可见的动态表单,渲染出查询页面,并渲染出填表人选择的表单,加载表单关联的数据;
7、填表人通过渲染的表单进行增删改查操作;
8、保存填表人操作数据。
以上方法和系统,已基本能够实现快速构建常规的业务表单。但仍存在一些不足:
1、生成的表单没有多端适配方案,不能满足填表人需要在手机上填写表单的需求
2、表单开发自由度较低。表单按照配置动态渲染,当产生个性化需求时,开发人员较难介入进行定制开发。
3、每个表单只能满足单一业务场景。不能根据填表人的输入灵活变化。
4、当包含大量表单数据项时,往往会产生性能问题,影响填表人填写。
发明内容
针对上述技术问题,本发明公开了一种基于配置的低代码开发表单方法、系统及装置。该方法和系统能够实现在线创建动态表单。
为达到上述目的,本发明采用的技术方案为:
一种基于配置的低代码开发表单方法,包括如下步骤:
通过元数据管理定义数据模型,数据模型是对填表人填写的表单数据进行描述的数据;
定义统一规范Metaform Schema;Metaform Schema规范是约定的描述表单配置和数据展现配置的规范;
通过可视化表单设计器进行表单的可视化配置;表单的可视化配置包括依据Metaform Schema规范生成表单布局、控件参数、数据校验、交互联动等配置;
持久化表单配置:将生成的可视化配置数据保存到数据层的表单配置中;
通过可视化数据展现设计器进行数据展现的可视化配置;数据展现的可视化配置包括依据Metaform Schema规范生成数据展现布局、控件参数配置;
持久化数据展现配置:将生成的数据展现配置保存到数据层的表单数据展现配置中;
动态渲染:表单渲染组件读取数据层中的表单配置,加载组件库,按照MetaformSchema规范对表单配置进行解析,渲染表单;数据展现渲染组件读取数据层中的数据展现配置,加载组件库,按照Metaform Schema规范对数据展现配置进行解析,渲染数据展现。组件库为客户端为表单渲染而适配和二次封装的组件库。
布局配置,用于描述表单项的展现顺序和层级结构,单独抽离出来便于修改和适配布局:布局配置数据为数组,数组元素表示表单控件,表单控件以自上而下、从左向右的顺序排列;数组元素包含两种类型:字符串、对象;字符串类型的数据为表单控件的唯一标识(由设计器自动生成或开发者自行定义),全局唯一;对象类型的数据表示一个包含嵌套的控件,对象的key为父控件唯一标识,value为数组类型,value数组的元素为子控件唯一标识。
控件参数配置,用于描述表单控件的属性、数据绑定、校验规则等信息。控件参数配置为JSON对象,JSON对象的key为控件唯一标识,value为该控件的配置。
数据校验配置,描述控件输入时的实时校验规则。
交互联动配置,描述了表单控件之间的关联逻辑,用于表单按照填表人输入动态变化。交互联动配置为数组,数组元素代表一个联动逻辑配置。
进一步的,控件参数配置中,name为控件的标题,type为控件类型,fieldName为绑定的数据字段名称,props为控件参数,rules为检验配置,listerners为事件监听函数,slots为控件扩展插槽配置;交互联动配置中,condition为触发条件,支持关系运算和逻辑运算,且支持多层嵌套;result为联动结果,可设置触发一个或多个结果。
进一步的,为实现表单多端适配,实现一次配置,多种客户端使用,包括以下步骤:
为不同客户端独立开发UI组件库,通过适配器对表单配置解析并转换成各个客户端的表单控件能够接收的控件参数,实现表单控件数据(或状态)与控件视图的双向绑定,即当表单数据发生变化时,控件视图自动更新,当控件因为交互发生变化时,表单数据自动更新。
在可视化表单设计器中按照不同客户端对应的UI组件库进行渲染,转换成不同客户端中的布局和控件,在可视化表单设计器中预览表单展现效果,便于对不同客户端的表单配置做进一步微调;
将不同客户端的表单配置保存到数据层。
进一步的,现有的表单技术实现方案无法通过编程方式介入,进行个性化的定制开发。而在实际业务开发过程中,标准控件功能往往不能完全满足业务需求,需要进行二次开发,或定制新的表单控件。当需要基于配置的表单二次开发时,包括以下步骤:
为二次开发的表单控件配置控件适配器,实现数据双向绑定;
将控件类型和控件适配器进行映射;
当需要定制控件时,修改控件映射配置,指向新的控件适配器;
当需要扩展新的控件时,在配置中添加新的控件映射进行注册;
表单按照控件类型和控件适配器的映射配置调用对应的控件适配器;
控件适配器接收控件参数配置和填表人填写的表单数据,并调用表单控件进行渲染。
进一步的,在某些业务场景中,表单项需要按照填表人的输入,动态地更新显示状态或选项数据。基于配置的表单数据关联逻辑开发,包括如下步骤:
通过可视化表单设计器,完成表单控件设置和数据字段绑定;
通过可视化表单设计器的关联逻辑配置模块,对已绑定的字段进行数据变化响应逻辑设置;
保存表单关联逻辑配置到数据层的表单配置中;
动态渲染,加载关联逻辑配置,实现字段数据监听;当填表人填写表单,字段数据变化触发监听,更新表单控件状态。
进一步的,基于MVVM模式,实现逻辑和功能扩展,包括以下方法:按照定义的Metaform Schema规范:
为控件参数配置添加事件配置,实现表单逻辑编程和表单外交互编程;
为数据变化添加监听配置,实现按数据变化的逻辑编程;
为数据校验配置添加校验规则,实现复杂的规则校验编程;
为控件参数配置添加插槽配置,实现控件内部的动态扩展编程。
进一步的,关联逻辑配置模块包括输入条件和输出结果配置;
输入条件配置包括监听字段、条件函数、字段值配置,可添加单个条件或条件组;
输出结果配置包括响应字段、控制方式设置;控制方式包括控件的显示、只读、必填;表单的关联逻辑可配置多组。
进一步的,为解决整个表单内控件的频繁更新,造成填表人输入卡顿,性能严重下降的问题,提供大型表单优化方法,包括如下步骤:
在可视化表单设计器中,将表单页面根据一个或多个表单项分为若干页;
保存表单分页设置到数据层表单配置模块中;
当需要加载表单配置,根据分页设置的页码加载并渲染当前页的表单配置;
当填表人填写当前页的表单项后,调用当前页表单控件的校验规则进行校验;校验通过后,销毁当前页面表单项;
当填表人填写新页面的表单项时,加载新页面的表单配置进行渲染;
所有页面的表单填写完成并校验通过后,提交所有填表人填写数据。
本发明还公开一种基于配置的低代码开发表单系统,包括:
元数据设计模块,用于定义数据模型;
依据Metaform Schema生成的表单配置、数据展现配置;
可视化表单设计器,包括组件库、表单设计区、表单控件设置模块,依据MetaformSchema规范,通过拖拽组件库提供的表单控件,及设置表单布局、控件参数、数据校验、交互联动配置,完成表单的创建和预览;
表单配置持久化模块,用于将序列化后的表单配置保存到数据层的表单配置中;
表单数据展现设计器,用于通过拖拽容器和字段展现控件,创建表单数据的展现配置;
表单数据展现配置持久化模块,用于将序列化后的表单数据展现配置元数据保存到数据层的表单数据中;
表单渲染模块,用于加载表单配置,反序列化动态渲染出表单;
数据展现渲染模块,用于加载数据展现和配置,动态渲染出数据展现界面。
进一步的,可视化表单设计器提供的关联逻辑配置模块,对已绑定的字段进行数据变化响应逻辑设置;关联逻辑配置模块包括输入条件和输出结果配置;
输入条件配置包括监听字段、条件函数、字段值配置,可添加单个条件或条件组;
输出结果配置包括响应字段、控制方式设置;控制方式包括控件的显示、只读、必填;表单的关联逻辑可配置多组。
本发明还公开一种基于配置的低代码开发表单装置,包括数据层、配置层、应用层;
数据层包括:数据模型,数据模型是对填表人填写的表单数据进行描述的数据;表单配置,保存序列化后的表单配置数据;表单数据配置,保存序列化后的表单数据展现配置数据;
配置层包括:元数据管理,用于设计与表单关联的数据模型,包括添加字段、设计字段数据类型、长度、默认值、维度、约束等;可视化表单设计器,用于进行表单可视化配置,包括依据Metaform Schema规范生成表单布局、控件参数、数据校验、交互联动配置;可视化数据展现设计器,用于定义填表人填写数据的展现配置,依据Metaform Schema规范生成展现布局、展现控件参数配置;
应用层包括:表单渲染组件,用于读取数据层中的表单配置,加载对应的组件库,按照Metaform Schema规范对表单配置进行解析,渲染表单;数据展现渲染组件,渲染填表人所提交数据的展现界面,比如以某种表格形式展现填表人提交的表单数据,或仿真票据、订单形式进行展现,还可以用于数据打印的排版。
进一步的,应用层还包括不同客户端的UI组件库及定制组件模块,不同客户端的UI组件库及定制组件模块均配置有适配器;通过适配器对表单配置解析并转换成各个客户端的表单控件能够接收的控件参数,实现数据双向绑定;在可视化表单设计器中按照不同客户端对应的UI组件库进行渲染,转换成不同客户端中的布局和控件,在可视化表单设计器中预览表单展现效果;保存不同客户端的表单配置到数据层的表单配置中。
与现有技术相比,本发明具有以下技术优势:
1、通过定义一种统一的表单配置规范,使用可视化表单设计器生成表单配置,利用多端UI组件库及适配器渲染出满足多端展现和交互的表单,从而实现了“一次配置,多端可用”,降低了表单多端场景的开发成本;
2、基于本发明中定义的统一表单配置规范和表单渲染组件的数据更新响应能力,将表单配置和预留的表单控件扩展插槽开放给开发人员进行二次开发,使得开发人员在可视化配置的基础上仍然能够从代码层面自由扩展,从而做到绝大多数常规场景中“0代码”,个性化需求“低代码”的高效灵活的表单构建,满足各种场景的构建需要;
3、针对大型表单的数据响应和复杂逻辑关联产生的性能问题,通过对表单进行拆分,分页渲染,大幅提升了表单渲染和数据更新响应的效率,避免了界面卡顿,提高了填表人使用体验。
附图说明
图1为本发明实施例的基于配置的低代码开发表单方法的流程图。
图2为本发明实施例的基于配置的低代码开发表单方法的多端适配方法流程图。
图3为本发明实施例的基于配置的低代码开发表单方法的表单渲染方法流程图。
图4为本发明实施例的基于配置的低代码开发表单方法的进行二次开发生成表单的调用过程示意图。
图5为本发明实施例的基于配置的低代码开发表单装置的架构图。
具体实施方式
为了便于本领域技术人员的理解,下面结合实施例与附图对本发明作进一步的说明。
本实施例提供了一种基于配置的低代码开发表单系统,该系统包括如下模块:元数据设计模块,用于设置表单数据的数据类型、大小、默认值、维度、约束等;可视化表单设计器,用于通过拖拽组件库提供的表单控件,并设置控件的参数、数据绑定、校验规则,完成表单的创建和预览;表单配置持久化模块,用于将序列化后的表单配置保存到数据库中;表单数据展现设计器,用于通过拖拽容器和字段展现控件,创建表单数据的展现样式;表单数据展现配置持久化模块,用于将序列化后的表单数据展现配置元数据保存到数据层的表单数据中;表单渲染模块,用于加载表单配置,反序列化动态渲染出表单;表单数据保存模块,用于将提交到服务端数据进行校验、加密、保存。
基于配置的低代码开发表单系统能够实现基于配置动态生成表单的方法,如图1所示,包括如下步骤:
11、通过元数据管理定义数据模型,数据模型是对填表人填写的表单数据进行描述的数据;定义统一规范Metaform Schema;Metaform Schema规范是约定的描述表单配置和数据展现配置的规范;将表单界面、表单项元数据、填表人数据进行分离,实现表单结构的序列化;
12、通过在线可视化表单设计器,对表单布局、控件参数、数据校验、交互联动等进行配置,完成表单创建和预览;
13、持久化表单,将序列化成JSON格式的表单配置保存到数据层的表单配置中;
14、通过在线可视化数据展现设计器,对页面和控件参数进行配置,预览数据展现;
15、持久化数据展现配置,保存数据展现配置到数据层的表单数据中。
16、动态渲染,读取数据库中的表单配置,加载对应的组件库,按照协议反序列化渲染出表单。数据展现渲染组件读取数据层中的数据展现配置,加载组件库,按照MetaformSchema规范对数据展现配置进行解析,渲染数据展现。
17、填表人填写表单,表单控件按照配置的校验规则实时校验;
18、提交填表人输入数据。
表单布局配置,用于描述表单项的展现顺序和层级结构,单独抽离出来便于修改和适配布局:布局配置数据为数组,数组元素表示表单控件,表单控件以自上而下、从左向右的顺序排列;数组元素包含两种类型:字符串、对象;字符串类型的数据为表单控件的唯一标识(由设计器自动生成或开发者自行定义),全局唯一;对象类型的数据表示一个包含嵌套的控件,对象的key为父控件唯一标识,value为数组类型,其元素为子控件唯一标识。
控件参数配置,用于描述表单控件的属性、数据绑定、校验规则等信息。控件参数配置为JSON对象,JSON对象的key为控件唯一标识,value为该控件的配置。name为控件的标题,type为控件类型,fieldName为绑定的数据字段名称,props为控件参数,rules为检验配置,listerners为事件监听函数,slots为控件扩展插槽配置。
数据校验配置,描述控件输入时的实时校验规则。通过设定校验规则,描述控件输入时如何进行实时校验,并可通过编程方式进行复杂校验。表单项的校验规则是在控件参数面板界面设置的,配置数据集中保存在表单配置下的校验规则配置中。
交互联动配置,描述了表单控件之间的关联逻辑,用于表单按照填表人输入动态变化。交互联动配置为数组,数组元素代表一个联动逻辑配置。condition为触发条件,支持关系运算和逻辑运算,且支持多层嵌套;result为联动结果,可设置触发一个或多个结果。
为实现一次配置,多种客户端使用,本实施例提供了一种表单多端适配的方法,如图2所示,所述方法包括如下步骤:
21、为每一种不同设备或技术的客户端独立开发一套UI组件库;
22、对每种类型的表单控件(如表单中的输入框、选择框、编辑器等内部UI子组件)进行适配转换,实现数据双向绑定;
23、在线可视化设计器中按照PC端表单设计自动转换成其他客户端中的布局和控件,并进一步调整相关设置;
24、在线预览各种客户端下的表单渲染效果;
25、保存表单配置到数据层的表单配置中;
26、客户端中加载对应的组件库和适配器,按照表单配置和表单数据,对表单进行动态渲染。表单渲染方法如图3所示。
在实际业务开发过程中,标准控件功能往往不能完全满足业务需求,需要进行二次开发,或定制新的表单控件。现有的表单技术实现方案无法通过编程方式介入,进行个性化的定制开发。本实施例提供了一种基于配置的表单二次开发方案,如图4所示,所述方法包括如下步骤:
31、为定制或扩展控件编写适配器,实现表单控件数据与控件视图的双向绑定;
32、导入定制或扩展控件适配器;
33、通过配置方式将控件类型和控件适配器进行映射。当需要定制某个控件时,修改控件映射配置,指向新的控件适配器;当需要扩展新的控件时,在配置中添加新的控件映射进行注册;
34、表单按照控件类型和控件适配器的映射配置调用对应的控件适配器;
35、适配器接收控件参数配置和表单数据,并调用控件实现进行渲染。
图4还包括了二次开发方法,基于MVVM模式,按照约定的Metaform Schema规范,实现更为复杂的逻辑和功能扩展,包括:
41、为控件添加事件配置,实现表单逻辑编程和表单外交互编程;
42、为数据变化添加监听配置,实现按数据变化的逻辑编程;
43、为数据校验添加校验配置,实现复杂的规则校验编程;
44、为控件添加插槽配置,实现控件内部的动态扩展编程;
在某些业务场景中,表单项需要按照填表人的输入,动态地更新显示状态或选项数据。为达到上述目的,本实施例提供了一种基于配置的表单数据关联逻辑开发方法。所述方法包括如下步骤:
51、通过在线可视化表单设计器,完成表单控件设置和数据字段绑定;
52、通过设计器提供的关联逻辑配置模块,对已绑定的字段进行数据变化响应逻辑设置;
53、保存表单关联逻辑配置到数据库中;
54、动态渲染,加载关联逻辑配置,实现字段数据监听;
55、填表人填写表单,字段数据变化触发对应的监听函数,更新表单控件状态;
关联逻辑配置模块包括输入条件和输出结果配置。输入条件配置中,包括监听字段、条件函数、字段值配置,可添加单个条件或条件组;输出结果配置中包括响应字段、控制方式设置,其中控制方式包括控件的显示、只读、必填;表单的关联逻辑可配置多组,可实现一对一、一对多、多对一、多对多的关联逻辑需求。
部分业务场景中,会出现超多字段超复杂逻辑的表单需求。按照目前基于MVVM模式动态数据响应的技术方案,在大量的表单控件和数据变化监听的表单中,会因为数据的频繁变化,导致整个表单内控件的频繁更新,造成填表人输入卡顿,性能严重下降。
为解决上述问题,本实施例提供了一种大型表单优化方法。所述方法包括如下步骤:
61、通过在线可视化表单设计器,为表单添加分页,将表单项分成多页设置;
62、保存表单分页设置到数据库中;
63、加载分页配置,按照当前页码加载当前页面的元数据配置;
64、按照当前页的元数据配置,渲染表单,实现表单的按页拆分;
65、填表人填写当前页面的表单项,点击翻页,调用当前页面表单控件的校验规则进行校验;
66、校验通过后,销毁当前页面表单项,并加载下一页的元数据配置进行渲染;
67、所有页面的表单填写完成并校验通过后,提交所有填表人填写数据;
上述方法将表单拆分后,每个页面的控件和绑定数据字段数量减少,使得数据变化对控件的更新范围大幅缩小,达到了性能优化的目的。
如图5所示,本实施例的基于配置的低代码开发表单装置,包括数据层、配置层、应用层,数据层包括数据模型、表单配置、表单数据配置,配置层包括元数据管理、可视化表单设计器、可视化数据展现设计器;应用层包括表单渲染组件、数据展现渲染组件,并包括Web组件库、H5组件库、APP组件库及定制组件模块,各组件库及定制组件模块均配置有适配器,实现多端适配。具体的:
数据层包括:数据模型,数据模型是对填表人填写的表单数据进行描述的数据;表单配置,保存序列化后的表单配置数据;表单数据配置,保存序列化后的表单数据展现配置数据;
配置层包括:元数据管理,用于设计与表单关联的数据模型,包括添加字段、设计字段数据类型、长度、默认值、维度、约束等;可视化表单设计器,用于进行表单可视化配置,包括依据Metaform Schema规范生成表单布局、控件参数、数据校验、交互联动配置;可视化数据展现设计器,用于定义填表人填写数据的展现配置,依据Metaform Schema规范生成展现布局、展现控件参数配置;
应用层包括:表单渲染组件,用于读取数据层中的表单配置,加载对应的组件库,按照Metaform Schema规范对表单配置进行解析,渲染表单;数据展现渲染组件,渲染填表人所提交数据的展现界面,比如以某种表格形式展现填表人提交的表单数据,或仿真票据、订单形式进行展现,还可以用于数据打印的排版。
应用层还包括不同客户端的UI组件库及定制组件模块,不同客户端的UI组件库及定制组件模块均配置有适配器;通过适配器对表单配置解析并转换成各个客户端的表单控件能够接收的控件参数,实现数据双向绑定;在可视化表单设计器中按照不同客户端对应的UI组件库进行渲染,转换成不同客户端中的布局和控件,在可视化表单设计器中预览表单展现效果;保存不同客户端的表单配置到数据层的表单配置中。
以上的实施例仅为说明本发明的技术思想,不能以此限定本发明的保护范围,凡是按照本发明提出的技术思想,在技术方案基础上所做的任何改动,均落入本发明保护范围之内。
Claims (13)
1.一种基于配置的低代码开发表单方法,其特征在于,包括如下步骤:
通过元数据管理定义数据模型,数据模型是对填表人填写的表单数据进行描述的数据;
定义统一规范Metaform Schema;Metaform Schema规范是约定的描述表单配置和数据展现配置的规范;
通过可视化表单设计器进行表单的可视化配置;表单的可视化配置包括依据MetaformSchema规范生成表单布局、控件参数、数据校验、交互联动配置;
持久化表单配置:将生成的可视化配置数据保存到数据层的表单配置中;
通过可视化数据展现设计器进行数据展现的可视化配置;数据展现的可视化配置包括依据Metaform Schema规范生成数据展现布局、控件参数配置;
持久化数据展现配置:将生成的数据展现配置保存到数据层的表单数据展现配置中;
控件参数配置,用于描述表单控件的属性、数据绑定、校验规则信息;
动态渲染:表单渲染组件读取数据层中的表单配置,加载组件库,按照MetaformSchema规范对表单配置进行解析,渲染表单;数据展现渲染组件读取数据层中的数据展现配置,加载组件库,按照Metaform Schema规范对数据展现配置进行解析,渲染数据展现。
2.根据权利要求1所述的基于配置的低代码开发表单方法,其特征在于:
表单布局配置,用于描述表单项的展现顺序和层级结构;布局配置数据为数组,数组元素表示表单控件;数组元素包括:字符串、对象;
字符串类型的数据为表单控件的唯一标识;
对象类型的数据表示一个包含嵌套的控件,对象的key为父控件唯一标识,value为数组类型,value数组的元素为子控件唯一标识;
控件参数配置为JSON对象,JSON对象的key为控件唯一标识,value为该控件的配置;
数据校验配置,描述控件输入时的实时校验规则;
交互联动配置,描述了表单控件之间的关联逻辑;交互联动配置为数组,数组元素代表一个联动逻辑配置。
3.根据权利要求2所述的基于配置的低代码开发表单方法,其特征在于:
控件参数配置中,name为控件的标题,type为控件类型,fieldName为绑定的数据字段名称,props为控件参数,rules为检验配置,listerners为事件监听函数,slots为控件扩展插槽配置;
交互联动配置中,condition为触发条件,支持关系运算和逻辑运算,且支持多层嵌套;result为联动结果,可设置触发一个或多个结果。
4.根据权利要求1或2所述的基于配置的低代码开发表单方法,其特征在于,实现表单多端适配包括以下步骤:
为不同客户端独立开发UI组件库,通过适配器对表单配置解析并转换成各个客户端的表单控件能够接收的控件参数,实现表单控件数据与控件视图的双向绑定;
在可视化表单设计器中按照不同客户端对应的UI组件库进行渲染,转换成不同客户端中的布局和控件,在可视化表单设计器中预览表单展现效果;
将不同客户端的表单配置保存到数据层。
5.根据权利要求1或2所述的基于配置的低代码开发表单方法,其特征在于,当需要基于配置的表单二次开发时,包括以下步骤:
为二次开发的表单控件配置控件适配器,实现表单控件数据与控件视图的双向绑定;
将控件类型和控件适配器进行映射;
当需要定制控件时,修改控件映射配置,指向新的控件适配器;
当需要扩展新的控件时,在配置中添加新的控件映射进行注册;
表单按照控件类型和控件适配器的映射配置调用对应的控件适配器;
控件适配器接收控件参数配置和表单数据,并调用表单控件进行渲染。
6.根据权利要求1或2所述的基于配置的低代码开发表单方法,其特征在于,基于配置的表单数据关联逻辑开发,包括如下步骤:
通过可视化表单设计器,完成表单控件设置和数据字段绑定;
通过可视化表单设计器的关联逻辑配置模块,对已绑定的字段进行数据变化响应逻辑设置;
保存表单关联逻辑配置到数据层的表单配置中;
动态渲染,加载关联逻辑配置,实现字段数据监听;当填表人填写表单,字段数据变化触发监听,更新表单控件状态。
7.根据权利要求6所述的基于配置的低代码开发表单方法,其特征在于,基于MVVM模式,按照定义的Metaform Schema规范:
为控件参数配置添加事件配置,实现表单逻辑编程和表单外交互编程;
为数据变化添加监听配置,实现按数据变化的逻辑编程;
为数据校验配置添加校验规则,实现复杂的规则校验编程;
为控件参数配置添加插槽配置,实现控件内部的动态扩展编程。
8.根据权利要求6所述的基于配置的低代码开发表单方法,其特征在于:
关联逻辑配置模块包括输入条件和输出结果配置;
输入条件配置包括监听字段、条件函数、字段值配置,可添加单个条件或条件组;
输出结果配置包括响应字段、控制方式设置;控制方式包括控件的显示、只读、必填;表单的关联逻辑可配置多组。
9.根据权利要求1或2所述的基于配置的低代码开发表单方法,其特征在于,还包括如下步骤:
在可视化表单设计器中,将表单页面根据一个或多个表单项分为若干页;
保存表单分页设置到数据层表单配置模块中;
当需要加载表单配置,根据分页设置的页码加载并渲染当前页的表单配置;
当填表人填写当前页的表单项后,调用当前页表单控件的校验规则进行校验;校验通过后,销毁当前页面表单项;
当填表人填写新页面的表单项时,加载新页面的表单配置进行渲染;
所有页面的表单填写完成并校验通过后,提交所有填表人填写数据。
10.一种基于配置的低代码开发表单系统,其特征在于,包括:
元数据设计模块,用于定义数据模型;
依据Metaform Schema生成的表单配置、数据展现配置;
可视化表单设计器,包括组件库、表单设计区、表单控件设置模块,依据MetaformSchema规范,通过拖拽组件库提供的表单控件,及设置表单布局、控件参数、数据校验、交互联动配置,完成表单的创建和预览;
表单配置持久化模块,用于将序列化后的表单配置元数据保存到数据层的表单配置中;
表单数据展现设计器,用于通过拖拽容器和字段展现控件,创建表单数据的展现配置;
表单数据展现配置持久化模块,用于将序列化后的表单数据展现配置元数据保存到数据层的表单数据中;
表单渲染模块,用于加载表单配置,反序列化动态渲染出表单;
数据展现渲染模块,用于加载数据展现和配置,动态渲染出数据展现界面。
11.根据权利要求10所述的基于配置的低代码开发表单系统,其特征在于:
可视化表单设计器提供关联逻辑配置模块,对已绑定的字段进行数据变化响应逻辑设置;关联逻辑配置模块包括输入条件和输出结果配置;
输入条件配置包括监听字段、条件函数、字段值配置,可添加单个条件或条件组;
输出结果配置包括响应字段、控制方式设置;控制方式包括控件的显示、只读、必填;表单的关联逻辑可配置多组。
12.一种基于配置的低代码开发表单装置,其特征在于:包括数据层、配置层、应用层;
数据层包括:数据模型,数据模型是对填表人填写的表单数据进行描述的数据;表单配置,保存序列化后的表单配置数据;表单数据配置,保存序列化后的表单数据展现配置数据;
配置层包括:元数据管理,用于设计与表单关联的数据模型;可视化表单设计器,用于进行表单可视化配置,包括依据Metaform Schema规范生成表单布局、控件参数、数据校验、交互联动配置;可视化数据展现设计器,用于定义填表人填写数据的展现配置,依据Metaform Schema规范生成展现布局、展现控件参数配置;
应用层包括:表单渲染组件,用于读取数据层中的表单配置,加载对应的组件库,按照Metaform Schema规范对表单配置进行解析,渲染表单;数据展现渲染组件,渲染填表人所提交数据的展现界面。
13.根据权利要求12所述的基于配置的低代码开发表单装置,其特征在于:
应用层还包括不同客户端的UI组件库及定制组件模块,不同客户端的UI组件库及定制组件模块均配置有适配器;
通过适配器对表单配置解析并转换成各个客户端的表单控件能够接收的控件参数,实现数据双向绑定;
在可视化表单设计器中按照不同客户端对应的UI组件库进行渲染,转换成不同客户端中的布局和控件,在可视化表单设计器中预览表单展现效果;
保存不同客户端的表单配置到数据层的表单配置中。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210020967.0A CN114035773B (zh) | 2022-01-10 | 2022-01-10 | 一种基于配置的低代码开发表单方法、系统及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210020967.0A CN114035773B (zh) | 2022-01-10 | 2022-01-10 | 一种基于配置的低代码开发表单方法、系统及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN114035773A CN114035773A (zh) | 2022-02-11 |
CN114035773B true CN114035773B (zh) | 2022-04-26 |
Family
ID=80147393
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202210020967.0A Active CN114035773B (zh) | 2022-01-10 | 2022-01-10 | 一种基于配置的低代码开发表单方法、系统及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114035773B (zh) |
Families Citing this family (13)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115145561B (zh) * | 2022-05-17 | 2023-02-03 | 三峡高科信息技术有限责任公司 | 一种可复用的工程管理业务组件库的构建方法 |
CN114968221B (zh) * | 2022-07-18 | 2022-11-01 | 湖南云畅网络科技有限公司 | 一种基于前端低代码编排系统及方法 |
CN115639989A (zh) * | 2022-09-05 | 2023-01-24 | 东方合智数据科技(广东)有限责任公司 | 一种瓦楞纸包装行业的可视化表单配置方法及相关设备 |
CN115238218A (zh) * | 2022-09-26 | 2022-10-25 | 北京美络克思科技有限公司 | 网页设计方法及网页设计装置 |
CN115268916B (zh) * | 2022-09-29 | 2022-12-20 | 泰豪软件股份有限公司 | 一种基于低代码开发平台的动态表单实现方法及系统 |
CN115543281A (zh) * | 2022-10-18 | 2022-12-30 | 杭州雷数科技有限公司 | 一种可配置化的web应用生成方法 |
CN116301856B (zh) * | 2023-03-07 | 2023-08-29 | 浪潮智慧科技有限公司 | 一种可视化表单设计器的设计方法、装置、设备及介质 |
CN116610319B (zh) * | 2023-06-06 | 2024-05-14 | 易智瑞信息技术有限公司 | 一种基于低代码平台构建地图应用的方法及系统 |
CN116737094B (zh) * | 2023-08-15 | 2023-10-27 | 北京谷器数据科技有限公司 | 一种基于Vue框架的自定义标签打印方法 |
CN117234470B (zh) * | 2023-10-08 | 2024-02-23 | 开物数智(安徽)智能科技有限公司 | 一种基于低代码平台的跨端表单开发系统及方法 |
CN118363578B (zh) * | 2024-06-19 | 2024-09-06 | 杭州全速网络技术有限公司 | 基于Vue的动态表单渲染系统及方法 |
CN118466955B (zh) * | 2024-07-10 | 2024-09-10 | 南京吉冉软件有限公司 | 基于表单设计器上无代码配置化的表单页面控制系统 |
CN118535146A (zh) * | 2024-07-19 | 2024-08-23 | 成都成电医星数字健康软件有限公司 | 多端一体渲染方法及低码平台、电子设备及存储介质 |
Family Cites Families (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8823711B2 (en) * | 2010-12-17 | 2014-09-02 | Microsoft Corporation | Incremental creation of a graphical object to visually represent a data set |
CN107844297B (zh) * | 2017-10-17 | 2020-12-29 | 广东广业开元科技有限公司 | 一种数据可视化实现系统及方法 |
CN108363573A (zh) * | 2018-01-11 | 2018-08-03 | 山东浪潮通软信息科技有限公司 | 一种高效的移动表单设计与渲染方法 |
-
2022
- 2022-01-10 CN CN202210020967.0A patent/CN114035773B/zh active Active
Also Published As
Publication number | Publication date |
---|---|
CN114035773A (zh) | 2022-02-11 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN114035773B (zh) | 一种基于配置的低代码开发表单方法、系统及装置 | |
CN109918607B (zh) | 页面搭建方法及装置、介质和计算设备 | |
US8904342B2 (en) | System and method for rapid development of software applications | |
CN116225429A (zh) | 基于拖拽式组件框架的ipage网页式低代码开发平台 | |
CN116225399A (zh) | 基于电子表格的软件应用程序开发 | |
US10318126B2 (en) | Data-driven schema for describing and executing management tasks in a graphical user interface | |
CN113076096B (zh) | 一种桌面应用程序开发方法、装置、设备及存储介质 | |
CN111625226B (zh) | 一种基于原型的人机交互设计实现方法及系统 | |
KR101275871B1 (ko) | SaaS 환경에서의 홈페이지 제작 시스템 및 방법, 그 방법을 컴퓨터에서 실행하기 위한 컴퓨터 프로그램이 기록된, 컴퓨터로 판독 가능한 기록 매체 | |
US9817811B2 (en) | Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method | |
CN114461200A (zh) | 一种基于云SaaS平台的低代码开发应用及方法 | |
US12032863B2 (en) | Creation of component templates and removal of dead content therefrom | |
CN104424265A (zh) | 数字资源管理方法及系统 | |
US20080263142A1 (en) | Meta Data Driven User Interface System and Method | |
US11868598B2 (en) | Generating and modifying content using data structures | |
US11349902B2 (en) | System and method to standardize and improve implementation efficiency of user interface content | |
CN113268227A (zh) | 一种零代码可视化的软件开发平台及开发方法 | |
CN113031936A (zh) | 一种自动搭建页面并即时发布的方法及系统 | |
US20080263018A1 (en) | Method and System for Mapping Business Objects to Relational Database Tables | |
KR101552914B1 (ko) | 웹 서버 어플리케이션 프레임워크 장치와 프레임워크를 이용한 웹 어플리케이션 처리 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체 | |
CN115983226A (zh) | 表单模板的自动创建方法、装置、电子设备及存储介质 | |
US20190188297A1 (en) | Automatic core data service view generator | |
US11663199B1 (en) | Application development based on stored data | |
US9075891B2 (en) | Method and device for editing an object represented in a web page | |
US10706225B2 (en) | Form management system and method |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |