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

## 📋 问题描述

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

## ✅ 解决方案

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

## 🎯 核心改动

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

#### 修改前
```html
<div class="project-card" 
     (click)="viewProjectDetails(project.id)">
```

#### 修改后
```html
<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` 方法：

```typescript
/**
 * 根据看板列跳转到项目详情（参考客服板块实现）
 * @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' }
  });
}
```

**核心逻辑**：
1. **直接使用看板列ID作为路由路径**：`corePhaseId` 已经是 `order`, `requirements`, `delivery`, `aftercare` 格式，无需再次映射
2. **设置组长模式标记**：确保进入项目后显示审批按钮
3. **清除客服标记**：避免权限冲突
4. **添加 `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`)
```typescript
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`) - 新增
```typescript
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
```

## ✨ 优化点

1. **精准跳转**：不再依赖项目的 `currentStage` 字段，而是根据看板列位置直接跳转
2. **逻辑清晰**：看板列ID即路由路径，无需复杂映射
3. **一致性**：与客服板块保持相同的跳转逻辑
4. **身份明确**：通过查询参数和 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` 参数，确保组长身份被正确识别，审批按钮能够正常显示！