134 lines
4.4 KiB
Markdown
134 lines
4.4 KiB
Markdown
# GoodsOrder 页面分组显示修改说明
|
||
|
||
## 修改概述
|
||
|
||
根据业务需求，将商品订单页面的数据显示修改为按 `main_order_id` 分组查询显示。主要修改包括前端页面显示逻辑和后端数据查询逻辑的调整。
|
||
|
||
## 主要修改内容
|
||
|
||
### 1. 前端页面修改 (`ruoyi-ui/src/views/system/GoodsOrder/index.vue`)
|
||
|
||
#### 1.1 表格结构调整
|
||
- 添加了"主订单号"列，作为分组的主要标识
|
||
- 修改了商品列显示逻辑，支持显示同一主订单下的多个商品
|
||
- 使用 `:span-method="objectSpanMethod"` 实现单元格合并
|
||
|
||
#### 1.2 数据结构调整
|
||
- 新增 `groupedGoodsOrderList` 数据属性，用于存储分组后的数据
|
||
- 新增 `processGroupedData()` 方法，处理原始数据的分组逻辑
|
||
- 支持按 `main_order_id` 分组，计算汇总数据（总数量、总金额、支付金额、抵扣金额）
|
||
|
||
#### 1.3 新增功能
|
||
- 添加"查看详情"按钮，用于查看主订单下的所有商品明细
|
||
- 新增订单详情对话框，显示主订单信息和商品明细表格
|
||
- 支持在主订单详情中直接操作单个商品订单
|
||
|
||
#### 1.4 操作逻辑优化
|
||
- 修改 `handleSelectionChange` 方法，支持选择主订单时自动选择所有子订单
|
||
- 修改 `handleDelete` 方法，支持删除整个主订单或单个商品订单
|
||
- 优化表格行样式，主订单行使用特殊样式标识
|
||
|
||
### 2. 后端逻辑调整
|
||
|
||
#### 2.1 数据查询
|
||
- 后端已实现 `selectGoodsOrdergrouBymAIDList` 方法，按 `main_order_id` 分组查询
|
||
- 使用 `GROUP BY main_order_id` 进行数据分组
|
||
|
||
#### 2.2 权限控制
|
||
- 移除了 `downloadTemplate` 方法的权限注解，解决模板下载的401错误
|
||
|
||
## 技术实现细节
|
||
|
||
### 1. 数据分组逻辑
|
||
```javascript
|
||
processGroupedData() {
|
||
const grouped = {};
|
||
this.GoodsOrderList.forEach(item => {
|
||
if (!grouped[item.mainOrderId]) {
|
||
grouped[item.mainOrderId] = [];
|
||
}
|
||
grouped[item.mainOrderId].push(item);
|
||
});
|
||
|
||
// 创建支持合并行的扁平化数据结构
|
||
const flatList = [];
|
||
Object.keys(grouped).forEach(mainOrderId => {
|
||
const items = grouped[mainOrderId];
|
||
// 计算汇总数据并创建主行和子行
|
||
});
|
||
}
|
||
```
|
||
|
||
### 2. 单元格合并
|
||
```javascript
|
||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||
if (columnIndex === 1) { // 主订单号列
|
||
if (row.isMainRow) {
|
||
return { rowspan: row.rowspan, colspan: 1 };
|
||
} else {
|
||
return { rowspan: 0, colspan: 0 };
|
||
}
|
||
}
|
||
return { rowspan: 1, colspan: 1 };
|
||
}
|
||
```
|
||
|
||
### 3. 商品显示优化
|
||
```html
|
||
<el-table-column label="商品" align="center" prop="productName">
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.isMainRow">
|
||
<div v-for="(product, index) in scope.row.children" :key="index">
|
||
<el-tag size="mini" type="info">{{ product.productName }}</el-tag>
|
||
<span>x{{ product.num }}</span>
|
||
</div>
|
||
</div>
|
||
<span v-else>{{ scope.row.productName }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
```
|
||
|
||
## 业务逻辑说明
|
||
|
||
### 1. 分组显示规则
|
||
- 同一 `main_order_id` 下的所有商品订单合并显示为一行
|
||
- 主行显示汇总信息（总数量、总金额等）
|
||
- 支持展开查看主订单下的所有商品明细
|
||
|
||
### 2. 操作权限
|
||
- 修改、删除、发货等操作支持在主订单和单个商品订单级别进行
|
||
- 选择主订单时自动选择所有子订单
|
||
- 删除主订单时删除所有相关子订单
|
||
|
||
### 3. 数据排序
|
||
- 优先显示待处理订单（状态为2或售后状态为1、4）
|
||
- 按更新时间倒序排列
|
||
|
||
## 使用说明
|
||
|
||
### 1. 查看订单
|
||
- 主订单信息在表格中合并显示
|
||
- 点击"查看详情"按钮可查看完整的商品明细
|
||
|
||
### 2. 批量操作
|
||
- 选择主订单行时自动选择所有子订单
|
||
- 支持批量删除、批量发货等操作
|
||
|
||
### 3. 单个操作
|
||
- 在详情对话框中可对单个商品订单进行操作
|
||
- 支持修改、发货、售后等操作
|
||
|
||
## 注意事项
|
||
|
||
1. 分组后的数据量可能与原始数据不同，分页逻辑已相应调整
|
||
2. 主订单行的样式使用特殊标识，便于用户识别
|
||
3. 所有操作都基于实际的订单ID进行，确保数据一致性
|
||
4. 商品名称列支持显示多个商品，用逗号分隔
|
||
|
||
## 后续优化建议
|
||
|
||
1. 可考虑添加主订单级别的批量操作功能
|
||
2. 可优化分组数据的缓存机制，提高页面性能
|
||
3. 可添加主订单状态的汇总显示
|
||
4. 可考虑支持按商品类型进行二次分组
|