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