Bpmn.js 使用

源码地址: 点击查看

演示地址: 点击查看

下面是在一个vue项目里面使用bpmn.js的Demo。

安装依赖

pnpm add bpmn-js

简单使用

先准备一个简单的.bpmn文件，比如pizza-collaboration.bpmn, 将其放在public文件夹下。

然后编写一个方法，通过axios请求这个文件，并返回一个Promise。

import axios from 'axios'

export function getPizzaCollaborationBpmn() {
  // 文件放在public/bpmn文件夹下, /bpmn-designer是设置了项目的base
  return axios.get('/bpmn-designer/bpmn/pizza-collaboration.bpmn')
}

先new一个BpmnViewer对象, 构造参数container为DOM节点

import { onMounted, type Ref, ref } from 'vue'
import BpmnViewer from 'bpmn-js'

const container: Ref<HTMLCanvasElement | null> = ref(null)

onMounted(() => {
  if (container.value) {
    const viewer = new BpmnViewer({
      container: container.value,
    })
  }
})

创建好BpmnViewer实例对象后，就可以通过importXML方法导入.bpmn文件了。

// 通过http请求获取bpmn文件
getPizzaCollaborationBpmn().then((res) => {
  // 使用importXML方法导入bpmn文件
  viewer
    .importXML(res.data)
    .then((result) => {
      const { warnings } = result
      if (warnings.length) {
        console.warn('告警信息:', warnings)
      }
      // 缩放到适合的大小
      const canvas = viewer.get<Canvas>('canvas')
      canvas.zoom('fit-viewport')
    })
    .catch(function (err) {
      const { warnings, message } = err
      console.error('错误信息:', warnings, message)
    })
})

完整代码如下:

<script setup lang="ts">
import { onMounted, type Ref, ref } from 'vue'
import BpmnViewer from 'bpmn-js'
import { getPizzaCollaborationBpmn } from '@/api/bunding'
import type { Canvas } from 'bpmn-js/lib/features/context-pad/ContextPadProvider'

const container: Ref<HTMLCanvasElement | null> = ref(null)

onMounted(() => {
  if (container.value) {
    const viewer = new BpmnViewer({
      container: container.value,
    })
    getPizzaCollaborationBpmn().then((res) => {
      viewer
        .importXML(res.data)
        .then((result) => {
          const { warnings } = result
          if (warnings.length) {
            console.warn('告警信息:', warnings)
          }
          const canvas = viewer.get<Canvas>('canvas')
          canvas.zoom('fit-viewport')
        })
        .catch(function (err) {
          const { warnings, message } = err
          console.error('错误信息:', warnings, message)
        })
    })
  }
})
</script>

<template>
  <div ref="container" class="container"></div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>