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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
| <!-- 参考：https://github.com/winily/bpmn-demo -->
<template>
<el-dialog
title="流程设计"
:visible.sync="dialogVisible"
fullscreen
:close-on-click-modal="false"
@closed="$emit('close')"
>
<div style="position: relative;">
<!-- 创建一个canvas画布 npmn-js是通过canvas实现绘图的，并设置ref让vue获取到element -->
<div class="bpmn-container">
<div ref="canvas" class="bpmn-canvas" />
<!-- 工具栏显示的地方 -->
<div id="js-properties-panel" class="bpmn-js-properties-panel" />
</div>
<!-- 把操作按钮写在这里面 -->
<div class="action">
<el-upload action class="upload-demo" :before-upload="openBpmn">
<el-button icon="el-icon-folder-opened" />
</el-upload>
<el-button class="new" icon="el-icon-circle-plus" @click="newDiagram" />
<el-button icon="el-icon-download" @click="downloadBpmn" />
<el-button icon="el-icon-picture" @click="downloadSvg" />
<a ref="downloadLink" hidden />
</div>
</div>
</el-dialog>
</template>
<script>
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 BpmnModeler from "bpmn-js/lib/Modeler";
// 左边工具栏以及编辑节点的样式
import "bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
// 工具栏相关
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
import propertiesPanelModule from "bpmn-js-properties-panel";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";
import camundaExtensionModule from "camunda-bpmn-moddle/lib";
// 汉化
import customTranslate from "./translate";
export default {
data() {
return {
dialogVisible: true,
bpmnModeler: null,
canvas: null,
bpmnTemplate: `
<?xml version="1.0" encoding="UTF-8"?>
<definitions
xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:camunda="http://camunda.org/schema/1.0/bpmn"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:activiti="http://activiti.org/bpmn"
id="m1577635100724"
name=""
targetNamespace="http://www.activiti.org/testm1577635100724"
>
<process id="process" processType="None" isClosed="false" isExecutable="true">
<extensionElements>
<camunda:properties>
<camunda:property name="a" value="1" />
</camunda:properties>
</extensionElements>
<startEvent id="_2" name="start" />
</process>
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="leave">
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
<omgdc:Bounds x="144" y="368" width="32" height="32" />
<bpmndi:BPMNLabel>
<omgdc:Bounds x="149" y="400" width="23" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>
`,
};
},
mounted() {
this.$nextTick().then(() => this.init());
},
methods: {
newDiagram() {
this.createNewDiagram(this.bpmnTemplate);
},
async downloadBpmn() {
try {
const { xml } = await this.bpmnModeler.saveXML({ format: true });
// 获取文件名
const name = `${this.getFilename(xml)}.bpmn`;
// 将文件名以及数据交给下载方法
this.download({ name: name, data: xml });
} catch (err) {
console.log("error rendering", err);
}
},
async downloadSvg() {
try {
const { xml } = await this.bpmnModeler.saveXML({ format: true });
// 获取文件名
const name = `${this.getFilename(xml)}.svg`;
// 从建模器画布中提取svg图形标签
let context = "";
const djsGroupAll = this.$refs.canvas.querySelectorAll(".djs-group");
for (const item of djsGroupAll) {
context += item.innerHTML;
}
// 获取svg的基本数据，长宽高
const viewport = this.$refs.canvas.querySelector(".viewport").getBBox();
// 将标签和数据拼接成一个完整正常的svg图形
const svg = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="${viewport.width}"
height="${viewport.height}"
viewBox="${viewport.x} ${viewport.y} ${viewport.width} ${viewport.height}"
version="1.1"
>
${context}
</svg>
`;
// 将文件名以及数据交给下载方法
this.download({ name: name, data: svg });
} catch (err) {
console.log("error rendering", err);
}
},
openBpmn(file) {
const reader = new FileReader();
// 读取File对象中的文本信息，编码格式为UTF-8
reader.readAsText(file, "utf-8");
reader.onload = () => {
// 读取完毕后将文本信息导入到Bpmn建模器
this.createNewDiagram(reader.result);
};
return false;
},
getFilename(xml) {
const start = xml.indexOf("process");
let filename = xml.substr(start, xml.indexOf(">"));
filename = filename.substr(filename.indexOf("id") + 4);
filename = filename.substr(0, filename.indexOf('"'));
return filename;
},
download({ name = "diagram.bpmn", data }) {
// 这里就获取到了之前设置的隐藏链接
const downloadLink = this.$refs.downloadLink;
// 把数据转换为URI，下载要用到的
const encodedData = encodeURIComponent(data);
if (data) {
// 将数据给到链接
downloadLink.href =
"data:application/bpmn20-xml;charset=UTF-8," + encodedData;
// 设置文件名
downloadLink.download = name;
// 触发点击事件开始下载
downloadLink.click();
}
},
async init() {
// 获取画布 element
this.canvas = this.$refs.canvas;
// 将汉化包装成一个模块
const customTranslateModule = {
translate: ["value", customTranslate],
};
// 创建Bpmn对象
this.bpmnModeler = new BpmnModeler({
// 设置bpmn的绘图容器为上门获取的画布 element
container: this.canvas,
// 加入工具栏支持
propertiesPanel: {
parent: "#js-properties-panel",
},
additionalModules: [
// 工具栏模块
propertiesProviderModule,
propertiesPanelModule,
// camunda
camundaExtensionModule,
// 汉化模块
customTranslateModule,
],
moddleExtensions: {
camunda: camundaModdleDescriptor,
},
});
await this.createNewDiagram(this.bpmnTemplate);
},
async createNewDiagram(bpmn) {
// 将字符串转换成图显示出来;
try {
await this.bpmnModeler.importXML(bpmn);
} catch (err) {
console.log(
"打开模型出错,请确认该模型符合Bpmn2.0规范",
err.message,
err.warnings
);
}
},
},
};
</script>
<style>
.bpmn-container {
width: 100%;
height: calc(100vh - 114px);
display: flex;
}
.bpmn-canvas {
width: calc(100% - 300px);
height: calc(100vh - 114px);
}
.bpmn-js-properties-panel {
width: 320px;
height: inherit;
overflow-y: auto;
}
.action {
position: absolute;
bottom: 20px;
left: 20px;
display: flex;
}
.upload-demo {
margin-right: 10px;
}
</style>
|
