Avap-flow-designer
高度定制化的 bpmn-js 改造版, 自定义图形面板、画图面板，集成 属性面板。自定义任务类型。
一个基于 bpmn.js，Vue 3.x 和 ElementUI 开发的流程设计器。
在学习和改造的过程中，参考了 main;
在定制化属性时，高度参考了 MiyueFE Blog;
技术点说明
bpmn 企业业务流程建模 就不多解释了,自行学习 ！
bpmn-js 则是很重要的一个流程实现技术框架。
BPMN-JS
在线文档 : LGQ 的本地文档
定制化说明
定制化目标
改造内容
| 内容 | 涉及到的代码 | 描述 |
|---|---|---|
| 自定义工具栏[Palette] 提供者 | palette/CustomPaletteProvider | PaletteProvider 负责工具栏提供，从 CustomConfig 里获取支持的工具生成集合。 |
| 自定义工具栏[Palette] 处理器 | palette/handler/CustomPalette | CustomPalette 负责工具栏构建、属性初始化、位置、画图和渲染 |
| cId | String | 配置 ID |
待解决问题
工程相关操作
VUE 项目直接使用
目前此工程仅放在 avap 私有仓库服务器上。安装命令：
npm install avap-flow-designer --registry=http://verdaccio.dhc:4873/
本项目已经改造成 vue 插件。使用如下：
import Vue from "vue";
//依赖的高亮插件
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark-reasonable.css"; //这里有多个样式，自己可以根据需要切换
// 以下为bpmn工作流绘图工具的样式
import "bpmn-js/dist/assets/diagram-js.css"; // 左边工具栏以及编辑节点的样式
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import "avap-flow-designer/src/css/process-desinger.css"; // 自定义的 process-desinger 样式
import FlowDesigner from "avap-flow-designer/src/flowDesigner";
import DesignerView from "avap-flow-designer/src/flowDesigner/view/designer";
Vue.use(hljs.vuePlugin);
Vue.use(FlowDesigner); //view 页面加入到全局组件库
Vue.use(DesignerView); //仅仅包含画图工具栏、画图面板
//依赖element UI 如果项目中已经引入 element-ui; 则以下可以省略
import ElementUI from "element-ui";
Vue.config.productionTip = false;
Vue.use(ElementUI);本工程包含画图工具栏、画图面板和 属性面板。
# 引入全页面
<flow-designer ref="flow-desinger" :options="options" @init-finished="initFinished"/>
#引入画图工具栏和画图面板
<designer-view :key="`designer-${index}`" v-bind="options" ref="processDesigner" @init-finished="initModeler"/>
#初始化参数
options:{
processId: "",
processName: "",
bpmnXml:'', //初始加载xml
debugModel:true //开启开发模式,开发模式页面会有三个按钮，用以导入导出xml
}
项目运行及二次开发
#工程初始化
npm install
# 打包
npm build
# 本地运行
npm server