CN110232162B - 一种基于html5的流程定义方法及系统 - Google Patents

Abstract

本发明实施例提供一种基于HTML5的流程定义方法及系统，该方法，包括：基于HTML5，创建画布；接收流程节点图标的鼠标拖拽信号，触发流程节点图标的鼠标拖拽事件；利用与鼠标拖拽事件相对应的流程节点图标构建流程结构图；接收所述流程节点图标的鼠标点击信号，触发流程节点图标的鼠标点击事件，并获取鼠标点击事件对应的流程节点图标的预定义配置数据；获取对预定义配置数据进行渲染的流程数据，并将流程数据和流程结构图整合生成为流程图。本发明实施例提供的技术方案，提出一种可以通过可视化拖拽、选择配置项完成流程定义的方法及系统。

Description

一种基于HTML5的流程定义方法及系统

技术领域

本发明涉及计算机技术领域，更具体地，涉及一种基于HTML5的流程定义方法及系统。

背景技术

随着机械化生产的发展和企业规模的扩大，企业内部合理的组织分工能够为企业带来效率的提升，随着计算机的普及，基于计算机的流程管理成为管理界学术研究的热点。而基于计算机的流程管理的基础在于使用合理、科学的流程引擎；而一个流程引擎的关键部分是流程的定义，其决定了流程管理是否能够顺利执行。

目前，大部分的流程引擎的流程定义会提供流程设计器，用户通过数据库或者XML文件的方式利用流程设计器来进行流程的定义。但上述定义方式存在诸多缺陷：首先，对配置人员的要求较高，需要专业学习数据库和XML文件的编程语言；其次，各种定义规范需要付出的学习成本很高，难以大批量推广；再者，在流程定义的过程中，需要记忆和转化各种节点名称、节点之间的关系以及了解变量、事件、类等所代表的意义和生效范围。

发明内容

为此，本发明提供了一种基于HTML5的流程定义方法及系统，能够克服上述问题或者至少部分地解决上述问题。

根据本发明实施例的第一方面，提供一种基于HTML5的流程定义方法，该方法包括：基于HTML5，创建画布；接收流程节点图标的鼠标拖拽信号，触发流程节点图标的鼠标拖拽事件；在画布上，利用与鼠标拖拽事件相对应的流程节点图标构建流程结构图；接收流程节点图标的鼠标点击信号，触发流程节点图标的鼠标点击事件，并获取鼠标点击事件对应的流程节点图标的预定义配置数据；获取对预定义配置数据进行渲染的流程数据，并将流程数据和流程结构图整合生成为流程图。

根据本发明实施例的第二方面，提供了一种基于HTML5的流程定义系统，该系统包括：第一处理模块、第二处理模块、第三处理模块、第四处理模块和第五处理模块，其中：第一处理模块用于基于HTML5，创建画布；第二处理模块用于接收流程节点图标的鼠标拖拽信号，获取流程节点图标的鼠标拖拽事件；第三处理模块用于在画布上，利用与鼠标拖拽事件相对应的流程节点图标构建成流程结构图；第四处理模块用于接收流程节点图标的鼠标点击信号，获取对应的流程节点图标的预定义配置数据；第五处理模块用于获取对预定义配置数据进行渲染的流程数据；并将流程数据和流程结构图整合生成为流程图。

第三方面，本发明实施例提供一种电子设备，包括：包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现上述任一项基于HTML5的流程定义方法的步骤。

第四方面，本发明实施例提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述任一项基于HTML5的流程定义方法的步骤。

本发明实施例提供的一种基于HTML5的流程定义方法及系统，通过利用节点图标定义节点，接收鼠标的触发和拖拽动作后，利用预先定义的事件和预定义配置数据，进而完成流程定义的过程，提供了一种通过可视化拖拽、选择配置完成流程定义的方法，用户方便理解和判断流程的情况，时大幅度减少人工输入，提高了工作了效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些图获得其他的附图，其中：

图1为本发明实施例提供的基于HTML5的流程定义方法的流程示意图；

图2为本发明实施例提供的基于HTML5的流程定义方法的UI示意图；

图3为本发明实施例提供的又一基于HTML5的流程定义方法的流程示意图；

图4为本发明实施例提供的基于HTML5的流程定义系统的结构示意图；

图5为本发明一个实施例的电子设备的实体结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例提供的一种基于HTML5的流程定义方法，如图1所示，该方法包括但不限于以下步骤：

步骤11：基于HTML5，创建画布；步骤12：接收流程节点图标的鼠标拖拽信号，触发流程节点图标的鼠标拖拽事件；步骤13：在画布上，利用与鼠标拖拽事件相对应的流程节点图标构建流程结构图；步骤14：接收流程节点图标的鼠标点击信号，触发流程节点图标的鼠标点击事件，并获取鼠标点击事件对应的流程节点图标的预定义配置数据；步骤15：获取对预定义配置数据进行渲染的流程数据，并将流程数据和流程结构图整合生成为流程图。

具体地，当用户确定要执行一个流程定义任务时，首先，在计算机的前端，由于HTML5<canvas>标签可以实现通过相应的编程语言绘制出2D图像、路径、线条、圆、方形等形状的功能，因此，本发明实施例，在步骤11中选取使用HTML5中的<canvas>标签功能完成画布的创建工作。需要说明的是，本发明实施例中对于使用何种应用程序及编程方式建立画布，不作具体的限制。

进一步地，可以在绘制好的画布上，定义出不同的功能区，例如，指定画布的左侧一定区域为流程定义区域；将该画布的中间靠近底部的区域指定为预定义配置区域；将画布中部的大部分区域指定为流程图编辑区域，并可以根据使用的需要进行其它区域的详细划分，本发明实施例不作具体限定。

当划定完成相应的区域后，在步骤12和步骤13中，按流程定义的需要，利用鼠标拖拽流程区域内相应的流程节点图标至流程图编辑区域内；通过多个流程节点图标构建成流程定义的流程结构图。

当编辑完成流程结构图后，在步骤14中，当接收到该流程结构图中的，针对某个流程图标的鼠标点击信号后，触发该流程节点图标的鼠标点击事件，则在预定义编辑区弹出与上述流程节点图标的鼠标点击事件相对应的预定义配置数据。

用户根据实际的流程需要，在步骤15中，对上述预定义配置数据进行渲染；该渲染的内容可以包括：根据相应的流程节点填充数据、补充信息、备注等等。依次，按实际流程定义的需要，完成对所有与各个流程节点相对应的流程节点图标的渲染后，将所有进行渲染的数据进行保存，生成流程数据。

计算机获取到流程数据后，将上述获取到的流程数据结合上述构建的流程结构图进行整合后，生成对于流程定义的直观、可视化的流程图。

需要指出的是，由于在同一个计算机系统中可以同时运行并监控多个流程的进度，为了形成区分，在流程定义之前，先进行流程名称的定义，每一个流程名称对应一个具体的流程。该流程名称可以自动生成，也可以根据创建者的意图进行设置。

进一步地，由于一个流程在不同的节点需要不同的人员参与到流程的执行中，本发明实施例提供的流程定义方法，通过设置流程角色选择器，在创建流程图的过程中，用于设置在整个流程周期内，各个不同流程节点参与人员的角色权限。例如：可以设置全局角色，所述全局角色，可以参与到整个流程周期内的任一节点内，并对执行对该节点的审批、终止或者纠偏等操作。本发明实施例对于可以设置哪些角色权限不作具体限定。

本发明实施例提供的一种基于HTML5的流程定义方法，通过利用节点图标定义节点，接收鼠标的触发和拖拽动作后，利用事先定义好的事件和预定义配置数据，进而完成流程定义的过程，提供了一种通过可视化拖拽、选择配置完成流程定义的方法，用户方便理解和判断流程的情况，时大幅度减少人工输入，提高了工作了效率。

结合上述实施例，进一步地，作为一种可选实施例，在上述画布上，流程节点图标用于定义流程节点，且每个流程节点图标与每个流程节点相对应。

具体地，由于HTML5<canvas>标签可以通过Javascript脚本等编程语言绘制2D图像、路径、线条、圆、方形等各种不同的图案，因此为了便于构建便于读取的流程结构图，因此，一般来说，不同的流程节点图标使用不同的图案表示；相应地，每一个流程节点图标用于定义每一个流程节点。因此，当构建好一个完整的流程结构图后，相当于构建形完成由每一个流程节点构成的一个完整的流程。进一步地，在使用不同的图案来定义流程节点图标时，一般是会考虑到个人的日常使用习惯，选用个性化的图案。

进一步地，也可以根据流程的需要对不同的流程节点图标进行命名，例如，可以使用“开始”、“终止”、“会议”等便于理解的名称命名对应的流程节点图标，在存在多节点的流程创建工作时，能够有效提高流程创建的效率，也给流程执行人员提供了便利。

本发明实施例，通过利用流程节点图标预定义各个流程节点，降低了用户学习门槛和学习成本，用户不需要浪费大量精力和时间进行相应编程语言的学习，同时也大大的提高了流程定义的效率。

结合上述实施例，进一步地，作为一种可选实施例，利用Javascript脚本定义流程节点图标的鼠标拖拽事件和鼠标点击事件；每个鼠标点击事件与每个预定义配置数据相对应。

具体地，在进行流程定义之前，首先利用Javascript脚本对与每个流程节点图标相对应的鼠标拖拽事件以及鼠标点击事件进行定义。

例如：鼠标拖拽事件可以定义为：一方面，当计算机接收到对该流程节点图标的鼠标拖拽信号，该信号为一个持续信号，信号的触发点为该流程节点图标，信号的截止点为将该流程节点图标所拖拽的具体位置；另一方面，检测到长按鼠标左键对相应的流程节点图标进行拖拽的信号为有效信号；再一方面，也可以定义连续双击流程节点图标为开始执行该流程节点图标的拖拽。本发明实施例，对如何定义鼠标拖拽事件不作具体地限定。

鼠标点击事件的定义也可以参考上述实施例中对于鼠标拖拽事件的定义方法，例如，可以针对单击鼠标左键动作信号、单击鼠标右键动作信号或者双击鼠标左键动作信号等定义成不同的鼠标点击事件，本发明实施例对此不作具体限定。

进一步地，与每个鼠标点击事件相对应的预定义配置数据，可以通过对话框或者下拉菜单等形式在画布上进行显示。该预定义配置数据，包括以下内容：配置数据的格式、配置数据相互之间的关系、配置数据的子菜单、选择器、以及其他配置定义组件。需要说明的是，为了提供更方便、人性化的操作体验，对于不同的流程节点图标，本发明实施例提供的流程定义方法，该预定义配置数据可以为自动生成的。进一步地，该预定义配置数据可以设置成供选择的方式。

本发明实施例提供的流程定义方法，通过预定义鼠标拖拽事件和鼠标点击事件，有效的避免了人为操作的失误，提高流程定义操作的精确性。大量减少人工输入；由于大部分操作都是通过鼠标拖拽和点击可以完成的，避免返工和检查所耗费的时间。

结合上述实施例，进一步地，作为一种可选实施例，根据鼠标拖拽事件，将对应的流程节点图标构建成流程结构图，包括但不限于：根据鼠标拖拽事件在画布上绘制被拖拽的流程节点图标；根据流程节点之间的连接关系绘制所有流程节点图标之间的连接线，获得流程结构图。

具体地，对于复杂的流程来说，一般包括多个流程节点，而各个流程节点之间存在的关系也是有多种，比如并列关系、递进关系、因果关系；甚至还有正、负反馈调节关系等，因此在画布上，创建好各个流程节点图标时，往往根据需要还要使用连接线将各个流程节点图标进行连接，以表征各流程节点之间的相互关系。所述流程节点图标和连接线共同构成完整的流程结构图。再对构建完成的流程结构图中的所有流程节点图标进行渲染、整合后，生成完整的流程图，对于该后续步骤，本实施例不作具体限定。

进一步地，在进行流程图创建之前，在流程定义区域内，定义多种连接线，比如有线段、带箭头线段、波浪线等，并对不同种类的连接线定义不同的连接涵义；如，通过带箭头线段连接两个节点，表示所述两个节点之间是有相应的执行顺序的。进一步，也可以对各连接线的颜色进行设置，并定义不同颜色的连接线的涵义。例如，可以使用不同颜色定义成为不同的角色权限，如红色的连接线的角色权限最高，仅存在第一负责人有对其进行修改或者终止的权限。本发明实施例对于如何定义连接线不作具体的限定。

进一步地，可以将上述已经定义完成的连接线设置于流程定义区域内，并定义其相应的鼠标的拖拽事件和鼠标点击事件，支持相应的拖拽和点击操作。

本发明实施例提供的一种基于HTML5的流程定义方法，利用拖拽的方式实现流程结构图的绘制，用户可以通过流程图可以直观的获取整个流程，并且最终流程引擎就是按照该流程图执行，易于最终用户理解和判断流程的进展情况。

结合上述实施例，进一步地，作为一种可选实施例，将流程数据和流程结构图整合生成为流程图，包括但不限于：将流程数据和流程结构图的数据整合为Json数据；对Json数据进行解析后，获取流程图。

具体地，计算机系统的前端接收到流程节点图标的鼠标点击信号后，触发该流程节点图标的鼠标点击事件，并调取预先定义好的预定义配置数据，该预定义配置数据与该鼠标点击事件相对应。由于该预定义配置数据存储在计算机系统的后端，因此可以通过Ajax技术从计算机系统的后端获得预定义信息，输出到计算机的前端界面。

进一步地，当判断到用户对该预定义配置数据进行渲染结束时，获取到渲染的流程数据。具体地，判断用户对该预定义配置数据进行渲染是否结束的方法可以是：当接收到用户确认渲染结束信号，例如用户主动保存渲染的流程数据时；或者在用户切换渲染对象时，均可以判断用户对该预定义配置数据进行渲染已经结束。

进一步地，当计算机系统前端获取到上述的经配置数据渲染的流程结构图后，使用Javascript脚本将该渲染过的流程结构图的数据，按照格式整合为Json数据；再将该整合后的Json数据利用Ajax技术提交给计算机系统的后端进行处理。

进一步地，当计算机后端接收到有前端提交的包含有渲染过的流程结构图数据的Json数据后，一方面，通过对该Json数据进行解析，并将解析后的数据装载为流程图，以保证该流程图是流程引擎能够识别的文件格式；另一方面，通过计算机后端将该解析后的数据进行存储。在用户通过计算机系统的前端调用流程文件名时，自动从计算机的后端调用已经存储的流程图，并显示在计算机前端界面上，供用户对整个流程进行监控可调整。

结合上述实施例，进一步地，作为一种可选实施例，在将流程数据和流程结构图的数据整合为Json数据之前，还包括：对该流程数据进行有效性的判断，若判断获知所述流程数据无效，则在画布上显示相应的提示信息。若判断获知所述流程数据有效，则继续进行下一步的运行，即将流程数据和流程结构图的数据整合为Json数据。

具体地，对流程数据进行有效性的判断，可以通过该流程数据的以下几个方面进行判断：流程节点是否具有出口、预定义配置数据中的必填项是否为空、输入值是否符合要求、配置角色是否有权限和流程分支节点是否至少包含一个条件等。

进一步地，当判断获知所述流程数据的某一项或几项无效后，在画布上显示出相应的提示信息，告知用户该流程数据具体无效的项；也可以进一步在画布上显示出相应无效项的修改建议。

结合上述实施例，进一步地，作为一种可选实施例，计算机的后端在对由流程数据和流程结构图整合的Json数据进行解析之前，还包括：若判断获知整合后的Json数据无效，则在画布上显示相应的提示信息。本发明实施例对如何对由流程数据和流程结构图整合的Json数据进行有效性判断不作具体限定。

当获知所述Json数据无效，则在画布上显示相应无效的理由，以及修改的建议。

本发明实施例提供的流程定义方法，通过对配置的流程数据进行多次校验，并根据校验结果进行相应的提示，使用户可以第一时间定位流程定义过程中的错误，在保证流程顺利执行的同时，提供了流程定义的效率。

图2为本发明实施例提供的基于HTML5的流程定义方法的UI示意图，如图2所示，本发明实施例提供的一种基于HTML的流程定义的方法，首先用户基于HTML5中的<canvas>标签功能完成画布的创建工作；然后，将整个画布划分为3个流程定义区域，分别为：流程定义对象区域、流程图编制区域和配置区域，其中，流程对象区域用于显示已经定义完成的流程节点图标，每个流程节点图标对应一个流程节点名称和一个图案，并且每个流程节点名称和图案均不相同。流程图编制区域用于显示由多个流程节点图标和相应的连接线构成的流程结构图，并用于接受在该区域对每个流程节点图标的鼠标点击操作和鼠标拖拽操作。配置区域用于显示每个流程图标的预定义配置数据，其中可以包括有：指定角色、指定职能组、机构职务、指定人员等项，在每一项上可以提供相应的填写栏或下拉框栏，用户可以通过外置设备对该预定义配置数据进行渲染，该渲染操作包括：选择、判断、以及输入。当用户至切换下一个流程图标时，将自动保存上一个流程图标的流程数据，并显示当前流程图标的预定义配置数据。

图3为本发明实施例提供的又一基于HTML5的流程定义方法的流程示意图，如图3所述，整个流程定义配置的过程可以划分为计算机前端配置过程和计算机后端配置过程。

当用户开始进行流程定义配置时，在建立好的画布上，用户操作鼠标拖拽流程定义对象，即流程节点图标至流程图编制区域，生成流程结构图，并设置各个流程节点图标的预定义配置数据；将获取的结果进行输入校验，该获取的结果包含：对所述预定义配置数据进行渲染的流程数据和流程结构图整合后的数据；当输入校验成功后，将获取的结果利用Javascript脚本整合生成Json数据包，该Json数据包包括有流程定义Json数据包和流程配置Json数据包。然后通过Http传输协议，将该Json数据包传输至计算机系统后端。

计算机系统后端对接收到的Json数据包进行解析，并对解析后的数据进行二次数据校验，当校验合格后，将解析后的数据格式化为用于流程定义的XML文件，并将该XML文件发布至流程引擎，并进行保存，该保存结果存储在计算机后端的数据库中，用于当用户需要进行流程监控时进行提取。

作为本发明所提供的又一实施例，结合图3中的流程，提供一种流程定义方法，其步骤包括但不限于：

首先，用户根据需要创建预定义流程的名称，并根据该名称自动生成与该预定义流程唯一对应的Key，该Key作为计算机系统中的众多已定义流程的唯一区别的标识。通过角色选择器设置该预定义流程的整个流程周期内能够全程参与所有节点的角色。

构建画布，按上述实施例的方法，创建相应的流程定义区域；通过鼠标将流程定义对象区域的流程定义图标“开始”拖拽至流程图编制区域，即创建一个开始节点；需要说明的是，该“开始”节点的节点名称和节点ID可以是自动生成的，也可以是自定义修改。通过角色选择器设置该节点的处理角色，当设置完成后，将仅授予被设置的处理角色对该节点进行相应规定的处理的权限。

按上述方法，依次将“用户任务”图标和“结束”图标拖拽置于流程图编制区域；选择“连接线”并将该图标拖拽至流程图编制区域，实现将“用户任务”图标和“结束”图标相连接；再次选择选择“连接线”并将该图标拖拽至流程图编制区域，实现将“开始”图标与“用户任务”图标进行连接。需要指出的是，由于流程的需要，开始、用户任务、和结束是存在执行的顺序，所以采用带箭头的射线作为连接线，因此在创建结构流程图时，要确保连接线的方向和节点执行的顺序相一致。否则，在后期对流程数据与流程结构图合的Json数据进行有效性判断时，则会判断出该Json数据无效，而不能完成流程定义。

进一步地，在流程定义的过程中，若需要按照流程的实际需要跳转至不同的节点进行操作时，可以将“分支”节点图标拖拽进流程图编制区域，此时，对于“分支”图标所对应的节点，不允许设置处理角色，体现在该流程节点图标的处理角色的预定义配置数据栏中的对应选项为灰色。但可以在预定义配置数据栏中设置流转规则，也可以对应设置项的从下拉选项栏中选择关联的表单字段和预设值进行比对，选择“大于”、“小于”连接起来，并且使用“OR”或者“AND”将多组条件拼接起来，作为流程流转的判断条件。

在完成对所有的流程节点图标的渲染后，完成整个流程定义工作和流程图的绘制。

然后点击“保存”图标，此时计算机系统会自动进行数据有效性的验证工作。该验证工作可以包括：所有的流程节点是否都已声明了节点名称、节点名称是否符合条件，每个流程节点否已指定了处理人员、所需要的前后置脚本是否正常、流程节点上自动配置的流程监听器是否存在等等。如果验证通过，则完成该流程的发布，并同时进行自动保存。

图4为本发明实施例提供的基于HTML5的流程定义系统的结构示意图，如图4所示，本发明实施例提供了一种基于HTML5的流程定义的系统，该系统包括但不限于：第一处理模块21用于基于HTML5，创建画布；第二处理模块22用于接收流程节点图标的鼠标拖拽信号，获取流程节点图标的鼠标拖拽事件；第三处理模块23用于在画布上，利用与鼠标拖拽事件相对应的流程节点图标构建成流程结构图；第四处理模块24用于接收流程节点图标的鼠标点击信号，获取对应的流程节点图标的预定义配置数据；第五处理模块25用于获取对预定义配置数据进行渲染的流程数据；并将流程数据和流程结构图整合生成为流程图。

具体地，当用户需要执行一个流程定义任务时，首先通过位于计算机系统前端的第一处理模块21基于HTML5中的<canvas>标签功能完成画布的创建工作。通过鼠标拖拽流程节点图标，产生相应的鼠标拖拽信号，当第二处理模块22接收到该鼠标拖拽信号后，获取该流程节点图标的鼠标拖拽事件。第三处理模块根据该鼠标拖拽事件，在画布上的指定区域，生成相应的流程节点图标；并将所有的流程节点图标构建成流程结构图。

当构建完成流程结构图后，将进行对该流程结构图进行渲染生成流程图的步骤，具体为：用户通过鼠标点击流程定义图标，生成鼠标点击信号；当第四处理模块接收到该鼠标点击信号后，获取到与该鼠标点击信号相对应的流程节点图标的预定义配置数据，并将该预定义配置数据显示在计算机前端进行显示。用户根据流程定义的需要，对该预定义配置数据进行渲染。当完成所有流程节点图标的预定义配置数据的渲染工作后，生成流程数据。第五处理模块用于获取该流程数据，并将该流程数据结合上述流程结构图生成对整个流程进行定义的流程图。

需要说明的是，本发明实施例的基于HTML5的流程定义及系统可以用于执行上述方法实施例，其原理和技术效果类似，此处不再赘述。

本发明实施例提供的一种基于HTML5的流程定义装置，通过利用节点图标定义节点，接收鼠标的触发和拖拽动作后，利用事先定义完成的事件和预定义配置数据，进而完成流程定义的过程，提供了一种通过可视化拖拽、选择配置完成流程定义的方法，用户方便理解和判断流程的情况，时大幅度减少人工输入，提高了工作了效率。

图5是本发明一个实施例的电子设备的实体结构示意图。

参照图5，电子设备包括：处理器(processor)51、存储器(memory)52和总线53；其中，

处理器51和存储器52通过总线53完成相互间的通信；

处理器51用于调用存储器52中的程序指令，以执行上述各方法实施例所提供的基于HTML的流程定义方法。

此外，上述的存储器52中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

本实施例提供一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法实施例所提供的基于HTML的流程定义方法。

本实施例提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行上述各方法实施例所提供的基于HTML的流程定义方法。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

需要说明的是术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本发明的说明书中，说明了大量具体细节。然而能够理解的是，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。类似地，应当理解，为了精简本发明公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释呈反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

以上实施例仅用于说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种基于HTML5的流程定义方法，其特征在于，包括：

基于HTML5，创建画布；

接收流程节点图标的鼠标拖拽信号，触发所述流程节点图标的鼠标拖拽事件；

在所述画布上，利用与所述鼠标拖拽事件相对应的所述流程节点图标构建流程结构图；

接收所述流程节点图标的鼠标点击信号，触发所述流程节点图标的鼠标点击事件，并获取所述鼠标点击事件对应的流程节点图标的预定义配置数据；

获取对所述预定义配置数据进行渲染的流程数据，并将所述流程数据和所述流程结构图整合生成为流程图；

在同一所述画布上定义不同的功能区域，所述功能区包括：流程定义区域、预定义配置区域和流程图编辑区域；

设置流程角色选择器，在创建流程图的过程中，用于设置在整个流程周期内，各个不同流程节点参与人员的角色权限。

2.根据权利要求1所述的基于HTML5的流程定义方法，其特征在于，在所述画布上，所述流程节点图标用于定义各流程节点，每个所述流程节点图标与每个所述流程节点相对应。

3.根据权利要求2所述的基于HTML5的流程定义方法，其特征在于，利用Javascript脚本定义所述流程节点图标的鼠标拖拽事件和鼠标点击事件；每个所述鼠标点击事件与每个所述预定义配置数据相对应。

4.根据权利要求3所述的基于HTML5的流程定义方法，其特征在于，所述根据所述鼠标拖拽事件，将对应的所述流程节点图标构建成流程结构图，包括：

根据所述鼠标拖拽事件在画布上绘制被拖拽的所述流程节点图标；

根据所述流程节点之间的连接关系绘制所有所述流程节点图标之间的连接线，获得所述流程结构图。

5.根据权利要求1所述的基于HTML5的流程定义方法，其特征在于，所述将所述流程数据和所述流程结构图整合生成为流程图，包括：

将所述流程数据和所述流程结构图的数据整合为Json数据；

对所述Json数据进行解析后，获取所述流程图。

6.根据权利要求5所述的基于HTML5 的流程定义方法，其特征在于，将所述流程数据和所述流程结构图的数据整合为Json数据之前，还包括：

若判断获知所述流程数据无效，则在所述画布上显示相应的提示信息。

7.根据权利要求5所述的基于HTML5的流程定义方法，其特征在于，在对所述Json数据进行解析之前，还包括：

若判断获知所述Json数据无效，则在所述画布上显示相应的提示信息。

8.一种基于HTML5的流程定义系统，其特征在于，包括：

第一处理模块，所述第一处理模块用于基于HTML5，创建画布；

第二处理模块，所述第二处理模块用于接收流程节点图标的鼠标拖拽信号，获取所述流程节点图标的鼠标拖拽事件；

第三处理模块，所述第三处理模块用于在所述画布上，利用与所述鼠标拖拽事件相对应的所述流程节点图标构建成流程结构图；

第四处理模块，所述第四处理模块用于接收所述流程节点图标的鼠标点击信号，获取对应的流程节点图标的预定义配置数据；

第五处理模块，所述五处理模块用于获取对所述预定义配置数据进行渲染的流程数据；并将所述流程数据和所述流程结构图整合生成为流程图；

其中，所述流程定义系统在同一所述画布上定义不同的功能区域，所述功能区包括：流程定义区域、预定义配置区域和流程图编辑区域；

还包括：流程角色选择器，所述流程角色选择器，用于在创建流程图的过程中，设置在整个流程周期内，各个不同流程节点参与人员的角色权限。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至7任一项所述基于HTML5的流程定义方法的步骤。

10.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如权利要求1至7任一项所述基于HTML5的流程定义方法的步骤。

Images