forked from verdnatura/salix-front
fix: CustomerDefaulter paginate
This commit is contained in:
parent
b5951a5cef
commit
dac00236bc
|
@ -6,8 +6,7 @@ import { QBtn, QCheckbox, useQuasar } from 'quasar';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
|
||||||
import { toCurrency, toDate } from 'filters/index';
|
import { toCurrency, toDate } from 'filters/index';
|
||||||
|
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||||
import FetchData from 'components/FetchData.vue';
|
|
||||||
import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
|
import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
|
||||||
import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
|
import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
|
||||||
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||||
|
@ -16,6 +15,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||||
import VnInput from 'src/components/common/VnInput.vue';
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
|
import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
|
||||||
const stateStore = useStateStore();
|
const stateStore = useStateStore();
|
||||||
|
const refreshKey = ref(0);
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const quasar = useQuasar();
|
const quasar = useQuasar();
|
||||||
|
@ -23,7 +23,6 @@ const dataRef = ref(null);
|
||||||
|
|
||||||
const balanceDueTotal = ref(0);
|
const balanceDueTotal = ref(0);
|
||||||
const selected = ref([]);
|
const selected = ref([]);
|
||||||
const rows = ref([]);
|
|
||||||
|
|
||||||
const tableColumnComponents = {
|
const tableColumnComponents = {
|
||||||
client: {
|
client: {
|
||||||
|
@ -171,7 +170,6 @@ const columns = computed(() => [
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const setRows = (data) => {
|
const setRows = (data) => {
|
||||||
rows.value = data;
|
|
||||||
balanceDueTotal.value = data.reduce((accumulator, currentValue) => {
|
balanceDueTotal.value = data.reduce((accumulator, currentValue) => {
|
||||||
return accumulator + (currentValue['amount'] || 0);
|
return accumulator + (currentValue['amount'] || 0);
|
||||||
}, 0);
|
}, 0);
|
||||||
|
@ -217,13 +215,6 @@ const onFetch = (data) => {
|
||||||
</div>
|
</div>
|
||||||
</Teleport></template
|
</Teleport></template
|
||||||
>
|
>
|
||||||
<FetchData
|
|
||||||
ref="dataRef"
|
|
||||||
:filter="filter"
|
|
||||||
@on-fetch="onFetch"
|
|
||||||
auto-load
|
|
||||||
url="Defaulters/filter"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||||
<QScrollArea class="fit text-grey-8">
|
<QScrollArea class="fit text-grey-8">
|
||||||
|
@ -248,63 +239,95 @@ const onFetch = (data) => {
|
||||||
</VnSubToolbar>
|
</VnSubToolbar>
|
||||||
|
|
||||||
<QPage class="column items-center q-pa-md">
|
<QPage class="column items-center q-pa-md">
|
||||||
<QTable
|
<VnPaginate
|
||||||
:columns="columns"
|
@on-fetch="onFetch"
|
||||||
:rows="rows"
|
data-key="CustomerDefaulter"
|
||||||
class="full-width q-mt-md"
|
:key="refreshKey"
|
||||||
row-key="clientFk"
|
:filter="filter"
|
||||||
selection="multiple"
|
auto-load
|
||||||
v-model:selected="selected"
|
url="Defaulters/filter"
|
||||||
>
|
>
|
||||||
<template #header="props">
|
<template #body="{ rows }">
|
||||||
<QTr :props="props" class="bg">
|
<div class="q-pa-md">
|
||||||
<QTh>
|
<QTable
|
||||||
<QCheckbox v-model="props.selected" />
|
:columns="columns"
|
||||||
</QTh>
|
:rows="rows"
|
||||||
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
class="full-width q-mt-md"
|
||||||
{{ t(col.label) }}
|
row-key="clientFk"
|
||||||
<QTooltip v-if="col.tooltip">{{ col.tooltip }}</QTooltip>
|
selection="multiple"
|
||||||
</QTh>
|
v-model:selected="selected"
|
||||||
</QTr>
|
>
|
||||||
</template>
|
<template #header="props">
|
||||||
|
<QTr :props="props" class="bg">
|
||||||
|
<QTh>
|
||||||
|
<QCheckbox v-model="props.selected" />
|
||||||
|
</QTh>
|
||||||
|
<QTh
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
{{ t(col.label) }}
|
||||||
|
<QTooltip v-if="col.tooltip">{{
|
||||||
|
col.tooltip
|
||||||
|
}}</QTooltip>
|
||||||
|
</QTh>
|
||||||
|
</QTr>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template #body-cell="props">
|
<template #body-cell="props">
|
||||||
<QTd :props="props">
|
<QTd :props="props">
|
||||||
<QTr :props="props" class="cursor-pointer">
|
<QTr :props="props" class="cursor-pointer">
|
||||||
<component
|
<component
|
||||||
:is="tableColumnComponents[props.col.name].component"
|
:is="
|
||||||
class="col-content"
|
tableColumnComponents[props.col.name]
|
||||||
v-bind="tableColumnComponents[props.col.name].props(props)"
|
.component
|
||||||
@click="tableColumnComponents[props.col.name].event(props)"
|
"
|
||||||
>
|
class="col-content"
|
||||||
<template v-if="props.col.name !== 'isWorker'">
|
v-bind="
|
||||||
<div v-if="props.col.name === 'lastObservation'">
|
tableColumnComponents[props.col.name].props(
|
||||||
<VnInput
|
props
|
||||||
type="textarea"
|
)
|
||||||
v-model="props.value"
|
"
|
||||||
autogrow
|
@click="
|
||||||
/>
|
tableColumnComponents[props.col.name].event(
|
||||||
</div>
|
props
|
||||||
<div v-else>{{ props.value }}</div>
|
)
|
||||||
</template>
|
"
|
||||||
|
>
|
||||||
|
<template v-if="props.col.name !== 'isWorker'">
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
props.col.name === 'lastObservation'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<VnInput
|
||||||
|
type="textarea"
|
||||||
|
v-model="props.value"
|
||||||
|
autogrow
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-else>{{ props.value }}</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<WorkerDescriptorProxy
|
<WorkerDescriptorProxy
|
||||||
:id="props.row.salesPersonFk"
|
:id="props.row.salesPersonFk"
|
||||||
v-if="props.col.name === 'salesPerson'"
|
v-if="props.col.name === 'salesPerson'"
|
||||||
/>
|
/>
|
||||||
<WorkerDescriptorProxy
|
<WorkerDescriptorProxy
|
||||||
:id="props.row.workerFk"
|
:id="props.row.workerFk"
|
||||||
v-if="props.col.name === 'author'"
|
v-if="props.col.name === 'author'"
|
||||||
/>
|
/>
|
||||||
<CustomerDescriptorProxy
|
<CustomerDescriptorProxy
|
||||||
:id="props.row.clientFk"
|
:id="props.row.clientFk"
|
||||||
v-if="props.col.name === 'client'"
|
v-if="props.col.name === 'client'"
|
||||||
/>
|
/>
|
||||||
</component>
|
</component>
|
||||||
</QTr>
|
</QTr>
|
||||||
</QTd>
|
</QTd>
|
||||||
</template>
|
</template>
|
||||||
</QTable>
|
</QTable></div></template
|
||||||
|
></VnPaginate>
|
||||||
</QPage>
|
</QPage>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue