CN116301856A - 一种可视化表单设计器的设计方法、装置、设备及介质 - Google Patents

Abstract

本申请公开了一种可视化表单设计器的设计方法、装置、设备及介质，方法包括：接收来自于客户的设计需求，并根据设计需求获取前端组件，并将前端组件导入组件仓库；根据设计需求，确定表单设计器的表单内容，表单内容包括表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种；在表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面；在预设界面控件框架中继承预设控件交互方法，并在可视化界面中将控件交互方法与控件进行关联；根据设计需求，选择不同方式将表单进行导出。可减少前端人员资源投入，并避免界面效果的断层和返工。

Description

一种可视化表单设计器的设计方法、装置、设备及介质

技术领域

本申请涉及界面设计领域，具体涉及一种可视化表单设计器的设计方法、装置、设备及介质。

背景技术

Web应用存在需求变化频繁的特点，导致前端界面表单样式、元件布局修改频繁，这就占用了大量的软件开发时间，容易造成项目建设的资源浪费。由于系统更新频繁，但是当前前端组件、技术框架种类繁多，无法根据需求综合应用于系统的人机交互界面中，造成了一个系统通常只能使用一套界面风格，无法随系统更新进行替换。

这就导致部分事业单位老旧系统人机交互界面落后、前台操作逻辑混乱，人机交互不适应新业务需求，旧系统人机交互界面更新换代困难。因此，软件行业迫切需要解决在前端界面的设计、开发、维护上能够缩短工期的问题。

发明内容

为了解决上述问题，本申请提出了一种可视化表单设计器的设计方法，包括：

接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库；根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种；在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面；在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联；根据所述设计需求，选择不同方式将表单进行导出。

在一个示例中，所述根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库，具体包括：根据所述设计需求，确定目标组件；所述目标组件为可获取的开源前端组件；将所述目标组件进行解析；以读取到所述目标组件的配置文件；通过模块打包模拟器将所述配置文件进行打包，以得到所述目标组件对应的组件封装；将所述组件封装通过预设接口导入至所述组件仓库。

在一个示例中，所述配置文件通过代码格式记录所述目标组件的组件信息；所述组件信息包括组件名称、组件依赖、调用关系中的至少一种。

在一个示例中，所述控件类型包括布局控件、基本控件以及增强控件中的至少一种；所述基本控件包括文本控件、日期控件、下拉框控件、子表控件中的至少一种；所述增强控件包括流水号控件、附件控件、地址控件、签名控件中的至少一种。

在一个示例中，所述字段值计算方式包括支持固定值、动态热处理脚本、数据联动中的至少一种；所述表单规则类型包括是否必填规则、极值规则、正则表达式验证规则、提交验证规则、根据字段值动态变化字段权限规则中的至少一种。

在一个示例中，所述控件框架方法包括构造函数、获取控件JSON描述的方法、控件渲染方法、挂载控件事件的方法、控件属性配置方法、控件拖拽控制方法中的至少一种。

在一个示例中，所述根据所述设计需求，选择不同方式将表单进行导出，具体包括：将表单导出为H5页面，以供所述客户进行演示；或将所述表单与已有的接口配置界面相关联，并把适配器扫描出来的接口与表单上的事件进行挂钩。

本申请还提供了一种可视化表单设计器的设计系统，包括：组件获取模块，接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库；表单内容模块，根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种；区域划分模块，在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面；方法关联模块在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联；表单导出模块，根据所述设计需求，选择不同方式将表单进行导出。

本申请还提供了一种可视化表单设计器的设计设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行：接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库；根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种；在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面；在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联；根据所述设计需求，选择不同方式将表单进行导出。

本申请还提供了一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库；根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种；在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面；在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联；根据所述设计需求，选择不同方式将表单进行导出。

通过本申请提出的方法能够带来如下有益效果：可极大减少前端人员资源投入，并避免界面效果的断层和返工，同时设计器设计出的界面可与旧系统进行无缝集成，将旧系统的前后端进行分离，用新交互界面替代老旧交互界面，减少甚至保留旧系统后端逻辑，降低信息化建设的成本支出。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请实施例中一种可视化表单设计器的设计方法的流程示意图；

图2为本申请实施例中一种可视化表单设计器的设计装置的结构示意图；

图3为本申请实施例中一种可视化表单设计器的设计设备的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

以下结合附图，详细说明本申请各实施例提供的技术方案。

图1为本说明书一个或多个实施例提供的一种可视化表单设计器的设计方法的流程示意图。该方法可以应用于不同类型业务应用的交互界面，比如，互联网金融业务、电商业务、即时通讯业务、游戏业务、公务业务等。该流程可以由相应的计算设备(比如，支付业务对应的风控服务器或者智能移动终端等)执行，流程中的某些输入参数或者中间结果允许人工干预调节，以帮助提高准确性。

本申请实施例涉及的分析方法的实现可以为终端设备，也可以为服务器，本申请对此不作特殊限制。为了方便理解和描述，以下实施例均以服务器为例进行详细描述。

需要说明的是，该服务器可以是单独的一台设备，可以是有多台设备组成的系统，即，分布式服务器，本申请对此不做具体限定。

在表单引擎设计领域主要有两种设计思想：第一种是基于文件设计的，第二种是基于关系数据库设计。其中基于文件设计的思想是，创建表单的时候，首先创建一个文件，在这个文件上拖放相关的控件，或者加载相关的通用js代码,或者在对字段Input元素做特殊的标记，让表单引擎解析执行。表单运行时，运行的界面载体是一个Url文件地址，这个地址引用到相关的菜单上去，目前流行的大屏可视化设计基本采用此种思想。基于文件的表单设计思想存在以下两个弊端：一、文件表单布局排版是固定化的，需要改动就需要联系研发人员进行重新设计页面布局，耗时长；二、该设计模式不能适用于多种行业的表单需求。

基于关系数据库设计的组成部分是表单设计器、表单解析执行器、表单模板三部分组成。表单设计器，把表单元素都按照关系表存储到数据库里面，每个表单有一个ID，这个表单ID，挂接到表单的解析执行器上，就可以工作。表单模板将从表单设计器上设计组件关系存储到数据库中，由各个组件表组成的数据间的关系拼接成表单模板。表单解析执行器是将表单模板数据进行解析，将解析后的数据形态以网页的形式展现。目前主流的低代码开发平台大多采用这种表单设计思想。基于关系数据库的表单设计思想弊端在于表单展示为统一风格，较为单调，较多表单设计器产品无法满足样式多样性、表单主题界面贴合不同行业特点、属性可扩展，脚本可动态配置、直观的数据模型绑定、版本控制、常用功能页面域等要求。

如图1所示，本申请实施例提供一种可视化表单设计器的设计方法，包括：

S101：接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库。

开发人员根据客户需求分析选择下载相应风格的前端组件。下载完成后，通过设计器选择组件初始化，选择该组件并点击导入组件仓库。

在一个实施例中，在根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库时，首先要根据客户提供的设计需求，确定需要导入组件仓库的目标组件。这里的目标组件为可获取的开源前端组件，然后将目标组件进行解析。在解析时，可以通过node执行build.js解析，以读取到目标组件的配置文件。然后通过模块打包模拟器rollup将配置文件进行打包，以得到目标组件对应的组件封装，这里的组件封装中包括目标组件对应的js及图片、css样式文件等产物；最后可通过node提供的fsAPI写入到dist目录,纳入组件仓库。

进一步地，解析生成的congfig文件中以json格式记录了此组件的信息，如：组件ID,组件依赖、互相调用关系等，表单设计器会解析此文件，并在组件仓库中展示。

S102：根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种。

在一个实施例中，控件类型包括布局控件、基本控件以及增强控件中的至少一种；基本控件包括文本控件、日期控件、下拉框控件、子表控件中的至少一种；增强控件包括流水号控件、附件控件、地址控件、签名控件中的至少一种。

在一个实施例中，字段值计算方式包括支持固定值、动态热处理脚本、数据联动中的至少一种；表单规则类型包括是否必填规则、极值规则、正则表达式验证规则、提交验证规则、根据字段值动态变化字段权限规则中的至少一种。

在一个实施例中，业务数据模型包括在线可视化建物理表、设置各字段长度、类型等属性通过多数据源功能,将第三方已有物理表、接口数据等导入进行查询和维护新建物理表、第三方表进行组合使用，支持子子表三级视图结构。

在一个实施例中，表单设计器还支持打印模板，可通过自研的打印功能，将表单进行类excel操作的设计模式；还支持业务模板，可以在表单页面的基础上，配置工作流、搜索条件、菜单、操作按钮，基于表单快速生成功能模块；还支持详情表单，可以将多张独立表单进行组合，统一展示使用，支持在线表单和外部URL表单。

S103：在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面。

在设计器中选择区域控件，将整个页面划分为不同的功能区，然后将组件库的组件，如：按钮、表格、提示、筛选区、个人信息区等组件拖入区域中，生成可视化界面。

S104：在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联。

通过预置界面控件框架，预先定义了各功能的基础函数，例如构造函数、获取控件JSON描述的方法、控件渲染方法、挂载控件事件的方法、控件属性配置方法、控件拖拽控制方法等。在开发交互界面控件时，只需继承基类并实现基类中必须的方法即可，不需要过于关注控件在设计器中的交互过程，简化了开发人员的开发步骤。

其中，控件框架基本方法、事件如下：

S105：根据所述设计需求，选择不同方式将表单进行导出。

在一个实施例中，设计器提供了两种表单使用方式，一种是导出表单：表单设计完毕后，可以将表单导出为H5页面，供给客户演示使用。另一种是配置表单接口，将表单与接口配置界面相关联，把适配器扫描出来的接口与表单上的事件进行挂钩，用以适配已有旧系统的后端请求，即用新界面按钮继承的动作事件，去调用原有系统的后台接口，做到与旧界面请求动作一致。

如图2所示，本申请实施例还提供了一种可视化表单设计器的设计系统，包括：

组件获取模块201，接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库。

表单内容模块202，根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种。

区域划分模块203，在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面。

方法关联模204，在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联。

表单导出模块205，根据所述设计需求，选择不同方式将表单进行导出。

如图3所示，本申请实施例还提供了一种可视化表单设计器的设计设备，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库；根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种；在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面；在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联；根据所述设计需求，选择不同方式将表单进行导出。

本申请实施例还提供了一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：

接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库；根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种；在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面；在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联；根据所述设计需求，选择不同方式将表单进行导出。

本申请中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于设备和介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本申请实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述设备和介质的有益技术效果。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(f l ash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(trans itory med i a)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种可视化表单设计器的设计方法，其特征在于，包括：

接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库；

根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种；

在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面；

在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联；

根据所述设计需求，选择不同方式将表单进行导出。

2.根据权利要求1所述的方法，其特征在于，所述根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库，具体包括：

根据所述设计需求，确定目标组件；所述目标组件为可获取的开源前端组件；

将所述目标组件进行解析；以读取到所述目标组件的配置文件；

通过模块打包模拟器将所述配置文件进行打包，以得到所述目标组件对应的组件封装；

将所述组件封装通过预设接口导入至所述组件仓库。

3.根据权利要求2所述的方法，其特征在于，所述配置文件通过代码格式记录所述目标组件的组件信息；

所述组件信息包括组件名称、组件依赖、调用关系中的至少一种。

4.根据权利要求1所述的方法，其特征在于，所述控件类型包括布局控件、基本控件以及增强控件中的至少一种；所述基本控件包括文本控件、日期控件、下拉框控件、子表控件中的至少一种；所述增强控件包括流水号控件、附件控件、地址控件、签名控件中的至少一种。

5.根据权利要求1所述的方法，其特征在于，所述字段值计算方式包括支持固定值、动态热处理脚本、数据联动中的至少一种；

所述表单规则类型包括是否必填规则、极值规则、正则表达式验证规则、提交验证规则、根据字段值动态变化字段权限规则中的至少一种。

6.根据权利要求1所述的方法，其特征在于，所述控件框架方法包括构造函数、获取控件JSON描述的方法、控件渲染方法、挂载控件事件的方法、控件属性配置方法、控件拖拽控制方法中的至少一种。

7.根据权利要求1所述的方法，其特征在于，所述根据所述设计需求，选择不同方式将表单进行导出，具体包括：

将表单导出为H5页面，以供所述客户进行演示；或

将所述表单与已有的接口配置界面相关联，并把适配器扫描出来的接口与表单上的事件进行挂钩。

8.一种可视化表单设计器的设计系统，其特征在于，包括：

组件获取模块，接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库；

表单内容模块，根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种；

区域划分模块，在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面；

方法关联模块，在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联；

表单导出模块，根据所述设计需求，选择不同方式将表单进行导出。

9.一种可视化表单设计器的设计设备，其特征在于，包括：

至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行：

接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库；

根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种；

在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面；

在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联；

根据所述设计需求，选择不同方式将表单进行导出。

10.一种非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令设置为：

接收来自于客户的设计需求，并根据所述设计需求获取前端组件，并将所述前端组件导入组件仓库；

根据所述设计需求，确定表单设计器的表单内容，所述表单内容包括所述表单设计器中的控件类型、字段值计算方式、表单规则类型、业务数据模型中的至少一种；

在所述表单设计器中划分区域，并采用拖拽方式将控件放置于划分好的区域中，生成可视化界面；

在预设界面控件框架中继承预设控件交互方法，并在所述可视化界面中将所述控件交互方法与所述控件进行关联；

根据所述设计需求，选择不同方式将表单进行导出。

Images