若依vue2前后端分离集成flowable

使用：https://gitee.com/tony2y/RuoYi-flowable

0、package.json中添加如下代码

复制代码

  "bpmn-js": "^11.1.0",
    "bpmn-js-bpmnlint": "^0.21.0",
    "vkbeautify": "^0.99.3",
    "diagram-js": "^11.4.1",

添加后再执行nup install

1、main.js添加如下代码

复制代码

//流程处理
import modelerStore from '@/components/Process/common/global'
Vue.prototype.modelerStore = modelerStore;

2、router.js文件中插入对应路由

复制代码

// 流程对应菜单
  {
    path: '/flowable',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'definition/model/:deployId',
        component: () => import('@/views/flowable/definition/model'),
        name: 'Model',
        meta: {title: '流程设计', icon: ''}
      },
      {
        path: 'task/finished/detail/index',
        component: () => import('@/views/flowable/task/finished/detail/index'),
        name: 'FinishedRecord',
        meta: {title: '流程详情', icon: ''}
      },
      {
        path: 'task/myProcess/detail/index',
        component: () => import('@/views/flowable/task/myProcess/detail/index'),
        name: 'MyProcessRecord',
        meta: {title: '流程详情', icon: ''}
      },
      {
        path: 'task/myProcess/send/index',
        component: () => import('@/views/flowable/task/myProcess/send/index'),
        name: 'SendRecord',
        meta: {title: '流程发起', icon: ''}
      },
      {
        path: 'task/todo/detail/index',
        component: () => import('@/views/flowable/task/todo/detail/index'),
        name: 'TodoRecord',
        meta: {title: '流程处理', icon: '', noCache: false}
      },
      {
        path: 'task/flowForm/index',
        component: () => import('@/views/flowable/task/flowForm/index'),
        name: 'FlowForm',
        meta: {title: '流程表单', icon: ''}
      },      
    ]
  },

3、执行流程SQL，然后将流程菜单调整到系统管理下

需要资源:https://download.csdn.net/download/wangdaoyin2010/92630078