【技术实现步骤摘要】
本专利技术属于表单生成和处理，具体涉及一种用于中后台可视化复杂表单快速动态生成方法。
技术介绍
1、以往的表单开发基本上都是静态的，在开发之前就已经知道表单项有多少，各个表单项提供给用户的操作交互是不同的，例如有输入型的，有选择型的，这些需求都是确定的，然后开发人员硬编码各个表单项字段到代码中，通过约定的协议与后端服务进行逻辑处理。
2、而如果面对多个复杂表单的场景，开发和迭代中的需求不断变化，重复以上开发步骤会发现效率低下，代码复用性不高，表单项还不能进行动态修改，不能适应丰富且复杂的运营场景。假设需要开发云原生产品配置的订购表单，每个产品所具有的表单项是非常多项且复杂，不管是新产品上线或者配置项迭代新增、删除、更改，想要更少的依赖前端开发就能便捷的部署上线最新的配置项，那么开发一个适应多场景的动态表单组件是最好的选择；
3、现有的中后台复杂表单生成方式存在以下问题：
4、目前，大部分前端表单页面不管是复杂还是简单的都是通过在确定需求后，进行静态编码的方式制作表单页面，当后续迭代有需求更改则需要重新前端编码，重新与后端服务和协议约定。如果是处理复杂表单场景，一个表单就包含了几十种表单组件，且表单项之间相互依赖，编码和更改是非常耗时耗力的。
5、同时，根据相应需求编写的表单组件需要不断的进行编码调试，调试过程中通常需要考虑相互依赖的表单项，例如选择性的select组件b需要动态依赖输入性的input组件a，亦或a、b组件的数据对接下来的组件产生影响，表单还需要实时与对应的api数据
技术实现思路
1、本专利技术的目的在于提供一种用于中后台可视化复杂表单快速动态生成方法，用于解决
技术介绍
中提出的技术问题。
2、为了实现上述目的，本专利技术采用了如下技术方案：一种用于中后台可视化复杂表单快速动态生成方法，包括如下步骤：
3、s01：在vue前端框架中预先定义组件库；
4、s02：定义前端和后端之间交互协议；
5、s03：前端通过交互协议与后端交互，后端生成配置字段，然后通过组件入口返回前端，前端通过配置字段和可视化工具动态渲染生成表单。
6、优选的，在vue前端框架中预先定义组件库的方法为：
7、s011：根据配置生成表单项并在表单组件中使用动态组件；
8、需要说明的是，在vue中，动态组件指的是通过绑定的组件名动态地渲染不同的组件，vue提供了<component>元素来实现动态组件的功能；
9、通过配置生成表单项是指，根据一份表单的配置信息，动态地渲染出不同类型的表单项组件，这样可以根据不同的需求，配置不同类型的表单项，而无需为每个表单项都写一个独立的组件；
10、s012：通过动态声明双向绑定变量，监听响应式变量触发通用的回调处理，实现表单项之间的响应式交互；
11、s013：控制校验表单项值合法的时机实现分组校验；
12、s014：通过vue注册全局组件，在组件内部可以通过其全局组件的名称进行嵌套；
13、s015：slot开放插槽给组件使用方进行拓展，遵循标准拓展不通用的表单组件场景。
14、优选的，前端和后端之间交互协议包括form配置协议、表单描述协议、候选项配置协议；
15、所述form配置协议包括所有表单项和表单项的所有配置；
16、所述表单描述协议包括表单项的数据和对自身表单项进行描述的数据；
17、所述选项配置协议包括展示文案、当前候选列表内unique唯一id、是否默认和用于辅助后端进行数据保存的元数据。
18、优选的，表单项的所有配置包括：组件名称、表单项依赖数据、说明文案、表单项名称、校验规则与组名称。
19、优选的，表单项的数据和对自身表单项进行描述的数据包括表单的准入校验、描述当前表单展示的业务文案描述和用于辅助后端进行数据保存的元数据。
20、优选的，所述前端动态渲染生成表单的方法为：
21、s031：表单入口根据表单项配置，初始化vuex的动态store(会产生namespace)，然后开始对vuex中表单项的数据进行监听；
22、这里包括对表单因子表单项的监听处理，同时监听能够控制表单项显示/隐藏的表单项的逻辑处理。表单入口组件这里是所有表单项的信息中枢，能够更方便的获取各个表单项的数据，同时还能给各个表单项内部进行解耦，不会在表单项内部有互相影响的情况。
23、s032：子表单项接收到分发的配置之后，设置监听的依赖项；
24、依赖项主要是看有哪些表单项的值影响当前表单项候选项的列表。例如：b表单项是依赖a表单项的，所以在b表单项初始化时，应该对a表单项中vuex的值进行监听，并作出相应处理；
25、s033：表单项组件作为子组件向父组件发信号注册自己；
26、为了在父组件(即入口组件)中可以拥有各个表单项的组件实例，来调用表单项组件的方法，例如validate方法；
27、s034：入口组件完成表单项初始化之后会发ready事件给业务使用者，携带namespace参数，通过namespace访问到当前动态store中的表单项数据。
28、s035：表单项组件在数据更新阶段通过协议getattrproperty获取候选项列表，并且取其中的默认值进行初始化。
29、s036：随着表单项的初始化改变vuex里面的数值，步骤s032中设定的监听回调开始工作，携带依赖的值getattrproperty请求，重新初始化等循环执行；
30、s037：在提交表单数据的时候，对所有表单项的合法性进行校验。
31、优选的，所述可视化工具包括：
32、组件库模块，所述组件库模块用于提供通用的表单项组件，实时拖拽和提供事件自定义配置，
33、工具栏模块，所述工具栏模块用于对选中的画布组件进行删除、修改、重做、撤销、预览、导入和导出操作，
34、画布模块，所述画布模块用于接收组件库模块拖拽来的表单组件，针对每个组件进行样式属性配置；
35、数据模块，所述数据模块根据画布中的组件生成表单所对应的配置协议数据，此模块和画布中的组件双向响应。
36、优选的，slot开放插槽给组件使用方进行拓展的方法为：
37、在vue中，使用<slot>元素可以实现插槽(slot)，允许在父组件中插入子组件特定的内容，通过插槽，在子组件中开放特定的位置，以便父组件可以向这些位置插入自定义的内容；
38、在子组件的模板中，使用<slot>元素定义插槽，定义多个插槽，并为每个插槽命名，以便父组件可以向特定插槽中插入内本文档来自技高网...
【技术保护点】
1.一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，包括如下步骤：
2.如权利要求1所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，在vue前端框架中预先定义组件库的方法为：
3.如权利要求1所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，前端和后端之间交互协议包括form配置协议、表单描述协议、候选项配置协议；
4.如权利要求3所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，表单项的所有配置包括：组件名称、表单项依赖数据、说明文案、表单项名称、校验规则与组名称。
5.如权利要求3所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，表单项的数据和对自身表单项进行描述的数据包括表单的准入校验、描述当前表单展示的业务文案描述和用于辅助后端进行数据保存的元数据。
6.如权利要求1所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，所述前端动态渲染生成表单的方法为：
7.如权利要求1所述的一种用于中后台可视化复杂表单快速动态生成方法，其
8.如权利要求1所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，slot开放插槽给组件使用方进行拓展的方法为：
9.如权利要求1所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，在提交表单数据的时候，对所有表单项的合法性进行校验的方法为：
10.如权利要求9所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，所述HTML5提供的表单验证属性包括required和pattern；
...【技术特征摘要】
1.一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，包括如下步骤：
2.如权利要求1所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，在vue前端框架中预先定义组件库的方法为：
3.如权利要求1所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，前端和后端之间交互协议包括form配置协议、表单描述协议、候选项配置协议；
4.如权利要求3所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，表单项的所有配置包括：组件名称、表单项依赖数据、说明文案、表单项名称、校验规则与组名称。
5.如权利要求3所述的一种用于中后台可视化复杂表单快速动态生成方法，其特征在于，表单项的数据和对自身表单项进行描述的数据包括表单的准入校验、描述当前表单展示的业务文案...
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。