一飞开源，介绍创意、新奇、有趣、实用的开源应用、系统、软件、硬件及技术，一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区，共建开源新生态！

一、开源项目简介Easy Process

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

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

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

前言

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

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

开发计划

计划

状态

备注

基础功能

已完成

节点校验功能

已完成

类似于表单校验功能，进行特殊样式的提示

提升可移植性

已完成

设计器组件的UI样式完全脱离第三方组件，提升可移植性

添加动画特效

已完成

添加动画特效，提升用户体验

优化逐级透传

已完成

部分功能使用Prop 逐级透传实现，这使代码非常不优雅，决定使用依赖注入方式重构此部分代码。

优化代码

进行中

五、技术选型开发环境Node >= 14技术选型vue3vite4运行项目# 安装依赖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 文档

六、源码地址

访问一飞开源：https://code.exmay.com/