一，Flowable简介
Flowable是一个使用Java编写的轻量级业务流程引擎。Flowable流程引擎可用于部署BPMN 2.0流程定义（用于定义流程的行业XML标准）， 创建这些流程定义的流程实例，进行查询，访问运行中或历史的流程实例与相关数据，等等。
Flowable项目源自于Activiti，通过两个框架的发展史即知。在.7~.5期间Activiti团队内部已经产生了重大的分歧，于是原班核心人员（Activiti5以及6比较核心的leader）Tijs Rademakers和Joram Barrez等便去开发Flowable框架了，原来的Activiti6以及Activiti5代码则留给 Salaboy团队进行开发和维护。Flowable是基于Activiti-6.0.0.Beta4分支开发的。目前Flowable已经修复了Activiti6很多的bug，可以实现零成本从Activiti迁移到Flowable。
详细的内容参见 Flowable BPMN 用户手册
二，设计器bpmn.js
bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成。
详见 bpmnjs官网
三，集成设计器workflow-bpmn-modeler-antdv
集成现成的Vue设计器组件workflow-bpmn-modeler-antdv
其中Vue设计器组件有两个版本：
**
Element UI版本 workflow-bpmn-modelerAnt Design Vue 版本 workflow-bpmn-modeler-antdv
**
下文以Ant Design Vue版本介绍案例
1，创建vue项目
vue create bpmn-model-democd bpmn-model-demo
2，安装less和less loader相关依赖
npm install less@3.9.0 less-loader@5.0.0 --save-dev
3，安装流程模型设计器
workflow-bpmn-modeler-antdv版本信息
npm i workflow-bpmn-modeler-antdv
4，安装后项目的package.json
{"name": "bpmn-model-demo","version": "0.1.0","private": true,"author": "tigerhhzz <5758703@>","scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"ant-design-vue": "^1.7.2","core-js": "^3.8.3","vue": "^2.6.14","vue-router": "^3.2.0","workflow-bpmn-modeler-antdv": "^1.0.7"},"devDependencies": {"@babel/core": "^7.12.16","@babel/eslint-parser": "^7.12.16","@vue/cli-plugin-babel": "^5.0.8","@vue/cli-plugin-eslint": "^5.0.8","@vue/cli-service": "^5.0.8","@vue/eslint-config-standard": "^6.1.0","eslint": "^7.32.0","eslint-plugin-import": "^2.25.3","eslint-plugin-node": "^11.1.0","eslint-plugin-promise": "^5.1.0","eslint-plugin-vue": "^8.0.3","less": "^3.9.0","less-loader": "^5.0.0","vue-template-compiler": "^2.6.14"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/essential","@vue/standard"],"parserOptions": {"parser": "@babel/eslint-parser"},"rules": {}},"browserslist": ["> 1%","last 2 versions","not dead"]}
5，main.js 全局引入Ant Design Vue
import Vue from 'vue'import App from './App.vue'import Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'Vue.config.productionTip = falseVue.use(Antd)new Vue({render: h => h(App)}).$mount('#app')
6，直接在app.vue中使用模型流程设计器
app.vue 完整代码如下：
<template><div id="app"><bpmn-modelerref="refNode":xml="xml":is-view="false":categories="categories":categories-fields="categoriesFields":users="users":groups="groups":candidate-user-data-source="candidateUserDataSource":candidate-group-data-source="candidateGroupDataSource":paletteToolShow="paletteToolShow":panelFilters="panelFilters":paletteFilters="paletteFilters":associate-form-config="associateFormConfig":associate-form-data-options="associateFormDataOptions":assignee-data-source="assigneeDataSource":due-date-data-source="dueDateDataSource":follow-up-date-data-source="followUpDateDataSource":initiator-data-source="initiatorDataSource":skip-expression-data-source="skipExpressionDataSource":condition-expression-data-source="conditionExpressionDataSource"@save="saveModeler"@showForm="showAssociateForm"@createForm="createAssociateForm"><!--左边扩展按钮示例--><div slot="header-left"><a-button>左边扩展</a-button></div><!--右边扩展按钮示例--><div slot="header-right"><a-button>右边扩展</a-button></div></bpmn-modeler><a-modal v-model:visible="formShowVisible" title="显示表单" width="400px"><template #footer></template>【显示表单】本功能为外部扩展，非组件内部弹窗,用于接入flowable动态表单或其他自定义动态表单....</a-modal><a-modal v-model:visible="formCreateVisible" title="创建表单" width="400px"><template #footer></template>【创建表单】本功能为外部扩展，非组件内部弹窗,用于接入flowable动态表单或其他自定义动态表单....</a-modal></div></template><script>//需要依赖ant-design-vue和less/*** package包引入* 内部依赖版本：* "bpmn-js": "^7.2.1",* "vue-codemirror": "^4.0.6"*///import bpmnModeler from '../package/index'//1.0.1 版本引用//import bpmnModeler from 'workflow-bpmn-modeler-antdv/package/';//1.0.2 版本引用import bpmnModeler from 'workflow-bpmn-modeler-antdv';export default {components: {bpmnModeler},data() {return {xml: '', // 后端查询到的xml//指定或候选人users: [{ name: '张三', id: 'zhangsan' },{ name: '李四', id: 'lisi' },{ name: '王五', id: 'wangwu' }],//候选组groups: [{ name: 'web组', id: 'web' },{ name: 'java组', id: 'java' },{ name: 'python组', id: 'python' }],//分类categories: [{ name: 'OA', id: 'oa', children: [{ name: '请假', id: 'leave' }] },{ name: '财务', id: 'finance' }],//过滤面板参数，参数见文档panelFilters: [],//panelFilters: ['category','message'],//左侧操作组件栏过滤，过滤参数见文档//paletteFilters:['space-tool','create.start-event','create.task'],paletteFilters: [],//左侧操作组件栏，行为组件是否显示，设置false组件的操作栏将被隐藏paletteToolShow: true,//头部右侧操作栏显示内容配置rightActionConfig: {'showCode': {'show': true,'icon': true,'label': 'XML'},'downloadXML': {'show': true,'icon': true,'label': 'XML'},'downloadSVG': {'show': true,'icon': true,'label': 'SVG'},'save': {'show': true,'icon': true,'label': '保存'}},/*** 关联表单配置*/associateFormConfig: {enable: true, //此项为false，显示表单标识输入框，后两项设置两项均无效isPreview: true,isCreate: true},//关联表单动态表达式数据源associateFormDataOptions: [],//分配指定人动态表达式数据源assigneeDataSource: ['#{approval}', '${approverId}', '${INITIATOR}'],//分配候选人动态表达式数据源candidateUserDataSource: ['#{approval}', '#{app}'],//分配候选组动态表达式数据源candidateGroupDataSource: ['#{approval}', '#{app}'],//过期时间动态表达式数据源dueDateDataSource: ['${dueDate}'],//观察时间动态表达式数据源followUpDateDataSource: ['${followUpDate}'],//开始节点发起人动态表达式数据源initiatorDataSource: ['initiator'],//跳过表达式动态表达式数据源skipExpressionDataSource: [],//跳转表达式动态表达式数据源conditionExpressionDataSource: ['${approve}', '${!approve}'],//自己业务数据//关联表单扩展，用于接入flowable动态表单或其他自定义动态表单formShowVisible: false,formCreateVisible: false}},mounted() {this.getModelDetail()},methods: {getModelDetail() {fetch('/gh/Vincent-Vic/workflow-bpmn-modeler-antdv@master/src/Leave.bpmn20.xml').then(response => {return response.text()}).then(xml => {this.xml = xml})},saveModeler(data) {console.log(data)},showAssociateForm(formKey) {console.log(formKey)this.formShowVisible = true},createAssociateForm() {console.log('create form')this.formCreateVisible = true}}}</script><style lang="less">html, body, #app {height: 100%;margin: 0;}</style>
7，运行效果
8，workflow-bpmn-modeler-antdv组件参数描述：
主要参数：
头部右侧导航栏按钮配置默认配置
{"showCode":{"show":true,"icon":true,"label":"XML"},"downloadXML":{"show":true,"icon":true,"label":"XML"},"downloadSVG":{"show":true,"icon":true,"label":"SVG"},"save":{"show":true,"icon":true,"label":"保存"}}
面板参数：
面板部分使用Ant Design Vue的AutoComplete 自动完成组件来提高使用便携性，为提高扩展性，可以自行配置自动完成的数据，默认数据如表
过滤属性
filters: {type: Array,default: () => []}
参数列表
包含在参数列表的可以通过filters配置隐藏参数配置
组件栏
过滤属性
paletteFilters 设置可以将操作栏组件隐藏
事件
iframe 部署
如果你的项目是 jquery 或 react 类项目，可以通过 iframe 的方式集成该流程设计器
本仓库通过 github pages 部署了静态页面，使用 jsdelivr 做 cdn ，国内访问也非常快速，所以你可以直接集成本仓库的页面，因为全部白嫖了 github 的资源，没有自己建服务器维护，所以不用担心资源失效问题。
当然你也可以在 docs/lib 文件夹下下载对应的版本，进行本地部署。
集成方式如下（ps：可直接拷贝以下代码到一个html文件中试一下）：
<!DOCTYPE html><html lang="en"><body><iframesrc="https://vincent-vic.github.io/workflow-bpmn-modeler-antdv/cdn/1.0.1/"id="myFrame"frameborder="0"width="100%"height="800px"></iframe><script>let myFrame = document.getElementById("myFrame");// 获取到流程详情window.addEventListener("message", (event) => {console.log(event.data); // { xml: 'xxx', img: 'xxx', process: {} }});myFrame.onload = () => {let postMsg = {xml: "", // 后端查询到的xml，新建则为空串users: [{ name: "张三1", id: "zhangsan" },{ name: "李四1", id: "lisi" },{ name: "王五1", id: "wangwu" },],groups: [{ name: "web组1", id: "web" },{ name: "java组1", id: "java" },{ name: "python组1", id: "python" },],categorys: [{ name: "OA1", id: "oa" },{ name: "财务1", id: "finance" },],isView: false}// 设置初始化值myFrame.contentWindow.postMessage(postMsg, "*")}</script></body></html>
关于定制
本组件对标的是 flowable 官方设计器，也就是实现 flowable 的 xml 规则标准，里面所用名词也都是官方文档中的专业术语。所以这个组件只是程序员在开发阶段，自己建模导出 xml 的工具，试图定制该建模器的行为都是不对的，不要把业务带到建模器中来！自己的业务应该另行开发增删改查来实现。
该组件未来也不会升级 UI 库和 vue。不管库是否兼容，通过 iframe 的方式集成建模器才是最简单正确的方式。
9，完整demo下载链接
bpmn-model-demo
