CN113094037B - 表单和工作流的交互方法、开发平台、设备及存储介质 - Google Patents

Abstract

本发明公开了一种表单和工作流的交互方法、开发平台、设备及存储介质，该方法应用于具备表单引擎和工作流引擎的可视化低代码开发平台，通过从表单引擎提供的可视化界面获取用户配置的配置信息，如工作流组件配置信息，根据获取到的配置信息生成待展示页面的HTML脚本，从而根据HTML脚本对待展示页面进行渲染并展示，实现了待展示页面的快速开发；在监测到对工作流组件的操作指令时，通过调用预先封装的数据获取接口从HTML脚本中获取工作流引擎所需的流程数据，并调用预先封装的数据传输接口，便可以由表单引擎将流程数据传输给工作流引擎，再控制工作流引擎根据流程数据实现对应的流程操作，使得表单和工作流的交互能够零代码实现。

Description

表单和工作流的交互方法、开发平台、设备及存储介质

技术领域

本发明实施例涉及计算机技术领域，特别涉及一种表单和工作流的交互方法、开发平台、设备及存储介质。

背景技术

随着企业的发展，对流程自动化的需求越来越高，但是工作流，如审批工作流、审核工作流实质上均是通过表单页面展示的，因此工作流的使用需要和表单结合。

在流程的推进过程中，工作流引擎需要获取一些数据，然后根据获取的数据进行后续流程操作，需要获取的数据可以是从表单引擎开发的表单页面中获取的数据，也可以是流程推进过程所需要的参数数据。现有技术中为实现流程的流转，必须通过开发人员为流程对应的每个需要执行发起的页面编写大量代码，才能获取到需要的数据实现工作流和表单的交互；同时，对于不同业务功能的表单和流程，其涉及的业务数据不同，流程推进过程中所需数据不同，因而，开发人员需要编写的代码也有所不同，即使是相同类型的表单，开发人员也需要为每个需要执行流程操作的页面开发相应的代码，这种方式导致开发人员需要重复写大量类似的代码，工作量大，显著降低了开发效率，同时由于需要编写大量代码，也增加了对使用者的门槛难度。

发明内容

本发明实施例的目的在于提供一种表单和工作流的交互方法、开发平台、设备及存储介质，在不需要开发人员编写代码获取数据的情况，便可实现工作流引擎能够根据实际情况从表单引擎自动获取表单收集到的数据，从而使得表单和工作流的交互能够零代码实现。

为解决上述技术问题，本发明的实施例提供了一种表单和工作流的交互方法，应用于具备表单引擎和工作流引擎的可视化低代码开发平台，所述表单和工作流的交互方法包括：

获取用户利用表单引擎提供的可视化界面配置的配置信息，所述配置信息包括工作流组件配置信息；

根据所述配置信息生成待展示页面的超文本标记语言HTML脚本，根据所述HTML脚本渲染并展示所述待展示页面；

当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，根据所述待展示页面的HTML脚本获取流程数据；

调用预先封装的数据传输接口，由所述表单引擎将获取到的所述流程数据传输给所述工作流引擎；

控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作。

本发明的实施例还提供了一种可视化低代码开发平台，包括：表单引擎和工作流引擎；

所述表单引擎包括：可视化表单设计器、运行时表单渲染器和数据模型设计器；

所述可视化表单设计器用于提供可视化界面供用户以拖拽的方式绘制待展示页面；

所述运行时表单渲染器用于根据所述表单设计器生成的待展示页面的超文本标记语言HTML脚本对待展示页面进行渲染并展示；

所述数据模型设计器用于提供可视化界面供用户根据业务需求和使用场景创建数据库表，并确定所述数据库表对应的数据库结构，根据所述数据库结构中的字段创建至少包括所述字段的数据模型；

所述工作流引擎用于创建流程，并通过预先封装的数据传输接口从所述表单引擎获取流程数据，根据所述流程数据实现所述待展示页面中的工作流组件对应的流程操作，所述流程数据由所述表单引擎调用预先封装的数据获取接口，从所述待展示页面的HTML脚本中获取。

本发明的实施例还提供了一种表单和工作流的交互设备，部署有上文所述的可视化低代码开发平台，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如上文所述的表单和工作流的交互方法。

本发明的实施例还提供了一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时实现如上文所述的表单和工作流的交互方法。

本发明实施例提供的表单和工作流的交互方法、开发平台、设备及存储介质，通过可视化界面为使用者提供了一种拖拽的方式来开发待展示页面，在使用可视化低代码开发平台的过程中，通过从表单引擎提供的可视化界面获取用户配置的配置信息，具体包括工作流组件配置信息，然后根据获取到的配置信息自动生成待展示页面的超文本标记语言HTML脚本，从而根据HTML脚本对待展示页面进行渲染并展示，实现了待展示页面的快速开发。

除此之外，在基于可视化低代码开发平台，按照上述方式得到待展示页面之后，通过监测待展示页面中工作流组件的使用情况，当在待展示页面中监测到对工作流组件的操作指令时，通过调用预先封装的数据获取接口从待展示页面的HTML脚本中获取工作流引擎所需的流程数据，并调用预先封装的数据传输接口，在无需使用者手动编写代码将表单引擎和工作流引擎进行绑定的情况下，便可以由表单引擎直接将流程数据传输给工作流引擎，再控制工作流引擎根据流程数据实现对应的流程操作，使得表单和工作流的交互能够零代码实现。

此外，在通过预先封装的数据获取接口获取流程数据时，不管当前待展示页面中的表单与对应的工作流的业务功能，而是将待展示页面收集到的数据看作一个整体直接作为工作流引擎所需的流程数据，因此只需一个数据获取接口便可以适应于不同业务功能的表单和流程之间的交互，从而在封装数据获取接口时，开发人员无需根据不同的业务功能，单独封装一个数据获取接口，即开发人员无需重复写大量类似代码，从而大大降低了开发人员的工作量，进而提升了开发效率。

此外，由于这种方式无需使用者进行代码的重复编译，相关组件开发完成后整个过程只需通过拖拽以及在可视化界面简单配置的配置信息便可实现交互，因此无需使用者掌握相关开发技术，从而大大降低了对使用者技术能力的门槛要求。

另外，所述工作流组件为流程发起组件，所述流程数据包括业务数据和流程标识数据，所述业务数据为在所述待展示页面上填写的数据，所述流程标识数据为用户配置的工作流组件配置信息；所述控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作，包括：控制所述工作流引擎调用数据存储接口将所述业务数据保存到预先构建的数据库；控制所述工作流引擎根据所述业务数据和所述流程标识数据调用流程接口实现所述工作流组件对应的流程操作。本发明的实施例在工作流组件为流程发起组件时，设置工作流引擎实现流程操作的同时，调用预先封装的数据存储接口将业务数据保存到预先构建的数据库，从而既实现了工作流引擎直接根据表单引擎传输的流程数据实现流程操作，又可以保证通过待展示页面收集到的数据能够安全入库，不会丢失；此外通过预先封装与流程、事件相关的工作流组件，如上所说的流程发起组件，从而在后续使用时，只需在表单引擎提供的可视化界面配置配置信息，便可以实现流程的开发，而无需用户在代码形式设计好的待展示页面上再次进行工作流的开发，以及待展示页面与工作流的绑定工作，从而进一步降低了实现表单和工作流交互过程中用户的工作量，使得开发效率显著提升。

另外，所述工作流组件包括提交按钮；所述当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，包括：监测所述工作流组件中的所述提交按钮是否被选中；若所述工作流组件中的所述提交按钮被选中，则确定在所述待展示页面中监测到对所述工作流组件的操作指令；所述控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作，包括：控制所述工作流引擎调用数据存储接口将所述业务数据保存到预先构建的数据库；控制所述工作流引擎根据所述业务数据和所述流程标识数据调用流程发起接口生成对应的流程实例。由于在实际应用中，在工作流组件为流程发起组件时，流程发起组件会包括多个对应不同操作的按钮，比如保存按钮、提交按钮、拒绝按钮等，因而为了快速确定用户是否做出了对待展示页面中流程发起组件的操作指令，只需监测流程发起组件中包括的不同操作的按钮即可，故而在流程发起组件中包括的操作按钮是提交按钮时，只需监测工作流组件中的提交按钮是否被选中，如果被选中，则可以直接确定在待展示页面中监测到了对工作流组件的操作指令，通过这种针对性的监测方式，可以快速、准确的确定用户对工作流组件的操作，从而保证了后续表单引擎与工作流引擎的交互操作能够及时进行；此外，通过为流程发起组件中的不同功能按钮设置对应的功能代码，从而在监测到用户对相应功能按钮的选中操作时，直接调用为该功能按钮设置的功能代码即可完成相应功能，而无需用户手动撰写对应功能按钮的功能代码，进一步简化了开发方式，从而提高了开发效率。同时，由于流程发起组件中直接集成了不同操作功能的按钮，在将流程发起组件拖拽到表单引提高的可视化界面中，通过对流程发起组件的一次配置，便可以实现对流程发起组件中所有功能按钮的配置，从而无需用户逐一对每一个功能按钮进行单独配置，进一步降低了用户的工作量，提高了开发效率。

另外，所述工作流组件包括保存按钮；所述当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，包括：监测所述工作流组件中的所述保存按钮是否被选中；若所述工作流组件中的所述保存按钮被选中，则确定在所述待展示页面中监测到对所述工作流组件的操作指令；所述控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作，包括：仅控制所述工作流引擎调用数据存储接口将所述业务数据保存到预先构建的数据库，不控制所述工作流引擎根据所述业务数据和所述流程标识数据调用流程发起接口生成对应的流程实例。本发明的实施例，在流程发起组件中包括的操作按钮是保存按钮时，通过监测保存按钮是否被选中，如果被选中，在确定在待展示页面中监测到了对工作流组件的操作指令，表单引擎将收集的流程数据发送给工作流引擎后，控制工作流引擎仅执行将表单收集到的数据保存到数据库的操作，从而兼顾了用户录入的信息不会丢失，又可以避免发起无效的流程操作。同样，通过为流程发起组件中的不同功能按钮设置对应的功能代码，从而在监测到用户对相应功能按钮的选中操作时，直接调用为该功能按钮设置的功能代码即可完成相应功能，而无需用户手动撰写对应功能按钮的功能代码，进一步简化了开发方式，从而提高了开发效率。同时，由于流程发起组件中直接集成了不同操作功能的按钮，在将流程发起组件拖拽到表单引提高的可视化界面中，通过对流程发起组件的一次配置，便可以实现对流程发起组件中所有功能按钮的配置，从而无需用户逐一对每一个功能按钮进行单独配置，进一步降低了用户的工作量，提高了开发效率。

另外，在所述工作流组件为流程发起组件时，所述工作流组件配置信息包括为所述流程发起组件配置的流程信息，所述流程信息包括所述流程发起组件对应的具体流程类型和所述流程类型中的具体流程名称。本发明的实施例，通过为流程发起组件配置对应的流程类型和具体流程名称，从而可以方便工作流引擎根据流程数据实现对应的流程操作时，能够准确的发起流程名称对应的具体流程，以生成流程实例；此外，为流程发起组件配置的流程类型和流程名称在表单引擎提供的可视化界面配置，使得整个配置过程无需用户手写代码，并且通过这种在前端展示的可视化界面进行配置的方式，可以在配置的过程中看到配置后的效果画面，进而保证最终得到的待展示页面的整体展示效果。

另外，所述工作流组件为流程处理组件；所述当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，根据所述待展示页面的HTML脚本获取流程数据，包括：当在所述待展示页面中检测到所述流程处理组件时，确定在所述待展示页面中监测到了对所述流程处理组件的操作指令；调用预先封装的数据获取接口，由所述表单引擎获取所述待展示页面的统一资源定位系统URL；根据所述URL确定流程定义参数，得到所述流程数据，所述流程定义参数至少包括与所述流程处理组件对应的流程实例标识、流程步骤实例标识和流程处理人实例标识；所述控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作，包括：控制所述工作流引擎调用预先封装的流程处理组件初始化接口，根据所述流程定义参数确定所述待展示页面中所述流程处理组件对应的流程配置信息，所述流程配置信息由用户预先利用工作流引擎配置；控制所述工作流引擎根据所述流程配置信息对所述待展示页面中的所述流程处理组件进行渲染并展示。本发明的实施例，在工作流组件为流程处理组件时，通过从待展示页面对应的URL中获取流程处理组件对应的流程实例标识、流程步骤实例标识和流程处理人实例标识，并通过预先封装的数据传输接口，由表单引擎将获取到上述流程数据直接传输给工作流引擎，使得工作流引擎能够基于这些流程参数直接对表单引擎绘制的待展示页面中的流程处理组件进行渲染和展示，整个过程无需使用者手动为每个流程数据对应的页面编写代码，即对于使用者而言无需编写任何代码便可以实现工作流引擎对流程组件的渲染和展示；此外通过预先封装与流程、事件相关的工作流组件，如上所说的流程处理组件，从而在后续使用时，只需在表单引擎提供的可视化界面配置配置信息，便可以实现具体流程的处理操作，而无需用户在代码形式设计好的待展示页面上再次进行工作流的开发，以及待展示页面与工作流的绑定工作，从而进一步降低了实现表单和工作流交互过程中用户的工作量，使得开发效率显著提升。

另外，所述工作流组件为流程历史组件；所述当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，根据所述待展示页面的HTML脚本获取流程数据，包括：当在所述待展示页面中检测到所述流程历史组件时，确定在所述待展示页面中监测到了对所述流程历史组件的操作指令；调用预先封装的数据获取接口，由所述表单引擎获取所述待展示页面的统一资源定位系统URL；根据所述URL确定流程定义参数，得到所述流程数据，所述流程定义参数至少包括与所述流程历史组件对应的流程实例标识；所述控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作，包括：控制所述工作流引擎调用预先封装的流程历史组件初始化接口，根据所述流程定义参数确定所述待展示页面中所述流程历史组件对应的历史流程信息，所述历史流程信息为流程流转过程中产生的历史记录；控制所述工作流引擎根据所述历史流程信息对所述待展示页面中的所述流程历史组件进行渲染并展示。本发明的实施例，在工作流组件为流程历史组件时，通过从待展示页面对应的URL中获取流程历史组件对应的流程实例标识，并通过预先封装的数据传输接口，由表单引擎将获取到上述流程数据直接传输给工作流引擎，使得工作流引擎能够基于这些流程参数直接对表单引擎绘制的待展示页面中的流程历史组件进行渲染和展示，整个过程无需使用者手动为每个流程数据对应的页面编写代码，即对于使用者而言无需编写任何代码便可以实现工作流引擎对流程组件的渲染和展示；此外通过预先封装与流程、事件相关的工作流组件，如上所说的流程历史组件，从而在后续使用时，只需在表单引擎提供的可视化界面配置配置信息，并可以实现获取相关流程的历史信息进行展示，而无需用户在代码形式设计好的待展示页面上再次进行工作流的开发，以及待展示页面与工作流的绑定工作，从而进一步降低了实现表单和工作流交互过程中用户的工作量，使得开发效率显著提升。

附图说明

一个或多个实施例通过与之对应的附图中的图片进行示例性说明，这些示例性说明并不构成对实施例的限定，附图中具有相同参考数字标号的元件表示为类似的元件，除非有特别申明，附图中的图不构成比例限制。

图1是本发明实施例提供的表单和工作流的交互方法的流程图；

图2是针对图1所示的表单和工作流的交互方法中工作流组件为流程发起组件时的流程图；

图3是针对图1所示的表单和工作流的交互方法中工作流组件为流程处理组件时的流程图；

图4是针对图1所示的表单和工作流的交互方法中工作流组件为流程历史组件时的流程图；

图5是本发明实施例提供的可视化低代码开发平台的结构示意图；

图6是针对图5所示的可视化低代码开发平台中表单引擎中的可视化表单设计器对应的可视化界面的示意图；

图7是针对图6所述的可视化低代码开发平台中以自定义控件方式引入组件时可视化表单设计器对应的可视化界面的示意图；

图8是本发明实施例提供的表单和工作流的交互设备的结构示意图。

具体实施方式

本发明实施例中术语“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

本发明实施例中术语“多个”是指两个或两个以上，其它量词与之类似。

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的各实施例进行详细的阐述。然而，本领域的普通技术人员可以理解，在本发明各实施例中，为了使读者更好地理解本发明而提出了许多技术细节。但是，即使没有这些技术细节和基于以下各实施例的种种变化和修改，也可以实现本发明所要求保护的技术方案。以下各个实施例的划分是为了描述方便，不应对本发明的具体实现方式构成任何限定，各个实施例在不矛盾的前提下可以相互结合相互引用。

参见图1，图1是本发明实施例提供的表单和工作流的交互方法的流程图，在本实施例中，该方法主要应用于具备表单引擎和工作流引擎的可视化低代码开发平台。

可理解的，在一个例子中，所述可视化低代码开发平台是部署于表单和工作流的交互设备。

可理解的，在一个例子中，所述表单和工作流的交互设备，可以是如笔记本电脑、台式机等的客户端设备，此处不再一一列举，本实施例对此也不做限制。

如图1所示，本实施例提供的表单和工作流的交互方法，包括以下步骤：

步骤101，获取用户利用表单引擎提供的可视化界面配置的配置信息。

需要说明的是，在一个例子中，表单引擎包括了可视化表单设计器，而可视化表单设计器为用户提供了可视化的操作界面。

具体的，可视化表单设计器包括但不限于控件区、内容区、属性区和状态栏。

其中，控件区以可视化界面展示有开发人员预先封装好的组件，如基础组件、高级组件、布局组件、数据可视图表ECharts组件、复用组件和工作流组件等，此处不再一一列举，本实施例对此也不做具体限制；内容区为可视化表单设计器的主体，采用所见即所得的方式，可以直观看到用户从控件区拖拽放置在内容区的组件效果，也可以创建子页面，并通过按钮等绑定变成弹出效果；属性区提供可视化界面供使用者针对拖拽到内容区展示的组件进行属性配置，如单纯针对组件本身的属性配置、针对组件所在表单的属性配置，以及每一组件对应的操作，如页面跳转、刷新、保存等的属性配置；状态栏用于显示用户当前绘制的待展示页面中组件的嵌套关系。

此外，在一个例子中，上述所说的基础组件，包括但不限于：文本展示框、按钮、单行文本输入框、多行文本输入框、计算器、金额、单选框、多选框、时间选择器、日期选择器、评分、颜色选择器、下拉选择框、开关、滑道等。

相应地，上述所说的高级组件，包括但不限于：表格、选人控件、上传、下载、自定义、编辑器等。

相应地，上述所说的布局组件，具体是用于美化表单，实现绘制的表单规范布局的，这些布局组件包括但不限于：栅格布局、标签页、侧边容器、基本布局等。

相应地，ECharts组件，具体是用于将数据变成直观的图表展示的，这些ECharts组件包括但不限于：复合图表、折线面积图、柱状图、饼图、地图等。

相应地，上述所说的复用组件是指系统业务上经常用到的且能够被重复使用的组件，一个复用组件可以是使用者根据其实际业务需求预先开发的在业务上经常使用的基础/高级组件，也可以是由多个基础/高级组件，甚至布局组件和ECharts组件构成的一个组件集合，该组件集合中的组件相互配合共同实现一个业务，如证券复用组件，实现的就是与证券相关的业务，新闻资讯复用组件实现的就是与新闻资讯相关的业务，即一个复用组件便可以对应一个待展示页面或一个待展示页面的部分页面。这样拖拽一个复用组件，并配置一次属性，就可以实现一系列相关的功能，从而无需为待展示页面中的相同内容进行重复配置，提高开发效率。

相应地，上述所说的工作流组件是指具备工作流特性的组件，比如流程发起组件、流程处理组件、流程历史组件等。

通过上述介绍可知，本实施例中获取到的用户利用表单引擎提供的可视化界面配置的配置信息，实质就是用户通过拖拽的方式从控件区根据需求选择封装好的组件并进行布局排列的信息，以及通过属性区为拖拽到的内容区的组件配置的信息。

应当理解的，由于本实施例是为了实现表单和工作流的交互，因而为了实现表单和工作流的交互，开发人员可以根据不同用户的业务需求和使用场景，提前封装与工作流对应的工作流组件，然后将这些工作流组件展示在控件区供用户选择。

相应地，在实现的是表单和工作流的交互时，如果识别到表单引擎提供的可视化界面，具体为可视化表单设计器的内容区中展示的组件为工作流组件时，则上述所说的获取用户利用表单引擎提供的可视化界面配置的配置信息，即为获取所述工作流组件的工作流组件配置信息。

此外，应当理解的，如果内容区中还展示了其他的组件，则获取的配置信息还包括其他组件对应的配置信息，即获取到的用于生成待展示页面的超文本标记语言HTML脚本的配置信息，是内容区展示的所有组件对应的配置信息。

此外，需要说明的是，上述所说的配置信息，包括了用户通过可视化表单设计器的属性区为内容区展示的组件配置的属性信息，还包括被拖拽到内容区的组件对应的布局信息。

步骤102，根据所述配置信息生成待展示页面的超文本标记语言HTML脚本，根据所述HTML脚本渲染并展示所述待展示页面。

可理解的，控件区展示的每一个预先封装好的组件，对于用户而言实质是一个可视化组件，可以理解为可视化的图标、图片等，但对于该开发平台而言，后台获取到的实质是该可视化组件对应的一段功能代码。

以工作流组件为例，用户通过属性区为拖拽到内容区展示的工作流组件配置配置信息的过程实质就是通过可视化界面对工作流组件对应的后台功能代码进行修改的过程。因此，根据获取到的配置信息中的布局信息和属性信息，便可以生成用户想要获得的待展示页面的超文本标记语言(HyperText Markup Language，HTML)脚本。

相应地，在生成待展示页面的HTML脚本后，如果用户触发了可视化表单设计器提供的用于发布待展示页面的相应按钮后，便可以根据得到的HTML脚本渲染并展示待展示页面。

步骤103，当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，根据所述待展示页面的HTML脚本获取流程数据。

具体的说，在一个例子中，生成的待展示页面中既包括了用于收集或展示数据的组件，如文本输入框、表格等(为了便于区分以下称之为业务组件，业务组件具体是指除工作流组件以外的组件)，又包括的了工作流组件的情况，生成的HTML脚本中具体是将业务组件对应的所有表单参数隶属于同一个全局变量比如定义为formData下，并将formData直接赋值给工作流组件。这样在待展示页面中监测到对工作流组件的操作指令时，直接调用预先封装的数据获取接口，从待展示页面的HTML脚本中获取formData便可以得到需要表单引擎传输给工作流引擎的流程数据。

以可视化低代码开发平台中的表单引擎是基于JAVA编程语言实现的为例，则能够由可视化低代码开发平台中的表单引擎调用的数据获取接口可以是通过Java Script编程语言编译的JS脚本。

基于这种方式，不论待展示页面中的业务组件是哪种样式，包括了多少个表单参数，通过这一个数据获取接口就可以获取到不同待展示页面收集到的不同数据，从而无需用户手动为每一个不同的待展示页面编写一个获取流程数据的代码片段，明显简化了用户操作，并且整个过程对于用户而言相当于零代码便可实现。

此外，应当理解的是，上述示例仅是为了更好的理解本实施例的技术方案而列举的示例，不作为对本实施例的唯一限制。

步骤104，调用预先封装的数据传输接口，由所述表单引擎将获取到的所述流程数据传输给所述工作流引擎。

步骤105，控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作。

本实施例提供的表单和工作流的交互方法，通过可视化界面为使用者提供了一种拖拽的方式来开发待展示页面，在使用可视化低代码开发平台的过程中，通过从表单引擎提供的可视化界面获取用户配置的配置信息，具体包括工作流组件配置信息，然后根据获取到的配置信息自动生成待展示页面的超文本标记语言HTML脚本，从而根据HTML脚本对待展示页面进行渲染并展示，实现了待展示页面的快速开发。

除此之外，在基于可视化低代码开发平台，按照上述方式得到待展示页面之后，通过监测待展示页面中工作流组件的使用情况，当在待展示页面中监测到对工作流组件的操作指令时，通过调用预先封装的数据获取接口从待展示页面的HTML脚本中获取工作流引擎所需的流程数据，并调用预先封装的数据传输接口，在无需使用者手动编写代码将表单引擎和工作流引擎进行绑定的情况下，便可以由表单引擎直接将流程数据传输给工作流引擎，在将流程数据传输给工作流引擎后，便可以控制工作流引擎根据流程数据实现对应的流程操作，基于这种方式，使得表单和工作流的交互能够零代码实现。

此外，由于这种方式无需使用者进行代码的重复编译，相关组件开发完成后整个过程只需通过拖拽以及在可视化界面简单配置的配置信息便可以实现交互，因此无需使用者掌握相关开发技术，从而大大降低了对使用者技术能力的门槛要求。

参见图2，图2是本发明实施例提供的表单和工作流的交互方法的流程图，工作流组件具体为流程发起组件。

如图2所示，本实施例提供的表单和工作流的交互方法，包括以下步骤：

步骤201，获取用户利用表单引擎提供的可视化界面配置的配置信息。

步骤202，根据所述配置信息生成待展示页面的超文本标记语言HTML脚本，根据所述HTML脚本渲染并展示所述待展示页面。

不难发现，本实施例中的步骤201和步骤202，与图1对应的表单和工作流的交互方法的实施例中的步骤101和步骤102大致相同，此处不再赘述。

步骤203，当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，根据所述待展示页面的HTML脚本获取流程数据，所述流程数据包括业务数据和流程标识数据。

具体的说，在工作流组件为流程发起组件时，通过预先封装的数据接口从HTML脚本中获取到流程数据不仅包括待展示页面上填写的数据，即上述所说的通过待展示页面中的表单收集到的formData(后续称之为业务数据)，还需要包括标识流程发起组件的流程标识数据。

需要说明的是，在一个例子中，流程标识数据具体是由用户通过可视化表单设计器为工作流组件配置的工作流组件配置信息。

可理解的，在一个例子中，在工作流组件为流程发起组件时，流程标识数据具体包括流程发起组件对应的具体流程类型和具体的流程名称。

此外，在一个例子中，为了便于表单引擎识别待展示页面不同位置展示的业务组件、工作流组件，这些组件对应的配置信息中还会包括能标识其唯一性的标识号。

关于标识每一个组件唯一性的标识号，在一个例子中，可以由开发人员在封装这些组件时，根据预设的命名逻辑设置，本实施例对此不做限制。

步骤204，调用预先封装的数据传输接口，由所述表单引擎将获取到的所述业务数据和所述流程标识数据传输给所述工作流引擎。

可理解的，由于在工作流组件为流程发起组件时，获取到的流程数据既包括了业务数据，也包括了流程标识数据，因而为了通过调用一次数据传输接口便将这两种数据传输给工作流引擎，在一个例子中，可以按照预设封装格式，将业务数据和流程标识数据进行封装，进而得到数据传输接口能传输的流程数据对应的数据格式，从而通过调用一次数据传输接口，便可以由表单引擎将上述两种数据传输给工作流引擎。

相应地，工作流引擎在接收到表单引擎通过预先封装的数据传输接口传输的流程数据后，会按照约定的解析方法对流程数据进行解析，进而得到业务数据和流程标识数据。

可理解的，在一个例子中，传输的流程数据可以封装为预设格式的JSON格式。

相应地，工作流引擎在接收到JSON格式的流程数据后，基于约定的解析字段对JSON格式的流程数据进行解析，便可以获取到相应字段对应的业务数据和流程标识数据。

比如，约定formData字段对应业务数据，约定formData.sysCode对应流程标识数据。则工作流引擎接收到的JSON格式的流程数据的格式可以如下所示：

{“formData”：“业务数据”，“sysCode”：“流程标识数据”}

应当理解的是，上述JSON格式的流程数据中出现的“业务数据”和“流程标识数据”，在具体实现中实质为具体的业务数据和流程标识数据。

步骤205，控制所述工作流引擎调用数据存储接口将所述业务数据保存到预先构建的数据库。

具体的，在一个例子中，工作流引擎调用数据存储接口将业务数据保存到预先构建的数据库时，可以采用键值对的方式进行保存，即将业务数据对应的具体字段作为“key”，将该字段对应的具体数据信息作为“value”存储到数据库。

比如，业务数据为{“投资人”：“张三”，“证券代码”：“123”，“投资时间”：“2021-04-14”，“投资价格”：“5000”}，按照上述所说的键值对存储方式，确定的key分别为：投资人、证券代码、投资时间和投资价格，与这些key分别对应的value分别为：张三、123、2021-04-14和5000。

相应地，基于确定的上述key和value，存储到数据库，该业务数据的形式可以如表1所示：

表1以键值对形式存储到数据库中的业务数据的具体形式

key	value
		投资人	张三
证券代码	123
		投资时间	2021-04-14
投资价格	5000

此外，在另一个例子中，确定的key可以根据预先构建的数据模型中提供的字段和字段的描述信息。

比如，数据模型中规定了用investName表示投资人，用stockCode表示证券代码，用investTime表示投资时间，用investPrice表示投资价格，则表1中存储的业务数据可以变形为表2所示的样式：

表2以键值对形式存储到数据库中的业务数据的具体形式

key	value
		investName	张三
stockCode	123
		investTime	2021-04-14
investPrice	5000

应当理解的是，上述示例仅是为了更好的理解本实施例的技术方案而列举的示例，不作为对本实施例的唯一限制。

相应地，关于上述所说的预先封装的数据存储接口，开发人员可以根据工作流引擎支持的编程语言和实际业务需求编译封装，本实施例对此不做限制。

步骤206，控制所述工作流引擎根据所述业务数据和所述流程标识数据调用流程接口实现所述工作流组件对应的流程操作。

需要说明的是，在一个例子中，在工作流组件为流程发起组件时，流程发起组件会包括多个对应不同操作的按钮，比如保存按钮、提交按钮、拒绝按钮等，因而为了快速确定用户是否做出了对待展示页面中流程发起组件的操作指令，只需监测流程发起组件中包括的不同操作的按钮即可。

比如说，在流程发起组件中包括的操作按钮是提交按钮时，只需监测工作流组件中的提交按钮是否被选中，如果被选中，则可以直接确定在待展示页面中监测到了对工作流组件的操作指令。

同时，在被选中的按钮是提交按钮时，控制工作流引擎根据流程数据实现工作流组件对应的流程操作，具体为执行上述步骤205中所说的控制工作流引擎调用数据存储接口将业务数据保存到预先构建的数据库的操作，以及步骤206中控制工作流引擎根据业务数据和流程标识数据调用流程接口实现工作流组件对应的流程操作。

此外，需要说明的是，在被选中的按钮是提交按钮时，上述步骤206中的操作，具体为控制工作流引擎根据业务数据和流程标识数据调用流程发起接口生成对应的流程实例。即在工作流组件是流程发起组件，具体实现的流程操作为，发起流程名称对应的具体流程，以生成流程实例。

还比如说，在流程发起组件中包括的操作按钮是保存按钮时，只需监测工作流组件中的保存按钮是否被选中，如果被选中，则确定在待展示页面中监测到对工作流组件的操作指令。

此外，值得一提的是，在所述工作流组件为流程发起组件时，所述工作流组件配置信息具体包括用户通过可视化表单设计器的属性区为所述流程发起组件配置的流程信息。

通过上述描述可知，为流程发起组件配置的流程信息包括流程发起组件对应的具体流程类型和具体流程名称。通过这种方式，可以方便工作流引擎根据流程数据实现对应的流程操作时，能够准确的发起流程名称对应的具体流程，以生成流程实例。

此外，为流程发起组件配置的流程类型和流程名称在表单引擎提供的可视化界面配置，使得整个配置过程无需用户手写代码，并且通过这种在前端展示的可视化界面进行配置的方式，可以在配置的过程中看到配置后的效果画面，进而保证最终得到的待展示页面的整体展示效果。

在配置的过程中看到配置后的效果画面，进而保证最终得到的待展示页面的整体展示效果。

此外，值得一提的是，由于在实际应用中，针对流程的操作中，可能存在用户仅在待展示页面中的表单中完成了部分相关信息的录入，当前操作便被搁浅的情况，为了避免已经录入的信息丢失，流程发起组件中通常会提供保存按钮，以便用户通过选择保存按钮对当前录入的信息进行保存，但是选中保存按钮的操作，仅仅需要工作流引擎对表单传输来的业务数据即用户当前录入的数据进行保存，并不会涉及后续的流程操作。因而，在监测到工作流组件中的保存按钮被选中，表单引擎将收集的流程数据发送给工作流引擎后，上述所说的控制工作流引擎根据流程数据实现工作流组件对应的流程操作，实质上仅仅是控制工作流引擎执行将表单收集到的数据保存到数据库的操作，而不控制工作流引擎根据业务数据和流程标识数据调用流程发起接口生成对应的流程实例，通过这种方式既兼顾了用户录入的信息不会丢失，又可以避免发起无效的流程操作。

可理解的，在实际应用中，为了尽可能提升开发效率，降低使用者的工作量，可以针对工作流组件中实现不同操作功能的按钮，预先封装对应的功能代码，从而在监测到用户对相应按钮的选中操作时，能够直接根据对应的功能代码执行相应的操作，而无需用户收到编写代码实现。

此外，应当理解的是，上述示例仅是为了更好的理解本实施例的技术方案而列举的示例，不作为对本实施例的唯一限制。

由此，本实施例提供的表单和工作流的交互方法，在工作流组件为流程发起组件时，设置工作流引擎实现流程操作的同时，调用预先封装的数据存储接口将业务数据保存到预先构建的数据库，从而既实现了工作流引擎直接根据表单引擎传输的流程数据实现流程操作，又可以保证通过待展示页面收集到的数据能够安全入库，不会丢失。

除此之外，通过这种针对性的监测方式，可以快速、准确的确定用户对工作流组件的操作，从而保证了后续表单引擎与工作流引擎的交互操作能够及时进行。

参见图3，图3是本发明实施例提供的表单和工作流的交互方法的流程图，工作流组件具体为流程处理组件。

如图3所示，本实施例提供的表单和工作流的交互方法，包括以下步骤：

步骤301，获取用户利用表单引擎提供的可视化界面配置的配置信息。

步骤302，根据所述配置信息生成待展示页面的超文本标记语言HTML脚本，根据所述HTML脚本渲染并展示所述待展示页面。

不难发现，本实施例中的步骤301和步骤302，与图1对应的表单和工作流的交互方法的实施例中的步骤101和步骤102大致相同，此处不再赘述。

步骤303，当在所述待展示页面中检测到所述流程处理组件时，确定在所述待展示页面中监测到了对所述流程处理组件的操作指令。

具体的说，在工作流组件为流程处理组件时，上述所说的在待展示页面中监测到对工作流组件的操作指令，实质为在待展示页面中检测到流程处理组件，便确定在待展示页面中监测到了对流程处理组件的操作指令，即在前端根据待展示页面的HTML脚本渲染并展示待展示页面时，一旦渲染到流程处理组件，则认为在待展示页面中监测到对工作流组件的操作指令，而不是通过监测用户是否选中了流程处理组件中的任意按钮。

步骤304，调用预先封装的数据获取接口，由所述表单引擎获取所述待展示页面的统一资源定位系统URL。

步骤305，根据所述URL确定流程定义参数，得到所述流程数据，所述流程数据包括流程实例标识、流程步骤实例标识和流程处理人实例标识。

具体的说，在工作流组件为流程处理组件时，需要由表单引擎传输给工作流引擎的流程数据至少需要包括与流程处理组件对应的流程实例标识、流程步骤实例标识和流程处理人实例标识的流程定义参数，以便工作流引擎在得到携带有上述流程定义参数的流程数据时，能够根据流程实例标识快速定位对应的流程实例，然后根据流程步骤实例标识定位当前流程实例中的具体步骤，根据流程处理人实例标识定位当前流程步骤的处理人，进而根据流程定义参数从服务器获取到流程处理组件对应的流程配置信息。

步骤306，调用预先封装的数据传输接口，由所述表单引擎将获取到的流程实例标识、流程步骤实例标识和流程处理人实例标识传输给所述工作流引擎。

具体的说，在本实施例中调用预先封装的数据传输接口，由表单引擎传输给工作流引擎的流程数据中至少包括了上述从待展示页面的URL中提取出的与流程处理组件对应的流程实例标识、流程步骤实例标识和流程处理人实例标识的流程定义参数。

步骤307，控制所述工作流引擎调用预先封装的流程处理组件初始化接口，根据所述流程定义参数确定所述待展示页面中所述流程处理组件对应的流程配置信息。

具体的说，在本实施例中，工作流引擎调用预先封装的流程处理组件初始接口，根据流程定义参数确定的流程配置信息，具体为用户预先利用工作流引擎提供的可视化界面配置的。

步骤308，控制所述工作流引擎根据所述流程配置信息对所述待展示页面中的所述流程处理组件进行渲染并展示。

具体的说，本实施例中工作流引擎根据流程配置信息对待展示页面中的流程处理组件进行的渲染和展示，具体是指工作流引擎根据表单引擎传输来的流程定义参数，调用预先封装的流程处理组件初始接口，从数据库获取对应的流程配置信息，然后根据获取到的流程配置信息在后台进行处理，进而得到对应的处理结果，然后将处理结果返回给前端界面，在前端界面根据处理结果对流程处理组件进行渲染并展示。

本实施例提供的表单和工作流的交互方法，在工作流组件为流程处理组件时，通过从待展示页面对应的URL中获取流程处理组件对应的流程实例标识、流程步骤实例标识和流程处理人实例标识，并通过预先封装的数据传输接口，由表单引擎将获取到上述流程数据直接传输给工作流引擎，使得工作流引擎能够基于这些流程参数直接对表单引擎绘制的待展示页面中的流程处理组件进行渲染和展示，整个过程无需使用者手动为每个流程数据对应的页面编写代码，即对于使用者而言无需编写任何代码便可以实现工作流引擎对流程组件的渲染和展示。

参见图4，图4是本发明实施例提供的表单和工作流的交互方法的流程图，工作流组件具体为流程历史组件。

如图4所示，本实施例提供的表单和工作流的交互方法，包括以下步骤：

步骤401，获取用户利用表单引擎提供的可视化界面配置的配置信息。

步骤402，根据所述配置信息生成待展示页面的超文本标记语言HTML脚本，根据所述HTML脚本渲染并展示所述待展示页面。

不难发现，本实施例中的步骤401和步骤402，与图1对应的表单和工作流的交互方法的实施例中的步骤101和步骤102大致相同，此处不再赘述。

步骤403，当在所述待展示页面中检测到所述流程历史组件时，确定在所述待展示页面中监测到了对所述流程历史组件的操作指令。

具体的说，在工作流组件为流程历史组件时，上述所说的在待展示页面中监测到对工作流组件的操作指令，实质为在待展示页面中检测到流程历史组件，便确定在待展示页面中监测到了对流程处理组件的操作指令，即在前端根据待展示页面的HTML脚本渲染并展示待展示页面时，一旦渲染到流程历史组件，则认为在待展示页面中监测到对工作流组件的操作指令，而不是通过监测用户是否选中了流程历史组件中的任意按钮。

步骤404，调用预先封装的数据获取接口，由所述表单引擎获取所述待展示页面的统一资源定位系统URL。

步骤405，根据所述URL确定流程定义参数，得到所述流程数据。

具体的说，在工作流组件为流程历史组件时，需要由表单引擎传输给工作流引擎的流程数据至少需要包括与流程历史组件对应的流程实例标识的流程定义参数，以便工作流引擎在得到携带有上述流程定义参数的流程数据时，能够根据流程实例标识快速定位对应的流程实例，进而定位到流程历史组件对应的历史流程信息。

需要说明的是，流程历史组件是用来展示流程执行过程中产生的信息的，因而从URL提取的流程定义参数至少包括能够定位整个流程的流程实例标识即可。

步骤406，调用预先封装的数据传输接口，由所述表单引擎将获取到的所述流程数据传输给所述工作流引擎。

步骤407，控制所述工作流引擎调用预先封装的流程历史组件初始化接口，根据所述流程定义参数确定所述待展示页面中所述流程历史组件对应的历史流程信息。

具体的说，在本实施例中，工作流引擎调用预先封装的流程历史组件初始接口，根据流程定义参数确定的历史流程信息，具体为流程流转过程中产生的历史记录。

步骤408，控制所述工作流引擎根据所述历史流程信息对所述待展示页面中的所述流程历史组件进行渲染并展示。

可理解的，关于对流程历史组件进行的渲染和展示，与对流程处理组件进行的渲染和展示类似，此处不再赘述。

本实施例提供的表单和工作流的交互方法，在工作流组件为流程历史组件时，通过从待展示页面对应的URL中获取流程历史组件对应的流程实例标识，并通过预先封装的数据传输接口，由表单引擎将获取到上述流程数据直接传输给工作流引擎，使得工作流引擎能够基于这些流程参数直接对表单引擎绘制的待展示页面中的流程历史组件进行渲染和展示，整个过程无需使用者手动为每个流程数据对应的页面编写代码，即对于使用者而言无需编写任何代码便可以实现工作流引擎对流程组件的渲染和展示。

参见图5，图5是本发明实施例提供的可视化低代码开发平台的结构示意图。

如图5所示，可视化低代码开发平台主要包括表单引擎501和工作流引擎502这两个功能结构，即本实施例提供的可视化低代码开发平台将实现表单开发的表单引擎和实现工作流开发的工作流引擎整合到了一起。

在一个例子中，上述表单引擎501包括可视化表单设计器、运行时表单渲染器和数据模型设计器这三个功能结构。

其中，可视化表单设计器用于提供可视化界面供用户以拖拽的方式绘制待展示页面；运行时表单渲染器用于根据所述表单设计器生成的待展示页面的超文本标记语言HTML脚本对待展示页面进行渲染并展示；数据模型设计器用于提供可视化界面供用户根据业务需求和使用场景创建数据库表，并确定所述数据库表对应的数据库结构，根据所述数据库结构中的字段创建至少包括所述字段的数据模型。

为了更好的理解本实施例中所说的可视化表单设计器，以下结合图6进行说明：

如图6所示，可视化表单设计器501-1包括控件区501-11、内容区501-12、属性区501-13和状态栏501-14。

其中，控件区501-11以可视化界面展示有开发人员预先封装好的组件，如基础组件、高级组件、布局组件、数据可视图表ECharts组件、复用组件和工作流组件等，此处不再一一列举，本实施例对此也不做具体限制；内容区501-12为可视化表单设计器的主体，采用所见即所得的方式，可以直观看到用户从控件区拖拽放置在内容区的组件效果，也可以创建子页面，并通过按钮等绑定变成弹出效果；属性区501-13提供可视化界面供使用者针对拖拽到内容区展示的组件进行属性配置，如单纯针对组件本身的属性配置、针对组件所在表单的属性配置，以及每一组件对应的操作，如页面跳转、刷新、保存等的属性配置；状态栏501-14用于显示用户当前绘制的待展示页面中组件的嵌套关系。

此外，在一个例子中，上述所说的基础组件，包括但不限于：文本展示框、按钮、单行文本输入框、多行文本输入框、计算器、金额、单选框、多选框、时间选择器、日期选择器、评分、颜色选择器、下拉选择框、开关、滑道等。

相应地，上述所说的高级组件，包括但不限于：表格、选人控件、上传、下载、自定义、编辑器等。

相应地，上述所说的布局组件，具体是用于美化表单，实现绘制的表单规范布局的，这些布局组件包括但不限于：栅格布局、标签页、侧边容器、基本布局等。

相应地，ECharts组件，具体是用于将数据变成直观的图表展示的，这些ECharts组件包括但不限于：复合图表、折线面积图、柱状图、饼图、地图等。

相应地，上述所说的复用组件是指系统业务上经常用到的且能够被重复使用的组件，一个复用组件并非一个单纯的基础/高级组件，而是由多个基础/高级组件，甚至布局组件和ECharts组件构成的一个组件集合，该组件集合中的组件相互配合共同实现一个业务，如证券组件，实现的就是与证券相关的业务，新闻资讯组件实现的就是与新闻资讯相关的业务，即一个复用组件便可以对应一个待展示页面。这样拖拽一个复用组件，并配置一次属性，就可以实现一系列相关的功能，从而无需为每一个单独的组件进行配置，提高开发效率。

相应地，上述所说的工作流组件是指具备工作流特性的组件，比如流程发起组件、流程处理组件、流程历史组件等。

应当理解的是，上述示例仅是为了更好的理解本实施例的技术方案而列举的示例，不作为对本实施例的唯一限制，在实际应用中，可视化表单设计器501-1中包括的上述4个区域在可视化界面的分布可以根据需要设置，并不局限于图6所示的样式。

此外，需要说明的是，在本实施例中，内容区501-12具体是基于拖拽组件技术，如Vue-draggable技术实现的，即用户可以从控件区拖拽上述给出的任意组件，然后在内容区进行任意组合排版，进而得到满足自己的业务需求和使用场景的待展示页面。

具体的说，基于本实施例提供的可视化低代码开发平台，当鼠标移动到内容区501-12中显示的某个组件上时，该组件所在的区域外侧边界会出现预设颜色，如蓝色的虚线边框、内部会以预设颜色，如蓝色填充，从而让用户快速知道当前鼠标下的组件区域；当用户选择了内容区501-12中显示的某个组件，该组件边界会出现预设颜色，如蓝色实线边框，左上角会显示拖拽图标，右下角会显示复制、删除图标；当鼠标移动到选中的组件左上角显示的拖拽图标上时，鼠标会自动变成预设的拖拽图标的样子，当按住鼠标左键，移动鼠标时，即可实现对控件的拖拽，从而实现在内容区501-12中对选中的组件进行任意位置的移动。

需要说明的是，上述设置只有当鼠标移动到拖拽图标上时才能调整选中的组件在内容区501-12中的位置布局，从而避免组件选错、避免无意操作使组件移动造成布局混乱。

此外，在另一个例子中，内容区501-12的右上角还设有保存、预览、生成JSON的按钮，使得用户可以通过点击相应按钮实现不同的操作。

此外，在另一个例子中，可视化表单设计器501支持自定义组件的方式引入绘制所述待展示页面所需的组件。

可理解的，为了使本实施例提供的可视化低代码开发平台能够实现上述实施例所说的表单和工作流的交互方法，上述所说的绘制待展示页面所需的组件至少需要包括预先封装的工作流组件。

此外，在另一个例子中，支持自定义组件的方式引入的组件，还可以根据业务需求包括上述所说的的基础组件、高级组件、布局组件、ECharts组件等。

而复用组件，由于已经是将多个组件封装在一起相互配合实现一个业务的组件，因此对于此类组件，可以无需选择自定义组件的方式，直接拖拽到内容区501-12，通过对一个复用组件的属性配置，即可实现对该复用组件中的多个组件的配置，从而大大简化了开发过程。

具体的，在所述组件采用自定义组件的方式引入时，获取用户在所述可视化界面为所述自定义组件配置的引入方式和引入类型，得到相应地的属性信息。

此外，在一个例子中，所述引入方式分为嵌套引入和同级引入，所述引入类型包括表单引入和组件引入。

为了便于理解，本实施例结合图7所示，对自定义组件的方式引入绘制待展示页面所需的组件时，用户需要在内容区501-12和属性区501-13进行的操作进行具体说明。

如图7所示，在需要以自定义组件的方式引入组件，如工作流组件时，用户通过鼠标直接从控件区501-11选择展示的自定义组件，然后利用鼠标将选择的自定义组件拖拽到内容区501-12中，或者用户可以移动鼠标到内容区501-12，然后点击鼠标右键，从弹出的列表中选择创建自定义组件。

然后，将鼠标移动到内容区501-12中显示的自定义组件上并选中，此时属性区501-13会显示如图7所示的样式，即用户需要在属性区501-13当前显示的界面配置数据绑定key，即表示自定义控件的一个数据绑定标识，如图7绑定的为“1234”。

此外，用户还需要在属性区501-13当前显示的界面配置引入方式、引入类型，以及针对引入类型需要配置的组件名称或者表单标识。

具体的，图7所示为选择的引入方式为嵌套引入，引入类型为组件引入，对应输入的便是组件名称，如图7中的“XX”。

此外，值得一提的是，在实际应用中，当选择的引入方式为同级引入时，用户可以不配置数据绑定key，即数据绑定key的配置只有在引入方式为嵌套引入时才会用到。

应当理解的，默认状态下，属性区501-13显示的是“组件”属性配置的界面，用户如果想要对表单进行属性配置，需要移动鼠标切换到图7的“表单”按钮。同理，如果想要设置跳转、刷新、保存等高级属性，则需要移动鼠标切换到图7的“高级”按钮。

关于表单引入的具体实现，具体如下：

由开发人员预先将需要引入的组件封装设计好，当用户需要在内容区引入该组件时，先在内容区添加一个自定义组件，然后在自定义组件对应的组件属性配置页面中选择引入方式为嵌套引入或同级引入，选择引入类型为表单引入，并输入创建该组件时为其分配的组件标识，即可基于自定义组件采用表单引入的方式将需要的组件引入到内容区。

关于组件引入的方式，实质是基于Vue内置的“元组件”，通过传入用户输入的组件唯一标识(组件名称)来动态渲染不同的页面，对于这种方式的实现，具体如下：

在内容区需要添加重复内容的位置添加一个自定义组件，在自定义组件对应的组件属性配置页面中选择引入方式为嵌套引入或同级引入，选择引入类型为组件引入，并输入创建该组件时为其分配的组件名称即可。

此外，值得一提的是，由于在实际应用中，根据不同的业务需求和使用场景构建出的数据模型，其数据结构、数据操作、数据约束是不相同的。为了便于用户使用，开发人员预先构建了集中常用的数据模型，并将其集成到了数据模型设计器中。

可理解的，上述说是构建的常用的数据模型，具体是指内置了该数据模型必须包括的字段、属性配置信息，这样用户在使用可视化低代码开发平台开发表单时，只需在可视化表单设计器提供的可视化界面中的属性区为需要开发的表单配置已有的数据模型，并选择数据模型中的对应字段，便可以使最终生成的表单实现不同的数据操作。

关于上述说的构建的常用的数据模型，在本实施例中主要分为：

(1)通用模型：支持普通增删改查操作。

(2)树模型：按照树结构进行数据存储。

(3)审批模型：支持工作流的数据模型，在普通模型的基础上，通过结合工作流引擎完成流程的发起、处理以及处理状态同步等操作的实现。

值得一提的是，审批模型限制对应数据库表必须包含如下属性：处理状态、最新有效记录标识。

在选择审批模型后，审批模型会通过当前用户的操作(保存、提交、变更等)以及绑定的流程的流转(通过、驳回等)来同步更新其内置属性的值。

(4)审批留痕模型：在审批模型的基础上，增加了留痕功能，即保留了数据的每次变更记录，从而可以方便后续查看及核实。

具体的说，在审批模型的基础上，为了保留数据的所有变更记录，在每次变更时生成一条新的记录，使用第一次生成的记录的标识号将生成的记录关联起来，从而使得所有的变更均可查看、回顾及核实。

此外，值得一提的是，审批留痕模型限制对应数据库表必须包含如下属性：审批状态、最新有效记录标识、线索标识号、最新记录标识。

在选择审批留痕模型后，审批留痕模型会通过当前用户的操作(保存、提交、变更等)以及绑定流程的流转(通过、驳回等)来同步更新其内置属性的值。

(5)自定义模型：通过实现com.sinitek.sirm.metaform.model.support.IModelHandler接口的形式自定义增删改查等操作的逻辑。

此外，值得一提的是，当其类型为自定义模型时，其模型处理器必填。

在具体实现中，当数据模型设计器提供的上述四种数据模型的处理方式不能满足业务需求时，可以选择自定义模型，通过集成com.sinitek.sirm.metaform.model.support.IModelHandler接口，实现其对应的增删改查方法，即可按照当前方式处理对应业务数据。

此外，值得一提的是，本实施例中数据模型设计器创建的数据模型，是严格根据实体-联系图(Entity Relationship Diagram，ER)创建的，在根据ER图创建数据模型的过程中，首先会根据所述业务需求和所述使用场景创建数据库表，并确定所述数据库表对应的数据库结构，然后根据数据库结构中的字段创建至少包括所述字段的数据模型，并为所述数据模型配置基本属性信息和模型属性信息。

具体的说，所述基本属性信息包括：名称、适用范围、模型类型、物理表名、删除方式，所述模型属性信息包括：属性名、物理字段名、属性类型。

此外，在一个例子中，所述属性类型包括普通、字符、整数、金额、主键、外键、枚举数据、乐观锁、自定义属性、数据模型等类型。并且在属性类型为数据模型时，确定该数据模型用于处理数据库表一对一、一对多关联关系的维护，使得处理器能根据该配置正确的存储对应数据，实现不同数据模型之间的关联。

进一步地，对于属性类型为数据模型的类型，还需要为该属性配置关联的数据模型、关联键(当前数据模型的某一个字段与关联的数据模型中属性类型为外键的字段关联)、固定值(当前数据模型与关联数据模型之间适用一个固定的值关联，填入的类型取决于关联的数据模型的属性的类型)。

通过这种基于预先构建数据库表的方式，并基于数据库表确定的数据库结构构建数据模型，然后建立表单和数据模型之间的对应关系，从而在后续对表单执行操作时，均不会对表结构产生影响，进而避免了随意修改表结构导致的安全隐患问题。

同时，基于良好的数据模型，能够快速查询所需要的数据，减少数据的I/O吞吐，并极大地减少不必要的数据冗余，实现计算结果复用，从而极大地降低大数据系统中的存储和计算成本。

同时，基于良好的数据模型，也可以有效改善用户使用数据的体验，提高数据使用效率，改善数据统计口径的不一致性，减少数据计算错误的可能性。

由此，通过在可视化低代码开发平台中集成数据模型设计器，并基于数据模型设计预先构建常用的数据模型，从而在设计待展示页面时，将拖拽到内容区的组件与数据模型进行绑定，即建立每一个组件与数据模型中字段的对应关系，实现对各组件属性的配置得到需要的待展示页面，在使用得到的待展示页面时，当用户在该页面填写完信息并提交后，可视化低代码平台通过解析用户输入的信息或选择的数据以及绑定的数据模型中的字段，然后根据每一个字段与数据模型中对应的属性类型之间的映射关系，动态生成针对用户输入的信息或选择的数据的操作，如增删改查等的数据库操作语句，然后在基于生成的数据库操作语句，对数据库进行相应的操作。

为了更好的理解，以下以需要从数据库获取数据，并在待展示页面进行展示为例，进行说明：

应当理解的，数据展示是依赖于数据集实现的，而数据集就是数据的集合，因此想要实现数据展示，关键在于如何配置数据集。

在一个例子中，通过为基于前端界面展示的待展示页面动态生成的数据库查询语句，如SQL语句，以及触发查询操作时预先设置的需要访问的数据库的URL地址所要访问的数据配置动态属性，如通过#{name}来书写，在根据SQL语句和URL获取对应的数据集时，先会通过参数名从待展示页面中获取对应的值来替换对应的#{name}，然后根据替换后的SQL语句从URL对应的数据库中获取具体的数值，并可以得到需要展示的数据集，最终将得到的数据集返回给待展示页面中对应的组件进行展示，并可以实现数据展示。

此外，在一个例子中，上述工作流引擎502又包括流程设计器和流程执行器这两个功能结构。

其中，流程设计器用于绘制流程、进行流程类型参数配置，以及管理根据绘制的流程和配置的流程类型参数生成的流程模版；流程执行器用于读取选择的每一个流程模板对应的定义信息，并按照定义的规则执行流程，实现流程实例，以使流程运作。

关于流程设计器执行的上述操作，在具体实现中可以细化为以下几种操作：定义流程图、流程方向、流程条件、流程属性节点、属性运动规则、页面与节点的关系、导入导出流程模版、对运行的流程干预，如立即生效、对流程的调整等。

即，工作流引擎502，主要用于用于创建流程，并通过预先封装的数据传输接口从所述表单引擎获取流程数据，根据所述流程数据实现所述待展示页面中的工作流组件对应的流程操作，所述流程数据由所述表单引擎调用预先封装的数据获取接口，从所述待展示页面的HTML脚本中获取。

为了更好的理解工作流引擎502从绘制流程，到流程类型参数配置，到流程模版，到流程实例的过程，以下进行具体说明：

首先，在流程设计器提供的可视化界面新建流程模板。

具体的说，此处新建的流程模板为一个空白模板。

然后，点击绘制流程，进入流程绘制页面，拖拽各个功能节点，绘制流程流转顺序以及设置功能节点的一些属性。

具体的，本实施例中流程设计器具体是采用AntV-G6插件编写流程绘制页面的。

在一个例子中，拖拽的功能节点，包括但不限于：“开始节点”、“提交节点”、“处理节点”、“分支节点”、“合并节点”和“结束节点”。

也就是说，用户在绘制流程页面的时候，可以直接根据业务需求，选择合适的功能节点拖拽到当前的流程绘制页面。

相应地，在将任意上述功能节点拖拽到流程绘制页面后，需要点击对应的功能节点，然后对当前功能节点进行属性设置。

接着，在完成上述操作后，点击可视化界面中提供的保存按钮，至此就完成了流程模板节点以及节点属性的保存。

需要说明的是，在新建流程模板的过程中，在前端的可视化界面针对流程模板填写的各个属性，在后端将会自动生成一条流程模板记录，然后存储在数据库。

接着，在完成上述操作后，便可以点击发布流程按钮，此时流程设计器会根据流程模板中的节点信息生成流程中各个步骤，以供发起流程使用，至此完成了流程的发布。

具体的，在点击流程发布按钮后，工作流引擎的后端会根据流程绘制时保存的数据生成流程的节点信息、流程节点关联信息、流程自定义执行信息、流程出口判断信息和流程处理页面信息，然后存储在数据库的相关表中。

由此，便完成了流程创建。

关于工作流引擎通过预先封装的数据传输接口从所述表单引擎获取流程数据，根据所述流程数据实现所述待展示页面中的工作流组件对应的流程操作，所述流程数据由所述表单引擎调用预先封装的数据获取接口，从所述待展示页面的HTML脚本中获取，具体为：

工作流引擎根据表单引擎传输过来的业务数据，即用户在待展示页面中填入的数据，调用对应的流程发起接口，触发已经配置好的流程(流程名称对应的具体流程)，生成流程实例，然后生成“开始节点”下一步的步骤实例，以及根据步骤配置的处理人信息生成相应的处理人实例信息和任务信息。

相应地，在生成任务信息之后，对应节点的处理人就会收到相应的任务，即在供用户操作的可视化界面中，如“我的事宜”中就会有需要当前处理人处理的任务，该处理人通过点击“我的事宜”找到对应的待处理任务进行点击，便会跳转到该处理人对应的流程节点对应的处理页面，在该处理页面中可以放入对应的流程处理组件。

进一步地，流程处理组件中可以提供“通过”、“提交”、“驳回”、“退回”等功能按钮，通过监测处理人对不同功能按钮的操作，工作流引擎绘制的流程就会通过预设的条件判断下一步该流转到哪一个流程节点。

此外，值得一提的是，如果下一步为的流程节点为上述所说的“结束节点”，则会将流程实例的状态修改为结束，然后结束掉实例中所有未处理的任务。

由此，便实现了表单和工作流的交互。

通过上述描述不难发现，本实施例提供的可视化低代码开发平台，通过预先封装多种组件，如基础组件、高级组件、布局组件、ECharts组件、复用组件和工作流组件等，并在控件区展示，从而使得基于该开发平台的用户进行网页制作时，只需操作鼠标将满足业务需求的组件从控件区拖拽到内容区，然后在属性区对选中的组件进行属性配置即可，整个过程不涉及代码的编写，不仅避免了用户编写大量重复的代码，降低了工作流，进而提升了开发效率，同时由于不需要编写代码，也降低了对用户的技术能力的门槛要求。

此外，本实施例提供的可视化低代码开发平台，还提供了外部接口，从而可以供开发人员根据客户不断变化的业务需求和使用场景，封装新的组件，以及更新维护已有的组件，使得该开发平台既能面向不懂开发技术的客户，也可以面向开发人员。

此外，本实施例提供的可视化低代码开发平台，通过提供组件引入、表单引入的方式，使得需要经常使用的组件只需配置一次即可重复使用，从而减轻开发人员、用户的工作量，并且可以实现控件的拓展，满足不同用户的需求。

此外，本实施例提供的可视化低代码开发平台，严格根据ER图创建数据模型，并将表单和相应的数据模型绑定，能够在保证数据安全的基础上有效避免数据冗余，也在一定程度上降低开发人员的工作量。

此外，本实施例提供的可视化低代码开发平台，通过将表单引擎和工作流引擎集成在一起，并设置两者按照上述任一表单和工作流的交互方法实施例中记载的内容协同工作，从而显著减少表单和工作流交互使用时，开发人员的重复代码开发量，在提高开发人员的工作效率的同时，也降低了使用者的要求，即使是非代码开发从业者也可通过该开发平台完成流程开发工作，在具有通用性的基础上满足个化定制需求。

参见图8，图8是本发明实施例提供的表单和工作流的交互设备的结构示意图。

由于表单和工作流的交互设备中部署有上述所说的可视化低代码开发平台，而基于所述可视化低代码平台实现的表单和工作流的交互方法的具体实现方式可以参加上述任一表单和工作流的交互方法实施例中记载的内容，重复之处不再赘述。

如图8所示，包括至少一个处理器801；以及，与所述至少一个处理器801通信连接的存储器802；其中，所述存储器802存储有可被所述至少一个处理器801执行的指令，所述指令被所述至少一个处理器801执行，以使所述至少一个处理器801能够执行上述任一表单和工作流的交互方法实施例中记载的步骤。

其中，存储器802和处理器801采用总线方式连接，总线可以包括任意数量的互联的总线和桥，总线将一个或多个处理器801和存储器802的各种电路连接在一起。总线还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路连接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口在总线和收发机之间提供接口。收发机可以是一个元件，也可以是多个元件，比如多个接收器和发送器，提供用于在传输介质上与各种其他装置通信的单元。经处理器801处理的数据通过天线在无线介质上进行传输，进一步，天线还接收数据并将数据传输给处理器801。

处理器801负责管理总线和通常的处理，还可以提供各种功能，包括定时，外围接口，电压调节、电源管理以及其他控制功能。而存储器802可以被用于存储处理器801在执行操作时所使用的数据。

本发明实施例还提供了一种计算机可读存储介质，存储有计算机程序。计算机程序被处理器执行时实现上述任一表单和工作流的交互方法实施例中的步骤。

即，本领域技术人员可以理解，实现上述实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序存储在一个存储介质中，包括若干指令用以使得一个设备(可以是单片机，芯片等)或处理器(processor)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

本领域的普通技术人员可以理解，上述各实施例是实现本发明的具体实施例，而在实际应用中，可以在形式上和细节上对其作各种改变，而不偏离本发明的精神和范围。

Claims (11)

1.一种表单和工作流的交互方法，其特征在于，应用于具备表单引擎和工作流引擎的可视化低代码开发平台，所述表单和工作流的交互方法包括：

获取用户利用表单引擎提供的可视化界面配置的配置信息，所述配置信息包括工作流组件配置信息；

根据所述配置信息生成待展示页面的超文本标记语言HTML脚本，根据所述HTML脚本渲染并展示所述待展示页面；

当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，根据所述待展示页面的HTML脚本获取流程数据；

调用预先封装的数据传输接口，由所述表单引擎将获取到的所述流程数据传输给所述工作流引擎；

控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作。

2.根据权利要求1所述的表单和工作流的交互方法，其特征在于，所述工作流组件为流程发起组件，所述流程数据包括业务数据和流程标识数据，所述业务数据为在所述待展示页面上填写的数据，所述流程标识数据为用户配置的工作流组件配置信息；

所述控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作，包括：

控制所述工作流引擎调用数据存储接口将所述业务数据保存到预先构建的数据库；

控制所述工作流引擎根据所述业务数据和所述流程标识数据调用流程接口实现所述工作流组件对应的流程操作；

所述流程发起组件包括多个对应不同操作的按钮，用来发起流程。

3.根据权利要求2所述的表单和工作流的交互方法，其特征在于，所述工作流组件包括提交按钮；

所述当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，包括：

监测所述工作流组件中的所述提交按钮是否被选中；

若所述工作流组件中的所述提交按钮被选中，则确定在所述待展示页面中监测到对所述工作流组件的操作指令；

所述控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作，包括：

控制所述工作流引擎调用数据存储接口将所述业务数据保存到预先构建的数据库；

控制所述工作流引擎根据所述业务数据和所述流程标识数据调用流程发起接口生成对应的流程实例。

4.根据权利要求2所述的表单和工作流的交互方法，其特征在于，所述工作流组件包括保存按钮；

所述当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，包括：

监测所述工作流组件中的所述保存按钮是否被选中；

若所述工作流组件中的所述保存按钮被选中，则确定在所述待展示页面中监测到对所述工作流组件的操作指令；

所述控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作，包括：

仅控制所述工作流引擎调用数据存储接口将所述业务数据保存到预先构建的数据库，不控制所述工作流引擎根据所述业务数据和所述流程标识数据调用流程发起接口生成对应的流程实例。

5.根据权利要求2至4任一项所述的表单和工作流的交互方法，其特征在于，在所述工作流组件为流程发起组件时，所述工作流组件配置信息包括为所述流程发起组件配置的流程信息，所述流程信息包括所述流程发起组件对应的具体流程类型和所述流程类型中的具体流程名称。

6.根据权利要求1所述的表单和工作流的交互方法，其特征在于，所述工作流组件为流程处理组件；

所述当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，根据所述待展示页面的HTML脚本获取流程数据，包括：

当在所述待展示页面中检测到所述流程处理组件时，确定在所述待展示页面中监测到了对所述流程处理组件的操作指令；

调用预先封装的数据获取接口，由所述表单引擎获取所述待展示页面的统一资源定位系统URL；

根据所述URL确定流程定义参数，得到所述流程数据，所述流程定义参数至少包括与所述流程处理组件对应的流程实例标识、流程步骤实例标识和流程处理人实例标识；

所述控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作，包括：

控制所述工作流引擎调用预先封装的流程处理组件初始化接口，根据所述流程定义参数确定所述待展示页面中所述流程处理组件对应的流程配置信息，所述流程配置信息由用户预先利用工作流引擎配置；

控制所述工作流引擎根据所述流程配置信息对所述待展示页面中的所述流程处理组件进行渲染并展示。

7.根据权利要求1所述的表单和工作流的交互方法，其特征在于，所述工作流组件为流程历史组件；

所述当在所述待展示页面中监测到对所述工作流组件的操作指令时，调用预先封装的数据获取接口，根据所述待展示页面的HTML脚本获取流程数据，包括：

当在所述待展示页面中检测到所述流程历史组件时，确定在所述待展示页面中监测到了对所述流程历史组件的操作指令；

调用预先封装的数据获取接口，由所述表单引擎获取所述待展示页面的统一资源定位系统URL；

根据所述URL确定流程定义参数，得到所述流程数据，所述流程定义参数至少包括与所述流程历史组件对应的流程实例标识；

所述控制所述工作流引擎根据所述流程数据实现所述工作流组件对应的流程操作，包括：

控制所述工作流引擎调用预先封装的流程历史组件初始化接口，根据所述流程定义参数确定所述待展示页面中所述流程历史组件对应的历史流程信息，所述历史流程信息为流程流转过程中产生的历史记录；

控制所述工作流引擎根据所述历史流程信息对所述待展示页面中的所述流程历史组件进行渲染并展示。

8.一种可视化低代码开发平台，其特征在于，包括：表单引擎和工作流引擎；

所述表单引擎包括：可视化表单设计器、运行时表单渲染器和数据模型设计器；

所述可视化表单设计器用于提供可视化界面供用户以拖拽的方式绘制待展示页面；

所述运行时表单渲染器用于根据所述表单设计器生成的待展示页面的超文本标记语言HTML脚本对待展示页面进行渲染并展示；

所述数据模型设计器用于提供可视化界面供用户根据业务需求和使用场景创建数据库表，并确定所述数据库表对应的数据库结构，根据所述数据库结构中的字段创建至少包括所述字段的数据模型；

所述工作流引擎用于创建流程，并通过预先封装的数据传输接口从所述表单引擎获取流程数据，根据所述流程数据实现所述待展示页面中的工作流组件对应的流程操作，所述流程数据由所述表单引擎调用预先封装的数据获取接口，从所述待展示页面的HTML脚本中获取。

9.根据权利要求8所述的可视化低代码开发平台，其特征在于，所述可视化表单设计器支持自定义组件的方式引入绘制所述待展示页面所需的组件，所述组件包括预先封装的所述工作流组件；

其中，在所述组件采用自定义组件的方式引入时，获取用户在所述可视化界面为所述自定义组件配置的引入方式和引入类型，得到属性信息，所述引入方式分为嵌套引入和同级引入，所述引入类型包括表单引入和组件引入。

10.一种表单和工作流的交互设备，其特征在于，部署有如权利要求8所述的可视化低代码开发平台，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至7中任一项所述的表单和工作流的交互方法。

11.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的表单和工作流的交互方法。

Images