做文献ppt模板下载网站有哪些,个人 网站建设,怎么买域名做企业网站,烟台网站建设公司地址bpmn.js是由开源工作流引擎camunda内部组织BPMN.IO组织开发的一款基于BPMN 2.0的工作流展示、编辑的web端工具库。由于工作流引擎activiti、flowable、camunda属于同宗分流#xff0c;其工作流定义格式大致相同#xff0c;所以我们可以使用bpmn.js完美融合其中任一工作流引擎…bpmn.js是由开源工作流引擎camunda内部组织BPMN.IO组织开发的一款基于BPMN 2.0的工作流展示、编辑的web端工具库。由于工作流引擎activiti、flowable、camunda属于同宗分流其工作流定义格式大致相同所以我们可以使用bpmn.js完美融合其中任一工作流引擎。 什么是工作流引擎
这里引用咖啡兔在《Activiti实战》一书中对于工作流的描述工作流Work Flow引擎被广泛应用于各种信息化系统中将原本散乱甚至混乱的业务梳理后制定成业务规范流程进而约束业务的规范化处理和运转。需求人员、开发人员共同协作制定了符合BPMN 2.0规范的流程定义之后将其部署到工作流引擎中由它自动驱动业务流程的进行。 完整的工作流周期如上
定义收集业务需求并转化为流程定义。发布在系统管理平台中发布流程定义。执行体的流程引擎按照事先定义的流程处理路线以任务驱动的方式执行业务流程。监控办理任务的同时收集每个任务Task的结果然后根据结果做出相应处理。优化根据整个流程的运行过程结果分析问题的根源然后在此基础上进一步改进并再次开始一个新的周期。
BPMN是什么
BPMN是Business Process Modeling Notation的简写中文含义是业务流程管理是一套达成企业各种业务环节整合的全面管理模式。是由BPMN标准组织发布的其第一版BPMN 1.0规范于2004年5月发布。经过多年的改进新的规范BPMN 2.0于2011年发布。而bpmn.js则是一款由BPMN.IO组织基于BPMN 2.0开发的一款前端开发工具集。
bpmn.js的官网对其定位也是“View and edit BPMN 2.0 diagrams in the browser.”如下介绍如何在vue3中使用bpmn.j来绘制和展示流程图。
安装
我使用的是vue3接入bpmn.js可以通过npm对齐进行包管理需要注意的bpmn.js目前尚未支持typescript所以开发过程中可能会爆红直接忽略即可。
$ npm i --save bpmn-js
展示流程图
bpmn支持使用读取xml文件通过xml文件反解析生成对应的svg组合的方式生成流程图。如下为一个简单的Web展示流程图的样式。
script setup langts
import BpmnViewer from bpmn-js
import { onMounted } from vueonMounted(() {// the diagram you are going to displayconst bpmnXML: string ?xml version1.0 encodingUTF-8?
bpmn2:definitions xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xmlns:bpmn2http://www.omg.org/spec/BPMN/20100524/MODEL xmlns:bpmndihttp://www.omg.org/spec/BPMN/20100524/DI xmlns:dchttp://www.omg.org/spec/DD/20100524/DC xmlns:dihttp://www.omg.org/spec/DD/20100524/DI iddiagram_Process_1706756685602 targetNamespacehttp://bpmn.io/schema/bpmn xsi:schemaLocationhttp://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsdbpmn2:process idProcess_1706756685602 name业务流程_1706756685602 isExecutabletruebpmn2:startEvent idEvent_1smj9otbpmn2:outgoingFlow_0jdcl54/bpmn2:outgoing/bpmn2:startEventbpmn2:intermediateThrowEvent idEvent_0jfhfbabpmn2:incomingFlow_0jdcl54/bpmn2:incomingbpmn2:outgoingFlow_1ol0ntk/bpmn2:outgoing/bpmn2:intermediateThrowEventbpmn2:sequenceFlow idFlow_0jdcl54 sourceRefEvent_1smj9ot targetRefEvent_0jfhfba /bpmn2:endEvent idEvent_0a5hgl0bpmn2:incomingFlow_1ol0ntk/bpmn2:incoming/bpmn2:endEventbpmn2:sequenceFlow idFlow_1ol0ntk sourceRefEvent_0jfhfba targetRefEvent_0a5hgl0 //bpmn2:processbpmndi:BPMNDiagram idBPMNDiagram_1bpmndi:BPMNPlane idBPMNPlane_1 bpmnElementProcess_1706756685602bpmndi:BPMNEdge idFlow_0jdcl54_di bpmnElementFlow_0jdcl54di:waypoint x448 y180 /di:waypoint x572 y180 //bpmndi:BPMNEdgebpmndi:BPMNEdge idFlow_1ol0ntk_di bpmnElementFlow_1ol0ntkdi:waypoint x608 y180 /di:waypoint x732 y180 //bpmndi:BPMNEdgebpmndi:BPMNShape idEvent_1smj9ot_di bpmnElementEvent_1smj9otdc:Bounds x412 y162 width36 height36 //bpmndi:BPMNShapebpmndi:BPMNShape idEvent_0jfhfba_di bpmnElementEvent_0jfhfbadc:Bounds x572 y162 width36 height36 //bpmndi:BPMNShapebpmndi:BPMNShape idEvent_0a5hgl0_di bpmnElementEvent_0a5hgl0dc:Bounds x732 y162 width36 height36 //bpmndi:BPMNShape/bpmndi:BPMNPlane/bpmndi:BPMNDiagram/bpmn2:definitions
const viewer new BpmnViewer({container: #bpmnCanvas,})viewer.importXML(bpmnXML).then((result) {const { warnings } resultconsole.log(success !, warnings)viewer.get(canvas).zoom(fit-viewport)}).catch((err) {const { warnings, message } errconsole.log(something went wrong:, warnings, message)})
})
/scripttemplatediv测试页面div idbpmnCanvas classbpmn-viewer stylewidth: 90%; height: 70vh //div
/template
展示结果如下 如上需要注意的是
bpmn-js是通过挂载元素实现canvas绘制的需要在元素加载后进行创建操作。导入的xml数据为txt文本数据
流程编辑器
bpmn-js提供 BpmnModeler用于实现流程编辑器的绘制工作。编辑器支持基础流程组件的绘制同时也可以根据需要自行进行客制化组件的开发。流程编辑器除了主编辑模块还需要右侧的属性板用于配置组件属性等相关信息。
$ npm i --save bpmn-js-properties-panel camunda-bpmn-moddle 通过将其使用tsx封装在vue文件中直接调用使用以便于后期的扩展和自定义组件信息。如下为创建自定义组件 bpmn.tsx
import { defineComponent, markRaw, onMounted } from vue
import type { ExtractPublicPropTypes } from vue// bpmn相关引入
import bpmn-js/dist/assets/diagram-js.css // 左边工具栏以及编辑节点的样式
import bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css
import BpmnModeler from bpmn-js/lib/Modeler// bpmn-js-properties-panel相关
import bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css
import propertiesPanelModule from bpmn-js-properties-panel
import propertiesProviderModule from bpmn-js-properties-panel/lib/provider/camunda
import camundaModdleDescriptor from camunda-bpmn-moddle/resources/camundaimport ./bpmn.cssconst bpmnViewProps {data: {type: String,},
}export type BpmnViewProps ExtractPublicPropTypestypeof bpmnViewPropsconst BpmnView defineComponent((props: BpmnViewProps, context) {onMounted(() {const containerEl document.getElementById(container)const bpmnModeler markRaw(new BpmnModeler({container: containerEl,// 添加控制板propertiesPanel: {parent: #js-properties-panel,},// 右侧属性面板additionalModules: [propertiesPanelModule, propertiesProviderModule, translateModule],moddleExtensions: {camunda: camundaModdleDescriptor,},}),)bpmnModeler.createDiagram(() {bpmnModeler.get(canvas).zoom(fit-viewport)})})return () {return (div classcontainerBox styleposition: relativediv idcontainer stylewidth: calc(100vw - 750px); height: calc(100vh - 150px)/divdiv idjs-properties-panel classpanel/div/div)}
})export default BpmnView
组件创建完成后只需在Vue中进行引用即可
// main.vue
script setup langts
import { BpmnView } from ../../components
/scripttemplatedivBpmnView //div
/templatestyle scoped/style 有关BPMN-JS开发更多内容欢迎访问胖蔡说技术越说越扯专题地址BPMN-JS
