vue组件里使用bpmn-viewer报错

<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>

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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
伊达几 2021-12-03 15:45
关注
在 data里没有定义 user

本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决 1
无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

vue组件里使用bpmn-viewer报错 vue.js xml 前端
2021-12-03 15:42

回答 1 已采纳在 data里没有定义 user
uniapp（vue3）挂载uView-ui 报错前端
2022-11-09 13:29

回答 3 已采纳 uniapp（vue3）挂载uView-ui 报错Vue.filter is not a functionVue筛选器不是函数分析：vite版本与安装的依赖版本不匹配解决方法： ②降低插件版本n
vue引用ant-design-vue报错 vue.js 前端
2022-06-06 18:00

回答 4 已采纳 //查看依赖的所有版本 npm view ant-design-vue versions --json 回显如下 [ "1.0.2", "1.0.3", "1.1.0-beta.0",
vue3.0使用vue-seamless-scroll报错问题
2022-05-18 19:13

周法海的博客因公司业务需求，需要一个列表滚动功能根据网上资料的步骤来做，出现了如下报错：不管是在main.js中引用还是在组件中直接引用都会出现这个问题。解决方法如下：路径加上src后能正常显示列表并滚动。 ...
使用el-select-v2报错 elementui vue.js
2022-08-16 00:07

回答 1 已采纳 https://element-plus.gitee.io/zh-CN/component/select.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D
vue-video-player报错 vue.js
2018-05-11 08:38

回答 1 已采纳把main.js中关于hls的支持改为：import 'videojs-contrib-hls'
vue项目中的v-for报错，:key后仍旧无法渲染，如何解决？ vue.js 前端
2022-05-22 11:26

回答 2 已采纳给data中变量students中name值加引号，因为它是字符串 students: [ { id: 1, name: "小黑", age: 18 }, { id: 2, name: "老八
vue 使用vue-json-viewer 展示 JSON 格式数据
2023-05-29 15:36

一朵野花压海棠的博客【代码】vue 使用vue-json-viewer 展示 JSON 格式数据。
用vue-video-player的时候运行报错 vue.js 前端
2022-05-31 14:19

回答 1 已采纳删除main.js中对vue-video-player的引入，在特定使用的页面单独引入，或者封装成组件或者看看是不是版本的关系，我这边用的下边的没有问题 npm i vue-video-player
vue加载 element-ui el-table报错 elementui vue.js
2022-01-20 14:50

回答 3 已采纳找到问题了。兄弟们。我不小心在main.js写入了这句话删除掉可以正常预览了。谢谢各位改成这样就是删除我标注的那些然后嘿嘿嘿
webpack5.0使用copy-webpack-plugin报错 javascript node.js webpack 有问必答
2021-12-09 11:01

回答 3 已采纳版本号改为"copy-webpack-plugin": "^9.0.0", 我原来是10报错
vue3中使用 v-viewer 插件报错未定义的属性: Cannot set properties of undefined (setting ‘$viewer），和基本使用。
2022-10-08 16:23

huxiaoxiao.的博客在网上搜了很久也没解决这个问题，在vue2中是不会报错的，后面查看官方文档和百度了几个小时以后，终于解决了，（我个人解决了，版本原因）。因为是 vue3，所以不能直接使用 Vue.use。1.先在main.js 引入。接着安装 ...
vue创建项目，使用vue-router报错 javascript vue.js 前端
2022-02-15 15:37

回答 1 已采纳看一下package.json中的vue和vue-router的版本是什么
vue使用vue-json-viewer展示JSON数据步骤
2022-04-26 23:14

接着奏乐接着舞。的博客前端使用这个插件可以方便展现出json格式的数据，下载引入使用代码可直接使用。
vue子组件中的input使用v-model报错
2019-12-05 17:40

Zxiuping的博客 vue中子组件中input的值是从父组件传过来的，所以子组件的input标签如果用v-model就会报如图错误，解决方案： <el-input:value="configure_edgeName"placeholder="请输入edge名称"@input="nameChange"><...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 12月11日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 12月3日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 12月3日

悬赏问题

¥20 西门子S7-Graph,S7-300，梯形图
¥50 用易语言http 访问不了网页
¥50 safari浏览器fetch提交数据后数据丢失问题
¥15 matlab不知道怎么改，求解答！！
¥15 永磁直线电机的电流环pi调不出来
¥15 用stata实现聚类的代码
¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
¥20 docker里部署springboot项目，访问不到扬声器
¥15 netty整合springboot之后自动重连失效
¥15 悬赏！微信开发者工具报错，求帮改

vue组件里使用bpmn-viewer报错

1条回答 默认 最新

问题事件

悬赏问题

1条回答默认最新