文章目录概要预览地址整体架构流程上干货技术细节小结概要本帖主要介绍activiti工作流前端引入到vue2项目可引入任何vue2框架。因踩坑极多只提供部分代码想要全部代码可下载博主上传的资源/私信博主。说明目前工作流前端使用的有两种主流画板都是基于bpmn.js进行个性化封装本人使用过flowable工作流activiti工作流本文主要介绍activiti工作流引入及使用。预览地址activiti引入vue2-在线预览地址整体架构流程用户界面 (UI)表单设计器用于创建和编辑表单用户可以通过可视化界面定义表单字段和布局。流程建模工具提供拖拽式界面帮助用户设计和配置流程图。常见的工具如 Activiti Explorer 中的流程建模器。仪表盘显示流程实例、任务和其他业务指标的仪表盘以便用户可以实时查看流程状态和任务进度。前端框架HTML/CSS/JavaScript构建用户界面的基础技术。JavaScript 框架/库如 Angular、React 或 Vue.js用于实现动态和交互式的前端功能。与后端的交互API 调用前端通过 REST API 与 Activiti 的后端服务进行交互。API 负责处理数据的创建、读取、更新和删除CRUD 操作。数据处理和展示将后端返回的数据通过 JavaScript 处理并渲染到用户界面上。任务管理任务列表展示当前用户的任务和待办事项。任务详细信息查看和编辑任务的详细信息如任务描述、分配人和截止日期等。流程监控流程实例监控当前活动中的流程实例并显示其状态和进展。历史数据查看已完成的流程实例和任务的历史记录以便进行分析和审计。权限和认证用户管理管理用户角色和权限确保不同用户只能访问其被授权的数据和功能。安全性确保数据传输和存储的安全性防止未授权访问。上干货首先第一步就是确定bpmn的版本这是博主使用的版本可直接在package.json中的dependencies下面增加这些字段然后运行npm install下载相关依赖。技术细节准备工作做好以后下一步要做的就是进行画板的引入注工作流画板主要分为三部分但是左侧跟中间一般是集成在一起所以如下画板左侧及中间画板右侧1.画板左侧及中间内容区引入templatedivclasscontainersrefcontentdivclasscanvasrefcanvas/div/div/templatescript// 引入相关的依赖// import BpmnViewer from bpmn-jsimportBpmnModelerfrombpmn-js/lib/Modelerimport{xmlStr}from../mock/xmlStrexportdefault{name:,components:{},// 生命周期 - 创建完成可以访问当前this实例created(){},// 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成一般在该过程进行 Ajax 交互mounted(){this.init()},data(){return{// bpmn建模器bpmnModeler:null,container:null,canvas:null}},// 方法集合methods:{init(){// 获取到属性ref为“content”的dom节点this.containerthis.$refs.content// 获取到属性ref为“canvas”的dom节点constcanvasthis.$refs.canvas// 建模this.bpmnModelernewBpmnModeler({container:canvas})this.createNewDiagram()},createNewDiagram(){// 将字符串转换成图显示出来this.bpmnModeler.importXML(xmlStr,err{if(err){// console.error(err)}else{// 这里是成功之后的回调, 可以在这里做一系列事情this.success()}})},success(){// 给图绑定事件当图有发生改变就会触发这个事件constthatthisthis.bpmnModeler.on(commandStack.changed,function(){that.saveDiagram(function(err,xml){console.log(xml)})})},// 下载为bpmn格式,done是个函数调用的时候传入的saveDiagram(done){// 把传入的done再传给bpmn原型的saveXML函数调用this.bpmnModeler.saveXML({format:true},function(err,xml){done(err,xml)})}},// 计算属性computed:{}}/scriptstyle scoped.containers{background-color:#ffffff;width:100%;height:calc(100vh-52px);}.canvas{width:100%;height:100%;}.panel{position:absolute;right:0;top:0;width:300px;}/stylexmlStr.js文件主要是设置初始画板开始节点。exportvarxmlStr?xml version1.0 encodingUTF-8? definitions xmlnshttp://www.omg.org/spec/BPMN/20100524/MODEL xmlns:bpmndihttp://www.omg.org/spec/BPMN/20100524/DI xmlns:omgdihttp://www.omg.org/spec/DD/20100524/DI xmlns:omgdchttp://www.omg.org/spec/DD/20100524/DC xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance idsid-38422fae-e03e-43a3-bef4-bd33b32041b2 targetNamespacehttp://bpmn.io/bpmn exporterbpmn-js (https://demo.bpmn.io) exporterVersion5.1.2 process idProcess_1 isExecutablefalse startEvent idStartEvent_1y45yut name开始 outgoingSequenceFlow_0h21x7r/outgoing /startEvent task idTask_1hcentk incomingSequenceFlow_0h21x7r/incoming /task sequenceFlow idSequenceFlow_0h21x7r sourceRefStartEvent_1y45yut targetRefTask_1hcentk / /process bpmndi:BPMNDiagram idBpmnDiagram_1 bpmndi:BPMNPlane idBpmnPlane_1 bpmnElementProcess_1 bpmndi:BPMNShape idStartEvent_1y45yut_di bpmnElementStartEvent_1y45yut omgdc:Bounds x152 y102 width36 height36 / bpmndi:BPMNLabel omgdc:Bounds x160 y145 width22 height14 / /bpmndi:BPMNLabel /bpmndi:BPMNShape bpmndi:BPMNShape idTask_1hcentk_di bpmnElementTask_1hcentk omgdc:Bounds x240 y80 width100 height80 / /bpmndi:BPMNShape bpmndi:BPMNEdge idSequenceFlow_0h21x7r_di bpmnElementSequenceFlow_0h21x7r omgdi:waypoint x188 y120 / omgdi:waypoint x240 y120 / /bpmndi:BPMNEdge /bpmndi:BPMNPlane /bpmndi:BPMNDiagram /definitions注* 左侧画板主要是css样式展示在main.js添加如下代码importbpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.cssimportbpmn-js/dist/assets/diagram-js.css;importbpmn-js/dist/assets/bpmn-font/css/bpmn.css;importbpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css;importbpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css以上代码已经实现画板左侧跟内容区的引入效果如下这是我自己添加的你们看到的只有第一个开始节点。2.画板右侧引入首先在代码中增加承放的容器div idjs-properties-panelclasspanel/div然后引入相关依赖增加右侧板的配置this.bpmnModelernewBpmnModeler({container:canvas,// 添加控制板propertiesPanel:{parent:#js-properties-panel},additionalModules:[translationCnModule,// 左边工具栏以及节点propertiesProviderModule,// 右边的工具栏propertiesPanelModule],moddleExtensions:{camunda:camundaModdleDescriptor}})translationCnModule就是适配camunda进行的配置然后配置的地方就完了拿到xml绘图可以自己去写通用方法。选择角色后xml使用camunda:candidateGroups传递。小结对关键代码进行了展示完整代码请联系博主博主对右侧画板进行了自定义开发实现了极简展示方式可选择角色跟条件表达式