客服项目列表导航统一化

📋 任务概述

将客服项目列表的项目详情页跳转逻辑统一为wxwork路由模式，与组长和管理员保持一致。

✅ 完成内容

1. 路由模式统一

之前的跳转方式

// 跳转到设计师项目详情页，传递查询参数
this.router.navigate(['/designer/project-detail', project.id], { 
  queryParams: { 
    role: 'customer-service',
    activeTab: 'progress',
    currentStage: stageMapping[columnId],
    from: 'customer-service-list'
  } 
});

问题：

使用的是设计师专用的项目详情页
依赖查询参数传递状态
与组长、管理员的跳转方式不一致

现在的跳转方式

// 跳转到wxwork项目详情页（与组长、管理员保持一致）
const cid = localStorage.getItem('company') || '';
const stagePath = stagePathMapping[columnId];
this.router.navigate(['/wxwork', cid, 'project', project.id, stagePath]);

优势：

✅ 使用wxwork统一的项目详情页
✅ 路由直接包含阶段信息
✅ 与组长、管理员的跳转方式一致
✅ 纯净页面，无管理端侧边栏

2. 阶段路径映射

看板列到wxwork阶段的映射

看板列ID	看板列名称	wxwork阶段路径	说明
`order`	订单分配	`order`	订单分配阶段
`requirements`	确认需求	`requirements`	确认需求阶段
`delivery`	交付执行	`delivery`	交付执行阶段
`aftercare`	售后	`aftercare`	售后归档阶段

wxwork支持的所有阶段路径

根据 yss-project/src/app/app.routes.ts 的配置：

{
  path: 'project/:projectId',
  loadComponent: () => import('../modules/project/pages/project-detail/project-detail.component').then(m => m.ProjectDetailComponent),
  children: [
    { path: '', redirectTo: 'order', pathMatch: 'full' },
    { path: 'order', ... },           // 订单分配
    { path: 'requirements', ... },    // 确认需求
    { path: 'delivery', ... },        // 交付执行
    { path: 'aftercare', ... },       // 售后归档
    { path: 'issues', ... }           // 问题追踪
  ]
}

3. 路由格式

完整路由格式

/wxwork/:cid/project/:projectId/:stage

参数说明

:cid - 公司ID（从localStorage获取）
:projectId - 项目ID
:stage - 阶段路径（order/requirements/delivery/aftercare/issues）

示例路由

/wxwork/cDL6R1hgSi/project/abc123/order
/wxwork/cDL6R1hgSi/project/abc123/requirements
/wxwork/cDL6R1hgSi/project/abc123/delivery
/wxwork/cDL6R1hgSi/project/abc123/aftercare

📝 修改详情

修改文件：`yss-project/src/app/pages/customer-service/project-list/project-list.ts`

修改的方法：`navigateToProject()`

修改前：

navigateToProject(project: ProjectListItem, columnId: 'order' | 'requirements' | 'delivery' | 'aftercare') {
  const stageMapping = {
    'order': '订单分配',
    'requirements': project.currentStage || '需求沟通',
    'delivery': project.currentStage || '建模',
    'aftercare': '客户评价'
  };
  
  this.router.navigate(['/designer/project-detail', project.id], { 
    queryParams: { 
      role: 'customer-service',
      activeTab: 'progress',
      currentStage: stageMapping[columnId],
      from: 'customer-service-list'
    } 
  });
}

修改后：

navigateToProject(project: ProjectListItem, columnId: 'order' | 'requirements' | 'delivery' | 'aftercare') {
  // 获取公司ID
  const cid = localStorage.getItem('company') || '';
  if (!cid) {
    console.error('未找到公司ID，无法跳转到项目详情页');
    return;
  }
  
  // 根据columnId映射到wxwork路由的阶段路径
  const stagePathMapping = {
    'order': 'order',           // 订单分配
    'requirements': 'requirements', // 确认需求
    'delivery': 'delivery',     // 交付执行
    'aftercare': 'aftercare'    // 售后归档
  };
  
  const stagePath = stagePathMapping[columnId];
  
  // 跳转到wxwork路由的项目详情页（纯净页面，无管理端侧边栏）
  this.router.navigate(['/wxwork', cid, 'project', project.id, stagePath]);
}

🔍 与其他板块的对比

组长板块

// yss-project/src/app/pages/team-leader/dashboard/dashboard.ts
viewProjectDetails(projectId: string): void {
  const cid = localStorage.getItem('company') || 'cDL6R1hgSi';
  this.router.navigate(['/wxwork', cid, 'project', projectId, 'order']);
}

管理员板块

<!-- yss-project/src/app/pages/admin/project-management/project-management.html -->
<a [routerLink]="['/admin/project-detail', project.id]">{{ project.title }}</a>

注意：管理员使用的是 /admin/project-detail/:projectId，这是管理员专用的项目详情页，包含管理端侧边栏和更多管理功能。

客服板块（现在）

// yss-project/src/app/pages/customer-service/project-list/project-list.ts
navigateToProject(project: ProjectListItem, columnId: string) {
  const cid = localStorage.getItem('company') || '';
  this.router.navigate(['/wxwork', cid, 'project', project.id, stagePath]);
}

统一性：客服和组长现在使用相同的wxwork路由模式。

🎯 用户体验改进

1. 一致的导航体验

✅ 客服、组长使用相同的项目详情页
✅ 统一的页面布局和交互
✅ 减少学习成本

2. 精准的阶段定位

✅ 点击"订单分配"列的项目，直接进入订单分配阶段
✅ 点击"确认需求"列的项目，直接进入确认需求阶段
✅ 点击"交付执行"列的项目，直接进入交付执行阶段
✅ 点击"售后"列的项目，直接进入售后归档阶段

3. 纯净的页面展示

✅ 无管理端侧边栏
✅ 专注于项目内容
✅ 适合客服和组长的工作场景

📊 路由架构

wxwork路由结构

/wxwork/:cid
  ├── /project/:projectId
  │   ├── /order          (订单分配)
  │   ├── /requirements   (确认需求)
  │   ├── /delivery       (交付执行)
  │   ├── /aftercare      (售后归档)
  │   └── /issues         (问题追踪)
  ├── /contact/:contactId (客户画像)
  └── /survey/project/:projectId (项目问卷)

各板块使用的路由

板块	路由模式	说明
客服	`/wxwork/:cid/project/:projectId/:stage`	纯净页面
组长	`/wxwork/:cid/project/:projectId/:stage`	纯净页面
设计师	`/designer/project-detail/:id`	设计师专用页面
管理员	`/admin/project-detail/:projectId`	管理端页面

🚀 使用示例

从客服项目列表跳转

点击"订单分配"列的项目

跳转到: /wxwork/cDL6R1hgSi/project/abc123/order
显示: 订单分配阶段的内容

点击"确认需求"列的项目

跳转到: /wxwork/cDL6R1hgSi/project/abc123/requirements
显示: 确认需求阶段的内容

点击"交付执行"列的项目

跳转到: /wxwork/cDL6R1hgSi/project/abc123/delivery
显示: 交付执行阶段的内容

点击"售后"列的项目

跳转到: /wxwork/cDL6R1hgSi/project/abc123/aftercare
显示: 售后归档阶段的内容

⚠️ 注意事项

1. 公司ID必须存在

跳转前会检查localStorage中的company字段：

const cid = localStorage.getItem('company') || '';
if (!cid) {
  console.error('未找到公司ID，无法跳转到项目详情页');
  return;
}

如果没有公司ID，需要先设置：

localStorage.setItem('company', 'your-company-id');

2. wxwork路由需要正确配置

确保 yss-project/src/app/app.routes.ts 中的wxwork路由已正确配置。

3. 项目ID必须有效

确保传递的项目ID在Parse Server中存在，否则会显示404或错误页面。

🔧 调试技巧

1. 检查路由跳转

在浏览器控制台查看路由变化：

// 当前路由
console.log(window.location.pathname);

// 应该显示类似：
// /wxwork/cDL6R1hgSi/project/abc123/order

2. 检查公司ID

console.log('公司ID:', localStorage.getItem('company'));

3. 手动测试路由

直接在浏览器地址栏输入：

http://localhost:4200/wxwork/cDL6R1hgSi/project/your-project-id/order

📚 相关文档

📝 修改记录

日期	修改内容	修改人
2024-10-25	统一客服项目列表跳转为wxwork路由	AI Assistant

完成时间: 2024-10-25
开发者: AI Assistant
状态: ✅ 已完成
影响范围: 客服项目列表导航

20251025-project-list-navigation-unified.md 9.0 KB История Исходник