fix: refs #7404 sticky footer and transparent header for vnTable
This commit is contained in:
parent
a2b7e81982
commit
cb0d3c5bca
|
|
@ -44,7 +44,6 @@ const itemComputed = computed(() => {
|
|||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.q-item {
|
||||
min-height: 5vh;
|
||||
|
|
|
|||
|
|
@ -73,7 +73,6 @@ const $props = defineProps({
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
hasSubToolbar: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
|
|
@ -685,17 +684,15 @@ function handleOnDataSaved(_) {
|
|||
</QCard>
|
||||
</component>
|
||||
</template>
|
||||
<template #bottom-row="{ cols }" v-if="footer">
|
||||
<QTr v-if="rows.length" class="bg-header" style="height: 30px">
|
||||
<template #bottom-row="{ cols }" v-if="$props.footer">
|
||||
<QTr v-if="rows.length" style="height: 30px">
|
||||
<QTh
|
||||
v-for="col of cols.filter((cols) => cols.visible ?? true)"
|
||||
:key="col?.id"
|
||||
class="text-center"
|
||||
>
|
||||
<slot
|
||||
:name="`column-footer-${col.name}`"
|
||||
:class="getColAlign(col)"
|
||||
/>
|
||||
>
|
||||
<slot :name="`column-footer-${col.name}`" />
|
||||
</QTh>
|
||||
</QTr>
|
||||
</template>
|
||||
|
|
@ -774,16 +771,6 @@ es:
|
|||
color: var(--vn-text-color);
|
||||
}
|
||||
|
||||
.q-table--dark .q-table__bottom,
|
||||
.q-table--dark thead,
|
||||
.q-table--dark tr {
|
||||
border-color: var(--vn-section-color);
|
||||
}
|
||||
|
||||
.q-table__container > div:first-child {
|
||||
background-color: var(--vn-page-color);
|
||||
}
|
||||
|
||||
.grid-three {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
|
||||
|
|
@ -857,6 +844,15 @@ es:
|
|||
background-color: var(--vn-section-color);
|
||||
z-index: 1;
|
||||
}
|
||||
table tbody th {
|
||||
position: relative;
|
||||
}
|
||||
tbody:nth-last-child(1) {
|
||||
@extend .bg-header;
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vn-label-value {
|
||||
|
|
@ -903,12 +899,12 @@ es:
|
|||
user-select: all;
|
||||
}
|
||||
|
||||
.full-width-slot {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
color: var(--vn-text-color);
|
||||
margin-bottom: -1%;
|
||||
background-color: var(--vn-header-color);
|
||||
.q-table__container.q-table--horizontal-separator.column.no-wrap.q-table__card.q-table__card--dark.q-dark.q-table--flat.q-table--dark.q-table--no-wrap.vnTable,
|
||||
.q-table__container.q-table--horizontal-separator.column.no-wrap.q-table__card.q-table--flat.q-table--no-wrap.vnTable {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.q-table__middle.q-virtual-scroll.q-virtual-scroll--vertical.scroll {
|
||||
background-color: var(--vn-section-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const columns = [
|
|||
},
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
align: 'center',
|
||||
label: t('Reserve'),
|
||||
name: 'reserve',
|
||||
columnFilter: false,
|
||||
|
|
@ -141,6 +141,10 @@ function setFooter(data) {
|
|||
});
|
||||
tableRef.value.footer = footer;
|
||||
}
|
||||
|
||||
function round(value) {
|
||||
return Math.round(value * 100) / 100;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<VnSubToolbar>
|
||||
|
|
@ -152,7 +156,9 @@ function setFooter(data) {
|
|||
:filter="filter"
|
||||
@on-fetch="
|
||||
(data) => {
|
||||
travel = data.find((data) => data.warehouseIn.code === 'VNH');
|
||||
travel = data.find(
|
||||
(data) => data.warehouseIn.code.toLowerCase() === 'vnh'
|
||||
);
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
|
@ -205,8 +211,9 @@ function setFooter(data) {
|
|||
/>
|
||||
</template>
|
||||
</RightMenu>
|
||||
|
||||
<div class="table-container">
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<div class="column items-center">
|
||||
<VnTable
|
||||
ref="tableRef"
|
||||
data-key="StockBoughts"
|
||||
|
|
@ -228,6 +235,7 @@ function setFooter(data) {
|
|||
:columns="columns"
|
||||
:user-params="userParams"
|
||||
:footer="true"
|
||||
table-height="80vh"
|
||||
auto-load
|
||||
>
|
||||
<template #column-workerFk="{ row }">
|
||||
|
|
@ -243,7 +251,7 @@ function setFooter(data) {
|
|||
</template>
|
||||
<template #column-footer-reserve>
|
||||
<span>
|
||||
{{ tableRef.footer.reserve }}
|
||||
{{ round(tableRef.footer.reserve) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #column-footer-bought>
|
||||
|
|
@ -253,11 +261,11 @@ function setFooter(data) {
|
|||
tableRef.footer.reserve < tableRef.footer.bought,
|
||||
}"
|
||||
>
|
||||
{{ tableRef.footer.bought }}
|
||||
{{ round(tableRef.footer.bought) }}
|
||||
</span>
|
||||
</template>
|
||||
</VnTable>
|
||||
</QPage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -272,7 +280,7 @@ function setFooter(data) {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 40%;
|
||||
width: 45%;
|
||||
}
|
||||
.text-negative {
|
||||
color: $negative !important;
|
||||
|
|
|
|||
|
|
@ -77,18 +77,10 @@ const columns = [
|
|||
:columns="columns"
|
||||
:right-search="false"
|
||||
:disable-infinite-scroll="true"
|
||||
:disable-option="{ card: true }"
|
||||
:limit="0"
|
||||
auto-load
|
||||
>
|
||||
<template #top-left>
|
||||
<QBtn
|
||||
flat
|
||||
icon="Close"
|
||||
color="primary"
|
||||
class="bg-vn-section-color q-pa-xs"
|
||||
v-close-popup
|
||||
/>
|
||||
</template>
|
||||
<template #column-entryFk="{ row }">
|
||||
<span class="link">
|
||||
{{ row?.entryFk }}
|
||||
|
|
@ -112,6 +104,11 @@ const columns = [
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
background-color: var(--vn-section-color);
|
||||
padding: 4px;
|
||||
}
|
||||
.container > div > div > .q-table__top.relative-position.row.items-center {
|
||||
background-color: red !important;
|
||||
}
|
||||
</style>
|
||||
<i18n>
|
||||
|
|
|
|||
Loading…
Reference in New Issue