lowflow-design:低代码流程设计器,让流程搭建更简单!

简介

lowflow-design 是一个基于 Vue3、Vite、TypeScript、Element-Plus 等技术栈开发的,适用于低代码或无代码开发平台的流程设计器。它让普通人也能通过简单配置快速搭建流程,并提供了将 json 转换为 xml 的后端代码:lowflow-design-converter。

在线预览

项目源码

  • 后端源码 (lowflow-design-converter):
  • 前端源码 (lowflow-design):

lowflow-design

  1. 克隆 lowflow-design 项目代码:git clone https://github.com/tsai996/lowflow-design.git
  2. 安装依赖:npm install
  3. 启动开发服务器:npm run dev
  4. 访问 http://localhost:3000/,开始使用 lowflow-design 设计流程

示例图

penal.png

flow.png

特性

  • 节点: 支持多种节点类型,包括审批人、抄送人、互斥分支、计时等待、消息通知等。
  • 状态: 所有节点都支持状态配置,可以根据不同的状态进行不同的处理。
  • 描述: 可以对每个节点进行描述,方便理解节点的作用。
  • 审批人: 支持单人、多人、角色、部门、发起人、上级领导、自定义审批人等多种审批人类型。
  • 抄送人: 支持单人、多人、角色、部门、发起人、上级领导、自定义抄送人等多种抄送人类型。
  • 互斥分支: 支持或/且条件组,条件组组合,可以灵活配置分支条件。
  • 计时等待: 支持秒、分、时、天、周、月、自定义时间等待,可以满足各种时间等待需求。
  • 消息通知: 支持站内、邮件、企业微信、钉钉、飞书、短信、自定义通知内容,可以满足各种通知需求。

目录结构

├── 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 是一个功能强大且易于使用的低代码流程设计器,可以帮助您快速构建各种流程应用。它具有丰富的节点类型、灵活的配置选项和友好的用户界面,是您构建流程应用的理想选择。

阅读全文
下载说明:
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=20782,转载请注明出处。
0

评论0

显示验证码
没有账号?注册  忘记密码?