发货-费用分摊(新) 发货费用分摊模块功能解析 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 核心结构 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 核心结构 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 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文件,方便离线分析 该模块通过前后端分离的架构设计,实现了从数据存储、业务逻辑到前端展示的完整流程,为用户提供了清晰、直观的费用分摊分析工具,帮助用户更好地了解和管理发货费用。