一种自定义表单设计系统的制作方法

1.本发明涉及计算机应用技术领域，尤其涉及一种自定义表单设计系统。


背景技术：

2.表单主要在网页中担当数据采集的角色，由表单标签、表单域和表单按钮三个基本部分组成，它可以满足人们在线实时获取数据和传播数据的功能，优化工作流程。
3.在具体的实施中根据业务需求的不同，电子表单呈现出不同的格式。在现有的电子表单软件开发中，通常根据业务需求针对性开发固定格式的表单。但是固定的电子表单格式固定，其格式在软件开发时就已经设计完成，后续不能根据业务变化和需求来进行修改和定制。由于仅针对某一种固定格式的表单设计编码，结构死板、局限性大。每修改一个地方或者想使用一种新的表单，都必须修改源码或者从源码中重新添加一种表单模版，修改使用均不灵活，并且在制作新表单时设置表单中每个字段的默认值、原数据、校验规则、提示信息等比较繁琐。


技术实现要素：

4.有鉴于此，有必要提供一种自定义表单设计系统用于解决现有技术中表单绘制比较繁琐的问题。
5.本发明提供了一种自定义表单设计系统，包括：自定义组件模块和自定义模版模块；所述自定义组件模块包括基础组件模块和新控件组件模块；自定义模版模块包括模版预设模块和模版生成模块；
6.所述基础组件模块用于将不同格式的基础组件以同样的组件形式呈现；
7.所述新控件组件模块用于将具有相同组件形式的若干基础组件进行组合生成新控组件；
8.所述模版预设模块用于根据预设需求在本地数据库中的选择对应的表单模版；
9.所述模版生成模块用于根据所述新控组件和所述表单模版绘制表单生成新的模版。
10.在一些可能的实现方式中，所述自定义模版模块还包括模版去重合并模块和模版管理模块；
11.所述模版去重合并模块用于将不同的表单进行去重合并生成一个新表单；
12.所述模版管理模块用于对表单模版进行删除处理以及存储处理。
13.在一些可能的实现方式中，所述基础组件模块包括格式统一模块；
14.所述格式统一模块用于将格式不同的基础组件统一为同样的格式。
15.在一些可能的实现方式中，所述新控件组件模块包括控件参数设定模块和组件排版模块；
16.所述控件参数设定模块用于对基础组件的默认值和校验规则进行设定生成新的控件组；
17.所述组件排版模块用于通过addeventlistene方法监听以及计算拖动组件移动距离以实现新的控件组的排版。
18.在一些可能的实现方式中，所述模版预设模块包括模版调用模块；
19.所述模版调用模块用于从本地数据库中通过密钥调用选择与所述预设需求匹配的表单模版。
20.在一些可能的实现方式中，所述模版去重合并模块包括模版去重模块和模版合并模块；
21.所述模版去重模块用于将不同的模版通过differencewith方法进行比较处理，进行去重；
22.所述模版合并模块用于将不同的模版数据放入同一个数据组中实现模版合并。
23.在一些可能的实现方式中，所述模版管理模块包括模版删除模块以及模版存储模块；
24.所述模版删除模块用于通过密钥在本地数据库实现表单模版的删除；
25.所述模版存储模块用于将模版数据以storage存储方法将模版所有的信息以json字符串的形式存储到本地数据库。
26.在一些可能的实现方式中，所述自定义模版模块还包括模版遍历模块；
27.所述模版遍历模块用于从数据库中获取要显示的初始化的数据，并循环遍历后渲染到页面上。
28.在一些可能的实现方式中，所述自定义模版模块还包括模版更新模块；
29.所述模版更新模块用于接收到新的组件后，将所述新的控件组的数据添加到模版数据中，并监听所述模版数据且在监听到所述模版数据改变时，重新渲染页面。
30.在一些可能的实现方式中，所述表单设计系统还包括：第三方接口模块；
31.所述第三方接口模块，用于提供具有标准格式的api接口，并通过所述api接口接入第三方接口数据。
32.采用上述实施例的有益效果是：本发明提供的一种自定义表单设计系统，通过设置基础组件模块、新控件组件模块、模版预设模块和模版生成模块实现表单组件的自定义以及表单模版的自定义，根据不同的业务需求来自定义不同的表单模版以实现表单绘制。
33.进一步地，新控件组模块中还设置有控件参数设定模块用于对基础组件的默认值、校验规则进行设定使表单的每个字段的默认值、校验规则设置更加方便，同时通过自定义模版模块中还设置有模版去重合并模块可以将不同的模版根据业务需求进行去重合并生成新的表单使绘制更加灵活。
附图说明
34.图1为本发明提供的自定义表单设计系统一实施例的系统架构图；
35.图2为本发明提供的自定义模版模块一实施例的结构示意图；
36.图3为本发明提供的基础组件模块的一实施例的结构示意图；
37.图4为本发明提供的新控组件模块的一实施例的结构示意图；
38.图5为本发明提供的模版预设模块一实施例的结构示意图；
39.图6为本发明提供的模版去重合并模块的一实施例的结构示意图；
40.图7为本发明提供的模版管理模块一实施例的结构示意图；
41.图8为本发明提供的自定义表单设计系统另一实施例的系统架构图。
具体实施方式
42.下面结合附图来具体描述本发明的优选实施例，其中，附图构成本技术一部分，并与本发明的实施例一起用于阐释本发明的原理，并非用于限定本发明的范围。
43.本发明实施例提供了一种自定义表单设计系统，以下进行说明。
44.图1为本发明提供的一种自定义表单设计系统的一实施例的系统架构图，如图1所示，自定义表单设计系统10包括自定义组件模块200和自定义模版模块100；所述自定义组件模块200包括基础组件模块210和新控件组件模块220；自定义模版模块100包括模版预设模块110和模版生成模块120；
45.所述基础组件模块210用于将不同格式的基础组件以同样的组件形式呈现；
46.所述新控件组件模块220用于将具有相同组件形式的若干基础组件进行组合生成新控组件；
47.所述模版预设模块110用于根据预设需求在本地数据库中的选择对应的表单模版；
48.所述模版生成模块120用于根据所述新控组件和所述表单模版绘制表单以生成新的模版。
49.在具体的实施例中，所述基础组件模块210将基础组件，例如单行文本、时间选择器、滑块、评分、级联、颜色选择器等以tags的形式呈现出来。
50.所述新控组件模块220，根据业务需求选择合适的基础组件，进行配置生成一个新的控件组，保存在本地的数据库中，为根据不同业务绘制不同的表单提供不同的控件组。
51.所述模版生成模块110，根据业务需求在本地数据库中选择合适的基础组件或者新控件组生成新的表单模版。
52.与现有技术相比，本发明提供的一种自定义表单设计系统，通过设置基础组件模块、新控件组件模块、模版预设模块和模版生成模块实现表单组件的自定义以及表单模版的自定义，根据不同的业务需求来自定义不同的表单模版以实现表单绘制。
53.进一步地，新控件组模块中还设置有控件参数设定模块用于对基础组件的默认值、校验规则进行设定使表单的每个字段的默认值、校验规则设置更加方便，同时通过自定义模版模块中还设置有模版去重合并模块可以将不同的模版根据业务需求进行去重合并生成新的表单使绘制更加灵活。
54.在本发明的一些实施例中，如图2为本发明提供的自定义模版模块一实施例的结构示意图，所述自定义模版模块100还包括模版合并模块130和模版管理模块140。
55.所述模版去重合并模块130用于将不同的表单进行去重合并生成一个新表单。
56.所述模版管理模块140用于对表单模版进行删除处理以及存储处理。
57.在具体的实施例中，所述模版管理模块140，通过唯一的标识密钥，实现对本地数据库中表单模版的删除；模版配置完成后，通过storage存储方法将模版中所有信息以json字符串的形式存储到本地数据库中。
58.需要说明的是，所述storage存储方法是loash中的一种存储方法是一种简单的同
步秘钥对存储方法。
59.进一步需要说明的是，所述loash是一个一致性、模块化、高性能的javascript实用工具库。
60.在本发明的一些实施例中，如图3为本发明提供的基础组件模块的一实施例的结构示意图，所述基础组件模块200包括格式统一模块211：
61.所述格式统一模块211用于将格式不同的基础组件统一为同样的格式。
62.在具体的实施例中，格式统一模块211将所有的基础组件以tags的形式呈现出来。
63.在本发明的一些实施例中，如图4为本发明提供的新控组件模块的一实施例的结构示意图，所述新控件组件模220块包括控件参数设定模块221和组件排版模块222；
64.所述控件参数设定模块221用于对基础组件的默认值和校验规则进行设定生成新的控件组；
65.所述组件排版模块222用于通过addeventlistene方法监听以及计算拖动组件移动距离以实现新的控件组的排版。
66.在具体的实施例中，所述控件参数设定模块221根据业务需求选择对基础组件的默认值、校验规则等参数进行配置，配置完成后将新的配置信息放入参数配置的数组中进行遍历实现控件参数的设定。
67.需要说明的是，所述控件参数设定模块设定221的参数包括：控件的默认值、校验规则、数据来源、组件的标签对齐方式、组件的字段宽度、组件尺寸、动态校验、字段id、提示信息等等一些进行参数配置。
68.进一步需要说明的是，addeventlistene方法为事件监听，是当在某个事件触发的时候，激活监听器，执行预定的操作的方法。
69.在本发明的一些实施例中，如图5为本发明提供的模版预设模块一实施例的结构示意图，所述模版预设模块110包括模版调用模块111；
70.所述模版调用模块111用于从本地数据库中通过密钥调用选择与预设需求匹配的表单模版。
71.在本发明的一些实施例中，如图6为本发明提供的模版去重合并模块的一实施例的结构示意图，所述模版去重合并模块130包括模版去重模块131和模版合并模块132；
72.所述模版去重模块131用于将不同的模版通过differencewith方法进行比较处理，进行去重；
73.所述模版合并模块132用于将不同的模版数据放入同一个数据组中实现模版合并。
74.在具体的实施例中，所述模版去重模块131将多个表单的字段名放入到一个数组中，然后对该数组进行一个去重处理，从而实现模版的去重。
75.所述模版合并模块132将多个表单的字段名放入到一个数组中实现模版的合并。
76.需要说明的是，将多个表单的字段名放入到一个数组中，如果该数组长过一定长度，则会对该数据进行一个slice裁切。
77.需要说明的是，slice()方法一种数组单元截取方法，是指从有起始索引下标的位置进行截取，到有结束索引下标的位置结束截取的方法。
78.在本发明的一些实施例中，如图7为本发明提供的模版管理模块一实施例的结构
示意图，所述模版管理模块140包括模版删除模块141以及模版存储模块142；
79.所述模版删除模块141用于通过密钥在本地数据库实现表单模版的删除；
80.所述模版存储模块142用于将模版数据以storage存储方法将模版所有的信息以json字符串的形式存储到本地数据库。
81.在本发明的一些实施例中，如图2为本发明提供的自定义模版模块一实施例的结构图，所述自定义模版模块100还包括模版遍历模块150；
82.所述模版遍历模块150用于从数据库中获取要显示的初始化的数据，并循环遍历后渲染到页面上。
83.在具体的实施例中，所述模版历遍模块通过axios方法从数据库中获取想要显示的初始化的数据，通过map方法循环历遍然后渲染到页面上。
84.需要说明的是，axios方法是一种异步网络请求方法，当模版历遍模块需要显示初始化数据时，通过axios的执行查询语句，查询数据库得到需要的初始化数据。
85.进一步需要说明的是，所述map循环遍历是就jave编程中的一种历遍方法，在本实施例中得到了初始化数据后，使用for-each循环遍历对初始化数据进遍历。
86.更进一步需要说明的是，所述遍历(traversal)是指沿着某条搜索路线，依次对树或图中的每个节点均做一次访问，访问节点所述做的操作依赖于具体的应用问题。
87.在本发明的一些实施例中如图2为本发明提供的自定义模版模块一实施例的结构示意图，所述自定义模版模块100还包括模版更新模块160；
88.所述模版更新模块160用于接收到新的组件后，将所述新的控件组的数据添加到模版数据中，并监听所述模版数据且在监听到所述模版数据改变时，重新渲染页面。
89.在具体的实施例中，所述模版更新模版通过vue中watch内置方法监听数据，一旦数据发生改变，重新渲染页面。
90.需要说明的是，所述vue是一种渐进式前端框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。
91.进一步需要说明的是，vue中watch内置监听方法是对watch每个属性创建一个watcher,watcher在初始化时会将监听的目标值缓存到watcher.value中,因此触发数据传输的get方法,被对应的dep(数据执行保护)进行依赖收集；
92.当数据传输发生变动时触发set方法,通过dep.depend()进行一个依赖收集，并将依赖存放到一个数组中。
93.进一步需要说明的是，所述依赖收集是指当数据未变动时，自动运营命令用到那个数据就会和这个数据挂上钩，一旦这个数据发生了改变，就会触发回调。而没有用到的数据，无论怎样修改，它都不会触发回调，也就是依赖的数据变更后将其收集起来。
94.在本发明一些实施例中，如图8为本发明提供的自定义表单设计系统另一实施例的系统架构图，所述表单设计系统10还包括：第三方接口模块300；
95.所述第三方接口模块300，用于提供具有标准格式的api接口，并通过所述api接口接入第三方接口数据。
96.在具体的实施例中，所述第三方接口模块中，api接口返回的数据和表单的密钥进行绑定，通nginx代理转发实现第三方数据的接入。
97.需要说明的是，所述nginx是一个高性能的http和反向代理服务器，通过nginx的
代理使第三方数据接入。
98.本发明通过自定义组件模块实现组件的自定义，通过将基础组件以同一种格式呈现，便于基础组件的自定义。根据业务的需求选择合适的基础组件进行参数的配置生成新的控件组，并保存在本地数据库中，当下次绘制时可以调用，使得绘制表单时更加方便快捷。
99.本发明还通过自定义模版模块，根据业务需求选择合适的组件，进行排版和参数配置生成新的表单，将表单模版保存在本地数据库中方便调用，同时通过自定义模版中的模版去重合并模块将不同的模版进行去重合并生成新的表单，更加快捷的生成业务需求的表单。
100.本发明的自定义表单设计系统还包括第三方数据接口模块，通过统一的api接口，接入第三方数据，实现数据的自动关联。
101.本领域技术人员可以理解，实现上述实施例方法的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于计算机可读存储介质中。其中，所述计算机可读存储介质为磁盘、光盘、只读存储记忆体或随机存储记忆体等。
102.以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。