一种Web端项目表单设计器的实现方法和系统

技术领域

本申请涉及计算机领域，特别是涉及一种Web端项目表单设计器的实现方法和系统。

背景技术

随着社会的发展，人们对自动化办公的需求越来越高，尤其对一些机构企业来说，数以百计的业务场景，需要有各种不同的表单来做支撑，表单设计器的种类很多，有基于富文本实现的富文本表单设计器，但样式、布局不易修改，无法满足流程种类繁多和经常需要变化和改动的业务和工作，有的表单设计器虽然能满足多变的业务需求，但复用性差，效率低，会产生非常多的重复工作，表单配置效率低下和表单管理不规范成为了当下亟需解决的问题。

目前针对相关技术中表单配置效率低下和表单管理不规范的问题，尚未提出有效的解决方案。

发明内容

本申请实施例提供了一种Web端项目表单设计器的实现方法和系统，以至少解决相关技术中表单配置效率低下和表单管理不规范的问题。

第一方面，本申请实施例提供了一种Web端项目表单设计器的方法，所述方法包括：

获取添加表单组件的组件创建请求，根据所述组件创建请求进入表单组件创建页面；

获取项目表单设计器中的基础控件，在所述表单组件创建页面中对所述基础控件进行属性配置和排序，生成表单组件，其中，所述表单组件为JSON数据格式文件，将所述表单组件保存到存储服务器中；

获取添加表单模板的模板创建请求，根据所述模板创建请求进入表单模板创建页面；

获取所述项目表单设计器中的所述表单组件和所述基础控件，在所述表单模板创建页面中对所述表单组件和所述基础控件进行属性配置和排序，生成表单模板，其中，所述表单模板为JSON数据格式文件，将所述表单模板保存到所述存储服务器中；

获取新建项目表单的表单创建请求，根据所述表单创建请求进入项目表单创建页面；

获取所述项目表单设计器中的所述基础控件、所述表单组件和所述表单模板，在所述表单创建页面中对所述基础控件、所述表单组件和所述表单模板进行属性配置和排序，生成预设表单，其中，所述预设表单为JSON数据格式文件，将所述预设表单保存到所述存储服务器中，生成预设表单ID。

在其中一些实施例中，所述方法还包括：

所述项目表单设计器中的所述基础控件、所述表单组件和所述预设表单均具有权限属性，所述权限属性包括查看权限属性、编辑权限属性和修改权限属性。

在其中一些实施例中，所述项目表单设计器中的所述基础控件、所述表单组件和所述预设表单均具有权限属性，在用户对所述基础控件、所述表单组件和所述预设表单进行操作之前，所述方法还包括：

根据所述用户的权限信息和所述基础组件的权限属性，判断所述用户对所述基础控件的操作权限；

根据所述用户的权限信息和所述表单组件的权限属性，判断所述用户对所述表单组件的操作权限；

根据所述用户的权限信息和所述预设表单的权限属性，判断所述用户对所述预设表单的操作权限。

在其中一些实施例中，将所述预设表单保存到存储服务器中，生成预设表单ID之后，所述方法还包括：

根据预设表单ID获取所述预设表单的JSON字符串；

将所述预设表单的JSON数据解析成虚拟DOM，通过Web端渲染出所述预设表单，获取用户填写的表单信息，生成数据表单；

将所述数据表单保存到所述存储服务器，生成数据表单ID。

在其中一些实施例中，在将所述预设表单保存到存储服务器中，生成预设表单ID之后，所述方法还包括：

根据预设表单ID获取所述预设表单的JSON字符串，进入项目表单编辑页面；

获取所述项目表单设计器中的所述基础控件、所述表单组件和所述表单模板，在所述表单编辑页面中对所述预设表单进行编辑，生成编辑表单；

将所述数据表单保存到所述存储服务器，生成编辑表单ID。

在其中一些实施例中，获取用户填写的表单信息，生成数据表单包括：

获取用户填写的表单信息，对所述表单信息进行格式校验，通过高亮文本的方式提示不合格的表单信息；

获取用户修改后合格的表单信息，生成数据表单。

在其中一些实施例中，在将所述数据表单保存到所述存储服务器，生成数据表单ID之后，所述方法还包括：

根据所述数据表单ID获取所述数据表单的JSON字符串，其中，所述JSON字符串包括目标字段；

通过所述目标字段对应的唯一键值，递归遍历确定所述目标字段所在的层级位置，并从中获取所述目标字段。

在其中一些实施例中，在将所述数据表单保存到所述存储服务器，生成数据表单ID之后，所述方法还包括：

根据所述数据表单ID获取所述数据表单的JSON字符串，其中，所述JSON字符串包括目标字段；

通过正则表达式解析所述JSON字符串，确定所述目标字段所在的层级位置，并从中获取所述目标字段。

在其中一些实施例中，所述项目表单设计器中的基础控件包括单行文本，单选框，多选框，日期选择器，图片上传，下拉选择框，地区，富文本编辑器，分割线和锚点。

第二方面，本申请实施例提供了一种Web端项目表单设计器的实现方法和系统，所述系统包括Web客户端和存储服务器；

所述Web客户端获取添加表单组件的组件创建请求，根据所述组件创建请求进入表单组件创建页面；

所述Web客户端获取项目表单设计器中的基础控件，在所述表单组件创建页面中对所述基础控件进行属性配置和排序，生成表单组件，其中，所述表单组件为JSON数据格式文件，将所述表单组件保存到所述存储服务器中；

所述Web客户端获取添加表单模板的模板创建请求，根据所述模板创建请求进入表单模板创建页面；

所述Web客户端获取所述项目表单设计器中的所述表单组件和所述基础控件，在所述表单模板创建页面中对所述表单组件和所述基础控件进行属性配置和排序，生成表单模板，其中，所述表单模板为JSON数据格式文件，将所述表单模板保存到所述存储服务器中；

所述Web客户端获取新建项目表单的表单创建请求，根据所述表单创建请求进入项目表单创建页面；

所述Web客户端获取所述项目表单设计器中的所述基础控件、所述表单组件和所述表单模板，在所述表单创建页面中对所述基础控件、所述表单组件和所述表单模板进行属性配置和排序，生成预设表单，其中，所述预设表单为JSON数据格式文件，将所述预设表单保存到所述存储服务器中，生成预设表单ID。

相比于相关技术，本申请实施例提供的一种Web端项目表单设计器的实现方法和系统，通过获取添加表单组件的组件创建请求，对项目表单设计器中的基础控件进行属性配置和排序，生成表单组件并保存到存储服务器中，获取添加表单模板的模板创建请求，对项目表单设计器中的表单组件和基础控件进行属性配置和排序，生成表单模板并保存到存储服务器中，获取新建项目表单的表单创建请求，对项目表单设计器中的基础控件、表单组件和表单模板进行属性配置和排序，生成预设表单并保存到所述存储服务器中，生成预设表单ID，解决了表单配置效率低下和表单管理不规范的问题，实现了表单设计中表单配置的高效化，表单管理的规范化，提高了表单设计的自由度和复用性。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的Web端项目表单设计器系统的结构框图；

图2是根据本申请实施例的Web端项目表单设计器方法的步骤流程图；

图3是根据本申请实施例的Web端项目表单设计器中表单填写的步骤流程图；

图4是根据本申请实施例的Web端项目表单设计器中表单编辑的步骤流程图；

图5是根据本申请实施例的Web端项目表单设计器中获取目标字段的步骤流程图一；

图6是根据本申请实施例的Web端项目表单设计器中获取目标字段的步骤流程图二。

附图说明：10、Web客户端；11、存储服务器。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。

在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。

除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“连接”、“相连”、“耦接”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电气的连接，不管是直接的还是间接的。本申请所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。本申请所涉及的术语“第一”、“第二”、“第三”等仅仅是区别类似的对象，不代表针对对象的特定排序。

本申请实施例提供了一种Web端项目表单设计器的实现方法和系统，图1是根据本申请实施例的Web端项目表单设计器系统的结构框图，如图1所示，该系统包括Web客户端10和存储服务器11；

Web客户端10获取添加表单组件的组件创建请求，根据组件创建请求进入表单组件创建页面；

Web客户端10获取项目表单设计器中的基础控件，在表单组件创建页面中对基础控件进行属性配置和排序，生成表单组件，其中，表单组件为JSON数据格式文件，将表单组件保存到存储服务器11中；

Web客户端10获取添加表单模板的模板创建请求，根据模板创建请求进入表单模板创建页面；

Web客户端10获取项目表单设计器中的表单组件和基础控件，在表单模板创建页面中对表单组件和基础控件进行属性配置和排序，生成表单模板，其中，表单模板为JSON数据格式文件，将表单模板保存到存储服务器11中；

Web客户端10获取新建项目表单的表单创建请求，根据表单创建请求进入项目表单创建页面；

Web客户端10获取项目表单设计器中的基础控件、表单组件和表单模板，在表单创建页面中对基础控件、表单组件和表单模板进行属性配置和排序，生成预设表单，其中，预设表单为JSON数据格式文件，将预设表单保存到存储服务器11中，生成预设表单ID。

通过本申请实施例，Web客户端10获取添加表单组件的组件创建请求，对项目表单设计器中的基础控件进行属性配置和排序，生成表单组件并保存到存储服务器11中，Web客户端10获取添加表单模板的模板创建请求，对项目表单设计器中的表单组件和基础控件进行属性配置和排序，生成表单模板并保存到存储服务器11中，Web客户端10获取新建项目表单的表单创建请求，对项目表单设计器中的基础控件、表单组件和表单模板进行属性配置和排序，生成预设表单并保存到所述存储服务器11中，生成预设表单ID，解决了表单配置效率低下和表单管理不规范的问题，实现了表单设计中表单配置的高效化，表单管理的规范化，提高了表单设计的自由度和复用性。

本申请实施例提供了一种Web端项目表单设计器的方法，图2是根据本申请实施例的Web端项目表单设计器方法的步骤流程图，如图2所示，该方法包括以下步骤：

S202，获取添加表单组件的组件创建请求，根据组件创建请求进入表单组件创建页面；

S204，获取项目表单设计器中的基础控件，在表单组件创建页面中对基础控件进行属性配置和排序，生成表单组件，其中，表单组件为JSON数据格式文件，将表单组件保存到存储服务器11中；

S206，获取添加表单模板的模板创建请求，根据模板创建请求进入表单模板创建页面；

S208，获取项目表单设计器中的表单组件和基础控件，在表单模板创建页面中对表单组件和基础控件进行属性配置和排序，生成表单模板，其中，表单模板为JSON数据格式文件，将表单模板保存到存储服务器11中；

S210，获取新建项目表单的表单创建请求，根据表单创建请求进入项目表单创建页面；

S212，获取项目表单设计器中的基础控件、表单组件和表单模板，在表单创建页面中对基础控件、表单组件和表单模板进行属性配置和排序，生成预设表单，其中，预设表单为JSON数据格式文件，将预设表单保存到存储服务器11中，生成预设表单ID。

通过本申请实施例中的步骤S202至S212，获取添加表单组件的组件创建请求，对项目表单设计器中的基础控件进行属性配置和排序，生成表单组件并保存到存储服务器11中，获取添加表单模板的模板创建请求，对项目表单设计器中的表单组件和基础控件进行属性配置和排序，生成表单模板并保存到存储服务器11中，获取新建项目表单的表单创建请求，对项目表单设计器中的基础控件、表单组件和表单模板进行属性配置和排序，生成预设表单并保存到所述存储服务器11中，生成预设表单ID，解决了表单配置效率低下和表单管理不规范的问题，实现了表单设计中表单配置的高效化，表单管理的规范化，提高了表单设计的自由度和复用性。

在其中一些实施例中，项目表单设计器中的基础控件、表单组件和预设表单均具有权限属性，权限属性包括查看权限属性、编辑权限属性和修改权限属性，例如，项目表单设计器包含了管理员，审核员，操作员，普通用户4类用户，由于机密性，项目表单设计器中有一些表单可能只有管理员才能看到，这样在配置表单时，需要设置基础控件、表单组件和预设表单的权限属性，如具有查看权限的用户，具有编辑权限的用户，以及具有创建后可进行修改权限的用户等；

需要说明的是，项目表单设计器中的表单模板并不具有权限属性，但是表单模板中的基础控件和表单组件是具有权限属性的。

在其中一些实施例中，项目表单设计器中的基础控件、表单组件和预设表单均具有权限属性，在用户对基础控件、表单组件和预设表单进行操作之前，根据用户的权限信息和基础组件的权限属性，判断用户对基础控件的操作权限，根据用户的权限信息和表单组件的权限属性，判断用户对表单组件的操作权限，根据用户的权限信息和预设表单的权限属性，判断用户对预设表单的操作权限。例如，项目表单设计器包含了管理员，审核员，操作员，普通用户4类用户，当用户进入项目表单设计器时，会先获取用户的权限信息，然后根据用户的权限信息与基础控件、表单组件和预设表单的权限属性，确定该用户对基础控件、表单组件和预设表单的操作权限，然后才能对相关的基础控件、表单组件和预设表单进行对应的操作，如管理员具有基础控件、表单组件和预设表单的全部操作权限，而审核员只具有基础控件、表单组件和预设表单的查看操作权限；

需要说明的是，项目表单设计器中的表单模板并不具有权限属性，当用户对项目表单设计器中的某一表单模板进行操作时，会根据用户的权限信息与该表单模板中的基础控件和表单组件的权限属性，确定用户对该表单模板中的基础控件和表单组件和预设表单的操作权限。

在其中一些实施例中，图3是根据本申请实施例的Web端项目表单设计器中表单填写的步骤流程图，如图3所示，将预设表单保存到存储服务器11中，生成预设表单ID之后，该方法还包括以下步骤：

S302，根据预设表单ID获取预设表单的JSON字符串；

S304，将预设表单的JSON数据解析成虚拟DOM，通过Web端渲染出预设表单，获取用户填写的表单信息，生成数据表单；

S306，将数据表单保存到存储服务器11，生成数据表单ID。

在其中一些实施例中，图4是根据本申请实施例的Web端项目表单设计器中表单编辑的步骤流程图，如图4所示，在将预设表单保存到存储服务器11中，生成预设表单ID之后，该方法还包括以下步骤：

S402，根据预设表单ID获取预设表单的JSON字符串，进入项目表单编辑页面；

S404，获取项目表单设计器中的基础控件、表单组件和表单模板，在表单编辑页面中对预设表单进行编辑，生成编辑表单；

S406，将数据表单保存到存储服务器11，生成编辑表单ID。

在其中一些实施例中，获取用户填写的表单信息，生成数据表单包括：

获取用户填写的表单信息，对表单信息进行格式校验，通过高亮文本的方式提示不合格的表单信息；

获取用户修改后合格的表单信息，生成数据表单。

在其中一些实施例中，图5是根据本申请实施例的Web端项目表单设计器中获取目标字段的步骤流程图一，如图5所示，在将数据表单保存到存储服务器11，生成数据表单ID之后，该方法还包括以下步骤：

S502，根据数据表单ID获取数据表单的JSON字符串，其中，JSON字符串包括目标字段；

S504，通过目标字段对应的唯一键值，递归遍历确定目标字段所在的层级位置，并从中获取目标字段。

在其中一些实施例中，图6是根据本申请实施例的Web端项目表单设计器中获取目标字段的步骤流程图二，如图6所示，在将数据表单保存到存储服务器11，生成数据表单ID之后，该方法还包括以下步骤：

S602，根据数据表单ID获取数据表单的JSON字符串，其中，JSON字符串包括目标字段；

S604，通过正则表达式解析JSON字符串，确定目标字段所在的层级位置，并从中获取目标字段。

在其中一些实施例中，项目表单设计器中的基础控件包括单行文本，单选框，多选框，日期选择器，图片上传，下拉选择框，地区，富文本编辑器，分割线和锚点，例如，通过拖拽添加锚点，相当于在页面的不同位置添加了a标签，使用a标签作为锚记和链接，跳转到指定的位置。

本领域的技术人员应该明白，以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。