<template>
<div>
<div class="canvas" ref="canvas"></div>
</div>
</template>
<script>
// 引入相关的依赖
import BpmnViewer from 'bpmn-js/lib/Viewer'
export default {
data() {
return {
visible: false,
// bpmn建模器
bpmnViewer: null,
confirmLoading: false
}
},
methods: {
//初始化流程图
open(bpmn20Xml) {
this.$nextTick(() => {
this.init(bpmn20Xml)
})
},
init(bpmn20Xml) {
// 获取到属性ref为“canvas”的dom节点
// 建模
this.bpmnViewer = new BpmnViewer({
container: this.$refs.canvas,
keyboard: {
bindTo: window
}
})
this.createNewDiagram(bpmn20Xml)
},
async createNewDiagram(bpmn20Xml) {
try {
const result = await this.bpmnViewer.importXML(bpmn20Xml)
const { warnings } = result
console.log(warnings)
} catch (err) {
console.log(err.message, err.warnings)
}
},
handleOk() {
this.handleCancel()
},
handleCancel() {
this.bpmnViewer.destroy()
this.visible = false
}
}
}
</script>
<style scoped>
.canvas{
width: 100%;
height: 400px;
}
</style>
Activiti 配置只读模式(只显示流程图)
最新推荐文章于 2024-04-09 17:10:45 发布