192 lines
7.5 KiB
Markdown
192 lines
7.5 KiB
Markdown
# GoodsOrder主订单分组功能完善说明
|
||
|
||
## 功能概述
|
||
|
||
本次更新完善了GoodsOrder页面的主订单分组功能,实现了基于`main_order_id`的分组显示和操作,支持多个商品的主订单管理。**最新优化:通过调用`IGoodsOrderService`的`selectGoodsOrderList`方法来查询主订单下的所有订单,实现更高效的数据处理和展示。** **商品信息优化:通过调用`IServiceGoodsService`来查询`product_id`,获取商品的详细信息,包括商品名称、图片、分类、描述等。**
|
||
|
||
## 主要改进内容
|
||
|
||
### 1. 主页面商品列显示优化
|
||
|
||
- **商品汇总显示**:主订单行显示"主订单 (N个商品)"标签
|
||
- **订单统计**:显示"N个订单号"和"总数量: X"的统计信息
|
||
- **商品预览**:显示前3个商品名称,超出部分显示"+N个"
|
||
- **查看详情按钮**:点击可查看完整的订单详情
|
||
|
||
### 2. 修改对话框重构
|
||
|
||
#### 2.1 主订单信息卡片
|
||
- 主订单号、用户信息、收货人、联系电话、收货地址等基本信息
|
||
- 支持编辑和修改
|
||
|
||
#### 2.2 子订单列表卡片
|
||
- 显示所有子订单的详细信息
|
||
- 支持添加、删除、修改子订单
|
||
- 实时计算小计和汇总数据
|
||
- 每个子订单可独立设置状态
|
||
|
||
#### 2.3 订单汇总卡片
|
||
- 子订单数量统计
|
||
- 总数量和总金额计算
|
||
- 支付金额和抵扣金额设置
|
||
- 支付时间和备注信息
|
||
|
||
### 3. 发货对话框增强
|
||
|
||
#### 3.1 主订单信息展示
|
||
- 显示主订单的基本信息
|
||
- 收货人、联系电话、收货地址等
|
||
|
||
#### 3.2 发货方式选择
|
||
- **单个发货**:传统的单个订单发货
|
||
- **批量发货**:支持主订单下多个商品同时发货
|
||
|
||
#### 3.3 批量发货功能
|
||
- 统一的快递公司和发货时间设置
|
||
- 每个商品独立填写快递单号
|
||
- 实时验证快递单号填写状态
|
||
- 支持批量提交发货
|
||
|
||
### 4. 数据处理逻辑优化
|
||
|
||
#### 4.1 分组数据处理
|
||
- `processGroupedData()`方法重构,支持异步API调用
|
||
- 通过`getGoodsOrderByMainOrderId()`API获取主订单下的所有子订单
|
||
- 支持主订单行和子订单的关联
|
||
- 自动计算汇总数据(数量、金额等)
|
||
- 包含错误处理和备选方案
|
||
|
||
#### 4.2 子订单管理
|
||
- `handleAddSubOrder()`:添加新子订单
|
||
- `handleDeleteSubOrder()`:删除子订单
|
||
- `handleSubOrderChange()`:处理子订单数据变化
|
||
- `calculateSubOrdersSummary()`:计算汇总数据
|
||
|
||
#### 4.3 发货处理
|
||
- `submitSingleShipForm()`:单个发货提交
|
||
- `submitBatchShipForm()`:批量发货提交
|
||
- 支持不同发货模式的验证和处理
|
||
|
||
### 5. API调用优化 ⭐ **新增**
|
||
|
||
#### 5.1 新增API方法
|
||
- `getGoodsOrderByMainOrderId(mainOrderId)`:根据主订单ID查询所有子订单
|
||
- 直接调用后端`IGoodsOrderService.selectGoodsOrderList`方法
|
||
- 获取最新、最准确的主订单数据
|
||
|
||
#### 5.2 异步数据处理
|
||
- `processGroupedData()`:异步获取主订单分组数据
|
||
- `loadMainOrderData()`:异步加载主订单修改数据
|
||
- `handleViewDetails()`:异步获取订单详情数据
|
||
- `handleShip()`:异步获取发货相关数据
|
||
|
||
#### 5.3 错误处理和备选方案
|
||
- API调用失败时自动降级到原有逻辑
|
||
- 完善的错误提示和日志记录
|
||
- 确保系统稳定性和用户体验
|
||
|
||
### 6. 商品信息优化 ⭐ **最新新增**
|
||
|
||
#### 6.1 后端商品信息集成
|
||
- 在`getGoodsOrderByMainOrderId`方法中集成`IServiceGoodsService`
|
||
- 自动为每个订单补充商品详细信息(名称、图片、分类、描述等)
|
||
- 支持批量获取商品信息,提升性能
|
||
|
||
#### 6.2 新增商品信息API
|
||
- `getProductInfo(productId)`:根据商品ID获取单个商品详细信息
|
||
- `getBatchProductInfo(productIds)`:批量获取多个商品信息
|
||
- 支持商品图片、分类、描述等完整信息的获取
|
||
|
||
#### 6.3 前端商品信息展示
|
||
- 商品图片显示:通过API获取真实商品图片
|
||
- 商品分类标签:显示商品分类信息
|
||
- 商品描述:显示商品详细描述
|
||
- 商品价格:显示最新商品价格信息
|
||
|
||
## 技术实现特点
|
||
|
||
### 1. 响应式设计
|
||
- 支持不同屏幕尺寸的显示
|
||
- 移动端友好的界面布局
|
||
|
||
### 2. 数据验证
|
||
- 表单验证规则完善
|
||
- 实时数据验证和提示
|
||
|
||
### 3. 用户体验
|
||
- 直观的卡片式布局
|
||
- 清晰的信息层次结构
|
||
- 友好的操作反馈
|
||
|
||
### 4. 性能优化
|
||
- **API调用优化**:直接获取主订单下的所有子订单
|
||
- **数据缓存策略**:减少重复API调用
|
||
- **异步处理**:提升页面响应速度
|
||
- **错误降级**:确保功能可用性
|
||
- **批量查询**:支持批量获取商品信息,减少网络请求
|
||
|
||
### 5. 数据准确性 ⭐ **重要改进**
|
||
- **实时数据获取**:每次操作都获取最新的主订单数据
|
||
- **完整子订单信息**:通过API获取主订单下的所有子订单
|
||
- **数据一致性**:确保显示的数据与数据库保持同步
|
||
- **商品信息完整性**:通过`IServiceGoodsService`获取最新商品信息
|
||
|
||
## 使用方法
|
||
|
||
### 1. 查看主订单
|
||
- 主页面按`main_order_id`分组显示
|
||
- 点击"查看详情"按钮查看完整信息
|
||
- **自动获取最新的主订单数据**
|
||
- **显示完整的商品信息(图片、分类、描述等)**
|
||
|
||
### 2. 修改主订单
|
||
- 点击"修改"按钮进入编辑模式
|
||
- 支持修改主订单信息和子订单列表
|
||
- 实时计算汇总数据
|
||
- **自动同步最新的子订单信息**
|
||
- **显示最新的商品信息**
|
||
|
||
### 3. 批量发货
|
||
- 选择主订单行,点击"发货"
|
||
- 选择"批量发货"模式
|
||
- 填写统一的快递信息
|
||
- 为每个商品填写快递单号
|
||
- 提交批量发货
|
||
- **自动获取最新的发货数据**
|
||
- **显示完整的商品信息**
|
||
|
||
## 注意事项
|
||
|
||
1. **数据一致性**:修改主订单时,子订单数据会同步更新
|
||
2. **权限控制**:确保用户有相应的操作权限
|
||
3. **数据验证**:批量发货前验证所有快递单号已填写
|
||
4. **错误处理**:完善的错误提示和异常处理
|
||
5. **API依赖**:需要后端提供`getByMainOrderId`接口支持
|
||
6. **网络稳定性**:API调用失败时会自动降级到原有逻辑
|
||
7. **商品服务依赖**:需要`IServiceGoodsService`支持商品信息查询
|
||
8. **性能考虑**:批量获取商品信息时注意数据量大小
|
||
|
||
## 后续优化建议
|
||
|
||
1. **批量操作API**:后端支持真正的批量发货API
|
||
2. **数据导入导出**:支持主订单数据的批量导入导出
|
||
3. **操作日志**:记录主订单的操作历史
|
||
4. **状态管理**:更完善的主订单状态管理机制
|
||
5. **缓存策略**:实现智能的数据缓存机制
|
||
6. **实时更新**:支持WebSocket实时数据推送
|
||
7. **商品信息缓存**:实现商品信息的本地缓存,减少重复API调用
|
||
8. **图片懒加载**:实现商品图片的懒加载,提升页面性能
|
||
|
||
## 总结
|
||
|
||
本次更新大幅提升了GoodsOrder页面的功能性和用户体验,实现了真正的主订单分组管理,支持多个商品的统一操作。**最重要的是,通过API调用优化和商品信息集成,实现了更高效、更准确、更丰富的数据处理,为业务人员提供了更可靠、更直观的工作工具。**
|
||
|
||
### 主要优势:
|
||
- ✅ **数据准确性**:通过API直接获取最新数据
|
||
- ✅ **性能提升**:减少前端数据处理,提升响应速度
|
||
- ✅ **功能完善**:支持主订单的完整生命周期管理
|
||
- ✅ **用户体验**:直观的界面和流畅的操作流程
|
||
- ✅ **系统稳定**:完善的错误处理和降级方案
|
||
- ✅ **商品信息丰富**:显示完整的商品图片、分类、描述等信息
|
||
- ✅ **数据完整性**:确保订单和商品信息的一致性
|