vue组件里使用bpmn-viewer报错

Question

<template>
  <a-modal
  :title="title"
  :width="1200"
  :visible="visible"
  :confirmLoading="false"
  @cancel="handleCancel"
  cancelText="关闭"
  >
      <div class="container">
        <button type="primary" @click="previewTemp">预览</button>
        <div class="chart-preview">
            <div style="clear: both;"></div>
            <div class="view-canvas">
                <div id="container"
                     v-bind:style="{width: 100 * scale + '%',height: 100 * scale + '%'}"
                ></div>
            </div>
        </div>
    </div>

  </a-modal>
</template>

<script>
  import BpmnViewer from 'bpmn-js/lib/Viewer';
import jquery from 'jquery';
// import BpmnModeler  from 'bpmn-js/lib/Modeler';

export default {
    name:'process',
    components:{
        jquery
    },
    data() {
        return {
            title:'流程查看',
            visible:false,
            containerEl: null,
            bpmnModeler: null,
            scale: 1,
            // 此变量为预览的xml文件数据，由于行数过多，附在了附件中，使用时，将附件整个复值到currentCanvasXml即可
            currentCanvasXml: ''
        }
    },
    methods: {
        showProcess(){
            this.visible = true
        },
        handleCancel(){
            this.visible = false
        },

        previewTemp(){
        this.containerEl = document.getElementById('container');
        // 避免缓存，每次清一下
        this.bpmnModeler && this.bpmnModeler.destroy();
        this.scale = 1;
        this.bpmnModeler = new BpmnViewer({container: this.containerEl});
        const viewer = this.bpmnModeler;
         this.currentCanvasXml = `
     <?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:activiti="http://activiti.org/bpmn" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:tns="http://www.activiti.org/testm1574124674914" xmlns:xsd="http://www.w3.org/2001/XMLSchema" id="m1574124674914" name="" targetNamespace="http://www.activiti.org/testm1574124674914">
  <process id="Process_12-2" name="请假流程29-1" isExecutable="true">
    <startEvent id="StartEvent_1" name="开始节点">
      <outgoing>SequenceFlow_174x14w</outgoing>
    </startEvent>
    <exclusiveGateway id="ExclusiveGateway_173hwsm" name="排他网关" default="SequenceFlow_0b87ucf">
      <incoming>SequenceFlow_174x14w</incoming>
      <outgoing>SequenceFlow_0b87ucf</outgoing>
      <outgoing>SequenceFlow_1mlwknm</outgoing>
      <outgoing>SequenceFlow_1jijyf9</outgoing>
      <outgoing>SequenceFlow_0a2oxf7</outgoing>
      <outgoing>SequenceFlow_1ayyw2v</outgoing>
    </exclusiveGateway>
    <userTask id="UserTask_006varg" name="审批【班长】" activiti:assignee="${user}" camunda:assignee="${user}">
      <incoming>SequenceFlow_0b87ucf</incoming>
      <outgoing>SequenceFlow_027b4lj</outgoing>
    </userTask>
    <userTask id="UserTask_0v9t159" name="审批【老师】" activiti:assignee="${user}" camunda:assignee="${user}">
      <incoming>SequenceFlow_1mlwknm</incoming>
      <outgoing>SequenceFlow_0kwwsmi</outgoing>
    </userTask>
    <userTask id="UserTask_0cexsmw" name="审批【主任】" activiti:assignee="${director}" camunda:assignee="${user}">
      <incoming>SequenceFlow_15pxa9h</incoming>
      <outgoing>SequenceFlow_0162nyl</outgoing>
      <outgoing>SequenceFlow_1j8rvd6</outgoing>
    </userTask>
    <sequenceFlow id="SequenceFlow_174x14w" sourceRef="StartEvent_1" targetRef="ExclusiveGateway_173hwsm" />
    <sequenceFlow id="SequenceFlow_0b87ucf" sourceRef="ExclusiveGateway_173hwsm" targetRef="UserTask_006varg" />
    <sequenceFlow id="SequenceFlow_1mlwknm" name="大于3天小于7天" sourceRef="ExclusiveGateway_173hwsm" targetRef="UserTask_0v9t159">
      <conditionExpression xsi:type="tFormalExpression">${days&gt3&amp&ampdays&lt7}</conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="SequenceFlow_1jijyf9" name="大于7天小于15天" sourceRef="ExclusiveGateway_173hwsm" targetRef="UserTask_1yhjmto">
      <conditionExpression xsi:type="tFormalExpression">${days&gt7&amp&ampdays&l15}</conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="SequenceFlow_0a2oxf7" name="大于15小于30天" sourceRef="ExclusiveGateway_173hwsm" targetRef="ExclusiveGateway_16xhotd">
      <conditionExpression xsi:type="tFormalExpression">${days&gt15&amp&ampdays&lt30}</conditionExpression>
    </sequenceFlow>
    <parallelGateway id="ExclusiveGateway_16xhotd" name="并行网关1号">
      <incoming>SequenceFlow_0a2oxf7</incoming>
      <outgoing>SequenceFlow_1pgr7xf</outgoing>
      <outgoing>SequenceFlow_15pxa9h</outgoing>
    </parallelGateway>
    <sequenceFlow id="SequenceFlow_1pgr7xf" name="并行-老师" sourceRef="ExclusiveGateway_16xhotd" targetRef="Task_1ckj7m2">
      <extensionElements>
        <activiti:executionListener class="com.bzgwl.mybatis_plus.web.activitiListeners.MyExecutionListener" event="take" />
        <activiti:properties>
          <activiti:property name="messages" value="并行网关到老师" />
        </activiti:properties>
      </extensionElements>
    </sequenceFlow>
    <userTask id="Task_1ckj7m2" name="审批【老师】" activiti:assignee="${teacher}" camunda:assignee="${user}">
      <incoming>SequenceFlow_1pgr7xf</incoming>
      <outgoing>SequenceFlow_0njlz92</outgoing>
      <outgoing>SequenceFlow_13wrv8p</outgoing>
    </userTask>
    <sequenceFlow id="SequenceFlow_15pxa9h" name="并行-主任" sourceRef="ExclusiveGateway_16xhotd" targetRef="UserTask_0cexsmw">
      <extensionElements>
        <activiti:executionListener class="com.bzgwl.mybatis_plus.web.activitiListeners.MyExecutionListener" event="take" />
        <activiti:properties>
          <activiti:property name="messages" value="并行网关到主任" />
        </activiti:properties>
      </extensionElements>
    </sequenceFlow>
    <endEvent id="EndEvent_0vxfvsc">
      <incoming>SequenceFlow_0162nyl</incoming>
      <incoming>SequenceFlow_0njlz92</incoming>
    </endEvent>
    <sequenceFlow id="SequenceFlow_0162nyl" name="不同意" sourceRef="UserTask_0cexsmw" targetRef="EndEvent_0vxfvsc">
      <conditionExpression xsi:type="tFormalExpression">${msg=="no"}</conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="SequenceFlow_0njlz92" name="不同意" sourceRef="Task_1ckj7m2" targetRef="EndEvent_0vxfvsc">
      <conditionExpression xsi:type="tFormalExpression">${msg=="no"}</conditionExpression>
    </sequenceFlow>
    <endEvent id="EndEvent_0wpca53" name="终止节点">
      <incoming>SequenceFlow_0kwwsmi</incoming>
      <incoming>SequenceFlow_027b4lj</incoming>
      <incoming>SequenceFlow_08uyqyq</incoming>
      <incoming>SequenceFlow_186c70i</incoming>
      <incoming>SequenceFlow_1xa5oh9</incoming>
    </endEvent>
    <userTask id="UserTask_07bqdfg" name="校长【审批】" activiti:assignee="admin" camunda:assignee="孔校长">
      <incoming>SequenceFlow_1vc5sps</incoming>
      <outgoing>SequenceFlow_08uyqyq</outgoing>
    </userTask>
    <sequenceFlow id="SequenceFlow_13wrv8p" name="同意" sourceRef="Task_1ckj7m2" targetRef="ExclusiveGateway_0ogqnc4">
      <conditionExpression xsi:type="tFormalExpression">${msg=="yes"}</conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="SequenceFlow_1j8rvd6" name="同意" sourceRef="UserTask_0cexsmw" targetRef="ExclusiveGateway_0ogqnc4">
      <conditionExpression xsi:type="tFormalExpression">${msg=="yes"}</conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="SequenceFlow_0kwwsmi" sourceRef="UserTask_0v9t159" targetRef="EndEvent_0wpca53" />
    <sequenceFlow id="SequenceFlow_027b4lj" sourceRef="UserTask_006varg" targetRef="EndEvent_0wpca53" />
    <parallelGateway id="ExclusiveGateway_0ogqnc4" name="并行网关2号">
      <incoming>SequenceFlow_1j8rvd6</incoming>
      <incoming>SequenceFlow_13wrv8p</incoming>
      <outgoing>SequenceFlow_1vc5sps</outgoing>
    </parallelGateway>
    <sequenceFlow id="SequenceFlow_1vc5sps" sourceRef="ExclusiveGateway_0ogqnc4" targetRef="UserTask_07bqdfg" />
    <sequenceFlow id="SequenceFlow_08uyqyq" sourceRef="UserTask_07bqdfg" targetRef="EndEvent_0wpca53" />
    <sequenceFlow id="SequenceFlow_186c70i" sourceRef="UserTask_1yhjmto" targetRef="EndEvent_0wpca53" />
    <userTask id="UserTask_1yhjmto" name="审批【主任】" activiti:assignee="${user}">
      <incoming>SequenceFlow_1jijyf9</incoming>
      <outgoing>SequenceFlow_186c70i</outgoing>
    </userTask>
    <userTask id="UserTask_0vx7s25" name="审批【主任】" activiti:assignee="lizr">
      <incoming>SequenceFlow_1ayyw2v</incoming>
      <incoming>SequenceFlow_04xjxsz</incoming>
      <outgoing>SequenceFlow_1mcltqi</outgoing>
    </userTask>
    <sequenceFlow id="SequenceFlow_1ayyw2v" name="大于30天" sourceRef="ExclusiveGateway_173hwsm" targetRef="UserTask_0vx7s25">
      <conditionExpression xsi:type="tFormalExpression">${days&gt30}</conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="SequenceFlow_1mcltqi" sourceRef="UserTask_0vx7s25" targetRef="Task_1idf8u6" />
    <userTask id="Task_1idf8u6" name="校长【审批】" activiti:assignee="admin">
      <incoming>SequenceFlow_1mcltqi</incoming>
      <outgoing>SequenceFlow_1xa5oh9</outgoing>
      <outgoing>SequenceFlow_04xjxsz</outgoing>
    </userTask>
    <sequenceFlow id="SequenceFlow_1xa5oh9" name="同意" sourceRef="Task_1idf8u6" targetRef="EndEvent_0wpca53">
      <conditionExpression xsi:type="tFormalExpression">${msg=="yes"}</conditionExpression>
    </sequenceFlow>
    <sequenceFlow id="SequenceFlow_04xjxsz" name="驳回" sourceRef="Task_1idf8u6" targetRef="UserTask_0vx7s25">
      <conditionExpression xsi:type="tFormalExpression">${msg=="no"}</conditionExpression>
    </sequenceFlow>
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_12-2">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="462" y="12" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="460" y="-18" width="43" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="ExclusiveGateway_173hwsm_di" bpmnElement="ExclusiveGateway_173hwsm" isMarkerVisible="true">
        <dc:Bounds x="455" y="75" width="50" height="50" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="428" y="63" width="44" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="UserTask_006varg_di" bpmnElement="UserTask_006varg">
        <dc:Bounds x="150" y="180" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="UserTask_0v9t159_di" bpmnElement="UserTask_0v9t159">
        <dc:Bounds x="290" y="180" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="UserTask_0cexsmw_di" bpmnElement="UserTask_0cexsmw">
        <dc:Bounds x="620" y="180" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="SequenceFlow_174x14w_di" bpmnElement="SequenceFlow_174x14w">
        <di:waypoint x="480" y="48" />
        <di:waypoint x="480" y="75" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="SequenceFlow_0b87ucf_di" bpmnElement="SequenceFlow_0b87ucf">
        <di:waypoint x="455" y="100" />
        <di:waypoint x="200" y="100" />
        <di:waypoint x="200" y="180" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="SequenceFlow_1mlwknm_di" bpmnElement="SequenceFlow_1mlwknm">
        <di:waypoint x="465" y="110" />
        <di:waypoint x="380" y="180" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="351" y="143" width="78" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="SequenceFlow_1jijyf9_di" bpmnElement="SequenceFlow_1jijyf9">
        <di:waypoint x="480" y="125" />
        <di:waypoint x="480" y="230" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="437" y="183" width="85" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="SequenceFlow_0a2oxf7_di" bpmnElement="SequenceFlow_0a2oxf7">
        <di:waypoint x="505" y="100" />
        <di:waypoint x="815" y="100" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="625" y="82" width="80" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="ParallelGateway_1k8iyis_di" bpmnElement="ExclusiveGateway_16xhotd">
        <dc:Bounds x="815" y="75" width="50" height="50" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="810" y="132" width="61" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="SequenceFlow_1pgr7xf_di" bpmnElement="SequenceFlow_1pgr7xf">
        <di:waypoint x="857" y="108" />
        <di:waypoint x="980" y="180" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="906" y="132" width="48" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="UserTask_0z71tws_di" bpmnElement="Task_1ckj7m2">
        <dc:Bounds x="970" y="180" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="SequenceFlow_15pxa9h_di" bpmnElement="SequenceFlow_15pxa9h">
        <di:waypoint x="823" y="108" />
        <di:waypoint x="688" y="180" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="726" y="135" width="48" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNShape id="EndEvent_0vxfvsc_di" bpmnElement="EndEvent_0vxfvsc">
        <dc:Bounds x="822" y="202" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="SequenceFlow_0162nyl_di" bpmnElement="SequenceFlow_0162nyl">
        <di:waypoint x="720" y="220" />
        <di:waypoint x="822" y="220" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="756" y="202" width="33" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="SequenceFlow_0njlz92_di" bpmnElement="SequenceFlow_0njlz92">
        <di:waypoint x="970" y="220" />
        <di:waypoint x="858" y="220" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="898" y="202" width="33" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNEdge>

</definitions>
      `


      console.log(this.currentCanvasXml);

        this.bpmnModeler.importXML(this.currentCanvasXml, (err) => {
            console.log(this.currentCanvasXml);
          if (err) {
            console.error(err);
          } else {
            const canvas = viewer.get('canvas');
            canvas.zoom('fit-viewport');
          }
        });
        }
    }
   
}
</script>

<style scoped>
    .container .tipBox{
         width: 200px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #ebeef5;
            padding: 12px;
    }
</style>

这是我的组件代码，是什么原因老是报错，应该怎么解决？

Answer 1

在 data里没有定义 user