CN114610280A - 一种通过低代码方式实现的可视化表单设计方法及系统 - Google Patents

Abstract

本发明公开了一种通过低代码方式实现的可视化表单设计方法及系统，属于表单自定义技术领域，包括以下步骤：S1：库表映射；S2：实体模型建立；S3：组件设计；S4：表单设计；S5：表单发布与预览。本发明通过可视化表单设计的方法，解决表单开发速度慢、代码质量不高的问题，达成缩短开发周期、降低开发成本、提升表单设计效率的目标，助力应用系统业务快速加载与上线,值得被推广使用。

Description

一种通过低代码方式实现的可视化表单设计方法及系统

技术领域

本发明涉及表单自定义技术领域，具体涉及一种通过低代码方式实现的可视化表单设计方法及系统。

背景技术

对于传统表单应用，开发人员需要联系各个业务部门根据需求进行表单开发，但随着互联网的高速发展，系统的互联网化进程加速，5G时代业务需求变化更快，作为开发人员不懂业务开发难免与真实场景有出入，造成开发周期长的问题。此外影响表单质量的因素主要有两个，一是开发人员水平不高，二是开发人员频繁更换。应采用自定义表单提供的组件以统一UI、UE和技术路线，便于后期维护。为此，提出一种通过低代码方式实现的可视化表单设计方法及系统。

发明内容

本发明所要解决的技术问题在于：如何解决表单开发速度慢、代码质量不高的问题，达成缩短开发周期、降低开发成本、提升表单设计效率的目标，助力应用系统业务快速加载与上线，提供了一种通过低代码方式实现的可视化表单设计方法。

本发明是通过以下技术方案解决上述技术问题的，本发明包括以下步骤：

S1：库表映射

对应用系统数据源进行映射，对该数据源下的数据库、表进行映射，同时提供表结构展现对应字段信息及字段描述；

S2：实体模型建立

在库表映射的基础上，根据真实应用系统数据源下的表的字段信息，选择需要的字段作为实体属性，设置实体属性的名称和编码，选择完毕所需要的表字段后，定义实体名称与编码完成实体模型的设计；

S3：组件设计

通过表单设计器的基础组件、实体组件、模块组件的拖拉拽操作完成表单的初步设计，再根据用户的个性化需求进行组件属性的格式化修改和事件属性的设置；

S4：表单设计

通过拖拉拽元组件(具体指的文本框、下拉框、多选框等的基础组件)和模块组件，配置按钮完成表单的设计；

S5：表单发布与预览

设计完毕后进行表单版本发布。

更进一步地，在所述步骤S1中，库表映射信息包括数据源信息、库实施例信息、表信息和表字段信息，映射通过用户选择真实应用系统数据源，将该数据源下的库表以及字段信息以及属性可视化地显示在界面上并提供管理界面。

更进一步地，在所述步骤S2中，实体信息包括实体名称，实体编码，实体字段属性信息。

更进一步地，在所述步骤S3中，组件信息包括组件名称、组件属性JSON串和组件的HTML、JS、CSS代码。

更进一步地，在所述步骤S4中，通过所述表单设计器构建表单的基本组件及复杂组件、对事件属性进行设置、提供组件之间的协同能力、进行组件展示管理、进行表单二次开发、进行表单及组件级别的复用、进行表单预览、进行表单版本控制。

更进一步地，基本组件包括机构树、分割线、布局容器；复杂组件包括实体表格、弹窗表格、页面锚点。

更进一步地，事件属性设置包括设置下拉组件间的级联属性、文本组件根据输入内容的灵活展示属性、文本组件之间的内容拼接属性、按钮的弹窗属性。

更进一步地，组件展示管理即根据表单中元素值的不同设置禁用/启用，显示/隐藏表单中的组件。

更进一步地，在所述步骤S4中，配置的按钮种类包含：API、弹窗、跳转、自定义JS脚本。

更进一步地，在所述步骤S5中，设计完毕后的表单创建完毕后存入表单模板库，提供编辑、预览的功能，一个表单允许有多个版本，但只有一个版本状态为发布。

本发明还提供了一种通过低代码方式实现的可视化表单设计系统，采用上述的表单设计方法进行可视化表单设计，包括：

库表映射模块，用于对应用系统数据源进行映射，对该数据源下的数据库、表进行映射，同时提供表结构展现对应字段信息及字段描述；

实体模型建立模块，用于在库表映射的基础上，根据真实应用系统数据源下的表的字段信息，选择需要的字段作为实体属性，设置实体属性的名称和编码，选择完毕所需要的表字段后，定义实体名称与编码完成实体模型的设计；

组件设计模块，用于通过表单设计器的基础组件、实体组件、模块组件的拖拉拽操作完成表单的初步设计，再根据用户的个性化需求进行组件属性的格式化修改和事件属性的设置；

表单设计模块，用于通过拖拉拽元组件和模块组件，配置按钮完成表单的设计；

表单发布与预览模块，用于设计完毕后进行表单版本发布；

控制处理模块，用于向其他模块发出指令，完成相关动作；

所述库表映射模块、实体模型建立模块、组件设计模块、表单设计模块、表单发布与预览模块均与控制处理模块通讯连接。

本发明相比现有技术具有以下优点：该通过低代码方式实现的可视化表单设计方法，通过可视化表单设计的方法，解决表单开发速度慢、代码质量不高的问题，达成缩短开发周期、降低开发成本、提升表单设计效率的目标，助力应用系统业务快速加载与上线,值得被推广使用。

附图说明

图1是本发明实施例一中可视化设计方法的流程示意图；

图2是本发明实施例一中表单发布后的流程示意图。

具体实施方式

下面对本发明的实施例作详细说明，本实施例在以本发明技术方案为前提下进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。

实施例一

本实施例提供一种技术方案：一种通过低代码方式实现的可视化表单设计方法，包括以下步骤：

S1：库表映射

对应用系统数据源进行映射，此处映射是用户通过填写数据源地址、用户名以及密码链接到该数据源，并对该数据源下的数据库、表进行映射，此处映射是映射通过用户选择真实应用系统数据源，将该数据源下的库表以及字段信息以及属性可视化地显示在界面上并提供管理界面；同时提供表结构展现对应字段信息及字段描述；

S2：实体模型建立

在库表映射的基础上，根据真实应用系统数据源下的表的字段信息，选择需要的字段作为实体属性，设置实体属性的名称和编码，选择完毕所需要的表字段后，定义实体名称与编码完成实体模型的设计；

S3：组件设计

本步骤中支持所有ElementUI组件，让表单元素多样化，更好满足用户的个性化需求。所有的组件的图标、宽度、高度、名称、是否只读、是否禁用等属性支持可视化修改并实时生效；封装组件间复杂逻辑(级联、拼接、展示等)控制能力，提供组件、表单之间的协同能力；通过提供封装好的组件和复杂逻辑功能，让业务人员也能快速配置出表单；

S4：表单设计

利用表单设计器通过拖拉拽元组件(具体指拖拉拽文本框、下拉框、多选框等的基础组件)和模块组件以及S3步骤中设计出的组件完成表单的设计，省去大量重复的配置工作；另提供按钮统一管理和配置，以及按钮的复用；

S5：表单发版与预览

设置表单模板库，支持在线修改表单，及时发布，及时生效应用；通过API将表单模板提供给外部系统应用，提供表单运行态地址供页面集成以及.VUE文件供使用。

在所述步骤S1中，库表映射信息包括数据源信息、库实施例信息、表信息和表字段信息，数据源的类型是mysql。

在所述步骤S3中，组件信息包括组件名称、组件属性JSON串和组件的HTML、JS、CSS代码。组件设计支持ElementUI组件。让表单元素多样化，更好满足用户的个性化需求。本系统封装下拉组件间的级联属性、文本组件根据输入内容的灵活展示属性、文本组件之间的内容拼接属性、按钮的弹窗属性等。提供组件、表单之间的协同能力。用户可编辑所有组件的栅格属性，完成对表单组件的排版。同时本系统提供布局型容器组件，用户选择该组件即可在布局型容器中通过拖拉完成个性化布局。所有的组件的图标、宽度、高度、名称、是否只读、是否禁用等属性支持可视化修改并实时生效。通过可视化修改组件属性实现组件的放大和缩小。对已经编辑好的表单可以在线预览，查看表单实际效果，及时调整。

在所述步骤S4中，用户通过可视化的拖拽以及简单的配置，即可实现零(低)代码开发，完成表单从无到有的过程。通过灵活组合方式拖拉拽组件实现表单从1到100的快速创建。特别地，通过提供HTML、JS、CSS、Groovy在线编辑器和在线测试功能，解决需要特殊样式的表单、需要绑定复杂事件的定制组件、和后台有交互的组件的问题，达成灵活支撑个性表单二次开发的目标，助力用户无需打包编译即可快速二次开发与调试。

在所述步骤S4中，配置的按钮种类包含：API、弹窗、跳转、自定义JS脚本。

在所述步骤S5中，所生成的表单创建完毕后存入表单模板库，提供编辑、预览的功能。

需要说明的是，一个表单允许有多个版本，但只允许唯一一个版本状态为发布，表单预览即预览发布状态的表单版本。

本实施例还提供了一种通过低代码方式实现的可视化表单设计系统，采用上述的表单设计方法进行可视化表单设计，包括：

库表映射模块，用于提供对应用系统数据源的映射，并对该数据源下的数据库，表进行映射；还提供表结构展现对应字段信息及字段描述；

实体模型建立模块，用于通过库表映射中已经添加的表，将这些表中需要创建实体的字段取过来保存成一个实体；

组件设计模块，用于通过表单设计器的基础组件、实体组件、模块组件的拖拉拽完成表单的初步设计，后续根据用户的个性化需求进行组件属性的格式化修改和事件属性的设置；

表单设计模块，用于通过拖拉拽元组件和模块组件完成表单的设计，省去大量重复的配置工作；

表单发布与预览模块，用于发布已设计好的表单，并预览已发布的表单。

在本实施例中，表单设计器的功能包括但不限于：

除了构建表单最基本的组件，支持机构树、分割线、布局容器等大部分ElementUI支持的组件；还支持了如实体表格、弹窗表格、页面锚点等复杂组件；本系统封装这些常用的通用组件供用户可视化拖拉拽使用；

支持组件展示管理：根据表单中元素值的不同设置禁用/启用，显示/隐藏一些表单中的组件；用户可根据选择的目标组件，选择需要的状态，并进行条件配置；条件配置的条件选择可以选择是/或，新增多个条件组件，来控制选择的目标组件。通过生成的逻辑语句来控制目标组件；

支持提供按钮统一管理和配置。该功能主要用于给表单配置按钮，提搞按钮的复用性。

支持表单二次开发且提供HTML、JS、CSS、groovy编辑器进行二次开发。该功能解决需要特殊样式的表单、需要绑定复杂事件的定制组件、和后台有交互的组件的问题，达成灵活支撑个性表单二次开发的目标，助力用户无需打包编译即可快速二次开发与调试。

支持表单、组件级别的复用，支持表单预览。组件、表单创建完毕后存入组件、表单模板库，提供编辑、预览的功能。以减少重复性编码工作，提供组件、表单的复用。

支持表单版本控制。同一张表单能拥有多个版本，但处于发布状态的表单只有一个。此功能可对表单的历史版本进行追溯。

表单设计器包含组件区域、中央画布区域、组件属性区域。

组件区域包含了基础组件、实体组件以及自定义组件。基础组件包含了文本框、下拉框、多选框等ElementUI组件。实体组件即在基础组件的基础上绑定了实体信息，让组件和库表字段绑定。本系统还提供用户将常用的几个基础组件自定义封装成一个模块组件的能力。只需要拖拽一次，即可将多个基础组件拖动到画布上。另外，本系统提供在线编码的能力，用户可自定义编码一个组件，拖动到画布上。

中央画布区域显示用户拖拽的组件，可通过拖拽组件实现布局的调整并通过悬浮在每个组件右上方的复制和删除按钮实现画布中组件的调整。

组件属性区域中组件的图标、宽度、高度、名称、是否只读、是否禁用等属性支持可视化修改并实时生效。通过可视化修改组件属性实现组件的放大和缩小。本系统封装下拉组件间的级联属性、文本组件根据输入内容的灵活展示属性、文本组件之间的内容拼接属性、按钮的弹窗属性等。提供组件、表单之间的协同能力。

实施例二

5G时代业务需求变化更快，通过本实施例提供的一种通过低代码方式实现的可视化表单设计方法以实现新表单创建或存量旧表单改造耗时由天缩短为时。

对于传统表单应用，开发人员需要联系各个业务部门根据需求进行表单开发，但作为开发人员不懂业务开发难免与真实场景有出入，造成开发周期长的问题。如果需要构建一个审批流应用所需的表单。首先通过数据模型的定义来描述业务，让复杂业务逻辑转化成实体模型，让数据在表单中呈现更灵活。

在库表映射模块，提供对应用系统数据源的映射，并对该数据源下的数据库，表进行映射，映射通过用户选择真实应用系统数据源，将该数据源下的库表以及字段信息以及属性可视化地显示在界面上并提供管理界面。本模块还提供表结构展现对应字段信息及字段描述；

在实体设计模块，在库表映射的基础上，根据真实应用系统数据源下的表的字段信息，选择需要的字段作为实体属性，设置实体属性的名称和编码，选择完毕所需要的表字段后，定义实体名称与编码完成实体模型的设计。

从组件设计模块到表单设计模块，用户通过可视化的拖拽实体组件即在基础组件的基础上绑定了实体信息，让组件和库表字段绑定。以及通过简单的配置，即可实现低代码开发，完成表单从无到有的过程。最后将表单与流程环节绑定，实现审批流应用表单的创建。

综上所述，上述实施例的通过低代码方式实现的可视化表单设计方法，通过可视化表单设计的方法，解决表单开发速度慢、代码质量不高的问题，达成缩短开发周期、降低开发成本、提升表单设计效率的目标，助力应用系统业务快速加载与上线,值得被推广使用。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (10)

1.一种通过低代码方式实现的可视化表单设计方法，其特征在于，包括：

S1：库表映射

对应用系统数据源进行映射，对该数据源下的数据库、表进行映射，同时提供表结构展现对应字段信息及字段描述；

S2：实体模型建立

在库表映射的基础上，根据真实应用系统数据源下的表的字段信息，选择需要的字段作为实体属性，设置实体属性的名称和编码，选择完毕所需要的表字段后，定义实体名称与编码完成实体模型的设计；

S3：组件设计

通过表单设计器的基础组件、实体组件、模块组件的拖拉拽操作完成表单的初步设计，再根据用户的个性化需求进行组件属性的格式化修改和事件属性的设置；

S4：表单设计

通过拖拉拽元组件和模块组件，配置按钮完成表单的设计；

S5：表单发布与预览

设计完毕后进行表单版本发布。

2.根据权利要求1所述的一种通过低代码方式实现的可视化表单设计方法，其特征在于：在所述步骤S1中，库表映射信息包括数据源信息、库实施例信息、表信息和表字段信息，映射通过用户选择真实应用系统数据源，将该数据源下的库表以及字段信息以及属性可视化地显示在界面上并提供管理界面。

3.根据权利要求1所述的一种通过低代码方式实现的可视化表单设计方法，其特征在于：在所述步骤S2中，实体信息包括实体名称，实体编码，实体字段属性信息。

4.根据权利要求1所述的一种通过低代码方式实现的可视化表单设计方法，其特征在于：在所述步骤S3中，组件信息包括组件名称、组件属性JSON串和组件的HTML、JS、CSS代码。

5.根据权利要求1所述的一种通过低代码方式实现的可视化表单设计方法，其特征在于：在所述步骤S4中，通过所述表单设计器构建表单的基本组件及复杂组件、对事件属性进行设置、提供组件之间的协同能力、进行组件展示管理、进行表单二次开发、进行表单及组件级别的复用、进行表单预览、进行表单版本控制。

6.根据权利要求1所述的一种通过低代码方式实现的可视化表单设计方法，其特征在于：基本组件包括机构树、分割线、布局容器；复杂组件包括实体表格、弹窗表格、页面锚点。

7.根据权利要求6所述的一种通过低代码方式实现的可视化表单设计方法，其特征在于：事件属性设置包括设置下拉组件间的级联属性、文本组件根据输入内容的灵活展示属性、文本组件之间的内容拼接属性、按钮的弹窗属性。

8.根据权利要求1所述的一种通过低代码方式实现的可视化表单设计方法，其特征在于：在所述步骤S4中，配置的按钮种类包含：API、弹窗、跳转、自定义JS脚本。

9.根据权利要求1所述的一种通过低代码方式实现的可视化表单设计方法，其特征在于：在所述步骤S5中，设计完毕后的表单创建完毕后存入表单模板库，提供编辑、预览的功能，一个表单允许有多个版本，但只有一个版本状态为发布。

10.一种通过低代码方式实现的可视化表单设计系统，其特征在于，采用如权利要求1～9任一项所述的表单设计方法进行可视化表单设计，包括：

库表映射模块，用于对应用系统数据源进行映射，对该数据源下的数据库、表进行映射，同时提供表结构展现对应字段信息及字段描述；

实体模型建立模块，用于在库表映射的基础上，根据真实应用系统数据源下的表的字段信息，选择需要的字段作为实体属性，设置实体属性的名称和编码，选择完毕所需要的表字段后，定义实体名称与编码完成实体模型的设计；

组件设计模块，用于通过表单设计器的基础组件、实体组件、模块组件的拖拉拽操作完成表单的初步设计，再根据用户的个性化需求进行组件属性的格式化修改和事件属性的设置；

表单设计模块，用于通过拖拉拽元组件和模块组件，配置按钮完成表单的设计；

表单发布与预览模块，用于设计完毕后进行表单版本发布；

控制处理模块，用于向其他模块发出指令，完成相关动作；

所述库表映射模块、实体模型建立模块、组件设计模块、表单设计模块、表单发布与预览模块均与控制处理模块通讯连接。

Images