2.新建空的图，功能要求：
① 空的，能自己画；
② 以SVG image格式、BPMN diagram格式下载在本地；
参考链接：(其实就是理解它的思路，把jQuery转化成vue)
https://github.com/bpmn-io/bpmn-js-examples/blob/master/properties-panel/app/index.html
https://github.com/bpmn-io/bpmn-js-examples/blob/master/properties-panel/app/index.js
html:
<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>
js:
<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>
1.一打开页面
2.修改之后下载按钮亮起
