bpmn-js 简介
1、什么是 bpmn-js ？
官方地址：https://bpmn.io/
文档地址：https://flowable.com/open-source/docs/
源码地址：https://github.com/bpmn-io
bpmn-js 是一个 BPMN 2.0 渲染工具和和Web建模器。
https://github.com/bpmn-io/bpmn-js
https://github.com/bpmn-io/bpmn-moddle
https://github.com/bpmn-io/diagram-js
https://github.com/bpmn-io/bpmn-js-examples
模型
使用基于Web的建模组件轻松创建自己的BPMN 2.0图。
嵌入和注释
使用该工具包将BPMN 2.0图表嵌入到您的应用程序中。 用对您和您的业务很重要的数据丰富它们。
延伸
集成了浏览器内流程引擎，令牌模拟，自定义元素，样式或建模规则。这取决于您，因为bpmn-js是一个开放工具包。
bpmn-js 在Vue中的使用
通过 npm 安装 bpmn-js 及依赖
npm install --save vue-bpmn
npm install --save bpmn-js
npm install --save bpmn-js-properties-panel
npm install --save bpmn-moddle camunda-bpmn-moddle
npm install --save diagram-js
npm install --save cross-env three three-js
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report在安装过程中可能会出现以下提示
解决方法如下（依次执行下面三个步骤）：
npm audit fix
npm audit fix --force
npm audit如果项目里没有安装webpack打包，还要安装一下webpack
npm install webpack --save-devbpmn-js 示例
<template>
<div class="containers" ref="content">
<div class="canvas" ref="canvas"></div>
<div id="js-properties-panel" class="panel"></div>
<ul class="buttons">
<li>下载</li>
<li>
<a ref="saveDiagram" href="javascript:" title="download BPMN diagram">BPMN diagram</a>
</li>
<li>
<a ref="saveSvg" href="javascript:" title="download as SVG image">SVG image</a>
</li>
</ul>
</div>
</template><script>
// 引入相关的依赖
// import BpmnViewer from 'bpmn-js'
import BpmnModeler from 'bpmn-js/lib/Modeler'
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
export default {
data () {
return {
// bpmn建模器
bpmnModeler: null,
container: null,
canvas: null,
xmlStr: null,
processName: ''
}
},
methods: {
createNewDiagram () {
const bpmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="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" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
' <bpmn2:process id="Process_1" isExecutable="false">\n' +
' <bpmn2:startEvent id="StartEvent_1"/>\n' +
' </bpmn2:process>\n' +
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
' <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
' <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>\n' +
' </bpmndi:BPMNShape>\n' +
' </bpmndi:BPMNPlane>\n' +
' </bpmndi:BPMNDiagram>\n' +
'</bpmn2:definitions>'
// 将字符串转换成图显示出来
this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
if (err) {
console.error(err)
}
})
},
// 下载为SVG格式,done是个函数，调用的时候传入的
saveSVG (done) {
// 把传入的done再传给bpmn原型的saveSVG函数调用
this.bpmnModeler.saveSVG(done)
},
// 下载为SVG格式,done是个函数，调用的时候传入的
saveDiagram (done) {
// 把传入的done再传给bpmn原型的saveXML函数调用
this.bpmnModeler.saveXML({ format: true }, function (err, xml) {
done(err, xml)
})
},
// 当图发生改变的时候会调用这个函数，这个data就是图的xml
setEncoded (link, name, data) {
// 把xml转换为URI，下载要用到的
const encodedData = encodeURIComponent(data)
// 获取到图的xml，保存就是把这个xml提交给后台
this.xmlStr = data
// 下载图的具体操作,改变a的属性，className令a标签可点击，href令能下载，download是下载的文件的名字
if (data) {
link.className = 'active'
link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
link.download = name
}
}
},
mounted () {
// 获取到属性ref为“content”的dom节点
this.container = this.$refs.content
// 获取到属性ref为“canvas”的dom节点
const canvas = this.$refs.canvas
// 建模，官方文档这里讲的很详细
this.bpmnModeler = new BpmnModeler({
container: canvas,
// 添加控制板
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
// 左边工具栏以及节点
propertiesProviderModule,
// 右边的工具栏
propertiesPanelModule
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
})
// 下载画图
let _this = this
// 获取a标签dom节点
const downloadLink = this.$refs.saveDiagram
const downloadSvgLink = this.$refs.saveSvg
// 给图绑定事件，当图有发生改变就会触发这个事件
this.bpmnModeler.on('commandStack.changed', function () {
_this.saveSVG(function (err, svg) {
_this.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg)
})
_this.saveDiagram(function (err, xml) {
_this.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml)
})
})
this.createNewDiagram(this.bpmnModeler)
}
}
</script>CSS 引入:
<style lang="scss">
/*左边工具栏以及编辑节点的样式*/
@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';
/*右边工具栏样式*/
@import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
.containers{
position: absolute;
background-color: #ffffff;
width: 100%;
height: 90%;
}
.canvas{
width: 100%;
height: 100%;
}
.panel{
position: absolute;
right: 0;
top: 0;
width: 300px;
}
.buttons{
position: absolute;
left: 20px;
bottom: 20px;
&>li{
display:inline-block;margin: 5px;
&>a{
color: #999;
background: #eee;
cursor: not-allowed;
padding: 8px;
border: 1px solid #ccc;
&.active{
color: #333;
background: #fff;
cursor: pointer;
}
}
}
}
</style>作者：Jeebiz 创建时间：2020-03-21 23:59
更新时间：2024-08-05 18:41
更新时间：2024-08-05 18:41
