简介
lowflow-design 是一个基于 Vue3、Vite、TypeScript、Element-Plus 等技术栈开发的，适用于低代码或无代码开发平台的流程设计器。它让普通人也能通过简单配置快速搭建流程，并提供了将 json 转换为 xml 的后端代码：lowflow-design-converter。
在线预览
- lowflow-design: tsai996.github.io/lowflow-des…
- 成品案例: demo.lowflow.vip/
项目源码
- 后端源码 (lowflow-design-converter):
- github: github.com/tsai996/low…
- 码云: gitee.com/cai_xiao_fe…
- 前端源码 (lowflow-design):
-
github: github.com/tsai996/low…
-
lowflow-design
- 克隆 lowflow-design 项目代码：
git clone https://github.com/tsai996/lowflow-design.git - 安装依赖：
npm install - 启动开发服务器：
npm run dev - 访问 http://localhost:3000/，开始使用 lowflow-design 设计流程
示例图
特性
- 节点: 支持多种节点类型，包括审批人、抄送人、互斥分支、计时等待、消息通知等。
- 状态: 所有节点都支持状态配置，可以根据不同的状态进行不同的处理。
- 描述: 可以对每个节点进行描述，方便理解节点的作用。
- 审批人: 支持单人、多人、角色、部门、发起人、上级领导、自定义审批人等多种审批人类型。
- 抄送人: 支持单人、多人、角色、部门、发起人、上级领导、自定义抄送人等多种抄送人类型。
- 互斥分支: 支持或/且条件组，条件组组合，可以灵活配置分支条件。
- 计时等待: 支持秒、分、时、天、周、月、自定义时间等待，可以满足各种时间等待需求。
- 消息通知: 支持站内、邮件、企业微信、钉钉、飞书、短信、自定义通知内容，可以满足各种通知需求。
目录结构
csharp代码解读复制代码├── public ├── src │ ├── api # 接口 │ │ ├── index.ts # 接口统一管理 │ │ ├── modules # 接口模块 │ │ │ ├── role.ts # 角色接口 │ │ │ ├── user.ts # 用户接口 │ │ │ └── model.ts # 流程模型接口 │ ├── assets # 静态资源 │ │ ├── logo.png │ │ └── ... │ ├── components # 公共组件 │ │ ├── AdvancedFilter # 高级条件筛选 │ │ ├── Render # 组件渲染器 │ │ ├── RoleSelector # 角色选择器 │ │ ├── SvgIcon # svg图标 │ │ ├── UserSelector # 用户选择器 │ │ └── ... │ ├── mock # mock模拟数据 │ │ ├── index.ts │ │ ├── role.ts # 角色接口 │ │ ├── user.ts # 用户接口 │ │ └── ... │ ├── router # 路由 │ │ ├── index.ts │ │ └── ... │ ├── stores # 状态管理 │ │ ├── index.ts │ │ └── ... │ ├── styles # 全局样式 │ │ ├── index.scss │ │ └── ... │ ├── typings # 全局类型 │ │ ├── index.scss │ │ └── ... │ ├── views │ │ ├── flowDesign # 流程设计器 │ │ │ ├── nodes # 流程节点 │ │ │ │ ├── Add.vue # 添加节点 │ │ │ │ ├── ApprovalNode.vue # 审批人节点 │ │ │ │ ├── CcNode.vue # 抄送人节点 │ │ │ │ ├── ConditionNode.vue # 条件节点 │ │ │ │ ├── EndNode.vue # 结束节点 │ │ │ │ ├── ExclusiveNode.vue # 互斥分支节点 │ │ │ │ ├── GatewayNode.vue # 网关节点 │ │ │ │ ├── Node.vue # 节点 │ │ │ │ ├── StartNode.vue # 开始节点 │ │ │ │ ├── NotifyNode.vue # 消息通知节点 │ │ │ │ ├── TimerNode.vue # 计时等待节点 │ │ │ │ ├── TreeNode.vue # 节点树 │ │ │ │ └── type.ts # 节点类型 │ │ │ ├── panels # 属性面板 │ │ │ │ ├── ApprovalPanel.vue # 审批人配置面板 │ │ │ │ ├── CcPanel.vue # 抄送人配置面板 │ │ │ │ ├── ConditionPanel.vue # 条件配置面板 │ │ │ │ ├── index.vue # 属性面板抽屉 │ │ │ │ ├── StartPanel.vue # 开始配置面板 │ │ │ │ ├── NotifyPanel.vue # 消息通知配置面板 │ │ │ │ └── TimerPanel.vue # 计时等待配置面板 │ │ ├── home # 首页 │ │ └── ... │ ├── App.vue │ ├── main.ts │ └── shims-vue.d.ts ├── .gitignore ├── package.json ├── README.md ├── unocss.config.ts └── vite.config.ts
应用场景
lowflow-design可以应用于以下场景：
- 企业内部流程管理: 例如请假流程、报销流程、采购流程等。
- 在线办公平台: 例如OA系统、CRM系统、ERP系统等。
- 低代码/无代码开发平台: 作为低代码/无代码开发平台的流程设计组件。
同类项目
- Activiti: Activiti 是一个开源的工作流和业务流程管理 (BPM) 平台，用于构建企业级应用程序。它支持 BPMN 2.0 标准，并提供了一套丰富的功能，包括流程设计、流程引擎、任务管理、用户管理等。
- Flowable: Flowable 是一个轻量级的工作流和业务流程管理 (BPM) 平台，用于构建企业级应用程序。它支持 BPMN 2.0 标准，并提供了一套丰富的功能，包括流程设计、流程引擎、任务管理、用户管理等。
- Camunda: Camunda 是一个开源的工作流和决策自动化平台，用于构建企业级应用程序。它支持 BPMN 2.0 和 DMN 1.1 标准，并提供了一套丰富的功能，包括流程设计、流程引擎、任务管理、用户管理、决策管理等。
总结
lowflow-design 是一个功能强大且易于使用的低代码流程设计器，可以帮助您快速构建各种流程应用。它具有丰富的节点类型、灵活的配置选项和友好的用户界面，是您构建流程应用的理想选择。
