Vue+LogicFlow+Flowable 前端+后端实现工作流

一、实现效果

前端使用LogicFlow框架绘制流程图，可以导出为xml工作流标准格式数据，通过xml文件传递到后端进行Flowable流程注册，并保存到数据库中。

二、BPM传输文件格式（.xml）

如需添加承办人的话，需要在LogicFlow导出文件的基础上手动添加xmlns:flowable="http://flowable.org/bpmn"flowable插件，不然后台无法识别flowable:candidateUsers。

<bpmn:definitions xmlns:flowable="http://flowable.org/bpmn" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_5588fe5_6" targetNamespace="http://logic-flow.org" exporter="logicflow" exporterVersion="1.2.0"> <bpmn:process isExecutable="true" id="Process_2a9c067_6"> <bpmn:startEvent id="Event_14efe0e" name="开始节点" flowable:candidateUsers="admin,admin1,admin2"> <bpmn:outgoing>Flow_a3e7d0c</bpmn:outgoing> </bpmn:startEvent> <bpmn:userTask id="Activity_602107f" name="普通节点" flowable:candidateUsers="uesr,uesr1,uesr2"> <bpmn:incoming>Flow_a3e7d0c</bpmn:incoming> <bpmn:outgoing>Flow_3f9a386</bpmn:outgoing> </bpmn:userTask> <bpmn:endEvent id="Event_49a11b4" name="结束节点"> <bpmn:incoming>Flow_3f9a386</bpmn:incoming> </bpmn:endEvent> <bpmn:sequenceFlow id="Flow_a3e7d0c" sourceRef="Event_14efe0e" targetRef="Activity_602107f"/> <bpmn:sequenceFlow id="Flow_3f9a386" sourceRef="Activity_602107f" targetRef="Event_49a11b4"/> </bpmn:process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_2a9c067"> <bpmndi:BPMNEdge id="Flow_a3e7d0c_di" bpmnElement="Flow_a3e7d0c"> <di:waypoint x="343" y="164"/> <di:waypoint x="448" y="164"/> </bpmndi:BPMNEdge> <bpmndi:BPMNEdge id="Flow_3f9a386_di" bpmnElement="Flow_3f9a386"> <di:waypoint x="548" y="164"/> <di:waypoint x="665" y="164"/> </bpmndi:BPMNEdge> <bpmndi:BPMNShape id="Event_14efe0e_di" bpmnElement="Event_14efe0e"> <dc:Bounds x="305" y="144" width="40" height="40"/> <bpmndi:BPMNLabel> <dc:Bounds x="305" y="197" width="40" height="14"/> </bpmndi:BPMNLabel> </bpmndi:BPMNShape> <bpmndi:BPMNShape id="Activity_602107f_di" bpmnElement="Activity_602107f"> <dc:Bounds x="448" y="124" width="100" height="80"/> <bpmndi:BPMNLabel> <dc:Bounds x="478" y="157" width="40" height="14"/> </bpmndi:BPMNLabel> </bpmndi:BPMNShape> <bpmndi:BPMNShape id="Event_49a11b4_di" bpmnElement="Event_49a11b4"> <dc:Bounds x="663" y="144" width="40" height="40"/> <bpmndi:BPMNLabel> <dc:Bounds x="663" y="197" width="40" height="14"/> </bpmndi:BPMNLabel> </bpmndi:BPMNShape> </bpmndi:BPMNPlane> </bpmndi:BPMNDiagram> </bpmn:definitions>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46

三、前端框架（LogicFlow）

1. LogicFlow.vue

<template> <div class="container" ref="container"></div> <BpmnNodePanel :lf="lf"></BpmnNodePanel> <div class="node-item"> <div class="node-item-icon bpmn-save" @click="saveNode()"></div> <span class="node-label">保存</span> <div class="node-item-icon bpmn-save" @click="cleanNode()"></div> <span class="node-label">清空</span> <div class="node-item-icon bpmn-save" @click="reloadNode()"></div> <span class="node-label">加载</span> <div class="node-item-icon bpmn-save" @click="deleteNode()"></div> <span class="node-label">删除</span> <div class="node-item-icon bpmn-save" @click="getList()"></div> <span class="node-label">获取定义流程</span> <div class="node-item-icon bpmn-save" @click="flowRun()"></div> <span class="node-label">工作流实例</span> </div> </template> <script> import LogicFlow from '@logicflow/core' import '@logicflow/core/dist/style/index.css' import { BpmnElement, BpmnXmlAdapter, Menu } from '@logicflow/extension' import '@logicflow/extension/lib/style/index.css' import BpmnNodePanel from "./BpmnNodePanel.vue" import { addFlow, infoFlow, deleteFlow, getDeployList, flowRun } from "../api/server" import { addFlowable, addProp, getTypeNameByTag, setValueByTag } from '../utils/xml' export default { data() { return { lf: void 0, xmlData: void 0, definitionsId: void 0, processId: void 0, } }, components: { BpmnNodePanel }, created() { }, mounted() { this.loadFlow() }, methods: { loadFlow() { LogicFlow.use(BpmnElement) LogicFlow.use(BpmnXmlAdapter) LogicFlow.use(Menu) //初始化 this.lf = new LogicFlow({ container: this.$refs.container, stopScrollGraph: true, stopZoomGraph: true, grid: false, keyboard: { enabled: true, }, }); // this.lf.setDefaultEdgeType('bezier') this.lf.render(); }, // 保存 saveNode() { // 获取xml数据 this.xmlData = this.lf.getGraphData(); // 添加flowable扩展 this.xmlData = addFlowable(this.xmlData) // 判断是否为文档编辑 if (this.processId) { // 修改为原流程id this.xmlData = setValueByTag(this.xmlData, 'bpmn:definitions',

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86