基于Ant Design Vue 引入 Flowable 【workflow-bpmn-modeler-antdv】流程设计器组件

安装Ant Design Vue

npm i --save ant-design-vue@1.7.2

在这里插入图片描述
安装less相关依赖

npm install less@3.9.0 less-loader@5.0.0 --save-dev

安装设计器

npm i workflow-bpmn-modeler-antdv

在src目录下创建flowable文件夹，并创建Demo.vue文件

<template><div style="width: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>

main.js 全局引入Ant Design Vue

import Vue from 'vue'
import App from './flowable/Demo.vue'
import router from './router'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'Vue.use(Antd)Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})