fix: 预付结算单与结算调整单分页固定底部,搜索label不再换行

This commit is contained in:
刘泉佳
2026-11-05 15:01:28 +08:00
parent 8057e860de
commit 2fd927a90c
3 changed files with 62 additions and 2 deletions
+1 -1
View File
@@ -118,7 +118,7 @@ export const formalSettlementOption = (settlementType = '') => ({
emptyBtnText: '重置', emptyBtnText: '重置',
searchShow: true, searchShow: true,
searchIcon: true, searchIcon: true,
searchLabelWidth: 88, searchLabelWidth: 100,
// 查询/重置紧跟首行 4 个条件(4×5 + 菜单 4 = 24),不再独占下一整行 // 查询/重置紧跟首行 4 个条件(4×5 + 菜单 4 = 24),不再独占下一整行
searchMenuSpan: 4, searchMenuSpan: 4,
searchIndex: 4, searchIndex: 4,
+31 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<basic-container class="pre-settlement-page"> <basic-container class="pre-settlement-page">
<section v-show="searchVisible" class="pre-settlement-page__search"> <section v-show="searchVisible" class="pre-settlement-page__search">
<el-form :model="query" label-position="right" label-width="88px" @submit.prevent> <el-form :model="query" label-position="right" label-width="100px" @submit.prevent>
<div class="pre-settlement-page__search-grid"> <div class="pre-settlement-page__search-grid">
<template v-for="field in visibleSearchFields" :key="field.prop"> <template v-for="field in visibleSearchFields" :key="field.prop">
<el-form-item :label="field.label"> <el-form-item :label="field.label">
@@ -108,6 +108,7 @@
:data="rows" :data="rows"
:size="tableSize" :size="tableSize"
border border
height="100%"
class="pre-settlement-page__table" class="pre-settlement-page__table"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
@@ -768,8 +769,27 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 页面固定在视口内:搜索区/工具栏/分页固定,仅表格内部滚动(与付款结算单 avue 高度自适应对齐)
// 100vh - 50(top) - 40(tags) - 24(avue-view padding)
$pre_page_height: calc(100vh - 114px);
.pre-settlement-page { .pre-settlement-page {
height: $pre_page_height;
:deep(.basic-container__card) {
height: 100%;
overflow: hidden;
}
:deep(.el-card__body) {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
&__search { &__search {
flex-shrink: 0;
padding: 12px 12px 4px; padding: 12px 12px 4px;
background: #fff; background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
@@ -801,6 +821,10 @@ export default {
} }
&__table-panel { &__table-panel {
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
margin-top: 8px; margin-top: 8px;
} }
@@ -823,8 +847,14 @@ export default {
justify-content: center; justify-content: center;
} }
&__table {
flex: 1;
min-height: 0;
}
&__pagination { &__pagination {
display: flex; display: flex;
flex-shrink: 0;
justify-content: flex-end; justify-content: flex-end;
padding: 12px; padding: 12px;
} }
@@ -69,6 +69,8 @@
:data="rows" :data="rows"
:size="tableSize" :size="tableSize"
border border
height="100%"
class="settlement-adjustment-page__table"
@selection-change="selection = $event" @selection-change="selection = $event"
> >
<el-table-column type="selection" width="52" fixed="left" align="center" /><el-table-column <el-table-column type="selection" width="52" fixed="left" align="center" /><el-table-column
@@ -389,8 +391,27 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 页面固定在视口内:搜索区/工具栏/分页固定,仅表格内部滚动(与付款结算单对齐)
// 100vh - 50(top) - 40(tags) - 24(avue-view padding)
$adjustment_page_height: calc(100vh - 114px);
.settlement-adjustment-page { .settlement-adjustment-page {
height: $adjustment_page_height;
:deep(.basic-container__card) {
height: 100%;
overflow: hidden;
}
:deep(.el-card__body) {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
&__search { &__search {
flex-shrink: 0;
padding: 12px 12px 4px; padding: 12px 12px 4px;
background: #fff; background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
@@ -417,6 +438,10 @@ export default {
margin-bottom: 8px; margin-bottom: 8px;
} }
&__table-panel { &__table-panel {
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
margin-top: 8px; margin-top: 8px;
} }
&__toolbar { &__toolbar {
@@ -431,8 +456,13 @@ export default {
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
} }
&__table {
flex: 1;
min-height: 0;
}
&__pagination { &__pagination {
display: flex; display: flex;
flex-shrink: 0;
justify-content: flex-end; justify-content: flex-end;
padding: 12px; padding: 12px;
} }