在vue中使⽤bpmn-js（三）
3.关于节点的配置，功能要求：
①在服务器取到图并显⽰出来
②不能编辑和改动图
③可以获取到具体某个节点的信息
html：
与前⾯的⼀样
js：
<script>
// 引⼊API接⼝
import {getBpmnXml, saveBpmnData, getNodeData} from '../../api/modeler'
export default {
data(){
return {
id: "",
bpmnModeler: null,
container: null,
canvas: null,
xmlStr: null,
// 点击节点获取的数据
nodeCode: "",
nodeName: ""
}
},
methods:{
createNewDiagram() {
const that = this;
let params = {
id: this.id
};
// 与后台交互获取到bpmnXmlStr
getBpmnXml(params).then(res => {
const bpmnXmlStr = res.obj;
/
/          console.log(bpmnXmlStr)
this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
if (err) {
<(err);
}
else {
// 字符串转换成图成功后执⾏的函数
that.success()
}
// 让图能⾃适应屏幕
var canvas = ('canvas');
<('fit-viewport');
});
})
},
// 增加事件在Modeling⾥
success() {
const bpmnjs = this.bpmnModeler;
const eventBus = ('eventBus');
const elementFactory = ('elementFactory');
//        viewer没有这两个所以不传了，
vuejs流程图插件
//        如果是Modeler，应该要引⼊且const modeling = new Modeling(eventBus,elementFactory,com
mandStack,bpmnRules); //        const commandStack = ('commandStack');
//        const bpmnRules = ('bpmnRules');
const Modeling = require('bpmn-js/lib/features/modeling/Modeling')
const modeling = new Modeling(eventBus,elementFactory);
this.addBpmnListener(this, modeling);
},
addBpmnListener(_self,modeling) {

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