feat(wms/report): 优化发货报表页面,实现分页查询和统计功能

1. 新增轻量钢卷列表接口用于全量数据统计
2. 拆分接口为分页明细查询和全量统计查询
3. 为表格组件添加服务端分页支持
4. 移除默认的全量查询配置,新增分页状态管理
5. 注释掉表格的筛选排序功能暂时隐藏
This commit is contained in:
2026-05-20 13:57:09 +08:00
parent cd7ca23f28
commit 724dd272ca
4 changed files with 129 additions and 26 deletions

View File

@@ -1,15 +1,15 @@
<template>
<div class="coil-table">
<div class="table-controls">
<div class="filter-section">
<!-- <div class="filter-section">
<el-input v-model="filterKeyword" placeholder="输入关键词筛选" clearable @input="handleFilterChange"
style="width: 200px; margin-right: 10px" />
<el-select v-model="filterColumn" placeholder="选择筛选字段" @change="handleFilterChange"
style="width: 200px; margin-right: 10px" multiple collapse-tags>
<el-option v-for="column in columns" :key="column.prop" :label="column.title" :value="column.prop" />
</el-select>
</div>
<div class="sort-section">
</div> -->
<!-- <div class="sort-section">
<el-select v-model="sortField" placeholder="选择排序字段" @change="handleSortChange"
style="width: 150px; margin-right: 10px">
<el-option v-for="column in columns" :key="column.prop" :label="column.title" :value="column.prop" />
@@ -18,10 +18,10 @@
<el-option label="升序" value="asc" />
<el-option label="降序" value="desc" />
</el-select>
</div>
<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size.sync="pageSize"
:page-sizes="[10, 20, 50, 100, 200, 500, 1000]" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
</div> -->
<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="paginationTotal" :page-size="effectivePageSize"
:current-page="pageNum" :page-sizes="[10, 20, 50, 100, 200, 500, 1000]" @size-change="handleSizeChange"
@current-change="handleCurrentChange" />
<slot name="settings"></slot>
</div>
@@ -107,13 +107,23 @@ export default {
// 自定义高亮样式
style: {}
})
},
// 服务端分页总数(>0 时开启服务端分页模式)
total: {
type: Number,
default: 0
},
// 服务端分页每页条数
pageSize: {
type: Number,
default: 0
}
},
dicts: ['coil_quality_status', 'coil_abnormal_code', 'coil_abnormal_degree'],
data() {
return {
pageNum: 1,
pageSize: 1000,
innerPageSize: 1000,
// 排序相关
sortField: '',
sortDirection: 'asc',
@@ -133,8 +143,17 @@ export default {
this.filterColumn = this.columns.map(column => column.prop)
},
computed: {
// 处理排序和筛选后的数据
isServerPagination() {
return this.total > 0
},
effectivePageSize() {
return this.pageSize > 0 ? this.pageSize : this.innerPageSize
},
// 处理排序和筛选后的数据(服务端分页模式下跳过筛选排序)
processedData() {
if (this.isServerPagination) {
return this.data
}
let result = [...this.data]
// 筛选逻辑
@@ -183,32 +202,48 @@ export default {
return result
},
// 内部实现前端分页逻辑
// 内部实现前端分页逻辑(服务端分页模式下直接返回数据)
tableData() {
return this.processedData.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
if (this.isServerPagination) {
return this.data
}
return this.processedData.slice((this.pageNum - 1) * this.effectivePageSize, this.pageNum * this.effectivePageSize)
},
// 计算总页数
totalPage() {
return Math.ceil(this.processedData.length / this.pageSize)
const total = this.isServerPagination ? this.total : this.processedData.length
return Math.ceil(total / this.effectivePageSize)
},
// 计算总条数
total() {
pageTotal() {
return this.processedData.length
},
// 分页总条数(服务端优先)
paginationTotal() {
return this.isServerPagination ? this.total : this.pageTotal
},
// 是否展示分页组件
showPagination() {
if (this.isServerPagination) return true
return this.totalPage > 1
}
},
methods: {
// 分页大小改变时触发
handleSizeChange(val) {
this.pageSize = val
if (this.isServerPagination) {
this.$emit('size-change', val)
} else {
this.innerPageSize = val
}
this.pageNum = 1
},
// 分页当前页改变时触发
handleCurrentChange(val) {
this.pageNum = val
if (this.isServerPagination) {
this.$emit('current-change', val)
}
},
// 生产耗时单位分钟渲染为xx天xx小时xx分钟
formatProductionDuration(duration) {