AntFlow-Designer 技术文档

1. 项目概述

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

2. 安装指南

2.1 环境要求

• Node.js 14.20.1 或更高版本
• npm 包管理工具

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 基本功能

• 节点操作：支持流程节点的添加、修改和删除
• 节点设置：可配置审批人、发起人、抄送人等
• 条件节点：自定义配置条件判断值
• 审批节点：选择审批人员、角色或部门
• 抄送节点：配置抄送对象
• 错误校验：自动校验流程节点参数
• 流程发布：将配置好的流程提交到API接口

3.2 界面说明

设计器界面分为三个主要区域：

1. 左侧：流程节点面板
2. 中间：流程画布区
3. 右侧：节点属性配置区

4. API使用文档

4.1 核心API

1. 流程保存API

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

2. 流程加载API

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

3. 流程验证API

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

4.2 集成说明

设计器可作为独立组件集成到现有项目中，通过props接收初始流程数据，并通过事件emit返回用户操作结果。

5. 项目安装方式

5.1 作为独立项目运行

按照第2章安装指南中的步骤即可将设计器作为独立项目运行。

5.2 作为组件集成

1. 将项目构建为npm包：

   npm run build:lib
   

2. 在目标项目中安装：

   npm install antflow-designer
   

3. 在Vue项目中引入：

   import AntFlowDesigner from 'antflow-designer'
   

4. 在模板中使用：

   <ant-flow-designer :initData="flowData" @save="handleSave" />
   

6. 注意事项

1. 项目运行需要Node.js 14.20.1或更高版本
2. 建议使用npm镜像源加速依赖安装
3. 设计器默认使用中文界面，如需其他语言需自行配置
4. 生产环境部署时需配置正确的API接口地址