组长看板四阶段导航修复完成

📋 问题描述

从组长看板 http://localhost:4200/team-leader/dashboard 点击交付执行阶段的项目时，错误地跳转到了订单分配阶段，而不是交付执行阶段。

✅ 解决方案

参考客服板块 (customer-service/project-list) 的实现，修改组长看板的项目跳转逻辑，使其根据项目所在的看板列直接跳转到对应阶段。

🎯 核心改动

1. HTML 模板修改 (`dashboard.html`)

修改前

<div class="project-card" 
     (click)="viewProjectDetails(project.id)">

修改后

<div class="project-card" 
     (click)="viewProjectDetailsByPhase(project.id, core.id)">

说明：

将项目卡片的点击事件从 viewProjectDetails(project.id) 改为 viewProjectDetailsByPhase(project.id, core.id)
传递 core.id 参数，明确告知项目所在的看板列（订单分配/确认需求/交付执行/售后）

2. TypeScript 逻辑新增 (`dashboard.ts`)

新增 viewProjectDetailsByPhase 方法：

/**
 * 根据看板列跳转到项目详情（参考客服板块实现）
 * @param projectId 项目ID
 * @param corePhaseId 核心阶段ID (order/requirements/delivery/aftercare)
 */
viewProjectDetailsByPhase(projectId: string, corePhaseId: string): void {
  if (!projectId) {
    return;
  }
  
  // 🔥 标记从组长看板进入（用于跳过激活检查和显示审批按钮）
  try {
    localStorage.setItem('enterAsTeamLeader', '1');
    localStorage.setItem('teamLeaderMode', 'true');
    // 🔥 关键：清除客服端标记，避免冲突
    localStorage.removeItem('enterFromCustomerService');
    localStorage.removeItem('customerServiceMode');
    console.log('✅ 已标记从组长看板进入，启用组长模式');
  } catch (e) {
    console.warn('无法设置 localStorage 标记:', e);
  }
  
  // 获取公司ID
  const cid = localStorage.getItem('company') || 'cDL6R1hgSi';
  
  // 🔥 根据看板列ID直接映射到路由路径（与客服板块保持一致）
  // corePhaseId已经是路由路径格式：order, requirements, delivery, aftercare
  const stagePath = corePhaseId;
  
  console.log(`🎯 从看板列「${this.corePhases.find(c => c.id === corePhaseId)?.name}」进入项目，跳转到: ${stagePath}`);
  
  // ✅ 跳转到对应阶段，并通过查询参数标识为组长视角
  this.router.navigate(['/wxwork', cid, 'project', projectId, stagePath], {
    queryParams: { roleName: 'team-leader' }
  });
}

核心逻辑：

直接使用看板列ID作为路由路径：corePhaseId 已经是 order, requirements, delivery, aftercare 格式，无需再次映射
设置组长模式标记：确保进入项目后显示审批按钮
清除客服标记：避免权限冲突
添加 roleName=team-leader 查询参数：明确标识组长身份

3. 保留原有方法

viewProjectDetails(projectId) 方法保持不变，用于其他非看板场景的跳转（如时间线、员工详情面板等）。

🔍 四个阶段映射关系

看板列名称	`corePhaseId`	路由路径	跳转URL示例
订单分配	`order`	`order`	`/wxwork/{cid}/project/{projectId}/order?roleName=team-leader`
确认需求	`requirements`	`requirements`	`/wxwork/{cid}/project/{projectId}/requirements?roleName=team-leader`
交付执行	`delivery`	`delivery`	`/wxwork/{cid}/project/{projectId}/delivery?roleName=team-leader`
售后	`aftercare`	`aftercare`	`/wxwork/{cid}/project/{projectId}/aftercare?roleName=team-leader`

📊 与客服板块对比

客服板块 (`project-list.ts`)

navigateToProject(project: ProjectListItem, columnId: 'order' | 'requirements' | 'delivery' | 'aftercare') {
  const cid = localStorage.getItem('company') || '';
  
  const stagePathMapping = {
    'order': 'order',
    'requirements': 'requirements',
    'delivery': 'delivery',
    'aftercare': 'aftercare'
  };
  
  const stagePath = stagePathMapping[columnId];
  
  // 标记从客服板块进入
  localStorage.setItem('enterFromCustomerService', '1');
  localStorage.setItem('customerServiceMode', 'true');
  
  this.router.navigate(['/wxwork', cid, 'project', project.id, stagePath]);
}

组长看板 (`dashboard.ts`) - 新增

viewProjectDetailsByPhase(projectId: string, corePhaseId: string): void {
  const cid = localStorage.getItem('company') || 'cDL6R1hgSi';
  
  // 直接使用corePhaseId作为路由路径（格式相同）
  const stagePath = corePhaseId;
  
  // 标记从组长看板进入
  localStorage.setItem('enterAsTeamLeader', '1');
  localStorage.setItem('teamLeaderMode', 'true');
  localStorage.removeItem('enterFromCustomerService');
  localStorage.removeItem('customerServiceMode');
  
  this.router.navigate(['/wxwork', cid, 'project', projectId, stagePath], {
    queryParams: { roleName: 'team-leader' }
  });
}

相似点：

✅ 都根据看板列ID直接跳转到对应阶段
✅ 都设置身份标记（客服 vs 组长）
✅ 都使用相同的路由格式

差异点：

🔹 组长看板额外添加 ?roleName=team-leader 查询参数（用于审批按钮显示）
🔹 组长看板清除客服标记，确保权限不冲突

🧪 测试场景

测试1：点击订单分配列的项目

预期：跳转到 /wxwork/{cid}/project/{projectId}/order?roleName=team-leader
验证：打开的是订单分配页面，显示审批按钮（如果有待审批）

测试2：点击确认需求列的项目

预期：跳转到 /wxwork/{cid}/project/{projectId}/requirements?roleName=team-leader
验证：打开的是确认需求页面

测试3：点击交付执行列的项目 ⭐

预期：跳转到 /wxwork/{cid}/project/{projectId}/delivery?roleName=team-leader
验证：打开的是交付执行页面，显示审批按钮（如果有待审批）

测试4：点击售后列的项目

预期：跳转到 /wxwork/{cid}/project/{projectId}/aftercare?roleName=team-leader
验证：打开的是售后归档页面

🔧 控制台日志

成功跳转时，控制台会输出：

✅ 已标记从组长看板进入，启用组长模式
🎯 从看板列「交付执行」进入项目，跳转到: delivery

✨ 优化点

精准跳转：不再依赖项目的 currentStage 字段，而是根据看板列位置直接跳转
逻辑清晰：看板列ID即路由路径，无需复杂映射
一致性：与客服板块保持相同的跳转逻辑
身份明确：通过查询参数和 localStorage 双重标识组长身份

📝 相关文件

修改的文件

yss-project/src/app/pages/team-leader/dashboard/dashboard.html
- 修改项目卡片点击事件，传递 core.id 参数
yss-project/src/app/pages/team-leader/dashboard/dashboard.ts
- 新增 viewProjectDetailsByPhase(projectId, corePhaseId) 方法
- 保留原有 viewProjectDetails(projectId) 方法

参考的文件

yss-project/src/app/pages/customer-service/project-list/project-list.ts
- 参考 navigateToProject() 方法的实现

🎉 总结

现在从组长看板的四个阶段列点击项目时：

✅ 订单分配列 → 跳转到订单分配页面
✅ 确认需求列 → 跳转到确认需求页面
✅ 交付执行列 → 跳转到交付执行页面 ⭐ 已修复
✅ 售后列 → 跳转到售后归档页面

每个阶段都会自动带上 ?roleName=team-leader 参数，确保组长身份被正确识别，审批按钮能够正常显示！

TEAM-LEADER-KANBAN-NAVIGATION-FIX.md 7.6 KB 文件歷史 原始文件