Vue安装并使用bpmn.js
1、安装命令npm install --save bpmn-js2、在应用程序中使用:import BpmnViewer from 'bpmn-js';import testDiagram from './test-diagram.bpmn';var viewer = new BpmnViewer({container: '#canvas'});viewer.importXML(testDiagr
·
bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.
接下来做好准备,开启bpmn学习之路吧!
Vue中如何安装并使用bpmn呢?
1、安装命相关依赖
npm i bpmn-js --save-D
2、编写HTML代码:
<template>
<div class="containers">
<div class="canvas" ref="canvas"></div>
</div>
</template>
3、编写JS代码
<script>
// 引入相关的依赖
import BpmnModeler from 'bpmn-js/lib/Modeler'
import {
xmlStr
} from '../mock/xmlStr' // 这里是直接引用了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
})
this.createNewDiagram()
},
createNewDiagram() {
// 将字符串转换成图显示出来
this.bpmnModeler.importXML(xmlStr, (err) => {
if (err) {
// console.error(err)
} else {
// 这里是成功之后的回调, 可以在这里做一系列事情
this.success()
}
})
},
success() {
// console.log('创建成功!')
}
}
}
</script>
4、编写CSS
<style scoped>
.containers{
position: absolute;
background-color: #ffffff;
width: 100%;
height: 100%;
}
.canvas{
width: 100%;
height: 100%;
}
.panel{
position: absolute;
right: 0;
top: 0;
width: 300px;
}
</style>
使用命令:npm run start启动项目,打开后就可以看到一个面板,但是没有左侧工具栏和右侧属性框,接下来继续代码编写:
Vue中使用bpmn.js的左侧工具栏:
左侧工具栏的作用:给图形添加新的节点
这一步非常简单,只需要在main.js中引入相关的样式即可:
在main.js中引入css:
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
// 以下为bpmn工作流绘图工具的样式
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'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
Vue中使用bpmn.js右侧属性栏
属性栏的作用:用户在点击图上的节点的时候,能获取该节点的属性信息
想要使用右侧属性栏,就得安装一个插件:bpmn-js-properties-panel
1、在命令行中输入一下命令进行插件安装
npm i bpmn-js-properties-panel --save-D
2、在main.js中引入样式:
// main.js
import Vue from 'vue'
...
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右边工具栏样式
...
3、页面中引入propertiesProviderModule和propertiesPanelModule:
// panel.vue
<script>
...
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'
...
methods: {
init() {
// 获取到属性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
}
})
this.createNewDiagram()
}
}
完整代码:
<template>
<div class="containers" ref="content">
<div class="canvas" ref="canvas"></div>
<div id="js-properties-panel" class="panel"></div>
</div>
</template>
<script>
// 引入相关的依赖
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { xmlStr } from '../../../mock/xmlStr'
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 {
name: '',
components: {},
// 生命周期 - 创建完成(可以访问当前this实例)
created() {},
// 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成,一般在该过程进行 Ajax 交互
mounted() {
this.init()
},
data() {
return {
// bpmn建模器
bpmnModeler: null,
container: null,
canvas: null
}
},
// 方法集合
methods: {
init () {
// 获取到属性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
}
})
this.createNewDiagram()
},
createNewDiagram () {
// 将字符串转换成图显示出来
this.bpmnModeler.importXML(xmlStr, (err) => {
if (err) {
// console.error(err)
}
else {
// 这里是成功之后的回调, 可以在这里做一系列事情
this.success()
}
})
},
success () {
// console.log('创建成功!')
}
},
// 计算属性
computed: {}
}
</script>
<style scoped>
.containers{
background-color: #ffffff;
width: 100%;
height: calc(100vh - 52px);
}
.canvas{
width: 100%;
height: 100%;
}
.panel{
position: absolute;
right: 0;
top: 0;
width: 300px;
}
</style>
到这一步,Vue中引入bpmn就基本完成了,运行项目后,可以看到效果图如下:
更多推荐
已为社区贡献15条内容
所有评论(0)