①在服务器取到图并显示出来
②不能编辑和改动图
③可以获取到具体某个节点的信息
参考链接:https://github.com/bpmn-io/bpmn-js-examples/tree/master/simple-commonjs
html:
与前面的一样
js:
// 引入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) { console.error(err); } else { // 字符串转换成图成功后执行的函数 that.success() } // 让图能自适应屏幕 var canvas = that.bpmnModeler.get('canvas'); canvas.zoom('fit-viewport'); }); }) }, // 增加事件监听器在Modeling里 success() { const bpmnjs = this.bpmnModeler; const eventBus = bpmnjs.get('eventBus'); const elementFactory = bpmnjs.get('elementFactory'); // viewer没有这两个 所以不传了, // 如果是Modeler,应该要引入且const modeling = new Modeling(eventBus,elementFactory,commandStack,bpmnRules); // const commandStack = bpmnjs.get('commandStack'); // const bpmnRules = bpmnjs.get('bpmnRules'); const Modeling = require('bpmn-js/lib/features/modeling/Modeling') const modeling = new Modeling(eventBus,elementFactory); this.addBpmnListener(this, modeling); }, addBpmnListener(_self,modeling) { const bpmnjs = this.bpmnModeler; const eventBus = bpmnjs.get('eventBus'); const events = [ 'element.click', 'element.dblclick' ]; events.forEach(function(event) { eventBus.on(event, function(e) { //bpmn:Lane bpmn:SequenceFlow bpmn:Task bpmn:SequenceFlow bpmn:ExclusiveGateway //bpmn:Process //console.log(event + ' ' + JSON.stringify(e.element)); if(e.element.type=='bpmn:Process'||e.element.type=='bpmn:Lane') return; var elementRegistry = bpmnjs.get('elementRegistry'); var shape = elementRegistry.get(e.element.id); // 改变颜色 // modeling.setColor(shape,{ stroke:'RED' }); // console.log(shape) // 我是通过console找到节点id和节点名称存储在哪里的 _self.nodeCode = shape.businessObject.id; _self.nodeName = shape.businessObject.name; // console.log(_self.nodeCode) // console.log(_self.nodeName) }); } }, mounted(){ this.id = this.bpmnId; // 不需要编辑功能,所以只用Viewer就够了,之前都是Modeler var BpmnModeler = require('bpmn-js'); this.container = this.$refs.content; var canvas = this.$refs.canvas; this.bpmnModeler = new BpmnModeler({ container: canvas, // // 添加右边属性控制板 // propertiesPanel: { // parent: '#js-properties-panel' // }, }); this.createNewDiagram(this.bpmnModeler); }, // 父组件传来的id值 props: [ "bpmnId", "modelId" ] }css:
与前面一样