412 lines
13 KiB
Vue
412 lines
13 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { QBtn, QCheckbox, useQuasar } from 'quasar';
|
|
import { toCurrency, toDate, dateRange } from 'filters/index';
|
|
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
|
import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
|
|
import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
|
|
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
|
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
|
|
import axios from 'axios';
|
|
import RightMenu from 'src/components/common/RightMenu.vue';
|
|
|
|
const { t } = useI18n();
|
|
const quasar = useQuasar();
|
|
const dataRef = ref(null);
|
|
|
|
const balanceDueTotal = ref(0);
|
|
const selected = ref([]);
|
|
|
|
const tableColumnComponents = {
|
|
client: {
|
|
component: QBtn,
|
|
props: () => ({ flat: true, class: 'link', noCaps: true }),
|
|
event: () => {},
|
|
},
|
|
isWorker: {
|
|
component: QCheckbox,
|
|
props: (prop) => ({
|
|
disable: true,
|
|
'model-value': Boolean(prop.value),
|
|
}),
|
|
event: () => {},
|
|
},
|
|
salesPerson: {
|
|
component: QBtn,
|
|
props: () => ({ flat: true, class: 'link', noCaps: true }),
|
|
event: () => {},
|
|
},
|
|
department: {
|
|
component: 'span',
|
|
props: () => {},
|
|
event: () => {},
|
|
},
|
|
country: {
|
|
component: 'span',
|
|
props: () => {},
|
|
event: () => {},
|
|
},
|
|
payMethod: {
|
|
component: 'span',
|
|
props: () => {},
|
|
event: () => {},
|
|
},
|
|
balance: {
|
|
component: 'span',
|
|
props: () => {},
|
|
event: () => {},
|
|
},
|
|
author: {
|
|
component: QBtn,
|
|
props: () => ({ flat: true, class: 'link', noCaps: true }),
|
|
event: () => {},
|
|
},
|
|
lastObservation: {
|
|
component: 'span',
|
|
props: () => {},
|
|
event: () => {},
|
|
},
|
|
date: {
|
|
component: 'span',
|
|
props: () => {},
|
|
event: () => {},
|
|
},
|
|
credit: {
|
|
component: 'span',
|
|
props: () => {},
|
|
event: () => {},
|
|
},
|
|
from: {
|
|
component: 'span',
|
|
props: () => {},
|
|
event: () => {},
|
|
},
|
|
finished: {
|
|
component: QCheckbox,
|
|
|
|
props: (prop) => ({
|
|
disable: true,
|
|
'model-value': prop.value,
|
|
class: 'disabled-checkbox',
|
|
}),
|
|
event: () => {},
|
|
},
|
|
};
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
align: 'left',
|
|
field: 'clientName',
|
|
label: t('Client'),
|
|
name: 'client',
|
|
sortable: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'isWorker',
|
|
label: t('Is worker'),
|
|
name: 'isWorker',
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'salesPersonName',
|
|
label: t('Salesperson'),
|
|
name: 'salesPerson',
|
|
sortable: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'departmentName',
|
|
label: t('Department'),
|
|
name: 'department',
|
|
sortable: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'country',
|
|
label: t('Country'),
|
|
name: 'country',
|
|
sortable: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'payMethod',
|
|
label: t('P. Method'),
|
|
name: 'payMethod',
|
|
sortable: true,
|
|
tooltip: t('Pay method'),
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: ({ amount }) => toCurrency(amount),
|
|
label: t('Balance D.'),
|
|
name: 'balance',
|
|
sortable: true,
|
|
tooltip: t('Balance due'),
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'workerName',
|
|
label: t('Author'),
|
|
name: 'author',
|
|
sortable: true,
|
|
tooltip: t('Worker who made the last observation'),
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'observation',
|
|
label: t('Last observation'),
|
|
name: 'lastObservation',
|
|
sortable: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: ({ created }) => toDate(created),
|
|
label: t('L. O. Date'),
|
|
name: 'date',
|
|
sortable: true,
|
|
tooltip: t('Last observation date'),
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: ({ creditInsurance }) => toCurrency(creditInsurance),
|
|
label: t('Credit I.'),
|
|
name: 'credit',
|
|
sortable: true,
|
|
tooltip: t('Credit insurance'),
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: ({ defaulterSinced }) => toDate(defaulterSinced),
|
|
label: t('From'),
|
|
name: 'from',
|
|
sortable: true,
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'finished',
|
|
label: t('Has recover'),
|
|
name: 'finished',
|
|
},
|
|
]);
|
|
|
|
const viewAddObservation = (rowsSelected) => {
|
|
quasar.dialog({
|
|
component: CustomerDefaulterAddObservation,
|
|
componentProps: {
|
|
clients: rowsSelected,
|
|
promise: async () => await dataRef.value.fetch(),
|
|
},
|
|
});
|
|
};
|
|
|
|
const departments = ref(new Map());
|
|
|
|
const onFetch = async (data) => {
|
|
const salesPersonFks = data.map((item) => item.salesPersonFk);
|
|
const departmentNames = salesPersonFks.map(async (salesPersonFk) => {
|
|
try {
|
|
const { data: workerDepartment } = await axios.get(
|
|
`WorkerDepartments/${salesPersonFk}`
|
|
);
|
|
const { data: department } = await axios.get(
|
|
`Departments/${workerDepartment.departmentFk}`
|
|
);
|
|
departments.value.set(salesPersonFk, department.name);
|
|
} catch (error) {
|
|
console.error('Err: ', error);
|
|
}
|
|
});
|
|
const recoveryData = await axios.get('Recoveries');
|
|
|
|
const recoveries = recoveryData.data.map(({ clientFk, finished }) => ({
|
|
clientFk,
|
|
finished,
|
|
}));
|
|
|
|
await Promise.all(departmentNames);
|
|
|
|
data.forEach((item) => {
|
|
item.departmentName = departments.value.get(item.salesPersonFk);
|
|
item.isWorker = item.businessTypeFk === 'worker';
|
|
const recovery = recoveries.find(({ clientFk }) => clientFk === item.clientFk);
|
|
item.finished = recovery?.finished === null;
|
|
});
|
|
|
|
for (const element of data) element.isWorker = element.businessTypeFk === 'worker';
|
|
|
|
balanceDueTotal.value = data.reduce((acc, { amount = 0 }) => acc + amount, 0);
|
|
};
|
|
|
|
function exprBuilder(param, value) {
|
|
switch (param) {
|
|
case 'clientFk':
|
|
return { [`d.${param}`]: value?.id };
|
|
case 'creditInsurance':
|
|
case 'amount':
|
|
case 'workerFk':
|
|
case 'departmentFk':
|
|
case 'countryFk':
|
|
case 'payMethod':
|
|
case 'salesPersonFk':
|
|
return { [`d.${param}`]: value };
|
|
case 'date':
|
|
return { 'd.created': { between: dateRange(value) } };
|
|
case 'defaulterSinced':
|
|
return { 'd.defaulterSinced': { between: dateRange(value) } };
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<RightMenu>
|
|
<template #right-panel>
|
|
<CustomerNotificationsFilter data-key="CustomerDefaulter" />
|
|
</template>
|
|
</RightMenu>
|
|
<VnSubToolbar>
|
|
<template #st-data>
|
|
<CustomerBalanceDueTotal :amount="balanceDueTotal" />
|
|
<div class="flex items-center q-ml-lg">
|
|
<QBtn
|
|
color="primary"
|
|
icon="vn:notes"
|
|
:disabled="!selected.length"
|
|
@click.stop="viewAddObservation(selected)"
|
|
>
|
|
<QTooltip>{{ t('Add observation') }}</QTooltip>
|
|
</QBtn>
|
|
</div>
|
|
</template>
|
|
</VnSubToolbar>
|
|
<QPage class="column items-center q-pa-md">
|
|
<VnPaginate
|
|
ref="dataRef"
|
|
@on-fetch="onFetch"
|
|
data-key="CustomerDefaulter"
|
|
:filter="filter"
|
|
:expr-builder="exprBuilder"
|
|
auto-load
|
|
url="Defaulters/filter"
|
|
>
|
|
<template #body="{ rows }">
|
|
<div class="q-pa-md">
|
|
<QTable
|
|
:columns="columns"
|
|
:rows="rows"
|
|
class="full-width"
|
|
row-key="clientFk"
|
|
selection="multiple"
|
|
v-model:selected="selected"
|
|
>
|
|
<template #header="props">
|
|
<QTr :props="props" class="bg" style="min-height: 200px">
|
|
<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">
|
|
<QTd :props="props">
|
|
<QTr :props="props" class="cursor-pointer">
|
|
<component
|
|
:is="
|
|
tableColumnComponents[props.col.name]
|
|
.component
|
|
"
|
|
class="col-content"
|
|
v-bind="
|
|
tableColumnComponents[props.col.name].props(
|
|
props
|
|
)
|
|
"
|
|
@click="
|
|
tableColumnComponents[props.col.name].event(
|
|
props
|
|
)
|
|
"
|
|
>
|
|
<template v-if="typeof props.value !== 'boolean'">
|
|
<div
|
|
v-if="
|
|
props.col.name === 'lastObservation'
|
|
"
|
|
>
|
|
<VnInput
|
|
type="textarea"
|
|
v-model="props.value"
|
|
readonly
|
|
dense
|
|
rows="2"
|
|
/>
|
|
</div>
|
|
<div v-else>{{ props.value }}</div>
|
|
</template>
|
|
|
|
<WorkerDescriptorProxy
|
|
:id="props.row.salesPersonFk"
|
|
v-if="props.col.name === 'salesPerson'"
|
|
/>
|
|
<WorkerDescriptorProxy
|
|
:id="props.row.workerFk"
|
|
v-if="props.col.name === 'author'"
|
|
/>
|
|
<CustomerDescriptorProxy
|
|
:id="props.row.clientFk"
|
|
v-if="props.col.name === 'client'"
|
|
/>
|
|
</component>
|
|
</QTr>
|
|
</QTd>
|
|
</template>
|
|
</QTable>
|
|
</div>
|
|
</template>
|
|
</VnPaginate>
|
|
</QPage>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.col-content {
|
|
border-radius: 4px;
|
|
padding: 6px;
|
|
}
|
|
</style>
|
|
|
|
<i18n>
|
|
es:
|
|
Add observation: Añadir observación
|
|
Client: Cliente
|
|
Is worker: Es trabajador
|
|
Salesperson: Comercial
|
|
Department: Departamento
|
|
Country: País
|
|
P. Method: F. Pago
|
|
Pay method: Forma de pago
|
|
Balance D.: Saldo V.
|
|
Balance due: Saldo vencido
|
|
Author: Autor
|
|
Worker who made the last observation: Trabajador que ha realizado la última observación
|
|
Last observation: Última observación
|
|
L. O. Date: Fecha Ú. O.
|
|
Last observation date: Fecha última observación
|
|
Credit I.: Crédito A.
|
|
Credit insurance: Crédito asegurado
|
|
From: Desde
|
|
</i18n>
|