7.5 KiB
7.5 KiB
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. 批量发货
- 选择主订单行,点击"发货"
- 选择"批量发货"模式
- 填写统一的快递信息
- 为每个商品填写快递单号
- 提交批量发货
- 自动获取最新的发货数据
- 显示完整的商品信息
注意事项
- 数据一致性:修改主订单时,子订单数据会同步更新
- 权限控制:确保用户有相应的操作权限
- 数据验证:批量发货前验证所有快递单号已填写
- 错误处理:完善的错误提示和异常处理
- API依赖:需要后端提供
getByMainOrderId接口支持 - 网络稳定性:API调用失败时会自动降级到原有逻辑
- 商品服务依赖:需要
IServiceGoodsService支持商品信息查询 - 性能考虑:批量获取商品信息时注意数据量大小
后续优化建议
- 批量操作API:后端支持真正的批量发货API
- 数据导入导出:支持主订单数据的批量导入导出
- 操作日志:记录主订单的操作历史
- 状态管理:更完善的主订单状态管理机制
- 缓存策略:实现智能的数据缓存机制
- 实时更新:支持WebSocket实时数据推送
- 商品信息缓存:实现商品信息的本地缓存,减少重复API调用
- 图片懒加载:实现商品图片的懒加载,提升页面性能
总结
本次更新大幅提升了GoodsOrder页面的功能性和用户体验,实现了真正的主订单分组管理,支持多个商品的统一操作。最重要的是,通过API调用优化和商品信息集成,实现了更高效、更准确、更丰富的数据处理,为业务人员提供了更可靠、更直观的工作工具。
主要优势:
- ✅ 数据准确性:通过API直接获取最新数据
- ✅ 性能提升:减少前端数据处理,提升响应速度
- ✅ 功能完善:支持主订单的完整生命周期管理
- ✅ 用户体验:直观的界面和流畅的操作流程
- ✅ 系统稳定:完善的错误处理和降级方案
- ✅ 商品信息丰富:显示完整的商品图片、分类、描述等信息
- ✅ 数据完整性:确保订单和商品信息的一致性