【工作流引擎】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-democd bpmn-model-demo

安装Ant Design Vue及less相关依赖

npm i --save ant-design-vuenpm 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 = falseVue.use(Antd);new Vue({render: h => h(App)}).$mount('#app')

使用模型设计器

<template><div style="winth:100%;height:100%;"><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-antdv';export default {components: {bpmnModeler,},data () {return {xml: "", // Query the xmlusers: [{name: "The Beatles", id: "1" },{name: "The Rolling Stones", id: "2" },{name: "Pink Floyed", id: "3" },],groups: [{name: "Folk Music", id: "4" },{name: "Rock Music", id: "5" },{name: "Classical Music", id: "6" },],categorys: [{name: "Music", id: "7" },{name: "Articles", id: "8" },],};},methods: {getModelDetail () {// Send request to get xml// this.xml = response.xml},save (data) {console.log(data); // { process: {...}, xml: '...', svg: '...' }},},};</script>

更多可参考文档中： 完整示例