AntFlow-Designer 技术文档

1. 项目概述

AntFlow-Designer 是一款基于 Vue3 + ElementPlus 开发的独立流程设计器，采用钉钉风格UI设计。该设计器提供完整的流程节点操作功能，包括审批人设置、条件配置等核心功能，可方便集成到现有项目中进行二次开发。

2. 安装指南

2.1 环境要求

• Node.js 14.20.1 或更高版本
• npm 6.14.17 或更高版本

2.2 安装步骤

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

3. 使用说明

3.1 基本功能

1. 节点操作：

   • 添加流程节点
   • 修改节点属性
   • 删除节点

2. 节点设置：

   • 审批人设置：可选择人员、角色或部门
   • 发起人配置
   • 抄送人设置
   • 条件设置

3. 条件节点：

   • 选择条件类型
   • 自定义配置条件判断值

4. 错误校验：

   • 自动校验流程节点参数有效性

5. 流程发布：

   • 将配置好的流程提交到API接口

3.2 界面操作

1. 左侧面板提供节点类型选择
2. 中间区域为流程画布，可拖拽节点进行布局
3. 右侧面板为节点属性配置区域
4. 顶部工具栏提供保存、发布等操作按钮

4. API使用文档

4.1 核心API

1. 流程保存API：

   • 方法：POST
   • 参数：完整的流程JSON数据
   • 返回：保存结果状态

2. 流程加载API：

   • 方法：GET
   • 参数：流程ID
   • 返回：流程JSON数据

3. 流程验证API：

   • 方法：POST
   • 参数：流程JSON数据
   • 返回：验证结果及错误信息

4.2 集成API

1. 获取用户列表API：

   • 用于审批人选择

2. 获取角色列表API：

   • 用于角色审批设置

3. 获取部门列表API：

   • 用于部门审批设置

5. 项目安装方式

5.1 直接集成

1. 将构建后的静态资源复制到现有项目中
2. 在项目中引入设计器组件
3. 配置API接口地址

5.2 二次开发

1. 克隆项目源码
2. 修改src/api目录下的接口配置
3. 自定义样式可修改src/assets/styles目录
4. 扩展功能可修改src/components目录

5.3 注意事项

1. 确保后端API接口符合设计器要求
2. 生产环境部署时注意跨域问题
3. 建议使用nginx等服务器代理API请求

6. 最佳实践

1. 对于复杂流程，建议先设计流程图
2. 充分利用条件节点实现分支逻辑
3. 定期保存流程配置，避免数据丢失
4. 发布前务必进行完整验证

7. 常见问题

1. 节点无法连接：

   • 检查节点类型是否匹配
   • 验证连接规则设置

2. 属性配置不生效：

   • 确认已选择目标节点
   • 检查必填项是否完整

3. 流程验证失败：

   • 查看具体错误信息
   • 检查节点间逻辑关系