基于AntDesignVue引入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 xml users: [ { 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/>' })

执行 npm run dev ,访问 http://localhost:8080 项目源码： gitee /wi-gang/bpmn-vue