feat: standardize default page size to 20, add pagination to pick list, and fix table horizontal scrollbar visibility
This commit is contained in:
@ -106,7 +106,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<el-table
|
<el-table
|
||||||
ref="manualTableRef"
|
ref="manualTableRef"
|
||||||
:data="filteredStockData"
|
:data="paginatedStockData"
|
||||||
height="500"
|
height="500"
|
||||||
border
|
border
|
||||||
row-key="uniqueKey"
|
row-key="uniqueKey"
|
||||||
@ -141,6 +141,17 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
style="margin-top: 12px; justify-content: flex-end; display: flex;"
|
||||||
|
v-model:current-page="stockPage"
|
||||||
|
v-model:page-size="stockPageSize"
|
||||||
|
:total="filteredStockData.length"
|
||||||
|
:page-sizes="[20, 50, 100, 200]"
|
||||||
|
layout="total, prev, pager, next"
|
||||||
|
background
|
||||||
|
@size-change="() => { stockPage = 1 }"
|
||||||
|
@current-change="() => {}"
|
||||||
|
/>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span style="float: left; line-height: 32px; color: #909399;">
|
<span style="float: left; line-height: 32px; color: #909399;">
|
||||||
已勾选 {{ tempSelection.length }} 项
|
已勾选 {{ tempSelection.length }} 项
|
||||||
@ -338,6 +349,8 @@ const allStockData = ref<any[]>([])
|
|||||||
const filteredStockData = ref<any[]>([])
|
const filteredStockData = ref<any[]>([])
|
||||||
const searchKeyword = ref('')
|
const searchKeyword = ref('')
|
||||||
const tempSelection = ref<any[]>([])
|
const tempSelection = ref<any[]>([])
|
||||||
|
const stockPage = ref(1)
|
||||||
|
const stockPageSize = ref(20)
|
||||||
|
|
||||||
// 表格引用
|
// 表格引用
|
||||||
const manualTableRef = ref<InstanceType<typeof ElTable>>()
|
const manualTableRef = ref<InstanceType<typeof ElTable>>()
|
||||||
@ -414,6 +427,12 @@ const shortageList = computed(() => {
|
|||||||
|
|
||||||
const hasShortage = computed(() => shortageList.value.length > 0 && bomSets.value > maxBuildableSets.value)
|
const hasShortage = computed(() => shortageList.value.length > 0 && bomSets.value > maxBuildableSets.value)
|
||||||
|
|
||||||
|
// ★ 出库选单分页数据(固定 height="500" 时仍需分页减轻渲染压力)
|
||||||
|
const paginatedStockData = computed(() => {
|
||||||
|
const start = (stockPage.value - 1) * stockPageSize.value
|
||||||
|
return filteredStockData.value.slice(start, start + stockPageSize.value)
|
||||||
|
})
|
||||||
|
|
||||||
// --- 辅助方法 ---
|
// --- 辅助方法 ---
|
||||||
const getTypeTag = (type: string) => {
|
const getTypeTag = (type: string) => {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
@ -428,6 +447,7 @@ const getTypeTag = (type: string) => {
|
|||||||
|
|
||||||
const openManualSelect = async () => {
|
const openManualSelect = async () => {
|
||||||
manualDialogVisible.value = true
|
manualDialogVisible.value = true
|
||||||
|
stockPage.value = 1
|
||||||
|
|
||||||
if (allStockData.value.length === 0) {
|
if (allStockData.value.length === 0) {
|
||||||
try {
|
try {
|
||||||
@ -461,6 +481,7 @@ const openManualSelect = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const filterStock = () => {
|
const filterStock = () => {
|
||||||
|
stockPage.value = 1
|
||||||
const kw = searchKeyword.value.trim().toLowerCase()
|
const kw = searchKeyword.value.trim().toLowerCase()
|
||||||
if (!kw) {
|
if (!kw) {
|
||||||
filteredStockData.value = allStockData.value
|
filteredStockData.value = allStockData.value
|
||||||
|
|||||||
@ -139,6 +139,7 @@
|
|||||||
highlight-current-row
|
highlight-current-row
|
||||||
header-cell-class-name="table-header-gray"
|
header-cell-class-name="table-header-gray"
|
||||||
@sort-change="handleSortChange"
|
@sort-change="handleSortChange"
|
||||||
|
height="calc(100vh - 300px)"
|
||||||
>
|
>
|
||||||
<template v-for="col in allColumns" :key="col.prop">
|
<template v-for="col in allColumns" :key="col.prop">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
@ -239,7 +240,7 @@
|
|||||||
v-model:current-page="queryParams.page"
|
v-model:current-page="queryParams.page"
|
||||||
v-model:page-size="queryParams.pageSize"
|
v-model:page-size="queryParams.pageSize"
|
||||||
:total="total"
|
:total="total"
|
||||||
:page-sizes="[100, 200, 500, 1000]"
|
:page-sizes="[20, 50, 100, 200]"
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
background
|
background
|
||||||
@size-change="fetchData"
|
@size-change="fetchData"
|
||||||
@ -794,7 +795,7 @@ const companyOptions = ref<string[]>([])
|
|||||||
|
|
||||||
const queryParams = reactive({
|
const queryParams = reactive({
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 50,
|
pageSize: 20,
|
||||||
keyword: '',
|
keyword: '',
|
||||||
searchField: 'all',
|
searchField: 'all',
|
||||||
sku: '',
|
sku: '',
|
||||||
|
|||||||
@ -143,6 +143,7 @@
|
|||||||
header-cell-class-name="table-header-gray"
|
header-cell-class-name="table-header-gray"
|
||||||
@sort-change="handleSortChange"
|
@sort-change="handleSortChange"
|
||||||
:key="hasColumnPermission('sn_bn') ? 'sn' : 'nosn'"
|
:key="hasColumnPermission('sn_bn') ? 'sn' : 'nosn'"
|
||||||
|
height="calc(100vh - 300px)"
|
||||||
>
|
>
|
||||||
<template v-for="col in allColumns" :key="col.prop">
|
<template v-for="col in allColumns" :key="col.prop">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
@ -231,7 +232,17 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
<el-pagination class="pagination-bar" v-model:current-page="queryParams.page" v-model:page-size="queryParams.pageSize" :total="total" layout="total, sizes, prev, pager, next" background @change="fetchData" />
|
<el-pagination
|
||||||
|
class="pagination-bar"
|
||||||
|
v-model:current-page="queryParams.page"
|
||||||
|
v-model:page-size="queryParams.pageSize"
|
||||||
|
:total="total"
|
||||||
|
:page-sizes="[20, 50, 100, 200]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
background
|
||||||
|
@size-change="fetchData"
|
||||||
|
@current-change="fetchData"
|
||||||
|
/>
|
||||||
|
|
||||||
<el-dialog v-model="visible" :title="dialogStatus === 'create' ? '成品入库' : '编辑成品'" width="min(1000px, 95vw)" top="5vh" :close-on-click-modal="!isUploading" :close-on-press-escape="!isUploading" :show-close="!isUploading" class="stylish-dialog compact-layout">
|
<el-dialog v-model="visible" :title="dialogStatus === 'create' ? '成品入库' : '编辑成品'" width="min(1000px, 95vw)" top="5vh" :close-on-click-modal="!isUploading" :close-on-press-escape="!isUploading" :show-close="!isUploading" class="stylish-dialog compact-layout">
|
||||||
<div class="dialog-scroll-container">
|
<div class="dialog-scroll-container">
|
||||||
@ -615,7 +626,7 @@ const formRef = ref()
|
|||||||
// 上传锁定状态
|
// 上传锁定状态
|
||||||
const isUploading = ref(false)
|
const isUploading = ref(false)
|
||||||
|
|
||||||
const queryParams = reactive({ page: 1, pageSize: 50, keyword: '', searchField: 'all', sku: '', category: '', material_type: '', statuses: ['在库', '借库'], company: '', orderByColumn: '', isAsc: '', advancedFilters: [] })
|
const queryParams = reactive({ page: 1, pageSize: 20, keyword: '', searchField: 'all', sku: '', category: '', material_type: '', statuses: ['在库', '借库'], company: '', orderByColumn: '', isAsc: '', advancedFilters: [] })
|
||||||
const categoryOptions = ref<string[]>([])
|
const categoryOptions = ref<string[]>([])
|
||||||
const typeOptions = ref<string[]>([])
|
const typeOptions = ref<string[]>([])
|
||||||
const companyOptions = ref<string[]>([]) // [新增]
|
const companyOptions = ref<string[]>([]) // [新增]
|
||||||
|
|||||||
@ -155,6 +155,7 @@
|
|||||||
highlight-current-row
|
highlight-current-row
|
||||||
header-cell-class-name="table-header-gray"
|
header-cell-class-name="table-header-gray"
|
||||||
@sort-change="handleSortChange"
|
@sort-change="handleSortChange"
|
||||||
|
height="calc(100vh - 300px)"
|
||||||
>
|
>
|
||||||
<template v-for="col in allColumns" :key="col.prop">
|
<template v-for="col in allColumns" :key="col.prop">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
@ -263,7 +264,7 @@
|
|||||||
v-model:current-page="queryParams.page"
|
v-model:current-page="queryParams.page"
|
||||||
v-model:page-size="queryParams.pageSize"
|
v-model:page-size="queryParams.pageSize"
|
||||||
:total="total"
|
:total="total"
|
||||||
:page-sizes="[100, 200, 500, 1000]"
|
:page-sizes="[20, 50, 100, 200]"
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
background
|
background
|
||||||
@size-change="fetchData"
|
@size-change="fetchData"
|
||||||
@ -684,7 +685,7 @@ const formRef = ref()
|
|||||||
// 上传锁定状态
|
// 上传锁定状态
|
||||||
const isUploading = ref(false)
|
const isUploading = ref(false)
|
||||||
|
|
||||||
const queryParams = reactive({ page: 1, pageSize: 50, keyword: '', searchField: 'all', sku: '', category: '', material_type: '', statuses: ['在库', '借库'], company: '', orderByColumn: '', isAsc: '', advancedFilters: [] })
|
const queryParams = reactive({ page: 1, pageSize: 20, keyword: '', searchField: 'all', sku: '', category: '', material_type: '', statuses: ['在库', '借库'], company: '', orderByColumn: '', isAsc: '', advancedFilters: [] })
|
||||||
const categoryOptions = ref<string[]>([])
|
const categoryOptions = ref<string[]>([])
|
||||||
const typeOptions = ref<string[]>([])
|
const typeOptions = ref<string[]>([])
|
||||||
const companyOptions = ref<string[]>([]) // [新增]
|
const companyOptions = ref<string[]>([]) // [新增]
|
||||||
|
|||||||
Reference in New Issue
Block a user