vue使用bpmn流程图

在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