fix: 预付结算单与结算调整单分页固定底部,搜索label不再换行
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user