A Vue 3 workflow designer component for Elsa workflows with drag-and-drop functionality
npm install workflow_for_elsabash
npm install
`
$3
`bash
npm run dev
`
$3
`bash
npm run build
`
$3
`bash
npm run preview
`
📖 使用指南
$3
#### 1. 添加节点
- 从左侧菜单拖拽节点类型到画布
- 节点会自动添加到拖拽位置
- 支持实时预览拖拽效果
#### 2. 连接节点
- 从一个节点的连接点拖拽到另一个节点
- 支持平滑的连线动画
- 连接线宽度为3px，颜色为蓝色
#### 3. 编辑节点
- 审批节点：双击编辑审批人
- 抄送节点：双击编辑抄送人
- 支持人员选择弹窗，提供下拉和树形两种选择方式
#### 4. 删除操作
- 删除节点：右键点击节点选择删除
- 删除连接线：右键点击连接线选择删除
- 删除节点时会自动删除相关连线
#### 5. 工具栏操作
- 清空画布：删除所有节点和连线
- 导出工作流：保存为JSON文件
- 导入工作流：从JSON文件加载
- 导入Elsa格式：从Elsa工作流文件导入并转换为Vue Flow格式
- 保存为Elsa格式：转换为Elsa工作流格式并打印到控制台
$3
#### 下拉选择模式
- 支持多选和搜索过滤
- 显示人员姓名、部门、职位信息
- 已选择人员以标签形式显示
#### 树形选择模式
- 按部门分组显示人员
- 支持部门和个人选择
- 更直观的层级结构
🏗️ 项目结构
`
src/
├── components/
│ └── VueFlow/
│ ├── FullWorkflowDesigner.vue # 主设计器组件
│ ├── PersonSelector.vue # 人员选择弹窗组件
│ ├── nodes/ # 节点组件目录
│ │ ├── StartNode.vue # 开始节点
│ │ ├── ApproveNode.vue # 审批节点
│ │ ├── SendNode.vue # 抄送节点
│ │ └── EndNode.vue # 结束节点
│ └── README.md # 组件说明文档
├── App.vue # 根组件
├── main.ts # 入口文件
└── style.css # 全局样式
`
🛠️ 技术栈
- Vue 3 - 渐进式JavaScript框架
- TypeScript - 类型安全的JavaScript超集
- Vue Flow - 流程图和节点编辑器
- Element Plus - Vue 3 UI组件库
- Vite - 快速的前端构建工具
$3
`json
{
"@vue-flow/core": "^1.46.3",
"@vue-flow/background": "^1.3.2",
"@vue-flow/controls": "^1.1.3",
"@vue-flow/minimap": "^1.5.4",
"element-plus": "^2.9.1",
"vue": "^3.5.13"
}
`
📋 API 文档
$3
#### FullWorkflowDesigner
主工作流设计器组件，提供完整的工作流设计功能。
Props: 无
Events:
- @save-elsa: 保存为Elsa格式时触发
#### PersonSelector
人员选择弹窗组件，支持下拉和树形两种选择方式。
Props:
- modelValue: boolean - 弹窗显示状态
- title: string - 弹窗标题
- selectedPersonIds?: string[] - 已选择的人员ID列表
Events:
- @update:modelValue - 更新弹窗显示状态
- @confirm - 确认选择时触发，参数为人员ID和人员信息
$3
#### StartNode
开始节点组件，表示工作流的起始点。
Features:
- 绿色圆形图标
- 底部连接点
- 不可编辑属性
#### ApproveNode
审批节点组件，用于设置审批流程。
Features:
- 蓝色方形图标
- 顶部和底部连接点
- 可编辑审批人属性
- 支持人员选择弹窗
#### SendNode
抄送节点组件，用于设置抄送通知。
Features:
- 黄色方形图标
- 顶部和底部连接点
- 可编辑抄送人属性
- 支持人员选择弹窗
#### EndNode
结束节点组件，表示工作流的结束点。
Features:
- 红色圆形图标
- 顶部连接点
- 不可编辑属性
🔧 自定义开发
$3
1. 在 nodes/ 目录下创建新的节点组件
2. 在 FullWorkflowDesigner.vue 中注册新节点类型
3. 在 nodeTypes 数组中添加节点配置
示例：
`typescript
// 在 customNodeTypes 中添加
const customNodeTypes: any = {
// ... 现有节点
custom: CustomNode
}
// 在 nodeTypes 中添加
const nodeTypes = [
// ... 现有类型
{ type: 'custom', label: '自定义', icon: 'CustomIcon' }
]
`
$3
每个节点组件都可以通过 props.data 接收自定义数据：
`typescript
const props = defineProps<{
data?: {
label?: string
customProperty?: any
}
}>()
`
$3
组件使用CSS变量和scoped样式，可以通过以下方式定制：
- 修改节点颜色：编辑各节点组件中的CSS变量
- 调整布局：修改 FullWorkflowDesigner.vue 中的样式
- 自定义主题：通过Element Plus主题系统
📊 Elsa格式转换
$3
本项目支持Vue Flow格式与Elsa格式之间的双向转换：
- Vue Flow → Elsa：将设计的工作流转换为Elsa格式
- Elsa → Vue Flow：将Elsa工作流导入并转换为Vue Flow格式
$3
#### 数据结构
导出的Elsa格式包含以下主要部分：
`typescript
{
id: string, // 工作流ID
name: string, // 工作流名称
description: string, // 工作流描述
version: number, // 版本号
activities: Activity[], // 活动列表
connections: Connection[], // 连接列表
variables: any[], // 变量列表
customAttributes: any[], // 自定义属性
persistenceBehavior: { // 持久化行为配置
// ... 持久化相关配置
}
}
`
#### 活动类型映射
| Vue Flow节点类型 | Elsa活动类型 | 说明 |
|----------------|-------------|------|
| start | Start | 工作流开始 |
| approve | Approval | 审批活动 |
| send | SendEmail | 邮件发送活动 |
| end | Finish | 工作流结束 |
$3
#### 支持的Elsa活动类型
- Start → 开始节点
- Approval → 审批节点（自动提取审批人信息）
- SendEmail → 抄送节点（自动提取收件人信息）
- Finish → 结束节点
#### 自动属性映射
- 审批人信息：从Approver属性自动提取
- 收件人信息：从Recipients属性自动提取
- 位置信息：从x、y坐标自动映射
- 连接关系：从connections`数组自动重建