发货-费用分摊（新）

发货费用分摊模块功能解析

1. 模块架构

发货费用分摊模块采用前后端分离的架构设计，主要包含以下组件：

1.1 前端组件

组件名称	文件路径	功能描述
主页面组件	`wimoor-ui/src/views/erp/warehouse/fee/index.vue`	核心页面，包含双标签页设计和数据展示
详情对话框组件	`wimoor-ui/src/views/erp/warehouse/fee/detail_dialog.vue`	展示SKU历史费用分摊情况和趋势图表
API接口文件	`wimoor-ui/src/api/erp/ship/transportationApi.js`	封装与后端通信的API接口

1.2 后端组件

组件名称	文件路径	功能描述
控制器	`wimoor-erp/erp-boot/src/main/java/com/wimoor/erp/stock/controller/ErpDispatchOverseaTransController.java`	处理前端请求，返回数据
服务接口	`wimoor-erp/erp-boot/src/main/java/com/wimoor/erp/stock/service/IErpDispatchOverseaTransService.java`	定义业务逻辑方法
服务实现	`wimoor-erp/erp-boot/src/main/java/com/wimoor/erp/stock/service/impl/ErpDispatchOverseaTransServiceImpl.java`	实现业务逻辑
Mapper接口	`wimoor-erp/erp-boot/src/main/java/com/wimoor/erp/stock/mapper/ErpDispatchOverseaTransMapper.java`	定义数据库操作方法

2. 前端实现分析

2.1 主页面组件 (`index.vue`)

2.1.1 核心结构

<template>
  <div class="main-sty">
    <el-tabs v-model="selectable" @tab-change="handleQuery">
      <el-tab-pane label="SKU头程" name="sku" key="sku"></el-tab-pane>
      <el-tab-pane label="SKU头程明细" name="detail" key="detail"></el-tab-pane>
    </el-tabs>
    <!-- 筛选条件区域 -->
    <!-- 操作按钮区域 -->
    <!-- 数据表格区域 -->
  </div>
  <Dialog ref="dialogRef"></Dialog>
</template>

2.1.2 核心逻辑

数据加载逻辑：
- 通过 loadTableData 函数根据当前选中的标签页加载对应的数据
- 当标签页切换时，调用 handleQuery 函数重新加载数据
- 当筛选条件变化时，调用 handleQuery 函数重新加载数据
API调用：
- getShipFeeReport：获取SKU头程费用报告
- getShipFeeDetailReport：获取SKU头程费用明细报告
- downShipFeeReportExcel：导出SKU头程费用报告
- downShipFeeDetailReportExcel：导出SKU头程费用明细报告
详情查看逻辑：
- 点击"历史详情"按钮时，调用 showDialog 函数打开详情对话框
- 传递当前查询参数和SKU编码给详情对话框

2.2 详情对话框组件 (`detail_dialog.vue`)

2.2.1 核心结构

<template>
  <el-dialog title="SKU头程历史(每周费用分摊)" width="800px">
    <div id='mychart1' style='height:230px;width:100%'></div>
    <GlobalTable ref="globalTable" :tableData="tableData" @loadTable="loadTableData">
      <!-- 表格列定义 -->
    </GlobalTable>
  </el-dialog>
</template>

2.2.2 核心逻辑

数据加载逻辑：
- 通过 loadTableData 函数加载SKU历史费用数据
- 调用 getShipSkuFeeReport API获取数据
图表渲染逻辑：
- 使用 ECharts 库渲染费用趋势图表
- lineChart 函数负责图表的配置和渲染
- 图表展示运费、发货数量和平均单价的趋势

2.3 API接口文件 (`transportationApi.js`)

2.3.1 核心API接口

API方法	URL	功能描述
`getShipFeeReport`	`/erp/api/v1/inventory/dispatch/overseaTrans/getShipFeeReport`	获取SKU头程费用报告
`getShipFeeDetailReport`	`/erp/api/v1/inventory/dispatch/overseaTrans/getShipFeeDetailReport`	获取SKU头程费用明细报告
`getShipSkuFeeReport`	`/erp/api/v1/inventory/dispatch/overseaTrans/getShipSkuFeeReport`	获取SKU费用历史报告
`downShipFeeReportExcel`	`/erp/api/v1/inventory/dispatch/overseaTrans/downShipFeeReportExcel`	导出SKU头程费用报告
`downShipFeeDetailReportExcel`	`/erp/api/v1/inventory/dispatch/overseaTrans/downShipFeeDetailReportExcel`	导出SKU头程费用明细报告

3. 后端实现分析

3.1 控制器 (`ErpDispatchOverseaTransController.java`)

3.1.1 核心方法

方法名	HTTP方法	功能描述
`getShipFeeReportAction`	POST	获取SKU头程费用报告
`getShipFeeDetailReportAction`	POST	获取SKU头程费用明细报告
`getShipSkuFeeReportAction`	POST	获取SKU费用历史报告
`downShipFeeReportExcelAction`	POST	导出SKU头程费用报告
`downShipFeeDetailReportExcelAction`	POST	导出SKU头程费用明细报告

3.1.2 核心逻辑

参数处理：
- 从前端请求中获取筛选参数
- 处理参数默认值，如日期范围默认为最近7天
- 将参数传递给服务层方法
响应处理：
- 将服务层返回的数据包装为 Result 对象返回
- 对于Excel导出，设置响应头并写入Excel文件

3.2 服务实现 (`ErpDispatchOverseaTransServiceImpl.java`)

3.2.1 核心方法

方法名	功能描述
`getShipFeeReport`	获取SKU头程费用报告
`getShipFeeDetailReport`	获取SKU头程费用明细报告
`transSKUFeeShared`	获取SKU费用历史报告（包含图表数据）
`setShipFeeReport`	生成SKU头程费用报告Excel文件
`setShipFeeDetailReport`	生成SKU头程费用明细报告Excel文件

3.2.2 核心逻辑

费用分摊计算：

在 getShipFeeDetailReport 方法中，计算每个SKU的单件费用：

if(map.get("skufee")!=null && map.get("qty")!=null) {
    String skufeeStr=map.get("skufee").toString();
    BigDecimal qty=new BigDecimal(map.get("qty").toString());
    BigDecimal skufee=new BigDecimal(skufeeStr);
    if(skufee!=null&&qty!=null&&qty.intValue()>0) {
        Double rate = skufee.doubleValue()/qty.doubleValue();
        map.put("skufeeavg", rate);
    }else {
        map.put("skufeeavg", 0);
    }
}else {
    map.put("skufeeavg", null);
}

图表数据处理：

在 transSKUFeeShared 方法中，处理每周费用数据并生成图表数据：

// 处理每周数据
for(Map<String, Object> item:pagelist.getRecords()) {
    if(item.get("opttime2")!=null){
        temp.put(item.get("opttime2").toString().substring(0,10), item);
    }
}
// 生成图表数据
while (c.getTime().before(enddate)) {
    String key = sdf.format(c.getTime());
    if(temp.get(key)==null) {
        series.add("0");
        seriesfee.add("0");
        seriesavgfee.add("0");
    }else {
        // 处理有数据的周
    }
    labels.add(key);
    c.add(Calendar.DATE, 7);
}

Excel导出：
- 使用 SXSSFWorkbook 生成Excel文件
- 设置表头和数据行
- 计算并填充SKU单件费用

3.3 Mapper接口 (`ErpDispatchOverseaTransMapper.java`)

3.3.1 核心方法

方法名	功能描述
`transFeeShared`	查询SKU头程费用汇总数据
`transFeeSharedDetail`	查询SKU头程费用明细数据
`transFeeSharedWeek`	查询SKU每周费用分摊数据

4. 数据流分析

4.1 SKU头程费用报告数据流

前端请求：用户在"SKU头程"标签页设置筛选条件并点击搜索
API调用：前端调用 getShipFeeReport API
后端处理：
- 控制器接收请求并处理参数
- 调用服务层 getShipFeeReport 方法
- 服务层调用Mapper transFeeShared 方法查询数据库
- 数据库返回查询结果
- 服务层将结果返回给控制器
- 控制器将结果包装为 Result 对象返回
前端渲染：前端接收数据并渲染到表格中

4.2 SKU头程费用明细报告数据流

前端请求：用户在"SKU头程明细"标签页设置筛选条件并点击搜索
API调用：前端调用 getShipFeeDetailReport API
后端处理：
- 控制器接收请求并处理参数
- 调用服务层 getShipFeeDetailReport 方法
- 服务层调用Mapper transFeeSharedDetail 方法查询数据库
- 服务层计算每个SKU的单件费用
- 服务层将结果返回给控制器
- 控制器将结果包装为 Result 对象返回
前端渲染：前端接收数据并渲染到表格中

4.3 SKU历史费用报告数据流

前端请求：用户点击"历史详情"按钮
API调用：前端调用 getShipSkuFeeReport API
后端处理：
- 控制器接收请求并处理参数
- 调用服务层 transSKUFeeShared 方法
- 服务层调用Mapper transFeeSharedWeek 方法查询数据库
- 服务层处理数据并生成图表数据
- 服务层将结果返回给控制器
- 控制器将结果包装为 Result 对象返回
前端渲染：
- 前端接收数据并渲染到表格中
- 前端使用ECharts渲染费用趋势图表

4.4 Excel导出数据流

前端请求：用户点击"导出"按钮
API调用：前端调用对应的导出API
后端处理：
- 控制器接收请求并处理参数
- 创建 SXSSFWorkbook 对象
- 调用服务层对应的导出方法
- 服务层调用Mapper查询数据
- 服务层将数据写入Excel文件
- 控制器设置响应头并将Excel文件写入响应流
前端处理：前端接收Excel文件并自动下载

5. 数据库操作分析

5.1 核心查询

SKU头程费用汇总查询：
- 表：涉及发货单、SKU、费用等相关表
- 关键字段：SKU编码、发货数量、费用金额
- 聚合函数：SUM（计算总发货数量和总费用）
- 分组：按SKU编码分组
SKU头程费用明细查询：
- 表：涉及发货单、SKU、费用等相关表
- 关键字段：发货单编码、SKU编码、发货数量、费用金额
- 关联：多表关联查询
SKU每周费用分摊查询：
- 表：涉及发货单、SKU、费用等相关表
- 关键字段：SKU编码、发货日期、发货数量、费用金额
- 分组：按SKU编码和周分组
- 聚合函数：SUM（计算每周发货数量和费用）

6. 技术亮点

6.1 前端技术亮点

双标签页设计：使用Element Plus的 el-tabs 组件实现双标签页切换，提高用户体验
响应式布局：使用Element Plus的响应式组件构建界面，适配不同屏幕尺寸
数据可视化：集成ECharts实现费用趋势的图表展示，直观呈现数据变化
异步数据加载：使用Vue 3的Composition API实现异步数据加载，提高页面响应速度
模块化设计：将主页面和详情对话框分离为独立组件，提高代码可维护性

6.2 后端技术亮点

分层架构：采用控制器→服务→Mapper的分层架构，职责清晰
Excel导出优化：使用 SXSSFWorkbook 生成Excel文件，支持大数据量导出
图表数据处理：在后端预处理图表数据，减轻前端负担
参数处理：统一处理参数默认值和边界情况，提高代码健壮性
费用计算逻辑：实现准确的费用分摊计算，确保数据准确性

7. 代码优化建议

7.1 前端优化建议

性能优化：
- 实现表格数据虚拟滚动，提高大数据量下的渲染性能
- 对频繁调用的API实现缓存，减少重复请求
用户体验优化：
- 添加加载状态提示，提高用户体验
- 实现筛选条件的记忆功能，下次进入页面时自动恢复上次的筛选条件
代码质量优化：
- 提取重复的代码为公共函数，减少代码冗余
- 完善错误处理逻辑，提高代码健壮性

7.2 后端优化建议

性能优化：
- 优化数据库查询，添加适当的索引
- 实现查询结果缓存，减少数据库压力
代码质量优化：
- 提取重复的参数处理逻辑为公共方法
- 使用枚举或常量定义固定值，提高代码可维护性
- 完善异常处理，提供更详细的错误信息
功能优化：
- 增加费用分摊规则的可配置性，支持不同场景的分摊需求
- 增加费用分析报表，提供更丰富的数据洞察

8. 总结

发货费用分摊模块是一个功能完整、设计合理的企业级应用模块，主要实现了以下功能：

费用分摊计算：将发货总费用根据发货数量等因素分摊到各个SKU
多维度数据展示：支持SKU级别的费用汇总和发货单级别的费用明细
丰富的筛选条件：支持按仓库、日期、承运商、物流渠道等条件筛选
数据可视化：使用ECharts展示费用趋势图表，直观呈现数据变化
Excel导出：支持将数据导出为Excel文件，方便离线分析

该模块通过前后端分离的架构设计，实现了从数据存储、业务逻辑到前端展示的完整流程，为用户提供了清晰、直观的费用分摊分析工具，帮助用户更好地了解和管理发货费用。