当前位置：首页 > news >正文

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

news 来源：原创 2025/6/19 11:49:02

安装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/>'
})