[Open Source] An Independently Developed Lightweight Workflow Framework Built with SpringBoot + Activiti

Open SourceProcess Management

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

[Open Source] An Independently Developed Lightweight Workflow Framework Built with SpringBoot + Activiti

1. Project Overview

AntFlow-Vue3

AntFlow is a new frontend workflow configuration approach based on Vue 3.

A lightweight workflow framework independently developed on the backend using Spring Boot + Activiti.

DingTalk-Like Approval Workflow Configuration - Vue 3 Version

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

Project Preview

4. Feature Overview

A Vue 3 implementation of DingTalk-style approval workflows. It features a stable architecture and visual drag-and-drop workflow configuration, significantly lowering the barrier to workflow design. It supports custom approval nodes, custom approval conditions, required parameter validation, and more, meeting over 99.8% of approval workflow requirements.

Project introduction

UI: DingTalk Style
Technical Highlights

1. Component self-invocation and recursive processing are used to handle approval workflows through a tree structure.

Main Features

2. Interface Zoom

<div class="zoom">
  <div :class="'zoom-out'+ (nowVal==50?' disabled':'')" @click="zoomSize(1)"></div>
    <span>{{nowVal}}%</span>
    <div :class="'zoom-in'+ (nowVal==300?' disabled':'')" @click="zoomSize(2)"></div>
</div>

3. Node Configuration (Including Approvers, Initiators, CC Recipients, and Condition Settings)

<el-drawer title="Approver Settings" :visible.sync="approverDrawer" class="set_promoter" :show-close="false" :size="550" :before-close="saveApprover">
    <div class="demo-drawer__content">
        <div class="drawer_content">
            <div class="approver_content">
                <el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType">
                    <el-radio v-for="({value, label}) in setTypes" :key="value" :label="value">{{label}}</el-radio>
                </el-radio-group>
                ...

4. Add Node

<div class="add-node-btn">
    <el-popover placement="right-start" v-model="visible">
          <div class="add-node-popover-body">
              <a class="add-node-popover-item approver" @click="addType(4)">
                  <div class="item-wrapper">
                      <span class="iconfont"></span>
                  </div>
                  <p>Approvers</p>
              </a>
              <a class="add-node-popover-item notifier" @click="addType(5)">
                  <div class="item-wrapper">
                      <span class="iconfont"></span>
                  </div>
                  <p>CC Recipients</p>
              </a>
              <a class="add-node-popover-item condition" @click="addType(2)">
                  <div class="item-wrapper">
                      <span class="iconfont"></span>
                  </div>
                  <p>Conditional Branches</p>
              </a>
          </div>
          ...

5. Error Validation

let {type,error,nodeName,conditionNodes} = childNode
if (type == 4 || type == 5) {
    if (error) {
        this.tipList.push({ name: nodeName, type: ["","Reviewer","CC Recipient"][type] })
    }
    this.reErr(childNode)
} else if (type == 3) {
    this.reErr(childNode)
} else if (type == 2) {
    this.reErr(childNode)
    for (var i = 0; i < conditionNodes.length; i++) {
        if (conditionNodes[i].error) {
            this.tipList.push({ name: conditionNodes[i].nodeName, type: "Condition" })
        }
        this.reErr(conditionNodes[i])
    }
}

6. Fuzzy Search for Matching Users, Positions, and Roles

<input type="text" placeholder="Search Members" v-model="searchVal" @input="getDebounceData($event,activeName)">
<input type="text" placeholder="Search Roles" v-model="searchVal" @input="getDebounceData($event,2)">
<input type="text" placeholder="Please Select a Specific User/Role/Department" v-if="conditionConfig.nodeUserList.length == 0" @click="addConditionRole">

5. Tech Stack

The project requires Node.js version 14.20.1 or later.

1. Install Environment Dependencies: npm i

2. Run Locally: npm run dev

3. Build for Production: npm run build

下载地址免费

资源直链https://gitee.com/ldhnet/AntFlow-Vue3

去下载