[开源]一款 Vue3 流程设计器，具备低代码、快速应用及扩展的特点

开源系统流程管理

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

一、开源项目简介

Easy Process

Easy Process 流程设计器，基于vue3 + vite4 实现，具备低代码、快速应用及扩展的特点。

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

easy-process流程设计器，基于vue3 + vite4实现，具备低代码、快速应用及扩展的特点。【工作流】【流程引擎】【仿钉钉】

前言

项目完全开源（永久），如果这个项目让你有所收获，记得 Star 关注哦，这对我是非常不错的鼓励与支持。

如果在使用过程中发现BUG，请提交Issues。

开发计划

计划	状态	备注
基础功能	已完成
节点校验功能	已完成	类似于表单校验功能，进行特殊样式的提示
提升可移植性	已完成	设计器组件的UI样式完全脱离第三方组件，提升可移植性
添加动画特效	已完成	添加动画特效，提升用户体验
优化逐级透传	已完成	部分功能使用Prop 逐级透传实现，这使代码非常不优雅，决定使用依赖注入方式重构此部分代码。
优化代码	进行中

五、技术选型

开发环境

Node >= 14

技术选型

vue3
vite4

运行项目

# 安装依赖
npm install

# 运行项目
npm run dev

目录结构

easy-process
├─ public
│  └─ mock                // mock测试数据
├─ src
│  ├─ assets              // 静态资源
│  ├─ components
│  │  ├─ Button
│  │  │ └─ Button.vue          // 按钮组件
│  │  ├─ Drawer
│  │  │ └─ Drawer.vue          // 抽屉组件
│  │  ├─ SvgIcon
│  │  │ └─ index.vue          // svg图标组件
│  │  └─ EasyProcess          // 流程设计器
│  │    ├─ ProcessDesigner.vue      // 流程设计器组件（入口）
│  │    ├─ config            // 流程设计器-配置文件
│  │    │  ├─ defaultConfig.js      // 初始化时默认流程结构
│  │    │  ├─ nodeConfig.js        // 各节点属性配置
│  │    │  ├─ nodeType.js        // 节点类型
│  │    │  └─ keys.js          // 定义KEY
│  │    └─ node              // 流程设计器-节点组件
│  │       ├─ NodeWrap.vue        // 用于递归生成流程节点的组件
│  │       ├─ base            // 通用组件
│  │       │  ├─ BaseNode.vue      // 通用节点组件（该组件只是节点的外壳，具体内容由各节点组件内部实现）
│  │       │  ├─ BaseDrawer.vue      // 通用节点属性配置组件（该组件只是节点属性配置的外壳，具体内容由各节点组件内部实现）
│  │       │  └─ AddNode.vue      // 添加节点组件
│  │       ├─ router          // 路由节点
│  │       │  └─ routerNode.vue      // 路由节点组件
│  │       ├─ condition          // 条件节点
│  │       │  ├─ conditionNode.vue    // 条件节点组件
│  │       │  └─ conditionDrawer.vue  // 条件节点属性配置组件
│  │       ├─ start            // 发起人节点
│  │       │  ├─ startNode.vue      // 发起人节点组件
│  │       │  └─ startDrawer.vue    // 发起人节点属性配置组件
│  │       ├─ approver          // 审批人节点
│  │       │  ├─ approverNode.vue    // 审批人节点组件
│  │       │  └─ approverDrawer.vue    // 审批人节点属性配置组件
│  │       ├─ notify          // 审批人节点
│  │       │  ├─ notifyNode.vue      // 抄送人节点组件
│  │       │  └─ notifyDrawer.vue    // 抄送人节点属性配置组件
│  │       ├─ end            // 结束节点
│  │       │  └─ endNode.vue      // 结束节点组件（仅用于展示，并没有实际意义）
│  │       └─ utils
│  │         └─ tools.js        // 工具类
│  └─ views
│     └─ index.vue            // demo
└─ README.md              // 使用手册

使用手册

快速开始

导入流程设计器组件
import ProcessDesigner from "@/components/EasyProcess/ProcessDesigner";
使用组件
<ProcessDesigner ref="process" :data="processData"/>
获取流程设计结果
import {getCurrentInstance} from "vue"; const { proxy } = getCurrentInstance(); let result = proxy.$refs.process.getResult();

流程配置数据结构

{
  "processId": "流程ID",
  "processName": "流程名称",
  "nodeConfig": {
    "nodeName": "节点名称",
    "nodeType": "节点类型 start-发起人节点 approver-审批节点 router-路由节点 condition-条件节点 notify-抄送节点",
    "config": {}, // 节点配置，根据需求可以自定义
    "childNode": {}, // 下级节点
    "conditionNodes": [ // 条件节点，节点类型为router时有效，至少会有两个条件节点
      {
        "nodeName": "条件",
        "nodeType": "condition",
        "isLastCondition": "true | false 是否为最后一个条件节点，最后一个条件节点不能设置任何条件，默认为通过",
        "config": {},
        "childNode": {}
      }
    ]
  }
}

注：以上数据结构除了nodeConfig字段内的结构是固定的外，使用者可以添加任意其他业务字段，获取数据方式见依赖注入章节。

详细内容请查看 README.md 文档