qiangdanxitong/docs/任务节点查询功能开发文档.md

任务节点查询功能开发文档

1. 需求背景

用户反馈经常找不到任务当前处于什么节点，不清楚：

• 任务当前状态是什么
• 下一步需要谁操作
• 任务经历了哪些审批流程

因此需要开发一个任务节点查询功能，让用户可以通过任务编号快速查询任务的流程状态。

---

2. 功能设计

2.1 功能入口

在页面顶部导航栏或任务大厅页面增加「任务查询」按钮，点击后弹出查询对话框。

2.2 查询方式

• 任务编号查询：输入完整的任务编号（如 TASK202601221029343146）
• 模糊搜索：支持输入任务标题关键字搜索

2.3 展示内容

基本信息卡片

字段	说明
任务编号	TASK202601221029343146
任务标题	AD0259-欧意朗-天猫
任务类型	一级需求任务 / 普通任务
任务积分	5.20 分
创建时间	2026-01-22 10:29:34

当前节点信息（重点展示）

┌─────────────────────────────────────────────┐
│  📍 当前节点：待接单部门审核                    │
│                                             │
│  等待操作人：清云（营销策划中心）                │
│  操作说明：接单部门负责人需审核此任务            │
└─────────────────────────────────────────────┘

流程时间线（可视化展示）

● 一级需求发起        2026-01-22 10:29:34   瑶池（亿家达组）
     ↓
● 一级需求审批通过    2026-01-22 13:46:56   步惊云（策划三部）
     ↓
● 明细完善完成        2026-01-23 10:44:24   殷云（策划四部）
     ↓
○ 接单部门审核        等待中...             清云（营销策划中心）  ← 当前
     ↓
○ 任务发布           -                      -

相关人员信息

角色	姓名	部门
发起人	瑶池	亿家达组
明细完善人	殷云	策划四部
接单人	乐游	平面视觉五组
当前审批人	清云	营销策划中心

---

3. 任务状态映射表

3.1 普通任务状态

approval_status	中文名称	说明
draft	草稿	任务已创建但未提交
pending_approval	待审核	等待需求部门负责人审核
approved	已审核	审核通过，任务已发布
rejected	已驳回	审核被驳回

3.2 一级需求任务状态

approval_status	中文名称	当前操作人角色	说明
draft	草稿	发起人	任务已创建但未提交
pending_primary_approval	待一级需求审批	需求部门负责人	等待需求部门负责人审核并指定明细完善人
pending_detail_completion	待完善明细	明细完善人	等待指定的明细完善人填写任务明细
pending_demand_approval	待需求部门审批	需求部门负责人	明细完善后等待需求部门负责人审核
pending_receiving_approval	待接单部门审批	接单部门负责人	等待接单部门负责人审核
approved	已审核	-	所有审批通过，任务已发布
rejected_by_demand	需求部门驳回	明细完善人	被需求部门负责人驳回
rejected_by_receiving	接单部门驳回	需求部门负责人	被接单部门负责人驳回

3.3 任务执行状态

status	中文名称	说明
draft	草稿	未提交
pending_audit	待审核	审批流程中
pending	待接单/进行中	已发布等待接单或执行中
in_progress	进行中	设计师正在执行
completed	已完成	任务完成
cancelled	已取消	任务被取消

---

4. 技术实现

4.1 后端接口

4.1.1 任务节点查询接口

接口地址：GET /api/task/flow-status

请求参数：

参数	类型	必填	说明
taskNo	String	否	任务编号
keyword	String	否	任务标题关键字

响应示例：

{
  "code": 200,
  "message": "success",
  "data": {
    "task": {
      "id": 432,
      "taskNo": "TASK202601221029343146",
      "title": "AD0259-欧意朗-天猫",
      "score": 5.20,
      "isPrimaryTask": true,
      "createTime": "2026-01-22 10:29:34"
    },
    "currentNode": {
      "status": "pending_receiving_approval",
      "statusName": "待接单部门审批",
      "description": "等待接单部门负责人审核此任务",
      "waitingFor": {
        "userId": 17,
        "userName": "清云",
        "deptName": "营销策划中心",
        "role": "接单部门负责人"
      }
    },
    "flowTimeline": [
      {
        "nodeName": "一级需求发起",
        "status": "completed",
        "operatorName": "瑶池",
        "operatorDept": "亿家达组",
        "time": "2026-01-22 10:29:34"
      },
      {
        "nodeName": "一级需求审批",
        "status": "completed",
        "operatorName": "步惊云",
        "operatorDept": "策划三部",
        "time": "2026-01-22 13:46:56",
        "comment": "审核通过，请完善任务明细"
      },
      {
        "nodeName": "明细完善",
        "status": "completed",
        "operatorName": "殷云",
        "operatorDept": "策划四部",
        "time": "2026-01-23 10:44:24"
      },
      {
        "nodeName": "接单部门审批",
        "status": "pending",
        "operatorName": "清云",
        "operatorDept": "营销策划中心",
        "time": null
      },
      {
        "nodeName": "任务发布",
        "status": "waiting",
        "operatorName": null,
        "operatorDept": null,
        "time": null
      }
    ],
    "relatedUsers": {
      "publisher": { "name": "瑶池", "dept": "亿家达组" },
      "detailCompleter": { "name": "殷云", "dept": "策划四部" },
      "receiver": { "name": "乐游", "dept": "平面视觉五组" },
      "currentApprover": { "name": "清云", "dept": "营销策划中心" }
    }
  }
}

4.2 后端实现

4.2.1 Controller 层

// TaskController.java

/**
 * 查询任务流程状态
 */
@GetMapping("/flow-status")
public Result<TaskFlowStatusVO> getTaskFlowStatus(
    @RequestParam(required = false) String taskNo,
    @RequestParam(required = false) String keyword) {
    return Result.success(taskService.getTaskFlowStatus(taskNo, keyword));
}

4.2.2 Service 层

// TaskService.java

/**
 * 获取任务流程状态
 */
public TaskFlowStatusVO getTaskFlowStatus(String taskNo, String keyword) {
    // 1. 查询任务
    Task task = findTaskByNoOrKeyword(taskNo, keyword);
    if (task == null) {
        throw new BusinessException("任务不存在");
    }
    
    // 2. 构建基本信息
    TaskFlowStatusVO vo = new TaskFlowStatusVO();
    vo.setTask(buildTaskInfo(task));
    
    // 3. 构建当前节点信息
    vo.setCurrentNode(buildCurrentNode(task));
    
    // 4. 构建流程时间线
    vo.setFlowTimeline(buildFlowTimeline(task));
    
    // 5. 构建相关人员信息
    vo.setRelatedUsers(buildRelatedUsers(task));
    
    return vo;
}

4.2.3 VO 类

// TaskFlowStatusVO.java

@Data
public class TaskFlowStatusVO {
    private TaskBasicInfo task;
    private CurrentNodeInfo currentNode;
    private List<FlowTimelineNode> flowTimeline;
    private RelatedUsers relatedUsers;
    
    @Data
    public static class TaskBasicInfo {
        private Long id;
        private String taskNo;
        private String title;
        private BigDecimal score;
        private Boolean isPrimaryTask;
        private LocalDateTime createTime;
    }
    
    @Data
    public static class CurrentNodeInfo {
        private String status;
        private String statusName;
        private String description;
        private WaitingUser waitingFor;
    }
    
    @Data
    public static class WaitingUser {
        private Long userId;
        private String userName;
        private String deptName;
        private String role;
    }
    
    @Data
    public static class FlowTimelineNode {
        private String nodeName;
        private String status; // completed, pending, waiting
        private String operatorName;
        private String operatorDept;
        private LocalDateTime time;
        private String comment;
    }
    
    @Data
    public static class RelatedUsers {
        private UserInfo publisher;
        private UserInfo detailCompleter;
        private UserInfo receiver;
        private UserInfo currentApprover;
    }
    
    @Data
    public static class UserInfo {
        private String name;
        private String dept;
    }
}

4.3 前端实现

4.3.1 查询对话框组件

<!-- TaskFlowQueryDialog.vue -->
<template>
  <el-dialog title="任务节点查询" v-model="visible" width="700px">
    <!-- 搜索框 -->
    <div class="search-box">
      <el-input 
        v-model="searchInput" 
        placeholder="请输入任务编号或任务标题"
        @keyup.enter="handleSearch"
        clearable>
        <template #append>
          <el-button @click="handleSearch" :loading="loading">
            <el-icon><Search /></el-icon> 查询
          </el-button>
        </template>
      </el-input>
    </div>
    
    <!-- 查询结果 -->
    <div v-if="result" class="result-container">
      <!-- 基本信息 -->
      <el-card class="info-card">
        <template #header>任务信息</template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="任务编号">{{ result.task.taskNo }}</el-descriptions-item>
          <el-descriptions-item label="任务标题">{{ result.task.title }}</el-descriptions-item>
          <el-descriptions-item label="任务类型">
            <el-tag :type="result.task.isPrimaryTask ? 'warning' : ''">
              {{ result.task.isPrimaryTask ? '一级需求任务' : '普通任务' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="任务积分">{{ result.task.score }} 分</el-descriptions-item>
        </el-descriptions>
      </el-card>
      
      <!-- 当前节点（重点展示） -->
      <el-card class="current-node-card">
        <div class="current-node">
          <div class="node-icon">📍</div>
          <div class="node-info">
            <div class="node-status">当前节点：{{ result.currentNode.statusName }}</div>
            <div class="node-waiting">
              等待操作人：{{ result.currentNode.waitingFor?.userName }}
              （{{ result.currentNode.waitingFor?.deptName }}）
            </div>
            <div class="node-desc">{{ result.currentNode.description }}</div>
          </div>
        </div>
      </el-card>
      
      <!-- 流程时间线 -->
      <el-card class="timeline-card">
        <template #header>流程进度</template>
        <el-timeline>
          <el-timeline-item 
            v-for="node in result.flowTimeline" 
            :key="node.nodeName"
            :type="getTimelineType(node.status)"
            :hollow="node.status !== 'completed'">
            <div class="timeline-node">
              <div class="node-name">{{ node.nodeName }}</div>
              <div class="node-operator" v-if="node.operatorName">
                {{ node.operatorName }}（{{ node.operatorDept }}）
              </div>
              <div class="node-time" v-if="node.time">{{ formatTime(node.time) }}</div>
              <div class="node-comment" v-if="node.comment">备注：{{ node.comment }}</div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
    
    <!-- 空状态 -->
    <el-empty v-else-if="searched && !result" description="未找到相关任务" />
  </el-dialog>
</template>

4.3.2 样式设计

.current-node-card {
  margin: 16px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  .current-node {
    display: flex;
    align-items: center;
    color: #fff;
    
    .node-icon {
      font-size: 48px;
      margin-right: 20px;
    }
    
    .node-status {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    
    .node-waiting {
      font-size: 16px;
      margin-bottom: 4px;
    }
    
    .node-desc {
      font-size: 14px;
      opacity: 0.9;
    }
  }
}

.timeline-card {
  .timeline-node {
    .node-name {
      font-weight: bold;
      font-size: 15px;
    }
    
    .node-operator {
      color: #409eff;
      margin-top: 4px;
    }
    
    .node-time {
      color: #909399;
      font-size: 12px;
      margin-top: 4px;
    }
    
    .node-comment {
      color: #67c23a;
      font-size: 12px;
      margin-top: 4px;
    }
  }
}

---

5. 功能入口位置

5.1 方案A：顶部导航栏

在导航栏右侧增加「🔍 任务查询」按钮，全局可用。

5.2 方案B：任务大厅页面

在任务大厅页面顶部筛选区域增加「任务节点查询」按钮。

5.3 方案C：快捷搜索框

在页面顶部增加全局搜索框，支持直接输入任务编号快速查询。

推荐方案：方案A + 方案C 组合，既有明显入口，又支持快捷查询。

---

6. 权限控制

用户角色	可查询范围
管理员	所有任务
需求部门成员	本部门发起的任务 + 自己参与的任务
接单部门成员	自己接单的任务 + 本部门的任务
普通用户	自己发起或参与的任务

---

7. 开发工作量估算

模块	工作内容	预估时间
后端	接口开发、VO类、Service逻辑	4小时
前端	对话框组件、时间线、样式	4小时
测试	功能测试、边界情况	2小时
合计		10小时

---

8. 后续扩展

1. 消息通知集成：在通知消息中增加「查看任务进度」链接
2. 批量查询：支持一次查询多个任务的状态
3. 导出功能：支持导出任务流程记录
4. 订阅提醒：用户可订阅任务状态变更通知