vue使用bpmn流程图

2021-03-16 16:01:18 阅读：838 来源： 互联网

标签：vue 流程图 bpmn bpmnModeler js 1px data name

在vue项目中使用 bpmn流程图

　　1、安装插件

　　　　cnpm install bpmn-js --save　　

　　2、在main.js引入　　

import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

　　3、在需要流程图的页面引入　　

import BpmnModeler from 'bpmn-js/lib/Modeler';
import camundaExtension from './camunda'; //定义各个元素拥有的属性配置

　　 4、camunda属性配置

　　https://blog-static.cnblogs.com/files/lemoncool/camunda.js

　　5、具体操作

<template>
  <div class="containerBox">
    <el-button-group>
      <el-button type="primary" size="mini" @click="handleUndo">后退</el-button>
      <el-button type="success" size="mini" @click="handleRedo">前进</el-button>
      <el-button type="warning" size="mini" @click="handleDownload">下载</el-button>
      <el-upload style="display: inline-block;" :file-list="fileList" class="upload-demo" action="" :auto-upload="false" :show-file-list="false" :on-change="handleOnchangeFile" :on-remove="handleRemove" :before-remove="beforeRemove">
        <el-button type="danger" size="mini">导入</el-button>
      </el-upload>
    </el-button-group>
    <div id="container"></div>
  </div>
</template>
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
import camundaExtension from './camunda';

export default {
  name: 'index',
  data() {
    return {
      containerEl: null,
      bpmnModeler: null,
      fileList: [],
    };
  },
  mounted() {
    this.containerEl = document.getElementById('container');
    this.bpmnModeler = new BpmnModeler({
      container: this.containerEl,
      moddleExtensions: { camunda: camundaExtension },
    });
    this.create();
  },
  methods: {
    create() {
      this.bpmnModeler.createDiagram(() => {
        this.bpmnModeler.get('canvas').zoom('fit-viewport');
      });
    },
    handleRemove(file) {
      for (let i = 0; i < this.fileList.length; i++) {
        if (file.name === this.fileList[i].name) {
          this.fileList.splice(i, 1);
        }
      }
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 后退
    handleUndo() {
      this.bpmnModeler.get('commandStack').undo();
    },
    // 前进
    handleRedo() {
      this.bpmnModeler.get('commandStack').redo();
    },
    handleDownload() {
      this.bpmnModeler.saveXML({ format: true }, (err, data) => {
        const dataTrack = 'bpmn';
        const a = document.createElement('a');
        const name = `diagram.${dataTrack}`;
        a.setAttribute(
          'href',
          `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(data)}`
        );
        a.setAttribute('target', '_blank');
        a.setAttribute('dataTrack', `diagram:download-${dataTrack}`);
        a.setAttribute('download', name);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
    },
    handleOnchangeFile(file) {
      const reader = new FileReader();
      let data = '';
      reader.readAsText(file.raw);
      reader.onload = (event) => {
        data = event.target.result;
        this.bpmnModeler.importXML(data, (err) => {
          if (err) {
            this.$message.info('导入失败');
          } else {
            this.$message.success('导入成功');
          }
        });
      };
    }
  }
}

</script>
<style scoped>
.containerBox {
  height: calc(100vh - 220px);
  position: relative;

}

#container {
  height: calc(100% - 50px);
  background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
  background-image: linear-gradient(to right, #dfdfdf 1px, transparent 1px), linear-gradient(to bottom, #dfdfdf 1px, transparent 1px), linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
  background-position: left -1px top -1px, left -1px top -1px, left -1px top -1px, left -1px top -1px;
}

</style>

　　效果图

　　　后退、前进分别就是上一步、下一步；

　　　下载：可以直接将流程图以 .bpmn的格式下载到本地；　　

　　　导入：将本地的文件导入到页面可以直接在画布上渲染出来；

　　摘要：https://www.cnblogs.com/lemoncool/p/12660812.html

标签：vue,流程图,bpmn,bpmnModeler,js,1px,data,name
来源： https://www.cnblogs.com/houBlogs/p/14544032.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue使用bpmn流程图