嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法
简介
lowflow-design 是一个基于 Vue3、Vite、TypeScript、Element-Plus 等技术栈开发的，适用于低代码或无代码开发平台的流程设计器。它让普通人也能通过简单配置快速搭建流程，并提供了将 json 转换为 xml 的后端代码：lowflow-design-converter。
在线预览
-
lowflow-design: https://tsai996.github.io/lowflow-design/
-
成品案例: https://demo.lowflow.vip/
项目源码
- 后端源码 (lowflow-design-converter):
-
github: https://github.com/tsai996/lowflow-design-converter
-
码云: https://gitee.com/cai_xiao_feng/lowflow-design-converter
-
- 前端源码 (lowflow-design):
-
github: https://github.com/tsai996/lowflow-design
-
码云: https://gitee.com/cai_xiao_feng/lowflow-design
-
lowflow-design
-
克隆 lowflow-design 项目代码：
git clone https://github.com/tsai996/lowflow-design.git -
安装依赖：
npm install -
启动开发服务器：
npm run dev -
访问 http://localhost:3000/，开始使用 lowflow-design 设计流程
示例图
节点项
属性面板
特性
-
节点: 支持多种节点类型，包括审批人、抄送人、互斥分支、计时等待、消息通知等。
-
状态: 所有节点都支持状态配置，可以根据不同的状态进行不同的处理。
-
描述: 可以对每个节点进行描述，方便理解节点的作用。
-
审批人: 支持单人、多人、角色、部门、发起人、上级领导、自定义审批人等多种审批人类型。
-
抄送人: 支持单人、多人、角色、部门、发起人、上级领导、自定义抄送人等多种抄送人类型。
-
互斥分支: 支持或/且条件组，条件组组合，可以灵活配置分支条件。
-
计时等待: 支持秒、分、时、天、周、月、自定义时间等待，可以满足各种时间等待需求。
-
消息通知: 支持站内、邮件、企业微信、钉钉、飞书、短信、自定义通知内容，可以满足各种通知需求。
目录结构
├── 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 是一个功能强大且易于使用的低代码流程设计器，可以帮助您快速构建各种流程应用。它具有丰富的节点类型、灵活的配置选项和友好的用户界面，是您构建流程应用的理想选择。
标签：vue,流程,ts,节点,design,lowflow From： https://blog.csdn.net/leeit/article/details/142456071