130 lines
5.2 KiB
Markdown
130 lines
5.2 KiB
Markdown
# 订单处理功能增强说明
|
||
|
||
## 功能概述
|
||
|
||
在原有订单处理功能的基础上，新增了完整的订单基本信息展示和接单记录流程展示功能，让管理员能够更全面地了解订单的详细信息和处理流程。
|
||
|
||
## 新增功能特性
|
||
|
||
### 1. 完整的订单基本信息展示
|
||
- **订单标识信息**：订单号、订单状态、服务进度、下单时间
|
||
- **用户信息**：用户姓名、用户电话
|
||
- **服务信息**：服务名称、预约数量
|
||
- **预约信息**：预约时间、预约地点
|
||
- **价格信息**：订单总价、支付金额
|
||
|
||
### 2. 接单记录流程展示
|
||
- **时间轴布局**：使用Element UI的Timeline组件展示接单记录
|
||
- **状态标识**：不同状态用不同颜色和图标区分
|
||
- **详细信息**：显示师傅信息、处理内容、备注、价格等
|
||
- **流程追踪**：清晰展示订单从接单到完成的整个流程
|
||
|
||
### 3. 智能数据加载
|
||
- **自动加载**：打开订单处理时自动加载接单记录
|
||
- **数据格式化**：自动格式化时间、价格等数据
|
||
- **错误处理**：API调用失败时的友好提示
|
||
|
||
## 技术实现细节
|
||
|
||
### 前端实现
|
||
- **Vue.js + Element UI**：使用Timeline组件展示流程
|
||
- **响应式数据**：动态加载和显示接单记录
|
||
- **数据格式化**：时间戳转换、状态文本映射
|
||
- **样式优化**：美观的时间轴和卡片布局
|
||
|
||
### 后端API调用
|
||
- **接单记录**：调用 `/system/Order/receive-records/{orderId}` 接口
|
||
- **工人列表**：调用 `/system/Order/getWorkerList` 接口
|
||
- **订单更新**：复用现有的 `updateOrder` 接口
|
||
|
||
### 数据字段映射
|
||
```javascript
|
||
// 订单基本信息
|
||
userName: row.uname || row.name, // 用户姓名
|
||
userPhone: row.phone || row.userPhone, // 用户电话
|
||
productName: row.productName, // 服务名称
|
||
num: row.num, // 预约数量
|
||
appointmentTime: 格式化预约时间, // 预约时间
|
||
appointmentAddress: row.address, // 预约地点
|
||
totalPrice: row.totalPrice, // 订单总价
|
||
payPrice: row.payPrice, // 支付金额
|
||
createdAt: 格式化创建时间, // 下单时间
|
||
|
||
// 接单记录
|
||
receiveRecords: [] // 接单记录数组
|
||
```
|
||
|
||
## 接单记录状态映射
|
||
|
||
### 状态类型
|
||
- **1 - 接单**：师傅接单，蓝色标识
|
||
- **2 - 开始服务**：开始提供服务，绿色标识
|
||
- **3 - 暂停服务**：服务暂停，橙色标识
|
||
- **4 - 恢复服务**：服务恢复，灰色标识
|
||
- **5 - 完成服务**：服务完成，红色标识
|
||
|
||
### 时间轴样式
|
||
- **节点颜色**：根据状态自动设置不同颜色
|
||
- **标签类型**：状态标签使用对应的Element UI类型
|
||
- **卡片布局**：每个记录用卡片形式展示详细信息
|
||
|
||
## 使用方法
|
||
|
||
### 1. 查看订单基本信息
|
||
- 打开订单处理对话框后，顶部会显示完整的订单基本信息
|
||
- 所有信息字段都是只读的，用于查看和确认
|
||
|
||
### 2. 查看接单记录流程
|
||
- 在订单基本信息下方，会显示接单记录的时间轴
|
||
- 每个记录包含师傅信息、处理内容、时间等详细信息
|
||
- 如果没有接单记录，会显示"暂无接单记录"的提示
|
||
|
||
### 3. 处理订单状态
|
||
- 在订单基本信息区域可以修改订单状态和服务进度
|
||
- 系统会根据状态变化自动验证必填字段
|
||
- 修改完成后点击"确定"保存更改
|
||
|
||
## 样式特性
|
||
|
||
### 时间轴样式
|
||
- **节点样式**：16x16像素的圆形节点，不同状态不同颜色
|
||
- **卡片样式**：圆角边框，轻微阴影，清晰的信息层次
|
||
- **响应式布局**：自适应不同屏幕尺寸
|
||
|
||
### 信息展示
|
||
- **标签样式**：状态标签使用Element UI的Tag组件
|
||
- **图标支持**：电话、金钱、定金等图标增强可读性
|
||
- **颜色搭配**：合理的颜色搭配提升视觉体验
|
||
|
||
## 数据加载流程
|
||
|
||
1. **用户点击订单处理**：触发 `handleOrderProcess` 方法
|
||
2. **初始化表单数据**：从行数据中提取基本信息并格式化
|
||
3. **加载工人列表**：调用 `loadWorkerList` 获取可用工人
|
||
4. **加载接单记录**：调用 `loadReceiveRecords` 获取接单历史
|
||
5. **显示对话框**：展示完整的订单处理界面
|
||
|
||
## 注意事项
|
||
|
||
1. **数据完整性**：确保订单行数据包含所有必要字段
|
||
2. **时间格式**：预约时间和创建时间会自动格式化显示
|
||
3. **状态映射**：接单记录状态需要与后端保持一致
|
||
4. **权限控制**：需要相应的查询和编辑权限
|
||
5. **错误处理**：API调用失败时有友好的错误提示
|
||
|
||
## 扩展建议
|
||
|
||
1. **实时更新**：可以添加WebSocket支持实时更新接单记录
|
||
2. **批量操作**：支持批量查看多个订单的处理流程
|
||
3. **导出功能**：支持导出接单记录为PDF或Excel
|
||
4. **通知系统**：状态变更时自动通知相关人员
|
||
5. **移动端优化**：优化移动设备上的时间轴显示
|
||
|
||
## 测试建议
|
||
|
||
1. **数据加载测试**：测试各种订单数据的加载和显示
|
||
2. **接单记录测试**：测试不同状态的接单记录显示
|
||
3. **时间格式化测试**：测试各种时间格式的正确显示
|
||
4. **样式兼容性测试**：测试不同浏览器的样式显示
|
||
5. **响应式测试**：测试不同屏幕尺寸的布局效果
|