[Open Source] A Vue3 Workflow Designer Featuring Low-Code Development, Rapid Application Development, and Extensibility

Open SourceProcess Management

2026-06-28 05:24 4 次浏览 • 0 次下载 0KB

[Open Source] A Vue3 Workflow Designer Featuring Low-Code Development, Rapid Application Development, and Extensibility

1. Project Overview

Easy Process

Easy Process is a workflow designer built with vue3 + vite4, featuring low-code development, rapid application development, and extensibility.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Easy Process Workflow Designer, built with vue3 + vite4, featuring low-code development, rapid application development, and extensibility. [Workflow] [Process Engine] [DingTalk Clone]

Preface

This project is completely open source and will remain so permanently. If you find this project useful, please remember to Star it. Your support and encouragement mean a lot to me.

If you discover any bugs during use, please submit an issue.

Development Plan

Roadmap	Status	Remarks
Core Features	Completed
Node Validation	Completed	Similar to form validation, providing visual feedback through special styles.
Improve Portability	Completed	Completely decouple the UI styles of designer components from third-party components to improve portability.
Add Animation Effects	Completed	Add animation effects to improve the user experience.
Optimize Step-by-Step Prop Passing	Completed	Some features use Prop passing through multiple component levels, making the code less elegant. This section will be refactored using dependency injection.
Code Optimization	In Progress

5. Tech Stack

Development environment

Node >= 14

Technical Selection

vue3
vite4

Run the Project

# Install dependencies
npm install

# Run the Project
npm run dev

Directory Structure

easy-process
├─ public
│  └─ mock                // Mock Test Data
├─ src
│  ├─ assets              // Static Assets
│  ├─ components
│  │  ├─ Button
│  │  │ └─ Button.vue          // Button Component
│  │  ├─ Drawer
│  │  │ └─ Drawer.vue          // Drawer Component
│  │  ├─ SvgIcon
│  │  │ └─ index.vue          // SVG Icon Component
│  │  └─ EasyProcess          // Workflow Designer
│  │    ├─ ProcessDesigner.vue      // Workflow Designer Component (Entry Point)
│  │    ├─ config            // Workflow Designer - Configuration File
│  │    │  ├─ defaultConfig.js      // Default Workflow Structure During Initialization
│  │    │  ├─ nodeConfig.js        // Node Property Configuration
│  │    │  ├─ nodeType.js        // Node Types
│  │    │  └─ keys.js          // Define KEY
│  │    └─ node              // Workflow Designer - Node Component
│  │       ├─ NodeWrap.vue        // Component for Recursively Generating Workflow Nodes
│  │       ├─ base            // Common Components
│  │       │  ├─ BaseNode.vue      // Common Node Component (This component serves only as the node wrapper; the actual content is implemented within each specific node component.)
│  │       │  ├─ BaseDrawer.vue      // Common Node Property Configuration Component (This component serves only as the node property configuration wrapper; the actual content is implemented within each specific node component.)
│  │       │  └─ AddNode.vue      // Add Node Component
│  │       ├─ router          // Routing Node
│  │       │  └─ routerNode.vue      // Routing Node Component
│  │       ├─ condition          // Condition Node
│  │       │  ├─ conditionNode.vue    // Condition Node Component
│  │       │  └─ conditionDrawer.vue  // Condition Node Property Configuration Component
│  │       ├─ start            // Initiator Node
│  │       │  ├─ startNode.vue      // Initiator Node Component
│  │       │  └─ startDrawer.vue    // Initiator Node Property Configuration Component
│  │       ├─ approver          // Approver Node
│  │       │  ├─ approverNode.vue    // Approver Node Component
│  │       │  └─ approverDrawer.vue    // Approver Node Property Configuration Component
│  │       ├─ notify          // Approver Node
│  │       │  ├─ notifyNode.vue      // CC Recipient Node Component
│  │       │  └─ notifyDrawer.vue    // CC Recipient Node Property Configuration Component
│  │       ├─ end            // End Node
│  │       │  └─ endNode.vue      // End Node Component (For display purposes only; it has no functional significance.)
│  │       └─ utils
│  │         └─ tools.js        // Utility Class
│  └─ views
│     └─ index.vue            // demo
└─ README.md              // User Manual

User Manual

Quick Start

Import the Workflow Designer Component
import ProcessDesigner from "@/components/EasyProcess/ProcessDesigner";
Using the Component
<ProcessDesigner ref="process" :data="processData"/>
Get Workflow Design Results
import {getCurrentInstance} from "vue"; const { proxy } = getCurrentInstance(); let result = proxy.$refs.process.getResult();

Workflow Configuration Data Structure

{
  "processId": "Workflow ID",
  "processName": "Workflow Name",
  "nodeConfig": {
    "nodeName": "Node Name",
    "nodeType": "Node Type: start - Initiator Node, approver - Approval Node, router - Routing Node, condition - Condition Node, notify - CC Recipient Node",
    "config": {}, // Node Configuration, which can be customized as needed
    "childNode": {}, // Next-Level Node
    "conditionNodes": [ // Condition Nodes, valid when the node type is router. At least two condition nodes are required.
      {
        "nodeName": "Condition",
        "nodeType": "condition",
        "isLastCondition": "true | false Indicates whether this is the last condition node. The last condition node cannot have any conditions and defaults to approval.",
        "config": {},
        "childNode": {}
      }
    ]
  }
}

Note: Except for the structure within the nodeConfig field, which is fixed, users can add any other business-related fields to the above data structure. See the Dependency Injection section for instructions on retrieving data.

See the README.md documentation for details

下载地址免费

资源直链https://gitee.com/quxiou-code/easy-process

去下载