脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → bpmn-js vue使用

bpmn-js在vue中的基本使用及操作功能

 更新时间：2024年02月05日 11:10:56   作者：菲吻于雪  
这篇文章主要介绍了bpmn-js在vue中的基本使用及操作功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友跟随小编一起看看吧

bpmn-js在vue中的基本使用

gitee: https://gitee.com/philippines-kisses-snow/bpmn-demo
效果：

下载依赖包

npm i bpmn-js bpmn-js-properties-panel camunda-bpmn-moddle
"bpmn-js": "^10.3.0",
"bpmn-js-properties-panel": "^1.11.2",
"camunda-bpmn-moddle": "^7.0.1",

构建bpmn界面

// 样式
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import 'bpmn-js-properties-panel/dist/assets/element-templates.css';
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css';
// bpmn构建器
import BpmnModeler from 'bpmn-js/lib/Modeler.js' // 引入 bpmn-js
// 初始化xml
import diagramXML from './bpmnXML'
// 汉化
import zh from './zh'
// 构建模块
import {
  BpmnPropertiesPanelModule, 
  BpmnPropertiesProviderModule, 
  CamundaPlatformPropertiesProviderModule, 
  CloudElementTemplatesPropertiesProviderModule
} from 'bpmn-js-properties-panel'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json'
// html
<template>
  <div class="app-container">
    <div class="bpmn-main-box">
      <!-- 内容区 -->
      <div ref="bpmn" id="bpmn-container" class="bpmn-container"></div>
      <!-- 右侧控制区 -->
      <div ref="bpmnPanel" id="js-properties-panel"></div>
    </div>
  </div>
</template>
// js
mounted() {
  this.bpmnModeler = new BpmnModeler({
    container: this.$refs.bpmn,
    propertiesPanel: {
      parent: this.$refs.bpmnPanel
    },
    additionalModules: [ 
      BpmnPropertiesPanelModule, 
      BpmnPropertiesProviderModule,
      CamundaPlatformPropertiesProviderModule, 
      CloudElementTemplatesPropertiesProviderModule,
      { translate: [ 'value', this.customTranslate ] } // 汉化
    ],
    moddleExtensions: {
      camunda: camundaModdleDescriptor
    }
  })
  this.createNewDiagram()
}
// 方法
customTranslate(template: any, replacements: any) {
  replacements = replacements || {};
  template = (zh as Record<string, string>)[template] || template;
  return template.replace(/{([^}]+)}/g, function(_: any, key: any) {
    return replacements[key] || '{' + key + '}';
  });
}
createNewDiagram() {
  this.openDiagram(diagramXML);
}
async openDiagram(xml: string) {
  this.bpmnModeler.importXML(xml);
}

css

// css
.app-container {
  background-color: white;
  position: relative;
  height: 100vh;
}
.buttons{
  position: absolute;
  bottom: 30px;
  display: flex;
  left: 50px;
  padding: 0;
  margin: 0;
  list-style: none;
  .item {
    margin-right: 10px;
  }
  .download button {
    padding: 0;
    a {
      padding: 8px 15px;
    }
  }
}
 .bpmn-main-box {
  width:100%;
  height:100%;
  display: flex;
 }
 .bpmn-container {
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
      repeat !important;
 }
 #js-properties-panel {
  border: 1px solid rgba(0,0,0,0.1);
  width: 250px;
 }

zh.ts（部分代码）

export default {
  'Id': '编号',
  'Name': '名称',
  'General': '常规',
  'Details': '详情',
  'Message Name': '消息名称',
  'Message': '消息',
  'Initiator': '创建者',
  'Asynchronous continuations': '持续异步',
  'Asynchronous before': '异步前',
  'Asynchronous after': '异步后',
  'Job configuration': '工作配置',
  'Exclusive': '排除',
  'Job Priority': '工作优先级',
  'Retry Time Cycle': '重试时间周期',
  'Documentation': '文档',
  'Element Documentation': '元素文档',
  'History Configuration': '历史配置',
  'History Time To Live': '历史的生存时间',
  'Forms': '表单',
}

bpmnXML.ts

export default `<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns:bpmn2="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" 
xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
id="sample-diagram" 
targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn2:process id="Process_1" isExecutable="false">
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>`

至此页面搭建已经完成，接下来实现操作功能

添加操作按钮

<template>
  <div class="app-container">
    <div class="bpmn-main-box">
      <div ref="bpmn" id="bpmn-container" class="bpmn-container"></div>
      <div ref="bpmnPanel" id="js-properties-panel"></div>
    </div>
    <!-- 操作按钮 -->
    <ul class="buttons">
      <input ref="file" type="file" style="display: none" @change="fileChange"/>
      <el-button-group class="item download">
        <el-button type="primary" @click="upload()">
          <a title="上传文件"><el-icon><FolderAdd /></el-icon></a>
        </el-button>
        <el-button type="primary" @click="newCreateDoc()">
          <a title="新建"><el-icon><DocumentAdd /></el-icon></a>
        </el-button>
      </el-button-group>
      <el-button-group class="item download">
        <el-button @click="downloadLinkClick()" type="primary" >
          <a ref="downloadLink" id="js-download-diagram" title="xml下载"><el-icon><Download /></el-icon></a>
        </el-button>
        <el-button @click="downloadSvg" type="primary" >
          <a ref="downloadSvg" id="js-download-svg" title="svg下载"><el-icon><PictureFilled /></el-icon></a>
        </el-button>
      </el-button-group>
      <el-button-group class="item download">
        <el-button type="primary" @click="perviewXML">
          <a title="xml预览"><el-icon><Document /></el-icon></a>
        </el-button>
        <el-button type="primary" @click="perviewSVG">
          <a title="svg预览"><el-icon><View /></el-icon></a>
        </el-button>
      </el-button-group>
    </ul>
    <!-- 预览弹出 -->
    <el-dialog title="XML预览" width="80%" v-model="perviewXMLShow">
      <div style="max-height: 65vh;overflow: auto;">
        <highlightjs language='html' :code="perviewXMLStr" />
      </div>
    </el-dialog>
    <el-dialog title="SVG预览" width="80%" v-model="perviewSVGShow">
      <div style="text-align: center;" v-html="perviewSVGData" />
    </el-dialog>
  </div>
</template>

事件方法

let bpmnModeler: any = null
let perviewXMLShow = false
let perviewSVGShow = false
let perviewXMLStr = ''
let perviewSVGData = ''
// 文件上传
fileChange() {
  const fileElement = this.$refs.file as HTMLInputElement
  if (fileElement && fileElement.files) {
    const file = fileElement.files[0]
    const fileReader = new FileReader();
    (this.$refs.file as HTMLInputElement).value = ''
    fileReader.onload = (e: any) => {
      this.bpmnModeler.importXML(e.target.result)
    }
    fileReader.readAsText(file);
  }
}
// 点击文件上传
upload() {
  this.getHTMLElementByRef('file').click()
}
// 新建
newCreateDoc() {
  this.bpmnModeler.importXML(diagramXML)
}
// 下载XML
async downloadLinkClick() {
  const downloadLink = this.$refs.downloadLink as HTMLElement
  try {
    const { xml } = await this.bpmnModeler.saveXML({ format: true });
    this.setEncoded(downloadLink, 'diagram.bpmn', xml);
  } catch (error) {
    this.toast.error('下载失败，请重试')
  }
}
// 下载SVG
async downloadSvg() {
  const downloadSvgLink = this.$refs.downloadSvg as HTMLElement
  try {
    const { svg } = await this.bpmnModeler.saveSVG();
    this.setEncoded(downloadSvgLink, 'diagram.svg', svg);
  } catch (error) {
    this.toast.error('下载失败，请重试')
  }
}
// XML预览
async perviewXML() {
  try {
    const { xml } = await this.bpmnModeler.saveXML({ format: true });
    this.perviewXMLStr = xml
    this.perviewXMLShow = true
  } catch (error) {
    this.toast.error('预览失败，请重试')
  }
}
// SVG预览
async perviewSVG() {
  try {
    const { svg } = await this.bpmnModeler.saveSVG();
    this.perviewSVGData = svg
    this.perviewSVGShow = true
  } catch (error) {
    this.toast.error('预览失败，请重试')
  }
}
// 设置数据
setEncoded(link: HTMLElement, name: string, data: any) {
  const encodedData = encodeURIComponent(data);
  if (data) {
    link.className += ('active')
    link.setAttribute('href', 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData)
    link.setAttribute('download', name)
  } else {
    link.className.replace('active', '')
  }
}

到此这篇关于bpmn-js在vue中的基本使用的文章就介绍到这了,更多相关bpmn-js vue使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • javaScript与vue获取元素的方法代码示例

    javaScript与vue获取元素的方法代码示例

    在开发中我们可能会遇到这样的问题,文本框聚焦、元素点击等,所以下面这篇文章主要给大家介绍了关于javaScript与vue获取元素的相关资料,需要的朋友可以参考下
    2023-10-10
  • Vue3中使用this的详细教程

    Vue3中使用this的详细教程

    在vue3中新的组合式API中没有this,那我们如果需要用到this怎么办?下面这篇文章主要给大家介绍了关于Vue3中使用this的详细教程,需要的朋友可以参考下
    2023-07-07
  • 浅谈vue项目4rs vue-router上线后history模式遇到的坑

    浅谈vue项目4rs vue-router上线后history模式遇到的坑

    今天小编就为大家分享一篇浅谈vue项目4rs vue-router上线后history模式遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue中babel.config.js配置示例详解

    Vue中babel.config.js配置示例详解

    Babel是一个JS编译器,主要作用是将ECMAScript2015+ 版本的代码,转换为向后兼容的JS语法,以便能够运行在当前和旧版本的浏览器或其它环境中,下面这篇文章主要给大家介绍了关于Vue中babel.config.js配置详解的相关资料,需要的朋友可以参考下
    2023-02-02
  • vue中子组件如何间接修改父组件传递过来的值问题

    vue中子组件如何间接修改父组件传递过来的值问题

    这篇文章主要介绍了vue中子组件如何间接修改父组件传递过来的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • vue实现拖动左侧导航栏变大变小

    vue实现拖动左侧导航栏变大变小

    这篇文章主要为大家详细介绍了vue实现拖动左侧导航栏变大变小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue+elementui实现表格多级表头效果

    vue+elementui实现表格多级表头效果

    这篇文章主要为大家详细介绍了vue + elementui实现表格多级表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue中 render 函数功能与原理分析

    vue中 render 函数功能与原理分析

    这篇文章主要介绍了vue中 render 函数功能与原理,结合实例形式分析了vue中render函数的基本功能、原理及相关操作注意事项,需要的朋友可以参考下
    2023-06-06
  • Vue.js实战之通过监听滚动事件实现动态锚点

    Vue.js实战之通过监听滚动事件实现动态锚点

    监听事件是我们在使用vue.js的时候经常使用的一个功能，下面这篇文章主要介绍了Vue.js实战之通过监听滚动事件实现动态锚点 的相关资料，文中通过示例代码介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-04-04
  • 推荐VSCode 上特别好用的 Vue 插件之vetur

    推荐VSCode 上特别好用的 Vue 插件之vetur

    这篇文章主要介绍了推荐VSCode 上特别好用的 Vue 插件之vetur，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论

关注微信公众号

扫一扫