|
前言
在上一章节中我们为后端SpringCloud集成了Activiti，使其拥有了流程处理的能力，那么我们该如何在线绘制流程图呢？我们可以用Activiti自带的设计器 activiti-modeler，它长这个样子：
这个activiti-modeler比较丑而且上面的东西也比较晦涩难懂，于是就想到了还有没有其他更好的开源设计器可供使用，那就是bpmn-js :
它的设计器比上面的稍微好看了一些，但是还不够，我们可以通过修改代码DIY达到我们想要的效果：
由于这两个都是国外团队的作品，资料比较少且难啃，存在一定上手难度。在明确需求后，就开始着手使用吧！
集成步骤
1. 引用依赖
可以使用npm安装依赖：
npm i bpmn-js --save // bpmn-js核心依赖，包括设计器的画布、样式和左侧工具栏
npm i bpmn-js-properties-panel --save // bpmn-js右侧属性栏插件
也可以在package.json中添加引用后再执行npm install安装
"dependencies": {
...,
"bpmn-js": "7.5.0",
"bpmn-js-properties-panel": "0.37.6"
}
2. 使用
依赖引用完成后，就可以引入到页面开始使用了，创建一个空页面，按照如下代码实现样例
/* bpmn-js 主体依赖 */
import BpmnModeler from 'bpmn-js/lib/Modeler' // Bpmn-Modeler
/* bpmn-js 左侧工具栏 */
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
/* bpmn-js 右侧属性栏 */
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'
/* 要渲染的bpmn文件内容（实质为xml） */
import xml from './plugins/defalutXml' // 样例直接预置xml，实际应该从后台获得
export default {
name: '',
components: {},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
},
// 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
mounted() {
this.init()
},
data() {
return {
// bpmn建模器
bpmnModeler: null,
container: null,
canvas: null
}
},
methods: {
init() {
// 获取到属性ref为“canvas”的dom节点
const canvas = this.$refs.canvas
// 建模
this.bpmnModeler = new BpmnModeler({
// 基础画布
container: canvas,
// 控制板
propertiesPanel: {
parent: '#js-properties-panel'
},
// 插件
additionalModules: [
propertiesPanelModule,
propertiesProviderModule, // 右侧属性栏
],
})
this.createNewDiagram()
},
createNewDiagram() {
console.log('xml', xml)
// 将字符串转换成图显示出来
this.bpmnModeler.importXML(xml, (err) => {
if (err) {
// console.error(err)
} else {
// 这里是成功之后的回调, 可以在这里做一系列事情
this.success()
}
})
},
success() {
// console.log('创建成功!')
}
}
}
.containers{
position: absolute;
background-color: #ffffff;
width: 100%;
height: 100%;
}
.canvas{
width: 100%;
height: 100%;
}
.panel{
position: absolute;
right: 0;
top: 0;
width: 300px;
}
附件：defalutXml.js
export default
`
`
完成后效果图，bpmn-js引用成功：
|