yss-project/PROJECT-LIST-USAGE-GUIDE.md

客服项目列表使用指南

📍 访问地址

http://localhost:4200/customer-service/project-list

🎯 功能概述

客服项目列表页面提供三种视图模式，帮助客服人员管理和跟踪所有项目：

1. 卡片视图（看板） - 按阶段分组显示项目卡片
2. 列表视图 - 表格形式显示项目列表
3. 监控大盘 - 项目统计和可视化分析

🔧 前置条件

1. 确保Parse Server正常运行

检查Parse Server是否可访问：

// 在浏览器控制台运行
console.log('Parse Server:', Parse.serverURL);

2. 确保公司ID已设置

检查localStorage中的公司ID：

// 在浏览器控制台运行
console.log('公司ID:', localStorage.getItem('company'));

如果没有，手动设置：

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

3. 确保有项目数据

运行测试脚本检查数据：

# 1. 打开浏览器开发者工具（F12）
# 2. 切换到Console标签
# 3. 复制并粘贴 test-project-list-data.js 中的代码
# 4. 按回车运行

📊 看板分组逻辑

项目会自动分配到四个看板列：

1. 订单分配

显示条件：

• 未分配设计师（assignee为空）
• 或currentStage为"订单分配"

典型场景：

• 新接收的订单
• 等待分配设计师的项目

2. 确认需求

显示条件：

• currentStage为"需求沟通"或"方案确认"
• 已分配设计师
• 非售后状态

典型场景：

• 正在沟通需求的项目
• 等待方案确认的项目

3. 交付执行

显示条件：

• currentStage为"建模"、"软装"、"渲染"、"后期"或"尾款结算"
• 已分配设计师
• 非售后状态

典型场景：

• 正在设计制作的项目
• 等待尾款结算的项目

4. 售后

显示条件：

• status为"已完成"
• 或currentStage为"投诉处理"或"客户评价"

典型场景：

• 已完成的项目
• 需要处理投诉的项目
• 等待客户评价的项目

🎨 UI特性

卡片交互

• 悬停效果：卡片上移，显示顶部渐变装饰条
• 点击：跳转到项目详情页
• 待分配徽章：脉动动画提醒

筛选和排序

• 状态筛选：全部、订单分配、确认需求、交付执行、售后
• 阶段筛选：全部、需求沟通、建模、软装、渲染等
• 排序方式：更新时间、创建时间、截止日期、项目名称

搜索功能

• 支持搜索项目名称
• 支持搜索客户名称
• 实时搜索，按回车执行

🐛 常见问题

1. 页面显示"暂无项目"

可能原因：

• Parse Server中没有项目数据
• 公司ID不正确
• 项目的company字段未正确关联

解决方法：

1. 打开浏览器控制台（F12）
2. 查看是否有错误信息

3. 运行测试脚本检查数据：

   // 复制 test-project-list-data.js 中的代码并运行
   

4. 检查控制台输出的调试信息

2. 页面显示"加载用户信息失败"

可能原因：

• localStorage中没有company字段
• Parse Server连接失败
• Profile信息获取失败

解决方法：

1. 检查localStorage：

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

2. 手动设置公司ID：

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

3. 刷新页面

3. 卡片显示不完整

可能原因：

• 项目数据缺少某些字段
• 关联数据（contact、assignee）未正确加载

解决方法：

1. 检查控制台是否有错误
2. 确认项目数据包含必要字段：
   • title: 项目标题
   • status: 项目状态
   • currentStage: 当前阶段
   • contact: 联系人指针
   • assignee: 负责人指针

4. 项目分组不正确

可能原因：

• currentStage字段值不在预期范围内
• status字段值不正确
• assignee字段未正确设置

解决方法：

1. 检查项目的currentStage值是否为以下之一：
   • 订单分配、需求沟通、方案确认
   • 建模、软装、渲染、后期、尾款结算
   • 投诉处理、客户评价
2. 检查项目的status值是否为以下之一：
   • 进行中、已完成、已暂停、已延期

📝 数据字段说明

Project表必需字段

字段	类型	说明	示例
title	String	项目标题	"张三的客厅设计"
status	String	项目状态	"进行中"
currentStage	String	当前阶段	"建模"
company	Pointer	公司指针	Company对象
contact	Pointer	联系人指针	ContactInfo对象
assignee	Pointer	负责人指针	Profile对象
deadline	Date	截止日期	2024-11-01
isDeleted	Boolean	是否删除	false

状态值（status）

• 进行中 - 项目正在进行
• 已完成 - 项目已完成
• 已暂停 - 项目暂停
• 已延期 - 项目延期

阶段值（currentStage）

• 订单分配 - 待分配设计师
• 需求沟通 - 正在沟通需求
• 方案确认 - 等待方案确认
• 建模 - 正在建模
• 软装 - 正在软装设计
• 渲染 - 正在渲染
• 后期 - 正在后期处理
• 尾款结算 - 等待尾款结算
• 投诉处理 - 处理投诉中
• 客户评价 - 等待客户评价

🔍 调试技巧

1. 查看控制台日志

打开浏览器开发者工具（F12），切换到Console标签，查看以下日志：

• ✅ 从localStorage加载公司ID: xxx
• ✅ 从Parse Server加载了 X 个项目
• ⚠️ 未找到项目数据，请检查...
• ❌ 初始化用户和公司信息失败...

2. 运行测试脚本

// 在浏览器控制台运行
// 复制 test-project-list-data.js 的内容并执行

测试脚本会输出：

• 公司ID检查
• Parse SDK检查
• 项目数据查询
• 状态和阶段分布
• 看板分组预览

3. 检查网络请求

1. 打开开发者工具（F12）
2. 切换到Network标签
3. 刷新页面
4. 查找Parse Server的请求
5. 检查请求是否成功（状态码200）
6. 查看响应数据

4. 手动查询数据

// 在浏览器控制台运行
const companyId = localStorage.getItem('company');
const query = new Parse.Query('Project');
query.equalTo('company', {
  __type: 'Pointer',
  className: 'Company',
  objectId: companyId
});
query.limit(10);
query.find().then(projects => {
  console.log('找到项目:', projects.length);
  projects.forEach(p => {
    console.log(p.get('title'), p.get('status'), p.get('currentStage'));
  });
});

📞 技术支持

如果遇到问题，请提供以下信息：

1. 浏览器控制台截图（包含错误信息）
2. 测试脚本运行结果
3. 项目数据示例（脱敏后）
4. 访问的URL
5. 操作步骤

📚 相关文档

• 项目列表Parse集成完成文档
• 数据库表结构
• 项目数据模型

---

最后更新: 2024-10-24
版本: 1.0.0