javacodeadmin/RuoYi-Vue-master/GoodsOrder分组显示修改说明.md

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. 数据分组逻辑

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. 单元格合并

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. 商品显示优化

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