[发明专利]一种基于HTML5的流程定义方法及系统

说明书

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

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

附图说明

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