[发明专利]一种自定义表单控件间配置执行的方法

说明书

本发明公开了一种自定义表单控件间配置执行的方法，通过配置界面采用Angular2技术，独立出联动配置页面，获取控件列表，再经由内嵌的JS页面，通过各种编写的Angular2指令执行，通过拖拽方法、选择控件、三方植入、自由输入，经由业务人员自由配置的方式，同步生成联动逻辑文字描述，最后保存时由配置界面的根据逻辑文字描述，完成逻辑校验，转译成可执行的JS代码，并抽离功能依赖库，一并发送给使用页面，在使用界面中延迟联动功能执行到控件自身，提高页面加载的性能。

技术领域

本发明涉及表单应用开发技术领域，尤其涉及一种自定义表单控件间配置执行的方法。

背景技术

随着前端技术的发展，低代码是一种发展的趋势，特别是针对于表单提交这类大量使用、需求多变但差别不大，创新性比较低的页面，特别适合发展成低代码模式，由专业前端人员针对页面基础模块进行构造，然后提供给非前端专业的业务人员，针对每种业务场景进行表单的配置，便能生成各种业务类型的前端表单页面。

目前的可配置页面，更多的是注重控件的多样性，忽略了多控件之间的联动性，通常的是只能简单的配置可选控件的值、是否可见或者必填校验，缺陷是可配置的内容扁比较少，可配置的方式比较单一，通常为在配置界面和使用界面内内置相同功的能方法，且控件之间关系为一对一，或者使用了强耦合的框架结构进行联动配置，配置界面和执行界面必须同一套框架代码，但是由于框架的局限性，配置后可实现的联动方案比较固定(为预写入代码联动的固定方法)，不便利业务人员进行后期的扩展，不符合表单配置的高灵活化、广丰度的的特色。

对于财务类自定义表单，控件类型多、表单配置控件量大，且重复控件使用频率高，给其联动的配置带了逻辑上的复杂性，以及配置联动复杂后，消耗了加载性能，影响了页面加载速度。

现有的技术概述如下：

1.在表单控件配置界面同时配置联动，此技术目前给单个控件自身配置是否显示、必填校验等，在使用页面初始化加载的时候把联动方法绑定在控件上。该技术目前能满足大部分表单配置需求，但是针对费用云财务类表单的多类型控件，多控件数量，多控件重复使用的问题，使用该技术会导致相同控件联动时混乱，无法配置多对多与根据业务多变的联动需求，且配置较多联动关系后导致页面初始化加载非常缓慢的问题。

2.采用VUE、React框架的自定义表单，此类联动配置方式基于框架开发，能够实现配置的功能方法混入的方式配置多类型联动，但由于基于框架的限制，配置方法多为配置页面准备好内置的功能模块，导致了以下两个问题：一、联动功能方法由于框架匹配需要内置在使用界面，导致无联动配置的界面或者少灵活配置界面，仍然会加载丰富的功能库，造成不必要的性能浪费。二、由于联动功能效果为使用框架代码编写，无法由业务人员后期在生产配置界面，通过编写基础代码的方式，根据业务逻辑灵活的修改或者扩展控件间联动方式。

发明内容

本发明的目的就在于为了解决上述问题而提供一种自定义表单控件间配置执行的方法，本发明采用Angular2独立出配置界面并抽离控件集合，和使用内嵌原生JS功能编写界面，可自由输入组装的联动逻辑配置，与在配置端生成可执行JS代码与依赖库，在使用界面按需加载的方式，解决了费用云财务类表单因多类型、大数量、多重复自定义控件目前无法配置复杂的联动逻辑和因逻辑复杂而造成页面加载卡顿的问题。

本发明通过以下技术方案来实现上述目的：

一种自定义表单控件间配置执行的方法，包括以下步骤：

步骤1.点开配置页面，页面根据自定义的控件表单渲染出控件列表详情；

步骤2.根据渲染的控件列表详情，选择联动触发的控件，和选择联动结果控件，形成控件多对对应关系；

步骤3.在逻辑配置区域，通过输入、拖拽已有方法、植入三方方法，选择联动逻辑控件，配置文字形式逻辑关系；