# AntFlow-Designer 流程设计器

**Repository Path**: zilla/AntFlow-Designer

## Basic Information

- **Project Name**: AntFlow-Designer 流程设计器
- **Description**: 基于 vue3 + elementPlus 的流程设计器+低代码表单，企业级工作流平台，实现可视化的流程配置,极大降低审批流程设计门槛，自定义审批节点，自定义审批条件,必填参数校验等等。满足99.8%以上的审批流程需求。后端使用spring boot,mybatis等主流技术基于activiti深度定制,架构稳定。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://117.72.70.166/ant-flow/dist/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 214
- **Created**: 2024-12-19
- **Last Updated**: 2024-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center" style="margin-bottom: 0 !important">
	<img alt="logo" src="https://gitee.com/ldhnet/ant-flow/raw/master/public/images/logo.png"   width = 15%;>
</p>  

## 基于Vue3 + ElementPlus的独立流程设计器

- [![star](https://gitee.com/ldhnet/AntFlow-Designer/badge/star.svg?theme=dark)](https://gitee.com/ldhnet/AntFlow-Designer/stargazers)  [![fork](https://gitee.com/ldhnet/AntFlow-Designer/badge/fork.svg?theme=dark)](https://gitee.com/ldhnet/AntFlow-Designer/members)

-  成品案例(集成若依)  [预览入口](http://117.72.70.166/admin/)
-  独立流程设计器 [预览入口](http://117.72.70.166/ant-flow/dist/) 
-  项目文档 [wiki入口](https://gitee.com/ldhnet/AntFlow-Designer/wikis) 
-  开源前端地址 [Gitee仓库](https://gitee.com/ldhnet/AntFlow-Designer) | [GitHub仓库](https://github.com/ldhnet/AntFlow-Designer) | [GitCode仓库](https://gitcode.com/ldhnet/FlowDesigner/overview) 
-  开源后端地址 [Gitee仓库](https://gitee.com/tylerzhou/Antflow) | [Github仓库](https://github.com/mrtylerzhou/AntFlow) | [GitCode仓库](https://gitcode.com/zypqqgc/AntFlow/overview) 
 
- QQ技术交流群（972107977） 期待您的加入
- 有疑问/建议可以Issues留言，我们会认真对待  [issues地址](https://gitee.com/ldhnet/AntFlow-Designer/issues)


## 项目介绍
- UI钉钉风格
- 技术点<br />
 1、组件自调用+递归处理，按树状结局处理审批流程问题<br />
 2、本项目流程设计器，方便集成到现有项目中或者二次开发<br />
 3、集成到管理系统本版 https://gitee.com/tylerzhou/Antflow
- 流程设计器<br />
  1、节点操作：流程节点（添加、修改、删除)。<br />
  2、节点设置：包括审批人、发起人、抄送人、条件设置。<br />
  3、条件节点：选择条件类型，自定义配置条件判断值。<br />
  4、审批节点：选择需要审批的人员、角色、或部门。<br />
  5、抄送节点：选择抄送到的人员、角色、或部门。<br />
  6、错误校验: 对流程节点参数的校验。<br />
  7、流程发布: 当前配置流程提交到Api接口。<br /> 

## 演示图 

![](./public/images/10.png)
![](./public/images/11.png)
![](./public/images/12.png)  
  
-------------------   

#### 项目运行 node14.20.1 以上版本
> 1.下载项目 git clone https://gitee.com/ldhnet/AntFlow-Designer.git

> 2.环境依赖  `npm  install --registry=https://registry.npmmirror.com`

> 3.本地运行 `npm run dev` 

> 4.打包运行 `npm run build` 


##  捐赠支持
😀 你可以请作者喝杯咖啡表示鼓励
<table>
    <tr>
        <td><img src="https://gitee.com/ldhnet/AntFlow-Designer/raw/master/public/images/wxpay.jpg"/></td>
        <td><img src="https://gitee.com/ldhnet/AntFlow-Designer/raw/master/public/images/alipay.jpg"/></td>
    </tr>  
</table>

## 好书推荐

大家在使用本项目时，推荐结合贺波老师的书
[《深入Flowable流程引擎：核心原理与高阶实战》](https://item.jd.com/14804836.html)学习。这本书得到了Flowable创始人Tijs Rademakers亲笔作序推荐，对系统学习和深入掌握Flowable的用法非常有帮助。

> flowable源于activiti,很多核心表,核心api和设计模式都是一样的.读flowable的书同样也可以用在activiti上

![图书image](https://gitee.com/tylerzhou/Antflow/raw/master/doc/images/flowablebook.jpg)