# 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. 可考虑支持按商品类型进行二次分组