在vue中使用bpmn-js（三）

3.关于节点的配置，功能要求：
①在服务器取到图并显示出来
②不能编辑和改动图
③可以获取到具体某个节点的信息

参考链接：https://github.com/bpmn-io/bpmn-js-examples/tree/master/simple-commonjs

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) {
              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"
    ]
  }
</script>

css:
与前面一样