RuoYi-Vue+Flowable workflow front-end integration tutorial

This tutorial is suitable for separating projects according to front-end and back-end, and other projects can be found in the extended list.

Recently, the company needs to expand the flowable function of the RuoYi-Vue front-end and back-end separation project a long time ago. Of course, this important task also falls on me (otherwise this article would not exist), and then I saw RuoYi-Vue on the official website. The Vue-Flowable project, according to the migration method provided by the document, cannot work properly for our old version of the project, so I contacted the author and updated the document, planning to publish an article online (after all, some people are too lazy to read it) official documentation).

Official project address: https://gitee.com/tony2y/RuoYi-flowable

After pulling the project locally, start the integration tutorial below. The integration tutorial is divided into front-end and back-end modules.

Front-end migration process

1. Flowale function page related content migration

1.1 Move the flowable folder under the directory ruoyi-ui/src/views/ to the /src/views/ file in your own front-end project.

​

1.2 Move the supporting js file of the page, and move the flowable folder under ruoyi-ui/src/api/ to the /src/api/ file in your own project.

​

2. Flowale process designer related content migration

Move the customBpmn, flow, parser, Process, render, tinymce folders in the ruoyi-ui/src/components directory to the /src/components file in your own project.

​

3. Form designer and personnel selection module related file migration

3.1 Move the build folder in ruoyi-ui/src/views/tool ​​to the /src/views/tool ​​file in your own project, and overwrite it if it exists.

​

3.2 Migrate the relevant styles of the form designer, and move the styles file under ruoyi-ui/src to the /src folder in your own project .

​

3.3 Modify the deepClone function in ruoyi-ui/src/utils/index.js .

​

The modification is as follows, if the function exists, it will be modified, if it does not exist, it will be added.

// 深拷贝对象
export function deepClone(obj) {
  const _toString = Object.prototype.toString

  // null, undefined, non-object, function
  if (!obj || typeof obj !== 'object') {
    return obj
  }

  // DOM Node
  if (obj.nodeType && 'cloneNode' in obj) {
    return obj.cloneNode(true)
  }

  // Date
  if (_toString.call(obj) === '[object Date]') {
    return new Date(obj.getTime())
  }

  // RegExp
  if (_toString.call(obj) === '[object RegExp]') {
    const flags = []
    if (obj.global) { flags.push('g') }
    if (obj.multiline) { flags.push('m') }
    if (obj.ignoreCase) { flags.push('i') }

    return new RegExp(obj.source, flags.join(''))
  }

  const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {}

  for (const key in obj) {
    result[key] = deepClone(obj[key])
  }

  return result
}

3.4 Migrate or replace the relevant js files, replace them if they exist, or add them if they do not exist, and move the js files corresponding to the red boxes in the following figure in the folders ruoyi-ui/src/utils/generator and ruoyi-ui/src/utils to yourself corresponding folder in the project.

​

3.5 Migrate the related icons of the form designer, and move the icons file under ruoyi-ui/src to the /src folder in your own project . ​

4. Migration of related content of process expressions and process listeners

4.1 Relevant page migration, move the expression and listener folders under ruoyi-ui/src/views/system to the /src/views/system folder in your own project.

4.2 Relevant js file migration, move the expression.js and listener.js files under ruoyi-ui/src/api/system to the /src/api/system folder in your own project .

5. Import components into main.js

Add the following code in main.js combined with the above figure.

import Tinymce from '@/components/tinymce/index.vue'
  
Vue.component('tinymce', Tinymce)

6. New dependencies in package.json

In package.json, add the following dependencies in combination with the above figure.

"bpmn-js": "^11.1.0",
"diagram-js": "^11.4.1",
"xcrud": "^0.4.19",
"vkbeautify": "^0.99.3",

7. Add routing configuration

Add routing configuration in the ruoyi-ui/src/router/index.js file. Different ruoyi versions have inconsistent routing. Please refer to your own project routing to add.

The reference is as follows:

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

8. Start the project

Delete the node_modules folder, execute npm install on the console and start the project after the download is complete.

Due to the addition of the process validator, the startup error after migrating the project, please execute the following command

npm install create-bpmnlint-plugin -D

Backend Migration Process

1. Add the following dependencies to the parent pom file

<!-- properties -->
<properties>
  <flowable.version>6.7.2</flowable.version>
</properties>
<!-- dependency -->
<dependency>
  <groupId>com.ruoyi</groupId>
  <artifactId>ruoyi-flowable</artifactId>
  <version>${ruoyi.version}</version>
</dependency>
<dependency>
  <groupId>io.swagger</groupId>
  <artifactId>swagger-annotations</artifactId>
  <version>1.5.21</version>
  <scope>compile</scope>
</dependency>
<dependency>
    <groupId>org.flowable</groupId>
    <artifactId>flowable-spring-boot-starter</artifactId>
    <version>${flowable.version}</version>
</dependency>
<dependency>
  <groupId>com.baomidou</groupId>
  <artifactId>mybatis-plus-boot-starter</artifactId>
  <version>3.4.0</version>
</dependency>
<!--el表达式计算-->
<dependency>
  <groupId>com.googlecode.aviator</groupId>
  <artifactId>aviator</artifactId>
  <version>5.3.3</version>
</dependency>

<!--modules -->
 <modules>
    <module>ruoyi-flowable</module>
</modules>

2. Migrate the entire ruoyi-flowable folder in the RuoYi-flowable project to your own project

3. Introduce the ruoyi-flowable project in the pom file of the admin project

<dependency>
    <groupId>com.ruoyi</groupId>
    <artifactId>ruoyi-flowable</artifactId>
</dependency>

4. Migrate flowable related classes

Depending on the version of the project, the missing entity classes, mapper, and service will also be different, so it is necessary to carry out targeted copying according to the missing classes prompted in the flowable project. If it is a service interface, remember to complete the corresponding controller.

5. Add the following configuration in the yml configuration file of the admin project

Add the following configuration to the application.yml file

# flowable相关表
flowable:
  # true 会对数据库中所有表进行更新操作。如果表不存在，则自动创建(建议开发时使用)
  database-schema-update: false
  # 关闭定时任务JOB
  async-executor-activate: false

After the data source address, you need to add nullCatalogMeansCurrent=true to ensure that no error will be reported when the flowable table is automatically created.

6. Migrating database tables

Create a new library and execute the tony-flowable.sql file. If there are any missing tables in the flowable project, import the corresponding tables into your own database. The mysql database version needs to be 5.7.

7. Data Migration

Add sys_menu to its own table corresponding to the menu data in the red box in the figure below.

 Add sys_dict_type corresponding to the dictionary type data in the red box in the figure below to your own table.

 Add sys_dict_data corresponding to the dictionary data in the red box in the figure below to your own table.

8. Start the project

When starting for the first time, you need to set the database-schema-update in the yml configuration file to true , which will automatically create all the tables required in flowable.

After completing the above operations, you can use it normally in your own project.