【工作流引擎】Flowable流程设计器 基于bpmnjs开发的vue组件

设计器介绍

bpmn.js官网
bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.

集成设计器

本文集成现成的Vue设计器组件
Element UI版本 workflow-bpmn-modeler
Ant Design Vue 版本 workflow-bpmn-modeler-antdv

workflow-bpmn-modeler-antdv 是鄙人在workflow-bpmn-modeler上适配的，所以下文以Ant Design Vue版本介绍，Element UI使用原版包即可

创建项目

vue create bpmn-model-demo
cd bpmn-model-demo

安装Ant Design Vue及less相关依赖

npm i --save ant-design-vue
npm install less less-loader --save-dev

安装设计器

npm i workflow-bpmn-modeler-antdv

main.js 全局引入Ant Design Vue

import Vue from 'vue'
import App from './App';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false