style: refs #7347 updates
gitea/salix-front/pipeline/pr-dev There was a failure building this commit
Details
gitea/salix-front/pipeline/pr-dev There was a failure building this commit
Details
This commit is contained in:
parent
4a2074dc9d
commit
91f317dfe6
|
|
@ -320,8 +320,12 @@ input::-webkit-inner-spin-button {
|
|||
.q-item > .q-item__section:has(.q-checkbox) {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
.row > .column:has(.q-checkbox) {
|
||||
.vn-row > * .q-checkbox r {
|
||||
min-width: 80%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.vn-row > .q-checkbox.row.items-center {
|
||||
max-width: fit-content;
|
||||
}
|
||||
.q-field__inner {
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@ import SendEmailDialog from 'components/common/SendEmailDialog.vue';
|
|||
import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
|
||||
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
||||
|
||||
import { dateRange, toDate } from 'src/filters';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
import { dateRange, toCurrency, toDate } from 'src/filters';
|
||||
|
||||
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
|
||||
import { usePrintService } from 'composables/usePrintService';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
import axios from 'axios';
|
||||
|
|
@ -31,7 +32,81 @@ const arrayData = useArrayData('SupplierConsumption', {
|
|||
order: ['itemTypeFk', 'itemName', 'itemSize'],
|
||||
userFilter: { where: { supplierFk: route.params.id } },
|
||||
});
|
||||
const headerColumns = computed(() => [
|
||||
{
|
||||
name: 'id',
|
||||
label: t('globals.entry'),
|
||||
align: 'left',
|
||||
field: 'id',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'invoiceNumber',
|
||||
label: t('globals.subItem'),
|
||||
align: 'left',
|
||||
field: 'invoiceNumber',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
label: t('globals.quantity'),
|
||||
align: 'left',
|
||||
field: 'quantity',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
label: t('globals.quantity'),
|
||||
align: 'left',
|
||||
field: 'total',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'shipped',
|
||||
label: t('globals.quantity'),
|
||||
align: 'left',
|
||||
field: 'shipped',
|
||||
sortable: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'itemName',
|
||||
label: t('globals.item'),
|
||||
align: 'left',
|
||||
field: 'itemName',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'subName',
|
||||
label: t('globals.subItem'),
|
||||
align: 'left',
|
||||
field: 'subName',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
label: t('globals.quantity'),
|
||||
align: 'left',
|
||||
field: 'quantity',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'price',
|
||||
label: t('globals.price'),
|
||||
align: 'left',
|
||||
field: 'price',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
label: t('globals.total'),
|
||||
align: 'left',
|
||||
field: 'total',
|
||||
sortable: true,
|
||||
},
|
||||
]);
|
||||
const store = arrayData.store;
|
||||
|
||||
onUnmounted(() => state.unset('SupplierConsumption'));
|
||||
|
|
@ -122,13 +197,17 @@ const totalEntryPrice = (rows) => {
|
|||
totalQuantity = totalQuantity + quantity;
|
||||
}
|
||||
totalRows.value = { totalPrice, totalQuantity };
|
||||
// expanded.value = rows.map((r) => r.id);
|
||||
return rows;
|
||||
};
|
||||
|
||||
const tableRef = ref(null);
|
||||
onMounted(async () => {
|
||||
stateStore.rightDrawer = true;
|
||||
await getSupplierConsumptionData();
|
||||
});
|
||||
|
||||
const expanded = ref([]);
|
||||
// const initialExpanded = rows.filter((r, i) => i % 3 === 0).map((r) => r.index);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -179,7 +258,103 @@ onMounted(async () => {
|
|||
<SupplierConsumptionFilter data-key="SupplierConsumption" />
|
||||
</template>
|
||||
</RightMenu>
|
||||
<QCard class="full-width q-pa-md">
|
||||
<QTable
|
||||
flat
|
||||
bordered
|
||||
ref="tableRef"
|
||||
:rows="rows"
|
||||
:columns="headerColumns"
|
||||
:table-colspan="9"
|
||||
row-key="id"
|
||||
virtual-scroll
|
||||
:virtual-scroll-item-size="48"
|
||||
:pagination="{
|
||||
rowsPerPage: 0,
|
||||
}"
|
||||
:rows-per-page-options="[0]"
|
||||
v-model:expanded="expanded"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<QTr :props="props">
|
||||
<QTh auto-width />
|
||||
|
||||
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
||||
{{ col.label }}
|
||||
</QTh>
|
||||
</QTr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props">
|
||||
<QTr :props="props" :key="`m_${props.row.id}`" class="bg-travel">
|
||||
<QTd auto-width>
|
||||
<QToggle
|
||||
v-model="props.expand"
|
||||
checked-icon="vn:eye"
|
||||
unchecked-icon="remove"
|
||||
/>
|
||||
</QTd>
|
||||
|
||||
<QTd v-for="col in props.cols" :key="col.name" :props="props">
|
||||
{{ col.value }}
|
||||
</QTd>
|
||||
</QTr>
|
||||
<QTr
|
||||
v-show="props.expand"
|
||||
:props="props"
|
||||
:key="`e_${props.row.id}`"
|
||||
class="q-virtual-scroll--with-prev"
|
||||
>
|
||||
<QTd colspan="100%">
|
||||
<QTable
|
||||
flat
|
||||
bordered
|
||||
color="secondary"
|
||||
card-class="bg-travel text-white"
|
||||
table-header-class=" text-white"
|
||||
ref="tableRef"
|
||||
:rows="props.row.buys"
|
||||
:columns="columns"
|
||||
hide-header
|
||||
:table-colspan="9"
|
||||
row-key="id"
|
||||
virtual-scroll
|
||||
:virtual-scroll-item-size="48"
|
||||
:pagination="{
|
||||
rowsPerPage: 0,
|
||||
}"
|
||||
:rows-per-page-options="[0]"
|
||||
v-model:expanded="expanded"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<QTr :props="props">
|
||||
<QTh
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
{{ col.label }}
|
||||
</QTh>
|
||||
</QTr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<QTr :props="props" :key="`m_${props.row.id}`">
|
||||
<QTd
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
{{ col.value }}
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
</QTable>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
</QTable>
|
||||
</QCard>
|
||||
<!-- <QTable
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
hide-header
|
||||
|
|
@ -189,18 +364,26 @@ onMounted(async () => {
|
|||
<template #body="{ row }">
|
||||
<QTr>
|
||||
<QTd no-hover>
|
||||
<span class="label">{{ t('supplier.consumption.entry') }}: </span>
|
||||
<span>{{ row.id }}</span>
|
||||
|
||||
</QTd>
|
||||
<QTd no-hover>
|
||||
<span class="label">{{ t('globals.date') }}: </span>
|
||||
<span>{{ toDate(row.shipped) }}</span></QTd
|
||||
</QTd
|
||||
>
|
||||
<QTd colspan="6" no-hover>
|
||||
<span class="label">{{ t('globals.reference') }}: </span>
|
||||
<span>{{ row.invoiceNumber }}</span>
|
||||
|
||||
</QTd>
|
||||
</QTr>
|
||||
<QTh>
|
||||
<QTd no-hover>
|
||||
<span class="label">ItemFk </span>
|
||||
</QTd>
|
||||
<QTd no-hover>
|
||||
<span class="header">subName </span>
|
||||
</QTd>
|
||||
<QTd no-hover>
|
||||
<span class="label"> Quanitity : </span>
|
||||
</QTd>
|
||||
</QTh>
|
||||
<QTr v-for="(buy, index) in row.buys" :key="index">
|
||||
<QTd no-hover>
|
||||
<QBtn flat color="blue" dense no-caps>{{ buy.itemName }}</QBtn>
|
||||
|
|
@ -226,13 +409,64 @@ onMounted(async () => {
|
|||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
</QTable>
|
||||
</QTable> -->
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.QTable__top {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.QTable__bottom.row.items-center {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.label {
|
||||
padding-right: 5px;
|
||||
color: var(--vn-label-color);
|
||||
}
|
||||
.header {
|
||||
flex: 1 0 33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
height: 35px;
|
||||
border-bottom: 1px solid $primary;
|
||||
background-color: var(--vn-page-color);
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.footer {
|
||||
flex: 1 0 33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
height: 35px;
|
||||
border-bottom: 1px solid $primary;
|
||||
background-color: var(--vn-page-color);
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.bg-travel {
|
||||
background-color: var(--vn-page-color);
|
||||
border-bottom: 2px solid $primary;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: 1 0 33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
height: 35px;
|
||||
border-bottom: 1px solid $primary;
|
||||
background-color: var(--vn-page-color);
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
|
|
@ -61,11 +61,27 @@ onMounted(() => weekdayStore.initStore());
|
|||
v-for="(detail, index) in details"
|
||||
:key="index"
|
||||
class="full-width flex q-mb-lg"
|
||||
style="flex-direction: column"
|
||||
>
|
||||
<div class="column full-width">
|
||||
<div class="flex">
|
||||
<span class="header">
|
||||
{{ getHeaderTitle(detail.shipped) }}
|
||||
</span>
|
||||
<QTable flat :columns="columns" :rows="detail.lines" class="full-width" />
|
||||
<span class="header">
|
||||
{{ getHeaderTitle(detail.shipped) }}
|
||||
</span>
|
||||
<span class="header">
|
||||
{{ getHeaderTitle(detail.shipped) }}
|
||||
</span>
|
||||
</div>
|
||||
<QTable
|
||||
flat
|
||||
:columns="columns"
|
||||
:rows="detail.lines"
|
||||
class="full-width"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</QCard>
|
||||
</QPage>
|
||||
|
|
@ -73,7 +89,7 @@ onMounted(() => weekdayStore.initStore());
|
|||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
min-width: 100% !important;
|
||||
flex: 1 0 33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 8px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue