fs-bpmn-vue v1.0.12

bpmnjs+Vue3

这是基于 bpmnjs 和 vue3 的组件,实现流程图绘制和流程图解析功能

使用方法

npm i fs-bpmn-vue -save

全局引入(支持按需引入)

import { createApp } from 'vue'
import App from './App.vue'
//引入样式
import 'fs-bpmn-vue/lib/style.css'
//引入组件
import BpmnVueTemp from 'fs-bpmn-vue'
//全局引入
createApp(App).use(BpmnVueTemp).mount('#app')

工作流画布组件

使用方式

// 全局引入使用

2.自定义方式

import { useBpmnCanvas } from 'fs-bpmn-vue'

let bpmn = useBpmnCanvas()
bpmn.initModeler({
  container: document.getElementById('bpmn'),
  additionalModules: {},
  moddleExtensions: {}
})

/*
 * bpmnID :string 画布ID
 * isReadOnly :boolben 是否开启只读
 * options : object 自定义配置
 * operation : array 自定义操作,是一个操作数组,包含{label,icon,action}对象,目前自带有['导出XML','导入XML','导出SVG','放大','缩小','重置']
 * 剩余文档待补充
 * */

组件对象和事件

import { ref } from "vue";
import { BpmnVue } from "fs-bpmn-vue";
let bpmnRef = ref();
function selectElement(info) {
  //info中包含了businessObject:节点存储的业务对象,shapeType:节点类型
  console.log(info);
}
function shapeEvent() {
  console.log('点击当前节点自定义事件');
}
<template>
  <div class="box" id="bpmn">
    <Bpmn-Vue bpmnID="test" ref="bpmnRef" @select:element="selectElement" :shapeEvent="shapeEvent" />
  </div>
</template>

API

/**
 * options:{
 *   container:画布节点 选择器或dom元素
 *   additionalModules:{} 个性化配置
 *   moddleExtensions:{} 扩展moddle
 * }
 */
initModeler(options);
//获取图中所有节点
getShapeAll()
//根据节点id获取节点对象
getShapeById(id: any)
//获取xml数据
getXML()
//更新节点数据
updateProperties(element: ModdleElement, properties: PropertiesMap<any>)
//例子
function textareaChange() {
    const moddle = state.bpmnStore.getModdle();
    let conditionExpression = moddle.create('bpmn:FormalExpression', {
      name: '哈哈哈',
    });
    state.bpmnStore.updateProperties(toRaw(state.bpmnStore.getActiveElement().element), {
      conditionExpression,
    });
}
//导入xml生成数据
importXML(string: string)
//导出xml
exportXML()
//导出SVG
exportSVG()

//重置数据
resetData()