[发明专利]一种轻量级和完全跨浏览器的流程设计方法

权利要求书

1.一种轻量级和完全跨浏览器的流程设计方法，其特征在于，包括以下步骤：

S1：界面设定模块：

(1a)流程设计器界面的整体划分延用现有的B/S架构的流程设计器，分为BPMN2.0元素区、工具栏、画布区和属性配置区；

(1b)BPMN2.0元素区放置BPMN2.0规范的元素，包括事件、活动、网关、顺序流等类型，提供了流程设计器支持的建模元素，这些元素按照类型进行组织，可以进行扩展；

(1c)画布区是用户设计流程的工作区域，用户可以通过点击、拖拉拽的方式将流程元素放置在该区域，可对流程元素进行上述工具栏中的操作；

(1d)属性配置区改进为弹窗表单的形式展示，通过Vue Element组件实现；

S2：流程绘制模块：

(2a)跨浏览器的原理：采用Raphael JS实现通过Diagram组件来提供流程图的绘制功能；

(2b)Diagram组件：按照Common JS规范对Diagram组件进行模块化开发；

(2c)流程配置信息config：包括组件的基本路径地址，画布大小，流对象属性，连线配置，工具栏信息，流程属性配置，Json格式的流程定义数据；

(2d)工具方法utils：用于流程图绘制过程中各个节点坐标位置获取和定位，为Raphael绘制相应的图形提供坐标，此外生成拖拉连线上的操作点的坐标；

(2e)流对象绘制：流对象node，定义了流程节点的属性和事件操作；

(2f)流对象之间的连线绘制：连线对象path，定义了连线的属性和事件操作；

(2g)通过工具栏和键盘操作节点和连线：流程节点和连线绑定了键盘鼠标事件；

S3：流程属性动态配置模块：

(3a)在经过S2后便得到一个绘制好的流程图，然后通过使用Vue Element进行开发ConfigurePopup组件，来对每一个类型的流程节点和连线实现窗口表单进行属性配置，为流程节点的窗口表单绑定了鼠标双击事件；

(3b)属性配置：用户任务的属性弹窗中包含任务ID、任务表单、用户与组、多实例、执行监听器、任务监听器、邮件，连线属性弹窗包括基本属性、流转条件、执行监听器；

(3c)流程表单支持两种表单类型，动态表单和业务表单，动态表单可集成表单设计器模块支持用户自定义表单，包括表单字段、布局、样式等的设计，用户可以通过拖拽、配置等方式，快速搭建出符合自身需求的表单，业务表单可在(3d)中动态绑定；

(3d)Ajax动态绑定：任务ID通过S2的(2d)中的自动ID生成器进行规范化生成，而如流程业务表单链接、用户与角色等信息，通过Ajax请求后端模块查询系统中相应的信息，可用鼠标双击选中触发回调函数动态设置；

(3e)JSON格式的流程定义存储：遍历流程图中的流对象集合和连线对象集合，以及该步骤为其配置的属性集合，按照JSON格式对其进行转换存储，并保存至processJsonData对象中，processJsonData对象包含了描述符合BPMN2.0规范的流程模型信息；

S4：流程语义检验模块：

(4a)经过经过步骤1至步骤3完成流程绘制和流程属性配置后，便完成流程模型的定义，然后将流程图可以看作一个有向图，改进深度优先搜索算法和开发一系列流程检验规则通过责任链模式的对流程定义进行校验；

(4b)构建流程图的邻接矩阵：邻接矩阵是一种图的存储结构，遍历processJsonData对象，将流程图转换邻接矩阵来表示的形式；

(4c)唯一性验证：通过深度优先搜索算法遍历图中的所有节点，验证流程图有且只有一个开始事件和一个结束事件；

(4d)孤立节点验证：通过判断流程图是否为弱连通图来验证流程图是否存在孤立的节点；

(4e)流程元素位置的正确性验证：验证流程元素是否处于不合理的位置，包括验证开始事件和结束事件不应处于流程图中间，开始事件应满足出度为1和入度为0，结束事件应满足出度为0和入度为1；

(4f)排他网关验证：验证排他网关是否只存在一个输入顺序流；验证排他网关的输出顺序流的流转条件是否存在相同的情况；

(4g)拓扑排序进行环路验证：通过拓扑排序验证流程图中是否存在闭环，该闭环是指活动节点之间的闭环，不包经过网关的闭环；

S5：流程设计器集成模块：

(5a)经过经过S1至S4后，便获得符合规范的JSON格式的流程定义processJsonData对象，通过Ajax请求将该对象上传至服务器，并开发JsonToXmlCoverter模块，该模块可将JSON格式的流程数据转换为符合BPMN2.0规范的XML流程定义文件，可将该流程定义文件进行导出；

(5b)若需要集成工作流引擎，进行业务流程的后续生命周期，可在服务端开发符合各种工作流引擎的部署接口，实现浏览器端一键部署发布的功能。