CN114185528A - 一种自定义表单控件间配置执行的方法 - Google Patents

Abstract

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

Description

一种自定义表单控件间配置执行的方法

技术领域

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

背景技术

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

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

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

现有的技术概述如下：

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

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

发明内容

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

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

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

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

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

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

步骤4.经由页面对配置的联动进行检查，校验是否存在死循环，若有死循环告知用户检查，若无继续将配置的文件逻辑转译成可执行的JS代码块，并封装保存后发送给后端，同时提取执行块的依赖方法，抽离组装成依赖库发送给后端；

步骤5.点开表单页面，此时从表单ID查询到联动配置ID，通过接口请求从后端请求到配置保存的联动触发配置、控件联动代码块、与执行方法依赖库，将根据触发关系将联动代码储存在对应的控件中，同时执行依赖库，声明所需要的依赖方法；

步骤6.点击有配置联动的控件，触发其联动方法，从自身联动属性中截取出执行代码块并沙盒执行，若成功将按照配置的联动逻辑，对多控件进行取值、判断、运算，并将运算结果按照配置的方式触发其它控件的联动，进行链式触发，最终满足页面需要的逻辑联动。

进一步方案为，联动控件关系配置界面通过Angualr2的Directive功能，定义各类辅助指令与功能类；通过getAllEle类，获取到自定义表单的控件，抽离成独立的控件列表，脱离其控件自带的联动配置方式，进行多控件间的联动关系自由配置；针对每个控件生成唯一的联动的linkId供给联动模块linkage使用。

进一步方案为，控件的触发端与作用端选择的同时，由createLink指令同步生成联动的对应关系，以单个或者多个控件联动影响多个或者单个控件的关系描述字符串形式，保存在该条linkage的linkTarget与linkResult，并根据配置的多条联动输入端输出端检测，校验出多条配置中的联动死循环情况。

进一步方案为，配置中由业务人员针对每次配置单独的业务逻辑组装编辑，联动逻辑配置采用内嵌的JS编辑方式，采用<textarea>标签+自定义的Angular2 Directive类editLogic，可拖拽选择内置的功能方法originFunc的子集，选择获取参与联动的控件，配置时显示控件中文名称，名称与控件linkId的唯一对应关系由上一步getAllEle生成，自由编写原生JS代码或后期植入三方的原生JS代码功能，在监听到编辑停止时，将页面中以中文控件名+拖拽产生的方法名+原生JS代码，经由editLogic形式整合控件的逻辑关系，存在绑定字段eventCode与resultsCode，存储在linkage，实现费用云财务类复杂的控件间联动逻辑关系配置和针对性的可修改或者扩展功能。

进一步方案为，配置控件与其联动关系，采用无解析代码的字符串模式进行展现和存储，在配置界面保存时，通过编写的eventOperation类，对linkage对象进行循迹检索，对上述存储在linkage的eventCode、resultsCode、linkResult字符串进行转义，生成开箱即可用的可执行JS代码块以JSON格式储存在linkage的eventCode，然后会解析配置的多条联动方法，从方法库中提取依赖的功能方法，集合成此表单联动的单独依赖库，以JSON字符串存储在linkage的linkFunc中。

进一步方案为，在使用界面，在页面DOM加载完成的同时，从数据库根据linkId请求出对应的linkage，使用JS编写的linkOpeation类的功能，加载此表单需要使用的联动方法的依赖库linkFunc，并解析到界面中提前执行，在页面声明功能方法；同时使用JS编写的linkBing类的功能，根据linkage提供的linkTarget，将linkage中的eventCode可执行代码块植入相应的触发控件中，仍以字符串形式存储到控件的联动属性中，初始界面不加载联动代码，节省初始页面加载性能，等到某个控件触发联动时，提取它的联动JS代码，使用linkOpeation类中的runCode方法，直接在try catch模块中容错执行。

本发明的有益效果在于：

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

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要实用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明流程图。

图2为本发明从自定义表单中独立出的配置界面。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的技术方案进行详细的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本发明所保护的范围。

在任一实施例中，如图1-2所示，本发明的一种自定义表单控件间配置执行的方法，包括：

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

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

步骤3.在逻辑配置<textArea>区域，通过输入、拖拽已有方法、植入三方方法，选择联动逻辑控件，用中文+功能方法名+控件名的字符串形式，高度自定义的配置文字形式逻辑关系。

步骤4.经由页面对配置的联动进行检查，校验是否存在死循环，若有死循环告知用户检查，若无继续将配置的文件逻辑转译成可执行的JS代码块，并封装保存后发送给后端，同时提取执行块的依赖方法，抽离组装成依赖库发送给后端。

步骤5.点开表单页面，此时从表单ID查询到联动配置ID，通过接口请求从后端请求到配置保存的联动触发配置、控件联动代码块、与执行方法依赖库，将根据触发关系将联动代码储存在对应的控件中，同时执行依赖库，声明所需要的依赖方法。

步骤6.点击有配置联动的控件，触发其联动方法，从自身联动属性中截取出执行代码块并沙盒执行，若成功将按照配置的联动逻辑，对多控件进行取值、判断、运算，并将运算结果按照配置的方式触发其它控件的联动，进行链式触发，最终满足页面需要的逻辑联动。

在一个具体实施例中，如图1-2所示，本发明的一种自定义表单控件间配置执行的方法，包括以下步骤：

基于Anjular2表单独立出联动配置功能界面，不再受表单控件自身配置影响，并有可根据业务逻辑灵活修改或者扩展控件间联动逻辑的区域，并通过在配置端直接生成可执行的JS代码与其依赖的功能库，以JSON字符串的形式通过后端传到使用界面，在触发联动的时候进行按需执行，减少页面前期性能消耗。

联动控件关系配置界面通过Angualr2的Directive功能，定义各类辅助指令与功能类。首先，通过getAllEle类，获取到自定义表单的控件，抽离成独立的控件列表，脱离其控件自带的联动配置方式，能过进行多控件间的联动关系自由配置；针对每个控件生成唯一的联动的linkId供给联动模块linkage使用，便于能够更加清楚精准的区分与定位多次重复使用的控件。控件的触发端与作用端选择的同时，由createLink指令同步生成联动的对应关系，以单个或者多个控件联动影响多个或者单个控件的关系描述字符串形式，保存在该条linkage的linkTarget与linkResult，并根据配置的多条联动输入端输出端检测，校验出多条配置中的联动死循环情况。

配置中能够由业务人员针对每次配置单独的业务逻辑组装编辑，联动逻辑配置采用内嵌的JS编辑方式，联动逻辑判断、联动效果、内置originFunc功能均采用原生JS方式编写，使其做用底层脱离于配置界面的Angular2框架，便于业务人员使用基础JS进行简二次编辑。其位置内嵌在配置页面中心，采用<textarea>标签+自定义的Angular2 Directive类editLogic，可拖拽选择内置的功能方法originFunc的子集，选择获取参与联动的控件，配置时显示控件中文名称，名称与控件linkId的唯一对应关系由上一步getAllEle生成，自由编写原生JS代码或后期植入三方的原生JS代码功能，在监听到编辑停止时，将页面中以中文控件名+拖拽产生的方法名+原生JS代码，经由editLogic形式整合控件的逻辑关系，存在绑定字段eventCode与resultsCode，存储在linkage，实现费用云财务类复杂的控件间联动逻辑关系配置和针对性的可修改或者扩展功能。

配置控件与其联动关系，采用无解析代码的字符串模式进行展现和存储，能够直观的知道配置的逻辑关系，同时节省配置时的性能，在配置界面保存时，通过编写的eventOperation类，对linkage对象进行循迹检索，对以上两个步骤存储在linkage的eventCode、resultsCode、linkResult字符串进行转义，生成开箱即可用的可执行JS代码块(功能方法只保存名字)以JSON格式储存在linkage的eventCode，然后会解析配置的多条联动方法，从方法库中提取依赖的功能方法，集合成此表单联动的单独依赖库，以JSON字符串存储在linkage的linkFunc中。

在使用界面，在页面DOM加载完成的同时，从数据库根据linkId请求出对应的linkage，使用JS编写的linkOpeation类的功能，加载此表单需要使用的联动方法的依赖库linkFunc，并解析到界面中提前执行，在页面声明功能方法。同时使用JS编写的linkBing类的功能，根据linkage提供的linkTarget，将linkage中的eventCode可执行代码块植入相应的触发控件中，仍以字符串形式存储到控件的联动属性中，初始界面不加载联动代码，节省初始页面加载性能，等到某个控件触发联动时，提取它的联动JS代码，使用linkOpeation类中的runCode方法，直接在try catch模块中容错执行。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合，为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明的思想，其同样应当视为本发明所公开的内容。

Claims (6)

1.一种自定义表单控件间配置执行的方法，其特征在于，包括以下步骤：

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

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

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

步骤4.经由页面对配置的联动进行检查，校验是否存在死循环，若有死循环告知用户检查，若无继续将配置的文件逻辑转译成可执行的JS代码块，并封装保存后发送给后端，同时提取执行块的依赖方法，抽离组装成依赖库发送给后端；

步骤5.点开表单页面，此时从表单ID查询到联动配置ID，通过接口请求从后端请求到配置保存的联动触发配置、控件联动代码块、与执行方法依赖库，将根据触发关系将联动代码储存在对应的控件中，同时执行依赖库，声明所需要的依赖方法；

步骤6.点击有配置联动的控件，触发其联动方法，从自身联动属性中截取出执行代码块并沙盒执行，若成功将按照配置的联动逻辑，对多控件进行取值、判断、运算，并将运算结果按照配置的方式触发其它控件的联动，进行链式触发，最终满足页面需要的逻辑联动。

2.如权利要求1所述的一种自定义表单控件间配置执行的方法，其特征在于，联动控件关系配置界面通过Angualr2的Directive功能，定义各类辅助指令与功能类；通过getAllEle类，获取自定义表单的控件，抽离成独立的控件列表，脱离其控件自带的联动配置方式，进行多控件间的联动关系自由配置；针对每个控件生成唯一的联动的linkId供给联动模块linkage使用。

3.如权利要求1所述的一种自定义表单控件间配置执行的方法，其特征在于，控件的触发端与作用端选择的同时，由createLink指令同步生成联动的对应关系，以单个或者多个控件联动影响多个或者单个控件的关系描述字符串形式，保存在该条linkage的linkTarget与linkResult，并根据配置的多条联动输入端输出端检测，校验出多条配置中的联动死循环情况。

4.如权利要求1所述的一种自定义表单控件间配置执行的方法，其特征在于，配置中由业务人员针对每次配置单独的业务逻辑组装编辑，联动逻辑配置采用内嵌的JS编辑方式，采用<textarea>标签+自定义的Angular2 Directive类editLogic，可拖拽选择内置的功能方法originFunc的子集，选择获取参与联动的控件；在监听到编辑停止时，将页面中以中文控件名+拖拽产生的方法名+原生JS代码，经由editLogic形式整合控件的逻辑关系，存在绑定字段eventCode与resultsCode，存储在linkage。

5.如权利要求1所述的一种自定义表单控件间配置执行的方法，其特征在于，配置控件与其联动关系，采用无解析代码的字符串模式进行展现和存储，在配置界面保存时，通过编写的eventOperation类，对linkage对象进行循迹检索，对上述存储在linkage的eventCode、resultsCode、linkResult字符串进行转义，生成开箱即可用的可执行JS代码块以JSON格式储存在linkage的eventCode，然后会解析配置的多条联动方法，从方法库中提取依赖的功能方法，集合成此表单联动的单独依赖库，以JSON字符串存储在linkage的linkFunc中。

6.如权利要求1所述的一种自定义表单控件间配置执行的方法，其特征在于，使用界面在页面DOM加载完成的同时，数据库根据linkId请求出对应的linkage，使用JS编写的linkOpeation类的功能，加载此表单需要使用的联动方法的依赖库linkFunc，并解析到界面中提前执行，在页面声明功能方法；同时使用JS编写的linkBing类的功能，根据linkage提供的linkTarget，将linkage中的eventCode可执行代码块植入相应的触发控件中，仍以字符串形式存储到控件的联动属性中，等到某个控件触发联动时，提取它的联动JS代码，使用linkOpeation类中的runCode方法，直接在try catch模块中容错执行。

Images