一种用于移动端的动态表单渲染方法及系统

技术领域

本发明涉及数据处理技术领域，并且更具体地，涉及一种用于移动端的动态表单渲染方法及系统。

背景技术

在报销系统中，复杂多变的报销流程需要灵活的表单做支撑，同时移动化办公的流行催生了移动表单设计与渲染。

表单通过设计器进行控件的布局，配置表单与控件的属性，再通过前端的渲染呈现给用户，当遇到复杂的业务逻辑以及各种移动设备多端运行时，传统的表单渲染引擎存在布局仅支持一种或几种固定模式，表单控件无法配置自定义事件，控件间无联动关系等短板，对于个性化的需求并不友好。

发明内容

针对上述问题，本发明提出了一种用于移动端的动态表单渲染方法，包括：

获取动态表单的json数据，对所述json数据的组件数组进行递归处理，获取所述json数据的字段名称及默认值，基于所述字段名称和默认值，生成动态表单数据结构；

抽取出所述json数据的json组件中的表单验证规则和表单绑定公式，根据所述表单验证规则和所述表单绑定公式，请求生成用于动态表单渲染的在线脚本；

根据所述动态表单数据结构，依次对所述动态表单进行渲染器Parse组件渲染、render组件渲染和在线脚本渲染。

可选的，动态表单数据结构为json树结构，所述json树结构的布局组件内部多层嵌套。

可选的，对所述动态表单进行渲染器Parse组件渲染，包括：基于渲染器组件对所述动态表单进行布局渲染及对所述动态表单进行组件渲染；

所述基于渲染器组件对所述动态表单进行布局渲染及对所述动态表单进行组件渲染，包括：

将动态表单内部引入ChildParse子组件，通过所述ChildParse子组件生成所述动态表单的布局。

可选的，对所述动态表单进行render组件渲染，包括：对所述动态表单进行控件渲染；

所述对所述动态表单进行控件渲染，包括：

基于vue内置component组件，确定控件的is属性，根据所述控件的is属性和组件名称，将所述component组件渲染为不同的控件。

可选的，将所述component组件渲染为不同的控件，包括：

对所述component组件的控件配置数据进行预处理；

基于预处理后的控件配置数据，对所述component组件的输入型控件与选择型控件进行双向绑定，对所述component组件的is属性与事件进行绑定。

可选的，预处理，包括：创建空对象，遍历用于配置json数据的key值，将json数据的属性展开至空对象中；

所述属性包括如下中的至少一种：样式类属性、只读和格式化。

可选的，对所述动态表单进行在线脚本渲染，包括：

确定所述在线脚本的名称，以所述在线脚本的名称作为请求参数，通过get请求方式发送请求参数，以获取得到json文件，并以所述json字符串作为返回值，并在所述json字符串中添加目标字符。

再一方面，本发明还提出了一种用于移动端的动态表单渲染系统，包括：

数据采集单元，用于获取动态表单的json数据，对所述json数据的组件数组进行递归处理，获取所述json数据的字段名称及默认值，基于所述字段名称和默认值，生成动态表单数据结构；

数据处理单元，用于抽取出所述json数据的json组件中的表单验证规则和表单绑定公式，根据所述表单验证规则和所述表单绑定公式，请求生成用于动态表单渲染的在线脚本；

数据渲染单元，用于根据所述动态表单数据结构，依次对所述动态表单进行渲染器Parse组件渲染、render组件渲染和在线脚本渲染。

可选的，动态表单数据结构为json树结构，所述json树结构的布局组件内部多层嵌套。

可选的，对所述动态表单进行渲染器Parse组件渲染，包括：基于渲染器组件对所述动态表单进行布局渲染及对所述动态表单进行组件渲染；

所述基于渲染器组件对所述动态表单进行布局渲染及对所述动态表单进行组件渲染，包括：

将动态表单内部引入ChildParse子组件，通过所述ChildParse子组件生成所述动态表单的布局。

可选的，对所述动态表单进行render组件渲染，包括：对所述动态表单进行控件渲染；

所述对所述动态表单进行控件渲染，包括：

基于vue内置component组件，确定控件的is属性，根据所述控件的is属性和组件名称，将所述component组件渲染为不同的控件。

可选的，将所述component组件渲染为不同的控件，包括：

对所述component组件的控件配置数据进行预处理；

基于预处理后的控件配置数据，对所述component组件的输入型控件与选择型控件进行双向绑定，对所述component组件的is属性与事件进行绑定。

可选的，预处理，包括：创建空对象，遍历用于配置json数据的key值，将json数据的属性展开至空对象中；

所述属性包括如下中的至少一种：样式类属性、只读和格式化。

可选的，对所述动态表单进行在线脚本渲染，包括：

确定所述在线脚本的名称，以所述在线脚本的名称作为请求参数，通过get请求方式发送请求参数，以获取得到json文件，并以所述json字符串作为返回值，并在所述json字符串中添加目标字符。

再一方面，本发明还提供了一种计算设备，包括：一个或多个处理器；

处理器，用于执行一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行时，实现如上述所述的方法。

再一方面，本发明还提供了一种计算机可读存储介质，其上存有计算机程序，所述计算机程序被执行时，实现如上述所述的方法。

与现有技术相比，本发明的有益效果为：

本发明提出了一种用于移动端的动态表单渲染方法，包括：获取动态表单的json数据，对所述json数据的组件数组进行递归处理，获取所述json数据的字段名称及默认值，基于所述字段名称和默认值，生成动态表单数据结构；抽取出所述json数据的json组件中的表单验证规则和表单绑定公式，根据所述表单验证规则和所述表单绑定公式，请求生成用于动态表单渲染的在线脚本；根据所述动态表单数据结构，依次对所述动态表单进行渲染器Parse组件渲染、render组件渲染和在线脚本渲染。本发明能够对动态表单数据进行渲染，以实现对于动态表单的自定义事件与个性化的复杂业务逻辑。

附图说明

图1为本发明方法的流程图；

图2为本发明方法实施例的预处理流程图；

图3为本发明方法实施例的渲染器Parse组件渲染流程图；

图4为本发明方法实施例的render组件渲染的流程图；

图5为本发明系统的结构图。

具体实施方式

现在参考附图介绍本发明的示例性实施方式，然而，本发明可以用许多不同的形式来实施，并且不局限于此处描述的实施例，提供这些实施例是为了详尽地且完全地公开本发明，并且向所属技术领域的技术人员充分传达本发明的范围。对于表示在附图中的示例性实施方式中的术语并不是对本发明的限定。在附图中，相同的单元/元件使用相同的附图标记。

除非另有说明，此处使用的术语(包括科技术语)对所属技术领域的技术人员具有通常的理解含义。另外，可以理解的是，以通常使用的词典限定的术语，应当被理解为与其相关领域的语境具有一致的含义，而不应该被理解为理想化的或过于正式的意义。

实施例1：

本发明提出了一种用于移动端的动态表单渲染方法，如图1所示，包括：

步骤1、获取动态表单的json数据，对所述json数据的组件数组进行递归处理，获取所述json数据的字段名称及默认值，基于所述字段名称和默认值，生成动态表单数据结构；

步骤2、抽取出所述json数据的json组件中的表单验证规则和表单绑定公式，根据所述表单验证规则和所述表单绑定公式，请求生成用于动态表单渲染的在线脚本；

步骤3、根据所述动态表单数据结构，依次对所述动态表单进行渲染器Parse组件渲染、render组件渲染和在线脚本渲染。

其中，动态表单数据结构为json树结构，所述json树结构的布局组件内部多层嵌套。

其中，对所述动态表单进行渲染器Parse组件渲染，包括：基于渲染器组件对所述动态表单进行布局渲染及对所述动态表单进行组件渲染；

所述基于渲染器组件对所述动态表单进行布局渲染及对所述动态表单进行组件渲染，包括：

将动态表单内部引入ChildParse子组件，通过所述ChildParse子组件生成所述动态表单的布局。

其中，对所述动态表单进行render组件渲染，包括：对所述动态表单进行控件渲染；

所述对所述动态表单进行控件渲染，包括：

基于vue内置component组件，确定控件的is属性，根据所述控件的is属性和组件名称，将所述component组件渲染为不同的控件。

其中，将所述component组件渲染为不同的控件，包括：

对所述component组件的控件配置数据进行预处理；

基于预处理后的控件配置数据，对所述component组件的输入型控件与选择型控件进行双向绑定，对所述component组件的is属性与事件进行绑定。

其中，预处理，包括：创建空对象，遍历用于配置json数据的key值，将json数据的属性展开至空对象中；

所述属性包括如下中的至少一种：样式类属性、只读和格式化。

其中，对所述动态表单进行在线脚本渲染，包括：

确定所述在线脚本的名称，以所述在线脚本的名称作为请求参数，通过get请求方式发送请求参数，以获取得到json文件，并以所述json字符串作为返回值，并在所述json字符串中添加目标字符。

下面结合实施例对本发明进行进一步的说明：

本发明生成动态表单的数据来源于表单设计器通过拖拽生成的json数据结构，该json结构种包含了表单的相关属性，表单组件的数组，表单配置的用户自定义脚本文件名称等，其中表单组件的数组中包含了行容器组件，行容器内部包含表单控件或更深层次嵌套的行容器。选择类型的组件可配置联动以及过滤关系。如何将包含这些个性化配置的json数据渲染成一个兼容性良好，可多端运行，布局丰富的表单是本发明的关键。

本发明实施过程包括：

本发明为了解决一套代码可多端运行并能够同时兼容H5与App，选择了uni-app作为前端开发框架，充分发挥了其一套代码多端运行的优势。

1、进行json数据结构预处理；

如图2所示，包括：通过接口获取保存的表单模板json后，渲染前将json中的组件数组通过递归处理，根据字段名称与默认值生成表单数据结构，将组件中的验证规则，公式等进行抽离，便于验证规则的绑定与公式的渲染。

2、表单布局以及组件的渲染；

如图3所示，包括：

表单json结构中包含的布局组件内部可多层嵌套，因此，该json结构为树形结构，考虑到uni-app中支持vue组件，因此，采用渲染器Parse组件渲染表单，内部引入子组件ChildParse(vue递归组件)来生成布局，代码简洁明了，可实现多层次布局，有效解决了布局单一固定的问题。

生成布局时，本渲染方法还提供了悬浮容器的渲染，悬浮容器内的组件可实现固定在表单顶部或底部，例如：表单的保存，提交，取消，重置等按钮的布局，采用固定位置为底部的悬浮容器，当显示的按钮数量超过3个时，渲染器会自动将多余的按钮放入更多按钮中，有效防止因按钮数量过多导致的布局错乱问题。

布局中的表单控件使用封装的render组件进行渲染，将控件配置以参数形式传给render组件。

3、render组件的渲染；

如图4所示，包括：

render组件的实现是本发明的关键，主要作用是根据控件的属性配置渲染出具有交互性的表单控件。

由于render组件内的表单控件不固定，因此，使用了vue内置组件component组件，通过is属性根据组件名称渲染为不同的表单控件。

其具体实现包含如下过程：

步骤1：表单控件配置数据预处理；

创建空对象，遍历控件配置json数据的key值，将json的属性(如样式类属性，只读，格式化等)都展开至空对象中，便于后续动态属性的绑定。

如果判定属性为函数名称，则以函数名称作为key，以主渲染器Parse中的该同名函数(该函数的事件来源于外部脚本，由用户自定义，下面5.会做介绍)作为值插入空对象中。

如果判定表单控件存在某些特殊标记，例如：是否显示为卡片信息，则将其组件标签修改为纯文本展示，这样就会渲染为类似名片的效果，而不会显示为表单控件，从而实现丰富的样式。

其中，该新对象的获取采用vue组件的computed计算属性来获取，该属性既可以在控件配置发生变化时得到新的值更新至表单控件上，又可以进行有效的属性缓存，防止发生不必要的更新。

步骤2：输入型与选择型控件双向绑定的实现；

输入类型或选择类型的组件会通过其字段名称转化为input事件与value值的绑定，从而实现vue表单组件的双向绑定。

同时，input事件中主动触发值改变前事件与值改变事件，从而实现在控件的值发生改变时触发一些事件，如：输入金额后可判断金额是否超标准等。

步骤3：属性与事件绑定；

表单控件中的自定义属性会通过$attrs属性一次性全部绑定到congponent组件中。

自定义事件可通过$listeners属性一次性全部绑定到component组件上。

4、外部脚本渲染；

通过表单json中可获取到外部脚本名称，之后使用外部脚本名称作为参数通过get请求获取到js文件，返回值为js字符串，js字符串添加部分目标字符，以vue组件插入方法为例，’this.__methods＝‘+请求的js字符串，通过eval解析后，再将this.__methods中的函数展开至Parse组件的实例中。此时，Parse组件中就会产生与自定义事件名称的同名函数。在表单控件的值发生改变或被点击时就可以有效触发该事件。

本发明选用Uni-App框架，可实现一套代码多端运行，通过一些兼容性处理，对多种设备兼容性良好。

本发明可解析深层次的嵌套布局，实现表单布局个性化。

本发明悬浮容器渲染可实现部分组件固定至顶部或底部位置，丰富布局形式。

本发明固定至底部的容器内组件数量智能化计算，避免了因数量过多导致布局错乱。

本发明支持开发人员在动态建模的基础上，通过自定义JavaScript方法实现个性化功能开发。

本发明渲染器内表单组件支持双向绑定。

实施例2：

本发明还提出了一种用于移动端的动态表单渲染系统200，如图5所示，包括：

数据采集单元201，用于获取动态表单的json数据，对所述json数据的组件数组进行递归处理，获取所述json数据的字段名称及默认值，基于所述字段名称和默认值，生成动态表单数据结构；

数据处理单元202，用于抽取出所述json数据的json组件中的表单验证规则和表单绑定公式，根据所述表单验证规则和所述表单绑定公式，请求生成用于动态表单渲染的在线脚本；

数据渲染单元203，用于根据所述动态表单数据结构，依次对所述动态表单进行渲染器Parse组件渲染、render组件渲染和在线脚本渲染。

其中，动态表单数据结构为json树结构，所述json树结构的布局组件内部多层嵌套。

其中，对所述动态表单进行渲染器Parse组件渲染，包括：基于渲染器组件对所述动态表单进行布局渲染及对所述动态表单进行组件渲染；

所述基于渲染器组件对所述动态表单进行布局渲染及对所述动态表单进行组件渲染，包括：

将动态表单内部引入ChildParse子组件，通过所述ChildParse子组件生成所述动态表单的布局。

其中，对所述动态表单进行render组件渲染，包括：对所述动态表单进行控件渲染；

所述对所述动态表单进行控件渲染，包括：

基于vue内置component组件，确定控件的is属性，根据所述控件的is属性和组件名称，将所述component组件渲染为不同的控件。

其中，将所述component组件渲染为不同的控件，包括：

对所述component组件的控件配置数据进行预处理；

基于预处理后的控件配置数据，对所述component组件的输入型控件与选择型控件进行双向绑定，对所述component组件的is属性与事件进行绑定。

其中，预处理，包括：创建空对象，遍历用于配置json数据的key值，将json数据的属性展开至空对象中；

所述属性包括如下中的至少一种：样式类属性、只读和格式化。

其中，对所述动态表单进行在线脚本渲染，包括：

确定所述在线脚本的名称，以所述在线脚本的名称作为请求参数，通过get请求方式发送请求参数，以获取得到json文件，并以所述json字符串作为返回值，并在所述json字符串中添加目标字符。

本发明能够对动态表单数据进行渲染，以实现对于动态表单的自定义事件与个性化的复杂业务逻辑。

实施例3：

基于同一种发明构思，本发明还提供了一种计算机设备，该计算机设备包括处理器以及存储器，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器用于执行所述计算机存储介质存储的程序指令。处理器可能是中央处理单元(CentralProcessing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital SignalProcessor、DSP)、专用集成电路(Application SpecificIntegrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable GateArray，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其是终端的计算核心以及控制核心，其适于实现一条或一条以上指令，具体适于加载并执行计算机存储介质内一条或一条以上指令从而实现相应方法流程或相应功能，以实现上述实施例中方法的步骤。

实施例4：

基于同一种发明构思，本发明还提供了一种存储介质，具体为计算机可读存储介质(Memory)，所述计算机可读存储介质是计算机设备中的记忆设备，用于存放程序和数据。可以理解的是，此处的计算机可读存储介质既可以包括计算机设备中的内置存储介质，当然也可以包括计算机设备所支持的扩展存储介质。计算机可读存储介质提供存储空间，该存储空间存储了终端的操作系统。并且，在该存储空间中还存放了适于被处理器加载并执行的一条或一条以上的指令，这些指令可以是一个或一个以上的计算机程序(包括程序代码)。需要说明的是，此处的计算机可读存储介质可以是高速RAM存储器，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。可由处理器加载并执行计算机可读存储介质中存放的一条或一条以上指令，以实现上述实施例中方法的步骤。

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

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

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

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

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。