avap-flow-designer v3.0.1

Avap-flow-designer

高度定制化的 bpmn-js 改造版, 自定义图形面板、画图面板，集成 属性面板。自定义任务类型。

一个基于 bpmn.js，Vue 3.x 和 ElementUI 开发的流程设计器。

在学习和改造的过程中，参考了 main;

在定制化属性时，高度参考了 MiyueFE Blog;

技术点说明

bpmn 企业业务流程建模 就不多解释了,自行学习 ！

bpmn-js 则是很重要的一个流程实现技术框架。

BPMN-JS

请看 BPMN-JS 内部结构介绍

效果图

改造内容

待解决问题

工程相关操作

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

参考资源

• Demo
• Issues
• Examples
• Forum