# 客服项目列表使用指南

## 📍 访问地址

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

## 🎯 功能概述

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

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

## 🔧 前置条件

### 1. 确保Parse Server正常运行

检查Parse Server是否可访问：
```javascript
// 在浏览器控制台运行
console.log('Parse Server:', Parse.serverURL);
```

### 2. 确保公司ID已设置

检查localStorage中的公司ID：
```javascript
// 在浏览器控制台运行
console.log('公司ID:', localStorage.getItem('company'));
```

如果没有，手动设置：
```javascript
localStorage.setItem('company', 'your-company-id-here');
```

### 3. 确保有项目数据

运行测试脚本检查数据：
```bash
# 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. 运行测试脚本检查数据：
   ```javascript
   // 复制 test-project-list-data.js 中的代码并运行
   ```
4. 检查控制台输出的调试信息

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

**可能原因**：
- localStorage中没有`company`字段
- Parse Server连接失败
- Profile信息获取失败

**解决方法**：
1. 检查localStorage：
   ```javascript
   console.log('公司ID:', localStorage.getItem('company'));
   ```
2. 手动设置公司ID：
   ```javascript
   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. 运行测试脚本

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

测试脚本会输出：
- 公司ID检查
- Parse SDK检查
- 项目数据查询
- 状态和阶段分布
- 看板分组预览

### 3. 检查网络请求

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

### 4. 手动查询数据

```javascript
// 在浏览器控制台运行
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集成完成文档](./docs/task/20251024-project-list-parse-integration-complete.md)
- [数据库表结构](./docs/Database/database-tables-overview.md)
- [项目数据模型](./rules/schema/project.md)

---

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