工作流设计器

概述

工作流设计器采用钉钉/飞书风格的可视化流程设计，支持树形节点拖拽、条件/并行分支、审批人配置、表单字段权限等功能。

组件结构

components/workflow/
├── designer/                        # 流程设计器
│   ├── FlowDesigner.vue             # 主设计器组件
│   ├── FlowCanvas.vue               # 画布（缩放/平移/居中）
│   ├── FlowNode.vue                 # 节点渲染（递归树形结构）
│   ├── PropertyPanel.vue            # 属性面板
│   ├── ConditionEditor.vue          # 条件编辑器
│   ├── FormFieldPermissions.vue     # 表单字段权限配置
│   ├── Toolbar.vue                  # 工具栏
│   ├── types.ts                     # TypeScript 类型定义
│   ├── hooks/
│   │   ├── useFlowData.ts           # 流程数据管理（撤销/重做）
│   │   └── useFlowValidation.ts     # 流程校验
│   └── nodes/                       # 节点组件
│       ├── StartNode.vue
│       ├── ApprovalNode.vue
│       ├── HandleNode.vue
│       ├── CopyNode.vue
│       ├── ConditionNode.vue
│       ├── ParallelNode.vue
│       ├── DelayNode.vue
│       ├── NotifyNode.vue
│       ├── ServiceNode.vue
│       ├── SubflowNode.vue
│       └── EndNode.vue
├── detial/                          # 流程详情组件
│   ├── InstanceDetailPanel.vue      # 实例详情面板
│   ├── FlowProgressTab.vue          # 流程进度可视化
│   ├── FlowPathPreview.vue          # 流程路径预览
│   └── tabs/
│       ├── ProgressTab.vue          # 时间线进度
│       ├── FormTab.vue              # 表单数据
│       └── FlowchartTab.vue         # 流程图

FlowDesigner

主设计器组件：

<FlowDesigner
  :form-code="formCode"
  :initial-definition="flowDefinition"
  :readonly="false"
  :embedded="false"
  @save="handleSave"
/>

Props：

Prop	类型	说明
formCode	string	关联表单编码（用于字段权限配置）
initialDefinition	object	初始流程定义
readonly	boolean	只读模式
embedded	boolean	嵌入模式

流程数据结构

树形 JSON 单链表结构：

interface FlowNode {
  id: string;
  type: NodeType;
  name: string;
  config: NodeConfig;
  children?: FlowNode;         // 下一节点（单链表）
  branches?: FlowBranch[];     // 分支（条件/并行节点）
}

interface FlowBranch {
  id: string;
  name: string;
  conditions?: Condition[];    // 条件分支的条件
  children?: FlowNode;         // 分支的第一个节点
}

type NodeType = 
  | 'start' | 'end' 
  | 'approval' | 'handle' | 'copy'
  | 'condition' | 'parallel'
  | 'delay' | 'notify' | 'service' | 'subflow';

节点配置

审批节点 (ApprovalNode)

interface ApprovalConfig {
  assignees: Assignee[];           // 审批人配置
  multiApproval: 'any' | 'parallel' | 'sequential';  // 多人审批模式
  emptyAssignee: 'skip' | 'admin'; // 空审批人策略
  timeout: {
    enabled: boolean;
    duration: number;
    unit: 'minute' | 'hour' | 'day';
    action: 'auto_approve' | 'auto_reject' | 'notify';
  };
  formPermissions: FieldPermission[];  // 表单字段权限
}

interface Assignee {
  type: 'user' | 'role' | 'department' | 'superior' | 'manager' | 'initiator' | 'form_field';
  id?: string;       // user/role/department 的具体 ID
  level?: number;    // superior 的层级
  fieldName?: string; // form_field 的字段名
}

条件分支 (ConditionNode)

interface ConditionConfig {
  // 条件在 branch.conditions 中定义
}

interface Condition {
  field: string;
  operator: 'eq' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte' | 'contains' | 'in' | 'empty';
  value: any;
}

延时节点 (DelayNode)

interface DelayConfig {
  duration: number;
  unit: 'minute' | 'hour' | 'day' | 'workday';
}

服务调用节点 (ServiceNode)

interface ServiceConfig {
  url: string;
  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
  headers: Record<string, string>;
  body: string;
  retryCount: number;
  failureStrategy: 'continue' | 'stop';
}

useFlowData Hook

流程数据管理，支持撤销/重做：

const { flowData, updateNode, addNode, removeNode, undo, redo, canUndo, canRedo } = useFlowData(initialDefinition);

方法	说明
updateNode(nodeId, config)	更新节点配置
addNode(parentId, node)	在父节点后添加节点
removeNode(nodeId)	删除节点
addBranch(nodeId)	添加分支
removeBranch(nodeId, branchIndex)	删除分支
undo() / redo()	撤销/重做

useFlowValidation Hook

流程校验：

const { validate, errors } = useFlowValidation(flowData);
const isValid = await validate();

校验规则：

• 必须有开始节点和结束节点
• 审批节点必须配置审批人
• 条件分支必须有条件
• 不允许空分支

工作流页面

workflow-manager（流程管理）

卡片列表页面（与表单管理类似）：

• 搜索 + 分页 + 响应式网格
• 卡片显示：图标、名称、编码、状态标签、关联表单
• 操作：编辑 / 发布 / 停用 / 复制 / 删除

WorkflowDialog.vue：2步骤向导

1. 基本信息：名称、编码、类型、图标、描述、关联表单
2. 流程设计：FlowDesigner 组件

workflow-start（发起流程）

左右布局：

• 左侧：应用列表 → 流程列表
• 右侧：StartWorkflowPanel（标题 + 表单 + 提交）

workflow-pending（我的待办）

左右布局（320px）：

• 左侧：TaskList（无限滚动、骨架屏、超时状态）
• 右侧：TaskDetail（4个Tab）

TaskDetail 4个Tab：

1. 审批信息：左侧表单 + 右侧操作区
2. 进度：时间线日志
3. 流程图：可视化流程图
4. 流程进度：节点状态可视化

审批操作：approve / reject / return / transfer / delegate / add_sign / handle / revise

workflow-initiated（我发起的）

左右布局：实例列表 + 实例详情面板（含状态筛选）

workflow-handled / workflow-copy

已办和抄送页面，复用 TaskList + InstanceDetailPanel。

流程详情组件

InstanceDetailPanel

流程实例详情面板，4个Tab（支持 extraTabs 扩展）：

Tab	组件	说明
progress	ProgressTab	时间线日志 + 待办任务分组
form	FormTab	PreviewItem 只读渲染表单
flowchart	FlowchartTab	FlowPreviewContent 渲染流程图
flowProgress	FlowProgressTab	可视化流程图 + 节点状态

FlowProgressTab

节点状态可视化：

• completed — 已完成（绿色）
• active — 进行中（蓝色）
• pending — 待处理（灰色）
• skipped — 已跳过（虚线）
• rejected — 已驳回（红色）