1. Project Overview

A magical self-developed workflow engine JsonFlow, absolutely simple and easy to use, and suitable for complex Chinese-style approval scenarios, with simple and pure JSON interaction between front and back ends, supporting arbitrary drag-and-drop generation of workflow diagrams, and easy secondary development.

Absolutely simple and easy to use, and suitable for complex Chinese-style approval scenarios' workflow (workflow engine + front-end workflow management interface)

Note: This system does not intend to degrade other workflow systems, please be aware.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

Effect Demonstration

Workflow Designer Supports:

• Drag nodes to the drawing area and perform arbitrary connections
• Double-click nodes, tasks, and connections to set properties, and set listeners and condition properties simultaneously

• Preview workflow diagrams and publish workflows

• More functions are waiting for you to experience...

Workflow Management, Work Order Management, Workflow Handover Module

Task Management

• View pending tasks to see tasks that need to be handled, and support highly configurable personnel handling

• In the pending task point approval, you can view and modify work order information, approval process, and workflow diagrams. The page supports highly configurable

• There are over ten workflow interfaces, and more functions are waiting for you to experience...

4. Feature Overview

Introduction

• The work order system developed based on this system has been running stably in production for a long time, and production has been verified
• A magical self-developed workflow engine JsonFlow, with simple and pure JSON interaction between front and back ends, supporting arbitrary drag-and-drop generation of workflow diagrams, and easy secondary development.
• 1. JsonFlow workflow is based on JsPlumb's workflow designer + self-developed Java workflow engine, forming a pure JSON data interaction workflow system.
• 2. This system, whether front-end or back-end, has a significantly lower learning cost than open-source workflow engines and accompanying workflow designers on the market, and can quickly get started with front-end and back-end logic, making it easier for users to quickly perform secondary development.
• 3. The front-end workflow designer uses Vue ElementUI + JsPlumb to implement, supporting arbitrary drag-and-drop and arbitrary connection drawing of workflow diagrams, with a simpler and more user-friendly operation method.

Workflow Engine Supports:

• 1. Supports basic multiple approval modes: supports copying, approval, triggers, conditional branches, and parallel branches, etc.
• 2. In addition, it is extremely suitable for Chinese-style approval, such as:
• Normal personnel configuration, dynamic allocation, dynamic calculation of personnel, dynamic calculation of node increment tasks, rejection of any node.
• Not waiting for brother tasks, supporting business-side opening and calculation tasks, not meeting conditions can continue to flow to the next node.
• Supports Vue page configuration, supports workflow task handover.

Decoupling of Workflow and Work Order System:

• This system separates the workflow engine from the work order system, with the purpose of decoupling and reducing business intrusion, making it easier for business to perform various complex reports and statistics in the future.
• This system also supports online workflow and task handover, making up for the shortcomings of traditional BPM workflow that needs to be handled separately, making it easier for company personnel to transfer work after flowing.

Implementation Overview:

• Node classification is very simple, initiation node, serial node, parallel node, end node, virtual node. Mainly based on the feeling of using traditional BPM, considering that traditional BPM types are too many, complex, and rarely used, this workflow system only divides into 6 types of nodes, and the main ones used are serial and parallel nodes.
• Sequentially, as the name suggests, the process has only one branch to follow, while parallel indicates that the process can flow to multiple branches simultaneously. Once you grasp this concept, using it will be very simple. This design is based on the fact that traditional BPMs have various nodes or gateways, but they are rarely used. This system adopts sequential + conditional or parallel + conditional to replace them.
• Task types are divided into personal, role, or sign. Personal means that a specific person handles the task, while role indicates that anyone with the same role can handle it, with the first one to handle it belonging to them. In this system, will sign is expressed by multiple node tasks, representing a situation where multiple people need to handle a node simultaneously.
• Handler types are divided into normal assignment, dynamic assignment, and dynamic calculation. Normal assignment and dynamic assignment are commonly used. Normal assignment means that a specific person or role can be specified to handle the task, while dynamic assignment indicates that a person is dynamically specified based on a SPEL expression. Dynamic calculation means that multiple roles or people are used to calculate and generate multiple node tasks through the business side's manual call to the node task increment interface.

Contents to be optimized - continuous iteration

• Delayed processing implementation
• Support for form permission control
• ...

5. Tech Stack

Data structure

{"nodeList": [
    {
      "type": "start",
      "nodeName": "Start",
      "icon": null,
      "attrs": {
        "pcTodoUrl": null,
        "pcFinishUrl": null
      },
      "clazz": {
        "clazz": null,
        "methods": null
      },
      "defJob": {
        "jobName": "Job Name",
        "userId": null,
        "roleId": null
      },
      "jobSize": 1,
      "id": "1661145449179000002",
      "height": 50,
      "x": 210,
      "width": 50,
      "y": 205
    },
    {
      "type": "serial",
      "nodeName": "Serial Node",
      "icon": null,
      "attrs": {
        "pcTodoUrl": null,
        "pcFinishUrl": null
      },
      "clazz": {
        "clazz": null,
        "methods": null
      },
      "defJob": {
        "jobName": "Job Name",
        "userId": null,
        "roleId": null
      },
      "jobSize": 1,
      "status": null,
      "id": "1661145452800000003",
      "height": 50,
      "x": 315,
      "width": 120,
      "y": 235
    }
  ],
  "linkList": [
    {
      "type": "link",
      "label": "",
      "sourceId": "1661145449179000002",
      "targetId": "1661145452800000003",
      "attrs": {
        "varKey": null,
        "varVal": null
      },
      "id": "1661145456855000004",
      "icon": null
    }
  ],
  "attrs": {
    "id": "1661145437059000001"
  },
  "status": "0"
}

Local Installation

• Download this project: npm install
• Start the project: npm run dev
• Build the project dist: npm run build