作者： 文章来源：
本文原地址：https://www.mimiwuqi.com/webqianduan/195936.html
推荐两个可以直接用来绘制 Flowable 流程图的 Vue 库，这两个库的相似度还挺高的，且都是基于 Vue2 开发的，所以 Vue3 的还需自己研究一下怎么改一下，或者找更加好的库。
workflow-bpmn-modeler 基于 Vue 和 bpmn.io@7.0，实现了 flowable 的工作流设计器。使用这个流程绘制工具，建议采用 flowable6.4.1 版本，flowable6.4.2 版本开始进行商业化重构，为了方便刨码学习，推荐使用 flowable6.4.1 版本。
这个用法其实很简单，首先我们创建一个 Vue2 的项目，注意 Vue 的版本不要选错了，项目创建好之后，添加 workflow-bpmn-modeler 依赖，执行如下任意命令添加：
npm i workflow-bpmn-modeler //或者 yarn add workflow-bpmn-modeler
添加完成后，package.json 内容如下：
{
"name": "bpmn_demo02",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.8.3",
"element-ui": "^2.15.9",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"workflow-bpmn-modeler": "^0.2.8"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"vue-template-compiler": "^2.6.14"
}
}
注意看版本号。
接下来我们就可以在一个 .vue 文件中使用这个组件了，代码如下：
<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";
export default {
components: {
bpmnModeler,
},
data() {
return {
xml: "", // 后端查询到的 xml
users: [
{ name: "javaboy", id: 1 },
{ name: "itboyhub", id: 2 },
{ name: "江南一点雨", id: 3 },
],
groups: [
{ name: "经理", id: 4 },
{ name: "组长", id: 5 },
{ name: "员工", id: 6 },
],
categorys: [
{ name: "OA", id: "oa" },
{ name: "财务", id: "finance" },
],
};
},
methods: {
getModelDetail() {
// 发送请求，获取 xml
// this.xml = response.xml
},
save(data) {
console.log(data); // { process: {...}, xml: '...', svg: '...' }
},
},
};
</script>
我们来分析一下这段代码：
好啦，这就可以了。
接下来，我们启动 Vue 项目，就可以看到这个流程图绘制页面了：