封装表单方法、装置、计算机设备及存储介质与流程

本发明涉及前端开发技术，属于电数字处理，尤其是一种基封装表单方法、装置、计算机设备及存储介质。

背景技术：

1、 vue.js已经成为世界上最流行的javascript框架之一，它能够使开发人员在应用程序中创建可复用的组件，便于组件化的管理和维护。目前，前端开发web页面，表单是每个系统软件都必不可少的模块，表格表单的增删改查也是一个系统管理数据的基础。但是，如今市面上的ui组件都是单独写每个form-item，能够让表单的灵活性增加，但同时也造成代码结构重复性过高；当表单只有简单的页面结构时，这样写会造成form-item冗余。

2、因此，亟需要一种封装表单的方法。

技术实现思路

1、发明目的：提供一种封装表单方法、装置、计算机设备及存储介质，以解决现开发效率低，表单结构代码冗余的问题。

2、技术方案：封装表单方法，包括如下步骤：

3、步骤s1、构建表单ui页面，用于获取表单ui页面信息；选择所需ui控件，构建一个第一配置模块，将所述ui控件放置到第一配置模块中；

4、步骤s2、将所述第一配置模块放入表单ui页面中，完成表单封装。

5、根据本申请的一个方面，所述步骤s1

6、步骤s11、在所述第一配置模块中放置ui控件，所述ui控件至少包括表单选择控件、表单文本控件、表单时间控件；通过循环指令对ui控件进行循环遍历，生成多个表单项，获取不同的表单值；

7、步骤s12、根据获取的表单值进行类型匹配，展示不同的页面。

8、根据本申请的一个方面，所述步骤s1构建第一配置模块过程如下：

9、步骤s11、在所述第一配置模块中放置ui控件，所述ui控件至少包括表单选择控件、表单文本控件、表单时间控件；通过循环指令对ui控件进行循环遍历，生成多个表单项，获取不同的表单值；

10、步骤s12、根据获取的表单值进行类型匹配，展示不同的页面。

11、根据本申请的一个方面，所述步骤s2实现表单封装的过程如下：

12、在表单ui页面信息中定义第一配置模块中的ui控件，然后在该表单ui页面中使用第一配置模块，最后提交表单数据，完成封装。

13、根据本申请的一个方面，所述ui表单页面构建的具体过程如下：

14、步骤s41、设置标题和表单页面信息对应的字段名，将其提交至服务器进行存储；设置表单样式，确定表单宽度；设置表单必填样式，通过自定义必填样式控制在ui页面中的显示和隐藏；设置自定义属性，提取对应字段匹配到的新属性；

15、步骤s42、对ui表单页面进行表单校验，判断其对应字段匹配的数据类型是否符合要求，如果符合要求则提交表单校验的数据；否则表单ui页面信息显示错误。

16、根据本申请的一个方面，所述表单选择控件还包括：

17、下拉控件，通过设置下拉控件对应的枚举值，将所述枚举值按序排列并用阿拉伯数字进行标记，形成枚举值与阿拉伯数字的对应序列。

18、根据本申请的一个方面，还提供一种装置，包括如下模块：

19、配置文件定义模块，用于识别表单配置文件的字段属性；

20、解析封装模块，用于解析所述表单配置文件的字段属性，并基于所述字段属性确定对应的表单组件，对所述表单组件进行封装，其中，所述字段属性包括嵌套类型字段；

21、页面生成模块，用于根据所述表单配置文件的字段属性以及封装的对应的所述表单组件进行循环渲染以生成表单页面；

22、数据校验模块，用于在所述表单页面返回表单数据时，对所述表单页面返回的所述表单数据进行校验以获得合格数据。

23、根据本申请的一个方面，还包括一种设备，包括：

24、存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令。

25、根据本申请的另一个方面，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行。

26、有益效果：本发明的封装表单方法，通过可配置性表单组件，一定程度上提高了开发效率，只需定义不同的配置项即可完成表单功能，使用封装后的表单不需要嵌套多个form-item标签，只需要嵌套一个form标签，通过定义表单配置文件实现表单效果；对于表单返回的表单数据，对所述表单数据用vee-validate进行表单校验，使表单的功能性更加强大。

技术特征：

1.一种封装表单方法，其特征在于，包括如下步骤：

2.根据权利要求1所述封装表单方法，其特征在于，所述步骤s1进一步为：

3.根据权利要求1所述封装表单方法，其特征在于，所述步骤s2进一步为：

4.根据权利要求1所述封装表单方法，其特征在于，所述ui表单页面构建的具体过程如下：

5.根据权利要求2所述封装表单方法，其特征在于，所述表单选择控件还包括：下拉控件，通过设置下拉控件对应的枚举值，将所述枚举值按序排列并用阿拉伯数字进行标记，形成枚举值与阿拉伯数字的对应序列。

6.一种封装表单装置，其特征在于，包括：

7.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述方法的步骤。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述方法的步骤。

技术总结
本申请实施例提供了一种封装表单方法、装置、计算机设备及存储介质，所述方法包括：构建一个表单配置文件，解析表单配置文件的字段属性，并确定对应的表单组件以进行封装；根据所述表单配置文件的字段属性以及对应表单组件进行循环渲染生成表单页面，基于此，给所述表单页面在返回表单数据时，对该表单数据进行校验及国际化处理以获得合格的数据。本申请实现了表单数据类型的多层次化，表单的功能更加丰富，提高了开发效率。

技术研发人员：支友友,刘振威
受保护的技术使用者：南京控维通信科技有限公司
技术研发日：
技术公布日：2024/1/12