feat(wms/report): 优化发货报表页面,实现分页查询和统计功能
1. 新增轻量钢卷列表接口用于全量数据统计 2. 拆分接口为分页明细查询和全量统计查询 3. 为表格组件添加服务端分页支持 4. 移除默认的全量查询配置,新增分页状态管理 5. 注释掉表格的筛选排序功能暂时隐藏
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user