bpmn-js+vue实现⼯作流设计器
bpmn-js + vue实现⼯作流设计器
此⽂只为记录⼀下⾃⼰学习bpmn-js和使⽤bpmn-js实现⼯作流设计器的过程。以后我将通过不断提出新需求的⽅式，来逐渐完成⼀个简单的⼯作流设计器。
1、bpmn-js初体验
安装vue
新版的vue-cli有图形化⼯具，新版本的Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或2.x)，你需要先通过 npm uninstall vue-cli -g进⾏卸载
# 新版安装命令
npm install -g @vue/cli
# 安装完成后，我们就可以使⽤vue ui命令打开图形界⾯来创建管理vue项⽬了
vue ui
使⽤vue-cli创建项⽬
略…
安pmn-js
# 切换到新建的项⽬
npm install bpmn-js --save-dev
按装完成后可以在node-modules中到这⼏个⽂件夹
简单的查看⼯作流图形的例⼦
官⽅的例⼦都是基于jquery的，在获取l⽂档的时候可以直接import，在vue中需要通过异步请求来获取数据，因此需要安装axios
安装axios
npm install axios
安装完成以后修改main.js
添加⼀个vue组件，直接上代码
<template>
<div class="containers">
<div id="canvas" class="canvas" ref="canvas"></div>
</div>
</template>
<script>
import BpmnJS from 'bpmn-js' // 引⼊ bpmn-js
export default {
data () {
},
mounted() {
var viewer = new BpmnJS({
container: '#canvas'
})
var diagramUrl = 'cdn.staticaly/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';        // var diagramUrl = 'localhost:8080/l';
this.$(diagramUrl)
.then(function(res){
viewer.importXML(res.data, function(err){
if (!err) {
console.log('success!')
<('canvas').zoom('fit-viewport')
console.log('')
} else {
console.log('something went wrong:', err)
vuejs流程图插件
}
})
})
.
catch(function(err){
console.log(err)
})
}
}
</script>
<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';
.containers{
position: absolute;
background-color: #ffffff;
width: 100%;
height: 100%;
.canvas{
width: 100%;
height: 100%;
}
.bjs-powered-by {
display: none;
}
}
</style>
运⾏以后可以看到⼀下页⾯
使⽤中间遇到的问题
图形不显⽰，F12 发现报错
something went wrong: Error: unparsable content omgdc:Bounds detected; this may indicate an invalid BPMN 2.0 diagram file
line: 0
column: 4310
nested error: missing namespace on omgdc:Bounds
at error (index.esm.js?42c7:63)
at handleError (index.esm.js?42c7:689)
at handleError (index.esm.js?ea8d:193)
at parse (index.esm.js?ea8d:1016)
at Parser.parse (index.esm.js?ea8d:298)
at eval (index.esm.js?42c7:856)
⾮常郁闷，我的bpmn⽂件命名都指明了namespace，为什么还提⽰ missing namespace？
viewer#importXML需要的参数是个字符串，所以想当然的将res转化为字符串，后来 仔细查看res中的数据发现res是⼀个object，res = {data:""} ，所以只需需要取出data就可以了。
解决：
2、新需求：可以拖拽⾃定义⼯作流
实现⼯作流的编辑需要⽤到bpmn-js的另⼀个重要的组件（BpmnModeler）。
效果： 这⾥顺便测试了国际化
还是直接上代码
<template>
<div class="containers" ref="containers">
<div id="js-canvas" class="canvas" ref="canvas"></div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。