[发明专利]一种基于vue自定义组件的零代码表单生成方法与系统

权利要求书

1.一种基于vue自定义组件的零代码表单生成系统，其特征在于，所述系统基于前后端分离的web开发技术实现，包括系统前端和系统后端，其中系统前端所依赖的表单组件基于前端vue自定义组件实现，所述系统前端包括前端管理端和前端客户端；

前端管理端：用于为表单设计者提供与后端交互的可视化页面，设计者通过前端管理端完成表单的设计与创建；

前端客户端：用于为表单填写者提供与后端交互的可视化页面，填写者通过前端客户端完成表单的数据填写；

系统后端：用于为整个系统提供数据持久化能力，负责将表单设计者创建的表单配置数据和表单填写者填写的表单数据存入数据库，并在系统前端渲染页面时提供表格配置数据和表单数据。

2.一种基于vue自定义组件的零代码表单生成方法，基于权利要求1所述的一种基于vue自定义组件的零代码表单生成系统，其特征在于，包括以下步骤：

步骤一：表单设计者登录前端管理端；

步骤二：表单设计者基于业务场景创建表单分类；

步骤三：表单设计者在具体的表单分类下设计表单模板；

步骤四：表单设计者选取表单模板完成表单实例的创建；

步骤五：前端管理端根据表单分类、表单模板及表单实例生成表单配置信息；

步骤六：前端管理端调用系统后端程序接口，将表单配置信息写入服务器数据库；

步骤七：表单设计者通过前端管理端调用表单预览功能，对表单进行预览；前端管理端调用后端程序接口，从服务器数据库读取对应表单配置数据；前端管理端调用vue自定义表单组件，通过获取的表单配置数据，渲染出可视化表单；

步骤八：表单设计者根据表单预览效果，如果达到预期，表单设计结束；如果效果不理想，继续下一步；

步骤九：表单设计者根据需求在步骤二至步骤四对应的页面修改表单配置数据，并循环步骤七至步骤八，直至表单预览效果达到预期。

3.根据权利要求2所述的一种基于vue自定义组件的零代码表单生成方法，其特征在于，步骤一中，当表单设计者使用对应角色账号登录后，前端管理端为表单设计者提供与系统后端交互的可视化页面。

4.根据权利要求2所述的一种基于vue自定义组件的零代码表单生成方法，其特征在于，步骤二中所述表单分类采用多层嵌套，以实现对细分业务场景的覆盖。

5.根据权利要求4所述的一种基于vue自定义组件的零代码表单生成方法，其特征在于，所述表单分类包括以下分类属性：分类名称、上级分类名称、是否默认、分类排序；所述多层嵌套的层级≤3。

6.根据权利要求2所述的一种基于vue自定义组件的零代码表单生成方法，其特征在于，步骤三中所述表单模板是对表单数据属性的描述。

7.根据权利要求6所述的一种基于vue自定义组件的零代码表单生成方法，其特征在于，所述表单数据属性包括表单模板属性和表单字段属性。

8.根据权利要求7所述的一种基于vue自定义组件的零代码表单生成方法，其特征在于，所述表单模板属性是对表单名称的描述，包含两个字段：模板编码和模板名称；所述表单字段属性是对模板中关联数据的描述，包含：字段名称、字段描述、编码、属性类型、长度、选项、控件类型。

9.根据权利要求2所述的一种基于vue自定义组件的零代码表单生成方法，其特征在于，步骤四中在创建表单实例时，设计者对表单样式进行定义，并定义表单实例的名称和描述信息。

10.根据权利要求8所述的一种基于vue自定义组件的零代码表单生成方法，其特征在于，步骤四中创建表单实例具体包括：

1)填写表单属性；

2)选择表单样式风格；

3)表单预览。