一、介绍
workflow-bpmn-modeler 基于 Vue 和 bpmn.io@7.0，实现了 flowable 的工作流设计器。
二、用法
1.主文件
<template>
<div>
<bpmn-modeler
ref="refNode"
:xml="xml"
:users="users"
:groups="groups"
:categorys="categorys"
:is-view="false"
@save="save"
/>
</div>
</template>
<script>
import bpmnModeler from "workflow-bpmn-modeler"; // 从 workflow-bpmn-modeler 中导入 bpmnModeler
export default {
name: 'BpmnModeler',
components: {
bpmnModeler
},
data() {
return {
xml: '',
users: [],
groups: [],
categorys: []
}
},
created() {
// 查询流程xml
this.getModelDetail()
},
methods: {
/** xml 文件 */
getModelDetail() {
// 发送请求，获取xml
// this.xml = response.xml
},
/** 保存xml */
save(data) {
console.log(data)
// { process: {...}, xml: '...', svg: '...' }
}
}
}
</script>
1）组建属性介绍：
1.xml：流程图文件xml数据。(可以提前给一个流程图的 XML 字符串，这样 bpmnModeler组件就会将这个XML字符串所对应的流程图给画出来，如果我们只是单纯的想自己绘制流程 图，那么这个可以不用管，给一个空字符串就行了)。
2.users：指定或者候选的用户列表，是一个数组。（当我们配置UserTask的时候，可以设置这个UserTask由谁来处理，users配置的就是这里用到的用户）。
3.groups：候选组。(这个类似于 users，也是在UserTask中，如果我们想要配置一个UserTask的候选组的话，那么就会用到 groups 中的内容)。
4.categorys：流程分类值。
5.is-view：视图模式。(这个表示当前bpmnModeler是要画流程图还是单纯的只是将流程图展示出来，false 表示我们是用 bpmnModeler 画流程图的，如果设置为 true，就表示 bpmnModeler 只是用来展示流程图)。
6.paletteFilters 左侧操作组件栏过滤, 例如: ['create.start-event', 'create.task']
7.paletteToolShow 左侧操作组件栏，行为组件是否显示，设置false组件的操作栏将被隐藏
8.rightActionConfig 头部右侧操作栏显示内容配置, 例如：showCode / downloadXML / downloadSVG / save
2）事件
1.save 保存按钮触发事件
2.showForm 显示挂在表单点击事件
3.creatForm 创建表单点击事件
具体属性参考：blog.csdn.net/weixin_4302…
2 ) 自定义Modeler
1.modeler 实例化
this.modeler = new Modeler({
container: this.$refs.canvas, // 渲染容器
additionalModules: [ //自定义且与默认扩展包一起使用的模块列表
{
translate: ['value', customTranslate] //汉化
}
],
moddleExtensions: { // 需要用的扩展包
flowable: flowableModdle
}，
// width：string | number；// 查看器宽度
// height: string | number； // 查看器高度
// modules：<didi.Module>[]; // 自定义且需要覆盖默认扩展包的模块列表
})
2.modeler实例化之后可直接调用的方法
1.this.bpmnModeler.get(name, strict); // 返回name对应的模块实例
2.// 内部调用了importXML方法，读取内部的默认xml字符串
this.bpmnModeler.createDiagram();
3.// 将图形dom挂载到目标节点
this.bpmnModeler.attachTo(parentNode);
4.// 清空
this.bpmnModeler.clear()
5.// 销毁
this.bpmnModeler.destroy()
6.// 脱离dom
this.bpmnModeler.detach()
7.// 获取流程定义
this.bpmnModeler.getDefinitions()
8.// 获取扩展功能模块列表
this.bpmnModeler.getModules()
9./**
* 导入解析的定义并呈现BPMN 2.0图。完成后，查看器将结果报告回给提供的回调函数（错误，警告）
* @param { ModdleElement<Definitions> } definitions 模块名
* @param { ModdleElement<BPMNDiagram>|string } [bpmnDiagram] 要呈现的BPMN图或图的ID（如果未提供，将呈现第一个）
*/
this.bpmnModeler.importDefinitions(definitions, bpmnDiagram)
10./**
* 导入xml（字符串形式），返回导入结果
* 后续会取消传入回调函数的方式
* 推荐使用async/await或者链式调用
* @param { string } xml 流程图xml字符串
* @param { Promise } callback 回调函数，出错时返回{ warnings，err }
*/
this.bpmnModeler.importXML(xml, callback) ！！！重要
11.// 注销事件监听器
this.bpmnModeler.off(eventName, callback)
12.// 注册事件监听，同名将删除以前的监听器，privorty可不传，程序会自动替换回调函数
this.bpmnModeler.on(eventName, priority, callback, target)
13.// 保存为svg文件，与importXML方法一样，后续会取消传入callback的方式
this.bpmnModeler.saveSVG(callback)
14.// 保存为xml文件，与importXML方法一样，后续会取消传入callback的方式
this.bpmnModeler.saveXML(callback)
3.基础常用方法：
前进： this.modeler.get('commandStack').redo()
后退： this.modeler.get('commandStack').undo()
方法缩小：
this.zoom = this.modeler.get('canvas').zoom()
this.zoom += (zoomIn ? 0.1 : -0.1)
this.modeler.get('canvas').zoom(this.zoom)
节点改变的方法：
this.modeler.on('selection.changed', e => {})
节点点击的方法：
this.modeler.on('element.click', e => {})
节点增加的方法：
this.modeler.on('root.added', e => {})
三.workflow-bpmn-modeler代码流程图结构
index.vue 自定义的流程图的布局主入口，这里很重要！
PropertyPanel.vue 右侧属性栏的主组件方法
BpmData.js 存储流程设计相关参数
Flowable 属性的配置文件
nodePanel 右侧分别各个组件
Common 基础的一些方法
四.建议
如果是重头开发的话，建议用logic-flow：site.logic-flow.cn/docs/#/zh/g…
