【工作流引擎】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>
更多可参考文档中: 完整示例