CN113934415A - 表单配置方法、装置、设备及介质 - Google Patents

Abstract

本公开提供了一种表单配置方法，可用于金融领域。该方法包括：在表单设计器中提供步骤条工具；基于对所述步骤条工具的配置操作，配置N个步骤条，所述N个步骤条与N个步骤一一对应，N为大于1的整数；在所述N个步骤条中每个步骤条被选中时，基于用户的表单配置操作配置被选中的步骤条对应的步骤下的表单；以及当与所述N个步骤条一一对应的N个步骤下的表单分别配置完成后，基于表单创建操作创建分步表单，其中，所述分步表单包括所述N个步骤，不同步骤下的表单按照所述N个步骤相互关联。本公开还提供了一种表单配置装置、设备、存储介质和程序产品。

Description

表单配置方法、装置、设备及介质

技术领域

本公开涉及互联网技术领域，可以应用于金融领域，更具体地涉及一种表单配置方法、装置、设备、介质和程序产品。

背景技术

在前端开发的工作当中，表单页面是中后台业务的主要展现形式之一。随着业务越来越复杂，表单开发和维护也越来越复杂。现有技术中，开发人员可以通过在表单设计器(例如，FormMaking)中的可视化操作，快速便捷地创建表单页面

在实现本发明方案的过程中，发明人发现现有技术中存在如下问题：对于包括多个步骤前后联动的表单页面(本文简称分步表单)进行创建时，在表单设计器中只能按照各个步骤分别设计每个步骤下的表单页面(从而这些表单页面相互独立)，然后在将各个步骤下的表单页面插入到前端应用的代码中时，需要开发人员编写代码来建立各个步骤下的表单页面的逻辑关系，才能向终端用户展示出多个步骤前后联动的表单效果。这样，导致不仅在表单设计阶段存在大量重复开发操作，而且在表单页面插入到前端应用的代码中时还需要前端开发人员二次开发，效率低下。

发明内容

鉴于上述问题，本公开实施例提供了提高分步表单开发效率的表单配置方法、装置、设备、介质和程序产品。

本公开实施例的第一方面，提供了一种表单配置方法。所述方法包括：在表单设计器中提供步骤条工具；基于对所述步骤条工具的配置操作，配置N个步骤条，所述N个步骤条与N个步骤一一对应，N为大于1的整数；在所述N个步骤条中每个步骤条被选中时，基于用户的表单配置操作配置被选中的步骤条对应的步骤下的表单；以及当与所述N个步骤条一一对应的N个步骤下的表单分别配置完成后，基于表单创建操作创建分步表单，其中，所述分步表单包括所述N个步骤，不同步骤下的表单按照所述N个步骤相互关联。

根据本公开的实施例，所述基于对所述步骤条工具的配置操作，配置N个步骤条包括：配置所述N个步骤条的名称信息；和/或配置所述N个步骤条的风格类型。

根据本公开的实施例，所述方法还包括：在渲染所述分步表单时，获取所述分步表单中当前步骤的信息；以及渲染所述当前步骤下的表单。

根据本公开的实施例，所述在渲染所述分步表单时，获取所述分步表单中当前步骤的信息包括：获取所述分步表单的属性信息；以及

当所述属性信息中包含步骤条的信息时，获取由所述分步表单传入的所述当前步骤的信息。所述渲染所述当前步骤下的表单包括：渲染所述当前步骤对应的步骤条以及所述当前步骤下的所有表单控件。

根据本公开的实施例，所述在渲染所述分步表单时，获取所述分步表单中当前步骤的信息还包括：响应于用户在所述当前步骤的表单中选择下一步的操作，校验所述当前步骤下的表单数据；以及在所述当前步骤下的表单数据校验通过后，以所述下一步骤的信息更新所述当前步骤的信息。

根据本公开的实施例，所述校验所述当前步骤下的表单数据包括：遍历所述分步表单的JSON配置的信息列表；当遍历到步骤条的信息时，获取所述分步表单中所述当前步骤的信息；以及对所述当前步骤下的表单数据进行校验。

根据本公开的实施例，所述对所述当前步骤下的表单数据进行校验包括：定义二维数组变量，所述二维数组变量用于存放所述分步表单中每个步骤下的表单数据，其中，所述二维数组变量中第一维度为步骤数，第二维度为每个步骤下的表单数据；将所述分步表单中所述当前步骤下的所有表单控件中的表单数据，对应存入所述二维数据变量中所述当前步骤下的第二维度中；以及对所述二维数组变量中所述当前步骤下的表单数据进行校验。

本公开实施例的第二方面，提供了一种表单配置装置。所述表单配置装置包括：步骤条配置模块、分步表单配置模块、以及分步表单创建模块。步骤条配置模块用于在表单设计器中提供步骤条工具，以及基于对所述步骤条工具的配置操作，配置N个步骤条，所述N个步骤条与N个步骤一一对应，N为大于1的整数。分步表单配置模块用于在所述N个步骤条中每个步骤条被选中时，基于用户的表单配置操作配置被选中的步骤条对应的步骤下的表单。分步表单创建模块用于当与所述N个步骤条一一对应的N个步骤下的表单分别配置完成后，基于表单创建操作创建分步表单，其中，所述分步表单包括所述N个步骤，不同步骤下的表单按照所述N个步骤相互关联。

根据本公开的实施例，所述装置还包括表单渲染模块。所述表单渲染模块用于在渲染所述分步表单时，获取所述分步表单中当前步骤的信息，以及渲染所述当前步骤下的表单。

根据本公开的实施例，所述表单渲染模块具体用于获取所述分步表单的属性信息，当所述属性信息中包含步骤条的信息时，获取由所述分步表单传入的所述当前步骤的信息，以及渲染所述当前步骤对应的步骤条以及所述当前步骤下的所有表单控件。

根据本公开的实施例，所述表单渲染模块还包括表单校验子模块。所述表单校验子模块用于校验所述当前步骤下的表单数据。所述表单渲染模块还用于响应于用户在所述当前步骤的表单中选择下一步的操作，通过所述表单校验模块校验所述当前步骤下的表单数据，以及当所述表单校验模块对所述当前步骤下的表单数据校验通过后，以所述下一步骤的信息更新所述当前步骤的信息。

根据本公开的实施例，所述表单校验子模块具体用于：遍历所述分步表单的JSON配置的信息列表；遍历到步骤条的信息时，获取所述分步表单中所述当前步骤的信息；以及对所述当前步骤下的表单数据进行校验。

根据本公开的实施例，所述表单校验子模块还用于：定义二维数组变量来存放所述分步表单中每个步骤下的表单数据，其中，所述二维数组变量中第一维度为步骤数，第二维度为每个步骤下的表单数据；将所述分步表单中所述当前步骤下的所有表单控件中的表单数据，对应存入所述二维数据变量中所述当前步骤下的第二维度中；以及对所述二维数组变量中所述当前步骤下的表单数据进行校验。

本公开实施例的第三方面提供了一种电子设备。所述电子设备包括一个或多个处理器、以及一个或多个存储器。所述一个或多个存储器用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得一个或多个处理器执行上述方法。

本公开实施例的第四方面还提供了一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行上述方法。

本公开实施例的第五方面还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述方法。

上述一个或多个实施例具有如下优点或益效果：可以在设创建分步表单时，就建立起分步表单中不同步骤下的表单之间的逻辑关系，以此方式一方面简化了设计阶段中分步表单的开发操作，避免分别开发多个表单页面，另一方面当分步表单的代码插入到前端应用代码时，也可以避免开发人员编写不同步骤下的表单页面之间的逻辑代码，从而提高了分步表单的开发效率。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述内容以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了根据本公开实施例的表单配置方法、装置、设备、介质和程序产品的应用场景图；

图2示意性示出了根据本公开实施例的展示有步骤条工具的用户交互界面示意图；

图3示意性示出了根据本公开实施例的一个分步表单的示意图；

图4示意性示出了根据本公开一实施例的表单配置方法的流程图；

图5示意性示出了根据本公开一实施例的配置步骤条的配置界面示意图；

图6示意性示出了根据本公开一实施例在FormMaking中实现步骤条工具的流程示意；

图7示意性示出了根据本公开一实施例的表单配置方法中渲染表单的流程图；

图8示意性示出了根据本公开另一实施例的表单配置方法中渲染表单的流程图；

图9示意性示出了根据本公开一实施例的表单配置方法中校验当前步骤下的表单数据的流程图；

图10示意性示出了根据本公开一实施例在FormMaking中校验分步表单中当前步骤下的表单数据的流程示意；

图11示意性示出了根据本公开实施例的表单配置装置的框图；以及

图12示意性示出了适于实现根据本公开实施例的表单配置方法的电子设备的方框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。

在本文中，需要理解的是，说明书及附图中的任何元素数量均用于示例而非限制，以及任何命名(例如，第一、第二)都仅用于区分，而不具有任何限制含义。

在本文中，分步表单是指多个表单页面按照先后步骤顺序联动而成的表单结构。具体地，分步表单可以包括多个步骤，每个步骤下具有对应的表单页面。其中，在当前步骤下的表单页面中点击了下一步之后可以从当前步骤下的表单页面跳转到下一步的表单页面。并且，当最后一个步骤的表单页面填写完毕用户点击提交后，可以向后台提交该分步表单中所有步骤下的表单页面中的表单数据。

本公开的实施例提供了一种表单配置方法、装置、设备、介质及程序产品。该方法包括首先在表单设计器中提供步骤条工具，然后基于对步骤条工具的配置操作，配置N个步骤条，N个步骤条与N个步骤一一对应，N为大于1的整数，接下来在N个步骤条中每个步骤条被选中时，基于用户的表单配置操作配置被选中的步骤条对应的步骤下的表单，并且当与N个步骤条一一对应的N个步骤下的表单分别配置完成后，基于表单创建操作创建分步表单，其中，分步表单包括N个步骤，不同步骤下的表单按照N个步骤相互关联。

根据本公开的实施例，可以在表单设计阶段在创建分步表单时，建立起分步表单中不同步骤下的表单之间的逻辑关系，这样一方面简化了分步表单的设计开发操作，避免分别开发多个表单页面，另一方面当分步表单的代码插入到前端应用代码时，也可以避免开发人员编写表单页面之间的逻辑关系代码，以此方式提高了分步表单的开发效率。

需要说明的是，本公开实施例确定的表单配置方法、装置、设备、、介质和程序可用于金融领域(例如，在互联网金融方面的应用)，也可用于除金融领域之外的任意领域，本公开对应用领域不做限定。

图1示意性示出了根据本公开实施例的表单配置方法、装置、设备、介质和程序产品的应用场景图。需要注意的是，图1所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图1所示，根据该实施例的应用场景100可以包括开发人员1、终端设备101、网络102和服务器103。网络102用以在终端设备101和服务器102之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

开发人员1可以使用终端设备101通过网络102与服务器103交互，以接收或发送消息等。终端设备101上可以安装有前端开发工具、和/或表单设计器(例如，FormMaking、Bootstrap、Ueditor Formdesign Plugins Web等)。

服务器103对开发人员1在前端开发工具中的操作提供后台支持。例如，对开发人员1在前端开发工作中的操作进行后台处理，并将处理结果(例如前端代码是否生成成功等信息)反馈给终端设备。

开发人员1在使用终端设备101中的前端开发工具开发前端应用的过程中，可以借助于终端设备101中的表单设计器来快速开发表单页面。例如，开发人员1可以在表单设计器中通过可视化的操作(例如，拖动各类表单控件等)来设计表单页面，并在表单设计器中配置好表单数据的校验规则等，然后将创建得到的表单的代码插入到在前端开发工具中开发的前端应用的代码中，从而实现前端应用中的表单的设计。以此方式，避免了开发人员在前端开发中，手写大量表单代码的操作。

本公开实施例提供的表单配置方法可以由终端设备101来执行。，具体而言，可以通过开发人员1对终端设备101中的表单设计器的操作，来创建分步表单。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

图2示意性示出了根据本公开实施例的展示有步骤条工具的用户交互界面200示意图。该用户交互界面200例如可以是终端设备101中的表单设计器的一个用户交互界面。

如图2所示，在该用户交互界面200中显示有步骤条工具201。开发人员1可以通过操作该步骤条工具201来配置所要设计的分步表单中的各个步骤的信息。配置好的步骤条的展示效果例如可以参考区域202中的步骤1和步骤2。

继续参考区域202。根据本公开的实施例，当开发人员1点击步骤1时，可以在区域202中的编辑区域中开发步骤1下的表单。当开发人员1点击步骤2时，可以在区域202中的编辑区域中开发步骤2下的表单。并且当开发人员1点击生成JSON的控件203或生成代码的控件204时，可以生成分步表单的JSON配置或代码，其中，该分步表单包含有步骤1下的表单、步骤2下的表单以及二者之间的先后逻辑关系。

图3示意性示出了根据本公开实施例的一个分步表单300的示意图。

如图3所示，该分步表单300包括两个步骤：机构负责人信息301和机构信息302。在此以分步表单300为例，简要介绍分步表单在前端应用中的用户交互过程。

首先，在当前视图下显示的是机构负责人信息301这一步骤下的表单，该表单用于收集用户的真实姓名、手机号码、邮箱等信息。当用户填写完当前视图下的各个表单控件点击下一步后，可以显示机构信息302步骤下的表单页面。

当用户填写完成机构信息302步骤下的表单中的信息后，可以点击提交。如果机构负责人信息301和机构信息302两个步骤下的表单数据均校验通过后，分步表单300的数据将被提交后台，与此同时可以向终端用户显示注册成功的界面，以通知用户注册成功。

以下将基于图1描述的场景、以及图2和图3的用户交互界面的示例，通过图4～图10对公开实施例的表单配置方法进行详细描述。

图4示意性示出了根据本公开一实施例的表单配置方法的流程图。

如图4所示，根据该实施例的表单配置方法可以包括操作S410～操作S440。

首先在操作S410，在表单设计器中提供步骤条工具。例如如图2所示，可以在表单设计器的在用户交互界面200中显示步骤条工具201。

然后在操作S420，基于对步骤条工具的配置操作，配置N个步骤条，N个步骤条与N个步骤一一对应，N为大于1的整数。具体地可以配置分步表单所需的步骤数、各个步骤的名称信息、风格类型信息等。例如，图5所示的步骤条的配置界面中，步骤条的配置可以包括字段标识、标题、风格类型、步骤条配置项等。

接下来在操作S430，在N个步骤条中每个步骤条被选中时，基于用户的表单配置操作配置被选中的步骤条对应的步骤下的表单。如图2中当前视图下，可以在区域200中配置步骤1下的表单。

接下来在操作S440，当与N个步骤条一一对应的N个步骤下的表单分别配置完成后，基于表单创建操作创建分步表单，其中，分步表单包括上述N个步骤，不同步骤下的表单按照上述N个步骤相互关联。例如，开发人员1在用户交互界面200中操作生成JSON的控件203或生成代码的控件204，生成分步表单的JSON配置或代码，从而创建该分步表单。

可见，根据本公开的实施例，在创建分步表单时，不需要针对各个步骤下的表单分别独立创建，而是可以一次性创建出具有先后步骤关联的多个表单页面，这样可以简化分步表单的设计开发操作。而且，由于分步表单中已经携带了不同步骤下的表单页面之间的联动关系，从而当分步表单的代码插入到前端应用代码时，开发人员也不用再编写不同步骤下的表单页面的逻辑关系代码，减少了开发人员的工作量，提高了分步表单的开发效率。

图6示意性示出了根据本公开一实施例在FormMaking中实现步骤条工具的流程示意。

如图6所示，在FormMaking中实现步骤条工具时，可以在FormMaking的用于编写自定义工具的源码文件WidgetConfig.vue文件中增加步骤条配置项的功能。具体地，可以将步骤条的名称信息、风格类型信息等存入element.options.steps属性中。其中，风格类型可以用来展示不同用户交互风格的步骤条。

图7示意性示出了根据本公开一实施例的表单配置方法中渲染表单的流程图。

如图7所示，根据本公开实施例的表单配置方法除了操作S410～操作S440以外，还可以包括操作S710～操作S720。其中通过操作S710～操作S720可以对创建的分步表单进行渲染。

首先在操作S710，在渲染分步表单时，获取分步表单中当前步骤的信息。然后在操作S720，渲染当前步骤下的表单，例如，渲染当前步骤对应的步骤条以及当前步骤下的所有表单控件。

从而，在渲染分步表单时可以每次仅渲染当前步骤下的表单。例如，开发人员1在用户交互界面200中创建完成分步表单后，可以通过点击预览控件来查看分步表单的渲染效果。为了使分步表单在插入到前端应用的代码中之后，当随着前端应用发布使用时也能够每次仅渲染当前步骤下的表单，在实际应用中可以将本公开实施例中分步表单的渲染操作方法封装成软件(例如，插件)，然后以插件的方式随该前端应用安装在用户设备中，从而在用户使用该前端应用时如遇到分步表单就可以每次仅渲染当前步骤下的表单。以此方式，分步表单的渲染效果与单独开发各个步骤下的表单的渲染效果类似，做到使终端用户对表单设计中的变化无感知。

在FormMaking中分步表单渲染的实现思路大致如下：可以在template模板中引入element的el-steps组件，通过步骤条配置项传入的element.options.type来判断是否展示步骤条组件。分步表单的父级组件传入参数stepActive来表示当前是第几步。在渲染时首先遍历步骤条配置项传入的element.options.steps参数，渲染步骤条组件，然后再次遍历步骤条配置项传入的element.options.steps参数，渲染当前步骤下的表单控件。

图8示意性示出了根据本公开另一实施例的表单配置方法中渲染表单的流程图。

如图8所示，根据本公开实施例的表单配置方法除了操作S410～操作S440以外，还可以包括操作S810～操作S860。其中，操作S810～操作S860给出了对分步表单进行渲染另一示例性实施例。

首先在操作S810，在触发渲染操作时，获取分步表单的属性信息。

然后在操作S820，当属性信息中包含步骤条的信息时，获取由分步表单传入的当前步骤的信息。具体地，在进行表单渲染时，如果发现表单的属性信息中包含有步骤条，则说明需要渲染的表单为分步表单，此时可以从分步表单组件代码中获取表征当前处理的表单所属的步骤的信息(即，当前步骤的信息)。

接下来在操作S830，渲染当前步骤对应的步骤条以及当前步骤下的所有表单控件。例如按照配置的步骤条风格类型渲染步骤条组件，然后对该步骤下的所有表单控件进行渲染。在FormMaking表单设计器中，可以遍历步骤条配置项传入的element.options.steps参数，渲染步骤条组件；然后再次遍历步骤条配置项传入的element.options.steps参数，渲染当前步骤下的表单控件。

再然后在操作S840，检测用户是否点击分步表单中的下一步。若否，则保持当前状态并等待用户的下一步操作指示。若是，则进入操作S850。

在操作S850，响应于用户在当前步骤的表单中选择下一步的操作，校验当前步骤下的表单数据。例如，按照JSON配置中当前步骤下的表单的校验规则，对当前步骤下的表单的各个表单控件中是否填写数据、所填写数据是否符合格式要求等进行校验。

然后在操作S860，在当前步骤下的表单数据校验通过后，以下一步骤的信息更新当前步骤的信息。

接下来在当前步骤的信息更新之后，返回操作S830对当前步骤下的所有表单控件进行渲染。

可见，根据本公开的实施例，可以在一个步骤下的表单校验通过后，再渲染其后步骤中的表单。

图9示意性示出了根据本公开一实施例的表单配置方法中校验当前步骤下的表单数据的流程图。

如图9所示，根据本公开的实施例操作S850中校验当前步骤下的表单数据的过程可以包括操作S901～操作S903。

首先在操作S901，遍历分步表单的JSON配置的信息列表。

然后在操作S902，当遍历到步骤条的信息时，获取分步表单中当前步骤的信息。具体地，在对JSON配置的信息列表进行遍历时，如果发现其中包含有步骤条，则说明需要校验的表单为分步表单。此时可以从分步表单的组件代码中获取表征当前处理的表单所属的步骤的信息(即，当前步骤的信息)。

接下来在操作S903，对当前步骤下的表单数据进行校验。

在一个实施例中，在操作S903中可以先定义一个二维数组变量，该二维数组变量用于存放分步表单中每个步骤下的表单数据，其中，二维数组变量中第一维度为步骤数，第二维度为每个步骤下的表单数据。然后分步表单中当前步骤下的所有表单控件中的表单数据，对应存入二维数据变量中当前步骤下的第二维度中。最后对二维数组变量中当前步骤下的表单数据进行校验。以此方式对当前步骤下的表单数据进行校验。

图10示意性示出了根据本公开一实施例在FormMaking中校验分步表单中当前步骤下的表单数据的流程示意。该流程示意为操作S903的一个具体实施例。

结合图8～图10，在分步表单中点击下一步后可以校验当前步骤的表单，并返回当前步骤中的表单数据。本公开实施例在FormMaking中可以提供getFiledData方法来校验当前步骤下的表单数据。该getFiledData方法接收一个参数stepActive(即当前步骤数(第几步))，并返回当前步骤下校验通过的表单数据。具体实现思路如下：

遍历表单的JSON配置this.data.list。如果当前item控件类型是步骤条，则遍历当前的item的steps配置项(steps中包含步骤数、步骤名称等信息)stepItem。

定义一个获取分组分步表单数据的函数getModelsGroup2，传入参数为stepItem和当前步骤数index。

定义一个二维数组变量modelsGroup2，用来存放每个步骤下的表单中的表单字段名。

在getModelsGroup2函数中遍历stepItem中的每一项formItem。如果formItem为基础表单控件(输入框、下拉框、多选框等)，直接将formItem的model属性(表单字段名)push到变量modelsGroup2[index]中；如果formItem为高级表单控件(步骤条、子表单、栅格布局、标签页等可以嵌套基础表单控件的组件)，则递归循环遍历formItem.columns或formItem.steps或formItem.steps，直到遍历到基础表单控件时，将其model属性push到modelsGroup2[index]中。此时获取到的modelsGroup2是一个二维数组，第一个维度为步骤数，第二个维度为当前步骤下的表单数据。

接下来，调用elementUI中的校验部分表单数据的API：

其中，this.$refs.generateForm.validateField(modelsGroup2[stepActive])，即可校验当前步骤下的表单数据。

如果校验通过，遍历所有表单数据this.models，获取this.models每个key，如果key在modelsGroup2[stepActive]数组中存在，则返回this.models(key)，即为stepActive步骤下校验通过的表单数据。

在动态输出表单的业务系统中，使用步骤条工具配置的表单后，通过调用this.$refs.generateForm.getFiledData(0).then((filedData)＝>console.log(filedData))，来获取校验结果并获取步骤一的表单数据。

根据该二维数组变量modelsGroup2的定义可以知道，当分步表单中的最后一个步骤下的表单数据被校验通过时，意味着该二维数组变量中存放了所有步骤下的表单数据。其中，一个维度是步骤数，另一个维度是每个步骤下的表单数据。这样，根据本公开的实施例，在用户提交分步表单时，可以从二维数组变量中获取N个表单中的表单数据，并向后台提交。而不必像现有技术那样，由于分步表单中各个表单页面是相互独立的，再最后一个步骤下的表单提交后还需要分别获取各个步骤下的表单数据并整合后再提交。从而，本公开实施例相对于现有技术可以极大地便利分步表单中不同步骤下的表单中的数据的收集。当用户在最后一个步骤下的表单中进行提交操作后，如果最后一个步骤中的表单数据校验通过，就可以从该二维数组变量中获取到该分步表单中的表单数据以提交后台处理。

与渲染表单的操作方法类似，本公开实施例所提供的的校验分步表单的方法和操作，也可以封装到软件包里(例如，封装到渲染插件中)，随同渲染插件一起与前端应用安装在用户设备中。从而使终端用户在使用前端应用程序时也可以以操作S901～操作S903的方式对其中的分步表单进行校验。

本公开实施例的表单配置方法，可以为表单设计器新增步骤条功能，可以应用于需要分步表单的配置场景。克服了现有技术中在需要配置分步表单时，需要分别配置多个表单，会增加冗余代码，影响开发效率，多个表单最后提交时还需要合并数据，使用步骤条组件等问题，使前端开发更加高效，组件化程度更加完善，提示代码质量。

需要说明的是，本公开实施例中表单设计器以FormMaking为例进行说明仅是示例性而非限定性的，以帮助本领域技术人员理解本公开实施例的方法的具体实现操作。本公开实施例的表单配置方法可以应用于任何表单设计器，本公开对此不予限定。

图11示意性示出了根据本公开实施例的表单配置装置1100的框图。

如图11所示，根据本公开实施例的表单配置装置1100可以包括步骤条配置模块1110、分步表单配置模块1120、以及分步表单创建模块1130。根据本公开的另一些实施例，该表单配置装置1100还可以进一步包括表单渲染模块1140。

步骤条配置模块1110用于在表单设计器中提供步骤条工具，以及基于对步骤条工具的配置操作，配置N个步骤条，N个步骤条与N个步骤一一对应，N为大于1的整数。在一个实施例中，步骤条配置模块1110可以执行操作S410和操作S420。

分步表单配置模块1120用于在N个步骤条中每个步骤条被选中时，基于用户的表单配置操作配置被选中的步骤条对应的步骤下的表单。在一个实施例中，分步表单配置模块1120可以执行操作S430。

分步表单创建模块1130用于当与N个步骤条一一对应的N个步骤下的表单分别配置完成后，基于表单创建操作创建分步表单，其中，分步表单包括N个步骤，不同步骤下的表单按照N个步骤相互关联。在一个实施例中，分步表单创建模块1130可以执行操作S440。

表单渲染模块1140用于在渲染分步表单时，获取分步表单中当前步骤的信息，以及渲染当前步骤下的表单。

表单渲染模块1140具体用于获取分步表单的属性信息，当属性信息中包含步骤条的信息时，获取由分步表单传入的当前步骤的信息，以及渲染当前步骤对应的步骤条以及当前步骤下的所有表单控件。在一些实施例中，表单渲染模块1140可以执行操作S710和操作S720。在另一些实施例中，表单渲染模块1140可以执行操作S810～操作S830。

根据本公开的在一些实施例，表单渲染模块1140可以包括表单校验子模块1141。

表单校验子模块1141可以用于校验当前步骤下的表单数据，例如执行操作S850。

表单渲染模块1140可以用于响应于用户在当前步骤的表单中选择下一步的操作，通过表单校验模块1141校验当前步骤下的表单数据，以及当表单校验模块对当前步骤下的表单数据校验通过后，以下一步骤的信息更新当前步骤的信息(例如执行操作S860)，然后渲染当前步骤对应的步骤条以及当前步骤下的所有表单控件(例如操作S830)。

根据本公开的一些实施例，表单校验子模块1141具体用于：遍历分步表单的JSON配置的信息列表；遍历到步骤条的信息时，获取分步表单中当前步骤的信息；以及对当前步骤下的表单数据进行校验。在一些实施例中，表单校验子模块1141可以执行操作S901～操作S903。

根据本公开的实施例，表单配置装置1100可以用于实现参考图4～图10所描述的表单配置方法，具体可以参考上文的介绍，此处不再赘述。

根据本公开的实施例，步骤条配置模块1110、分步表单配置模块1120、以及分步表单创建模块1130、表单渲染模块1140、或表单校验子模块1141中的任意多个模块可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。根据本公开的实施例，步骤条配置模块1110、分步表单配置模块1120、以及分步表单创建模块1130、表单渲染模块1140、或表单校验子模块1141中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，步骤条配置模块1110、分步表单配置模块1120、以及分步表单创建模块1130、表单渲染模块1140、或表单校验子模块1141中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

图12示意性示出了适于实现根据本公开实施例的表单配置方法的电子设备1200的方框图。

如图12所示，根据本公开实施例的电子设备1200包括处理器1201，其可以根据存储在只读存储器(ROM)1202中的程序或者从存储部分1208加载到随机访问存储器(RAM)1203中的程序而执行各种适当的动作和处理。处理器1201例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))等等。处理器1201还可以包括用于缓存用途的板载存储器。处理器1201可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 1203中，存储有电子设备1200操作所需的各种程序和数据。处理器1201、ROM 1202以及RAM 1203通过总线1204彼此相连。处理器1201通过执行ROM 1202和/或RAM1203中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 1202和RAM 1203以外的一个或多个存储器中。处理器1201也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，电子设备1200还可以包括输入/输出(I/O)接口1205，输入/输出(I/O)接口1205也连接至总线1204。电子设备1200还可以包括连接至I/O接口1205的以下部件中的一项或多项：包括键盘、鼠标等的输入部分1206；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分1207；包括硬盘等的存储部分1208；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1209。通信部分1209经由诸如因特网的网络执行通信处理。驱动器1210也根据需要连接至I/O接口1205。可拆卸介质1211，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1210上，以便于从其上读出的计算机程序根据需要被安装入存储部分1208。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 1202和/或RAM 1203和/或ROM 1202和RAM 1203以外的一个或多个存储器。

本公开的实施例还包括一种计算机程序产品，其包括计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。当计算机程序产品在计算机系统中运行时，该程序代码用于使计算机系统实现本公开实施例所提供的表单配置方法。

在该计算机程序被处理器1201执行时执行本公开实施例的系统/装置中限定的上述功能。根据本公开的实施例，上文描述的系统、装置、模块、单元等可以通过计算机程序模块来实现。

在一种实施例中，该计算机程序可以依托于光存储器件、磁存储器件等有形存储介质。在另一种实施例中，该计算机程序也可以在网络介质上以信号的形式进行传输、分发，并通过通信部分1209被下载和安装，和/或从可拆卸介质1211被安装。该计算机程序包含的程序代码可以用任何适当的网络介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

在这样的实施例中，该计算机程序可以通过通信部分1209从网络上被下载和安装，和/或从可拆卸介质1211被安装。在该计算机程序被处理器1201执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

根据本公开的实施例，可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例提供的计算机程序的程序代码，具体地，可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。程序设计语言包括但不限于诸如Java，C++，python，“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合或/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (10)

1.一种表单配置方法，包括：

在表单设计器中提供步骤条工具；

基于对所述步骤条工具的配置操作，配置N个步骤条，所述N个步骤条与N个步骤一一对应，N为大于1的整数；

在所述N个步骤条中每个步骤条被选中时，基于用户的表单配置操作配置被选中的步骤条对应的步骤下的表单；以及

当与所述N个步骤条一一对应的N个步骤下的表单分别配置完成后，基于表单创建操作创建分步表单，其中，所述分步表单包括所述N个步骤，不同步骤下的表单按照所述N个步骤相互关联。

2.根据权利要求1所述的方法，其中，所述基于对所述步骤条工具的配置操作，在第二用户交互界面中配置N个步骤条包括：

配置所述N个步骤条的名称信息；和/或

配置所述N个步骤条的风格类型。

3.根据权利要求1所述的方法，其中，所述方法还包括：

在渲染所述分步表单时，获取所述分步表单中当前步骤的信息；以及

渲染所述当前步骤下的表单。

4.根据权利要求3所述的方法，其中，

所述在渲染所述分步表单时，获取所述分步表单中当前步骤的信息包括：

获取所述分步表单的属性信息；以及

当所述属性信息中包含步骤条的信息时，获取由所述分步表单传入的所述当前步骤的信息；

所述渲染所述当前步骤下的表单包括：渲染所述当前步骤对应的步骤条以及所述当前步骤下的所有表单控件。

5.根据权利要求4所述的方法，其中，所述在渲染所述分步表单时，获取所述分步表单中当前步骤的信息还包括：

响应于用户在所述当前步骤的表单中选择下一步的操作，校验所述当前步骤下的表单数据；以及

在所述当前步骤下的表单数据校验通过后，以所述下一步骤的信息更新所述当前步骤的信息。

6.根据权利要求5所述的方法，其中，所述校验所述当前步骤下的表单数据包括：

遍历所述分步表单的JSON配置的信息列表；

当遍历到步骤条的信息时，获取所述分步表单中所述当前步骤的信息；以及

对所述当前步骤下的表单数据进行校验。

7.根据权利要求6所述的方法，其中，所述对所述当前步骤下的表单数据进行校验包括：

定义二维数组变量，所述二维数组变量用于存放所述分步表单中每个步骤下的表单数据，其中，所述二维数组变量中第一维度为步骤数，第二维度为每个步骤下的表单数据；

将所述分步表单中所述当前步骤下的所有表单控件中的表单数据，对应存入所述二维数据变量中所述当前步骤下的第二维度中；

对所述二维数组变量中所述当前步骤下的表单数据进行校验。

8.一种表单配置装置，包括：

步骤条配置模块，用于在表单设计器中提供步骤条工具；以及基于对所述步骤条工具的配置操作，配置N个步骤条，所述N个步骤条与N个步骤一一对应，N为大于1的整数；

分步表单配置模块，用于在所述N个步骤条中每个步骤条被选中时，基于用户的表单配置操作配置被选中的步骤条对应的步骤下的表单；以及

分步表单创建模块，用于当与所述N个步骤条一一对应的N个步骤下的表单分别配置完成后，基于表单创建操作创建分步表单，其中，所述分步表单包括所述N个步骤，不同步骤下的表单按照所述N个步骤相互关联。

9.一种电子设备，包括：

一个或多个存储器，存储有可执行指令；以及

一个或多个处理器，执行所述可执行指令，以实现根据权利要求1～7中任一项所述的方法。

10.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行根据权利要求1～7中任一项所述的方法。

Images