wflow：开源的前端工作流设计器，让你轻松打造属于自己的流程审批利器 ...

嗨，大家好，我是小华同砚，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法

   wflow 工作流,简便、友爱、易用的OA审批工作流系统。一款类钉钉/飞书风格OA审批工作流系统，告别传统bpmn.js流程设计器利用门槛高、利用复杂的痛点，让普通用户也能轻松利用，配置日常审批流程
  wflow的特点

wflow致力于为用户提供一个无需专业培训即可利用的流程设计器。以下是wflow的一些亮点：

• 简单易用：用户只需担当简单讲授即可上手。
  
• 灵活设计：支持拖拽式表单和流程设计，满意多种业务需求。
  
• 及时交互：审批流程及时反馈，提高工作效率。
  

项目结构

1. └─src
2.     ├─api （Api接口）
3.     ├─assets （静态资源）
4.     │  └─image
5.     ├─components （公共组件，空）
6.     │  └─common
7.     ├─router （路由）
8.     ├─store （Vuex）
9.     ├─utils （工具函数）
10.     └─views （页面）
11.         ├─admin （表单流程设计器）
12.         │  └─layout （布局设计）
13.         │      ├─form （表单布局设计）
14.         │      └─process （流程布局设计）
15.         ├─common （组件）
16.         │  ├─form （表单组件）
17.         │  │  ├─components （拖拽设计的表单元素组件）
18.         │  │  └─config （表单元素组件的右侧配置项面板组件）
19.         │  └─process （流程组件）
20.         │      ├─config （流程设计的流程节点组件的配置面板组件）
21.         │      └─nodes （流程设计的流程节点组件）
22.         ├─process （空）
23.         │  └─node
24.         └─workspace （工作区，发起流程，设计出来的流程列表）

复制代码

如何利用wflow

下面，我们就来了解一下如何利用wflow来创建和管理审批流程。
下载并启动项目

注意：作者的开发环境是 node14.18.0 、vuecli 4.1.1、edge欣赏器 , 高版本node 大概必要在package.json的scripts项内命令添加启动参数
[code]#克隆源码
git clone https://gitee.com/willianfu/jw-workflow-engine.git
cd jw-workflow-engine

#修改main.js中后端接口地址，破坏这个表达式，使其为公开的服务器IP
Vue.prototype.BASE_URL = 'http://' + (process.env.NODE_ENV === 'development-' ? "localhost" : "47.100.202.245");

#小弱鸡服务器，大家不要造垃圾数据，且珍惜