247 lines
7.1 KiB
Markdown
247 lines
7.1 KiB
Markdown
# GoodsOrder 页面功能改进说明
|
||
|
||
## 🎯 改进概述
|
||
|
||
基于您的需求和项目实际情况，我对商品订单页面进行了全面的功能改进，主要包括：
|
||
|
||
1. **商品信息展示优化** - 解决商品列显示空白的问题
|
||
2. **分组显示功能增强** - 实现真正的按 `main_order_id` 分组显示
|
||
3. **交互体验提升** - 添加展开/收起、详情查看等功能
|
||
4. **搜索功能增强** - 支持更多搜索条件和高级搜索
|
||
5. **操作功能完善** - 支持商品管理、订单修改等操作
|
||
|
||
## 🚀 主要功能改进
|
||
|
||
### 1. 商品信息展示优化
|
||
|
||
#### 1.1 商品列重新设计
|
||
- **多商品显示**：同一主订单下的多个商品用标签形式展示
|
||
- **商品预览**：显示前2个商品，超出部分显示"+N个"
|
||
- **快速查看**：点击"查看N个商品"按钮直接进入详情页面
|
||
|
||
#### 1.2 商品信息展示方式
|
||
```html
|
||
<!-- 多商品主订单行 -->
|
||
<div class="product-summary">
|
||
<el-button @click="handleViewDetails(row)">
|
||
<i class="el-icon-view"></i>
|
||
查看{{ scope.row.children.length }}个商品
|
||
</el-button>
|
||
<div class="product-preview">
|
||
<el-tag v-for="product in scope.row.children.slice(0, 2)">
|
||
{{ product.productName }}
|
||
</el-tag>
|
||
<span v-if="scope.row.children.length > 2">
|
||
+{{ scope.row.children.length - 2 }}个
|
||
</span>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
### 2. 分组显示功能增强
|
||
|
||
#### 2.1 展开/收起功能
|
||
- 主订单行支持展开查看商品明细
|
||
- 展开内容显示完整的商品信息表格
|
||
- 支持在展开内容中直接操作商品
|
||
|
||
#### 2.2 分组数据结构优化
|
||
```javascript
|
||
// 支持合并行的扁平化数据结构
|
||
const flatList = [];
|
||
Object.keys(grouped).forEach(mainOrderId => {
|
||
const items = grouped[mainOrderId];
|
||
// 创建主行（显示汇总信息）
|
||
const mainRow = {
|
||
...firstItem,
|
||
isMainRow: true,
|
||
rowspan: items.length,
|
||
children: items
|
||
};
|
||
flatList.push(mainRow);
|
||
});
|
||
```
|
||
|
||
### 3. 订单详情功能完善
|
||
|
||
#### 3.1 详情对话框重新设计
|
||
- **主订单信息卡片**：显示订单基本信息和汇总数据
|
||
- **商品明细卡片**：支持商品数量修改、删除等操作
|
||
- **订单统计卡片**：显示商品种类、总数量、总金额等统计信息
|
||
|
||
#### 3.2 商品管理功能
|
||
- 支持修改商品数量（自动重新计算小计和汇总）
|
||
- 支持删除订单中的商品
|
||
- 支持添加新商品到订单（预留接口）
|
||
|
||
### 4. 搜索功能增强
|
||
|
||
#### 4.1 基础搜索优化
|
||
- 添加订单状态筛选
|
||
- 优化搜索条件布局
|
||
- 支持回车键快速搜索
|
||
|
||
#### 4.2 高级搜索功能
|
||
- 新增收货人、联系电话、商品类型等搜索条件
|
||
- 支持售后状态筛选
|
||
- 可展开/收起高级搜索表单
|
||
|
||
```html
|
||
<!-- 高级搜索表单 -->
|
||
<el-form v-show="showAdvancedSearch" class="advanced-search-form">
|
||
<el-form-item label="收货人" prop="name">
|
||
<el-input v-model="queryParams.name" placeholder="请输入收货人姓名" />
|
||
</el-form-item>
|
||
<el-form-item label="联系电话" prop="phone">
|
||
<el-input v-model="queryParams.phone" placeholder="请输入联系电话" />
|
||
</el-form-item>
|
||
<!-- 更多搜索条件... -->
|
||
</el-form>
|
||
```
|
||
|
||
### 5. 操作功能完善
|
||
|
||
#### 5.1 快速操作工具栏
|
||
- **刷新数据**：重新加载订单信息
|
||
- **导出数据**：导出当前筛选条件下的订单数据
|
||
- **Excel批量发货**：原有的批量发货功能
|
||
|
||
#### 5.2 商品操作功能
|
||
- 支持修改商品数量
|
||
- 支持删除商品
|
||
- 支持商品状态管理
|
||
|
||
## 🎨 界面设计改进
|
||
|
||
### 1. 视觉层次优化
|
||
- 主订单行使用特殊背景色标识
|
||
- 商品标签使用不同颜色区分状态
|
||
- 卡片式布局提升信息层次感
|
||
|
||
### 2. 交互体验提升
|
||
- 展开/收起动画效果
|
||
- 悬停效果和阴影
|
||
- 响应式布局适配
|
||
|
||
### 3. 样式系统完善
|
||
```css
|
||
/* 主订单行样式 */
|
||
::v-deep .main-order-row {
|
||
background-color: #f0f9ff !important;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 商品相关样式 */
|
||
.product-summary {
|
||
text-align: center;
|
||
}
|
||
|
||
.product-preview {
|
||
margin-top: 8px;
|
||
}
|
||
```
|
||
|
||
## 🔧 技术实现要点
|
||
|
||
### 1. 数据结构设计
|
||
- 使用扁平化数据结构支持表格合并
|
||
- 主行和子行分离，便于操作管理
|
||
- 支持动态计算汇总数据
|
||
|
||
### 2. 组件交互
|
||
- 使用 `span-method` 实现单元格合并
|
||
- 使用 `expand-row-keys` 控制展开状态
|
||
- 支持动态数据更新和重新计算
|
||
|
||
### 3. 性能优化
|
||
- 按需加载商品详情
|
||
- 支持数据缓存和刷新
|
||
- 优化大量数据的渲染性能
|
||
|
||
## 📱 使用说明
|
||
|
||
### 1. 查看订单
|
||
- **主订单行**：显示汇总信息，支持展开查看详情
|
||
- **商品预览**：直接显示商品标签和数量
|
||
- **详情查看**：点击"查看N个商品"进入详情页面
|
||
|
||
### 2. 管理商品
|
||
- **数量修改**：在详情页面直接修改商品数量
|
||
- **商品删除**：支持删除订单中的商品
|
||
- **状态管理**：查看和管理商品状态
|
||
|
||
### 3. 搜索筛选
|
||
- **基础搜索**：支持订单号、用户、商品等条件
|
||
- **高级搜索**：展开后显示更多搜索选项
|
||
- **快速筛选**：支持订单状态、售后状态等
|
||
|
||
### 4. 批量操作
|
||
- **选择订单**：支持选择主订单（自动选择所有子订单）
|
||
- **批量删除**：删除整个主订单或单个商品
|
||
- **批量发货**：使用Excel批量处理发货
|
||
|
||
## 🎯 业务价值
|
||
|
||
### 1. 提升工作效率
|
||
- 分组显示让订单管理更清晰
|
||
- 快速查看和操作减少页面跳转
|
||
- 批量操作支持提高处理效率
|
||
|
||
### 2. 改善用户体验
|
||
- 直观的商品信息展示
|
||
- 友好的交互操作界面
|
||
- 完善的搜索和筛选功能
|
||
|
||
### 3. 支持业务需求
|
||
- 按主订单分组管理符合业务逻辑
|
||
- 支持商品级别的精细化管理
|
||
- 提供完整的订单生命周期管理
|
||
|
||
## 🔮 后续优化建议
|
||
|
||
### 1. 功能扩展
|
||
- 支持商品图片显示
|
||
- 添加订单备注和标签功能
|
||
- 支持订单模板和快速创建
|
||
|
||
### 2. 性能优化
|
||
- 实现虚拟滚动支持大量数据
|
||
- 添加数据缓存和预加载
|
||
- 优化搜索和筛选性能
|
||
|
||
### 3. 用户体验
|
||
- 添加操作引导和帮助提示
|
||
- 支持个性化设置和偏好
|
||
- 添加数据统计和图表展示
|
||
|
||
## 📋 修改文件清单
|
||
|
||
1. **前端页面**：`ruoyi-ui/src/views/system/GoodsOrder/index.vue`
|
||
- 表格结构和显示逻辑
|
||
- 商品信息展示优化
|
||
- 分组显示功能实现
|
||
- 详情对话框重新设计
|
||
- 搜索功能增强
|
||
|
||
2. **样式文件**：同页面内嵌样式
|
||
- 新增商品相关样式
|
||
- 订单详情样式优化
|
||
- 高级搜索表单样式
|
||
|
||
3. **说明文档**：`GoodsOrder功能改进说明.md`
|
||
- 详细的功能说明
|
||
- 使用方法和注意事项
|
||
- 技术实现要点
|
||
|
||
## ✨ 总结
|
||
|
||
通过这次全面的功能改进，商品订单页面现在具备了：
|
||
|
||
- **清晰的分组显示**：按主订单号分组，支持展开查看详情
|
||
- **完善的商品管理**：支持商品信息的查看、修改、删除等操作
|
||
- **强大的搜索功能**：基础搜索+高级搜索，满足各种查询需求
|
||
- **友好的用户界面**：现代化的卡片布局，直观的信息展示
|
||
- **高效的操作体验**：支持批量操作，减少重复工作
|
||
|
||
这些改进完全满足了您提出的"按main_order_id分组查询显示"的需求，同时大大提升了页面的功能性和用户体验。
|