yw-flow-designer

基于 BPMN.js 的流程设计器，支持自定义扩展。

安装

npm install yw-flow-designer

使用方法

Vue 2项目

import Vue from 'vue'
import YwFlowDesigner from 'yw-flow-designer'
// 引入必要的样式
import 'yw-flow-designer/dist/style.css'
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(YwFlowDesigner)

Vite + Vue 2项目

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm.js'
    }
  },
  optimizeDeps: {
    include: ['yw-flow-designer']
  }
})

// main.js
import Vue from 'vue'
import YwFlowDesigner from 'yw-flow-designer'
import 'yw-flow-designer/dist/style.css'
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(YwFlowDesigner)

组件使用

<template>
  <div class="designer-container">
    <bpmn-toolbar v-if="showToolbar" />
    <div class="main-content">
      <bpmn-designer ref="designer" />
      <bpmn-panel v-if="showPanel" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showToolbar: true,
      showPanel: true
    }
  },
  methods: {
    // 获取XML
    async getXML() {
      const designer = this.$refs.designer
      const { xml } = await designer.getModeler().saveXML({ format: true })
      return xml
    },
    // 设置XML
    async setXML(xml) {
      const designer = this.$refs.designer
      await designer.getModeler().importXML(xml)
    }
  }
}
</script>

<style>
.designer-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  display: flex;
  position: relative;
}
</style>

仅查看模式

<template>
  <div class="viewer-container">
    <bpmn-viewer :xml="xml" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      xml: '' // BPMN XML字符串
    }
  }
}
</script>

组件说明

BpmnDesigner

流程设计器主组件

BpmnViewer

流程图查看组件

BpmnPanel

属性面板组件

BpmnToolbar

工具栏组件

BpmnIcon

BPMN图标组件

API文档

BpmnDesigner Methods

| 方法名 | 参数 | 返回值 | 说明 | |--------|------|--------|------| | getModeler | - | Modeler实例 | 获取bpmn-js的modeler实例 | | getXML | - | Promise<{xml: string}> | 获取当前流程的XML | | setXML | xml: string | Promise | 设置流程XML |

BpmnViewer Props

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | xml | String | '' | BPMN XML字符串 |

工具函数

import { utils, boUtils } from 'yw-flow-designer'

// 注册自定义模块
utils.registerModule('custom', CustomModule)

// 获取节点名称
boUtils.getNameValue(element)

自定义主题

可以通过覆盖CSS变量来自定义主题：

:root {
  --bpmn-primary-color: #409eff;
  --bpmn-font-size: 14px;
  --bpmn-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

License

MIT