396 lines
12 KiB
Vue
396 lines
12 KiB
Vue
<script setup>
|
|
import { computed, onBeforeMount, ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import axios from 'axios';
|
|
import { QCheckbox, QBtn, useQuasar } from 'quasar';
|
|
|
|
import { toCurrency, toDate, toDateHourMin } from 'src/filters';
|
|
import { useState } from 'src/composables/useState';
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import { useValidator } from 'src/composables/useValidator';
|
|
import { usePrintService } from 'src/composables/usePrintService';
|
|
import { useSession } from 'src/composables/useSession';
|
|
|
|
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
|
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
|
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
|
|
const session = useSession();
|
|
|
|
const tokenMultimedia = session.getTokenMultimedia();
|
|
|
|
const { sendEmail } = usePrintService();
|
|
const { t } = useI18n();
|
|
const { validate } = useValidator();
|
|
const quasar = useQuasar();
|
|
const route = useRoute();
|
|
const state = useState();
|
|
const stateStore = useStateStore();
|
|
const user = state.getUser();
|
|
|
|
const clientRisks = ref(null);
|
|
const clientRisksRef = ref(null);
|
|
const companiesOptions = ref([]);
|
|
const companyId = ref(null);
|
|
const receiptsRef = ref(null);
|
|
const receiptsData = ref([]);
|
|
|
|
const filterCompanies = { order: ['code'] };
|
|
const userParams = {
|
|
clientId: route.params.id,
|
|
companyId: user.value.companyFk,
|
|
};
|
|
const filter = {
|
|
include: { relation: 'company', scope: { fields: ['code'] } },
|
|
where: { clientFk: route.params.id, companyFk: user.value.companyFk },
|
|
};
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
align: 'left',
|
|
field: 'payed',
|
|
format: (value) => toDate(value),
|
|
label: t('Date'),
|
|
name: 'date',
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'created',
|
|
format: (value) => toDateHourMin(value),
|
|
label: t('Creation date'),
|
|
name: 'creationDate',
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'userName',
|
|
label: t('Employee'),
|
|
name: 'employee',
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'description',
|
|
label: t('Reference'),
|
|
name: 'reference',
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'bankFk',
|
|
label: t('Bank'),
|
|
name: 'bank',
|
|
},
|
|
{
|
|
align: 'right',
|
|
field: 'debit',
|
|
format: (value) => value && toCurrency(value),
|
|
label: t('Debit'),
|
|
name: 'debit',
|
|
},
|
|
{
|
|
align: 'right',
|
|
field: 'credit',
|
|
format: (value) => value && toCurrency(value),
|
|
label: t('Havings'),
|
|
name: 'havings',
|
|
},
|
|
{
|
|
align: 'right',
|
|
field: 'balance',
|
|
format: (value) => value && toCurrency(value),
|
|
label: t('Balance'),
|
|
name: 'balance',
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'isConciliate',
|
|
label: t('Conciliated'),
|
|
name: 'conciliated',
|
|
},
|
|
{
|
|
align: 'left',
|
|
field: 'totalWithVat',
|
|
label: '',
|
|
name: 'actions',
|
|
},
|
|
]);
|
|
|
|
onBeforeMount(() => {
|
|
stateStore.rightDrawer = true;
|
|
companyId.value = user.value.companyFk;
|
|
});
|
|
|
|
watch(
|
|
() => route.params.id,
|
|
(newValue) => {
|
|
if (!newValue) return;
|
|
userParams.clientId = newValue;
|
|
filter.where.clientFk = newValue;
|
|
getData();
|
|
}
|
|
);
|
|
|
|
const getData = () => {
|
|
receiptsRef.value?.fetch();
|
|
clientRisksRef.value?.fetch();
|
|
};
|
|
|
|
const getCurrentBalance = () => {
|
|
const currentBalance = clientRisks.value.find((balance) => {
|
|
return balance.companyFk === companyId.value;
|
|
});
|
|
return currentBalance && currentBalance.amount;
|
|
};
|
|
|
|
const onFetch = (balances) => {
|
|
balances.forEach((balance, index) => {
|
|
if (index === 0) {
|
|
balance.balance = getCurrentBalance();
|
|
} else {
|
|
let previousBalance = balances[index - 1];
|
|
balance.balance =
|
|
previousBalance.balance -
|
|
(previousBalance.debit - previousBalance.credit);
|
|
}
|
|
});
|
|
|
|
receiptsData.value = balances;
|
|
};
|
|
|
|
const showNewPaymentDialog = () => {
|
|
quasar.dialog({
|
|
component: CustomerNewPayment,
|
|
componentProps: {
|
|
companyId: companyId.value,
|
|
totalCredit: clientRisks.value[0]?.amount,
|
|
promise: getData,
|
|
},
|
|
});
|
|
};
|
|
|
|
const updateCompanyId = (id) => {
|
|
if (id) {
|
|
companyId.value = id;
|
|
userParams.companyId = id;
|
|
filter.where.companyFk = id;
|
|
}
|
|
getData();
|
|
};
|
|
|
|
const saveFieldValue = async (row) => {
|
|
try {
|
|
const payload = { description: row.description };
|
|
await axios.patch(`Receipts/${row.id}`, payload);
|
|
} catch (err) {
|
|
return err;
|
|
}
|
|
};
|
|
|
|
const sendEmailAction = () => {
|
|
sendEmail(`Suppliers/${route.params.id}/campaign-metrics-email`);
|
|
};
|
|
|
|
const showBalancePdf = (balance) => {
|
|
const url = `api/InvoiceOuts/${balance.id}/download?access_token=${tokenMultimedia}`;
|
|
window.open(url, '_blank');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
:filter="filter"
|
|
@on-fetch="(data) => (clientRisks = data)"
|
|
auto-load
|
|
ref="clientRisksRef"
|
|
url="ClientRisks"
|
|
/>
|
|
<FetchData
|
|
:filter="filterCompanies"
|
|
@on-fetch="(data) => (companiesOptions = data)"
|
|
auto-load
|
|
url="Companies"
|
|
/>
|
|
|
|
<VnPaginate
|
|
auto-load
|
|
data-key="CustomerBalance"
|
|
url="Receipts/filter"
|
|
:user-params="userParams"
|
|
ref="receiptsRef"
|
|
@on-fetch="onFetch"
|
|
>
|
|
<template #body="{ rows }">
|
|
<QTable
|
|
:columns="columns"
|
|
:no-data-label="t('globals.noResults')"
|
|
:rows-per-page-options="[0]"
|
|
:rows="rows"
|
|
class="full-width q-mt-md"
|
|
row-key="id"
|
|
>
|
|
<template #body-cell-employee="{ row }">
|
|
<QTd auto-width @click.stop>
|
|
<QBtn color="blue" flat no-caps>{{ row.userName }}</QBtn>
|
|
<WorkerDescriptorProxy :id="row.clientFk" />
|
|
</QTd>
|
|
</template>
|
|
|
|
<template #body-cell-reference="{ row }">
|
|
<QTd auto-width @click.stop v-if="row.isInvoice">
|
|
<QBtn color="blue" dense flat>
|
|
{{ t('bill', { ref: row.description }) }}
|
|
</QBtn>
|
|
<InvoiceOutDescriptorProxy :id="row.id" />
|
|
</QTd>
|
|
<QTd v-else>
|
|
<VnInput
|
|
@keyup.enter="saveFieldValue(row)"
|
|
autofocus
|
|
clearable
|
|
dense
|
|
v-model="row.description"
|
|
/>
|
|
</QTd>
|
|
</template>
|
|
|
|
<template #body-cell-conciliated="{ row }">
|
|
<QTd align="center">
|
|
<QCheckbox :model-value="row.isConciliate === 1" disable />
|
|
</QTd>
|
|
</template>
|
|
|
|
<template #body-cell-actions="{ row }">
|
|
<QTd align="center">
|
|
<QIcon
|
|
@click.stop="showDialog = true"
|
|
class="q-ml-md fill-icon"
|
|
color="primary"
|
|
name="outgoing_mail"
|
|
size="sm"
|
|
v-if="row.isCompensation"
|
|
>
|
|
<QTooltip>
|
|
{{ t('Send compensation') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
<QIcon
|
|
@click="showBalancePdf(row)"
|
|
class="q-ml-md fill-icon"
|
|
color="primary"
|
|
name="cloud_download"
|
|
size="sm"
|
|
v-if="row.hasPdf"
|
|
>
|
|
<QTooltip>
|
|
{{ t('globals.downloadPdf') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
|
|
<QDialog v-model="showDialog">
|
|
<QCard class="q-pa-sm">
|
|
<QCardSection>
|
|
<span
|
|
ref="closeButton"
|
|
class="flex justify-end color-vn-label"
|
|
v-close-popup
|
|
>
|
|
<QIcon name="close" size="sm" />
|
|
</span>
|
|
<div class="text-h6">
|
|
{{ t('Send compensation') }}
|
|
</div>
|
|
</QCardSection>
|
|
<QCardSection>
|
|
<div>
|
|
{{
|
|
t(
|
|
'Do you want to report compensation to the client by mail?'
|
|
)
|
|
}}
|
|
</div>
|
|
</QCardSection>
|
|
<QCardActions class="flex justify-end q-mb-sm">
|
|
<QBtn
|
|
:label="t('globals.cancel')"
|
|
color="primary"
|
|
flat
|
|
v-close-popup
|
|
/>
|
|
<QBtn
|
|
:label="t('globals.save')"
|
|
@click="sendEmailAction"
|
|
class="q-ml-sm"
|
|
color="primary"
|
|
/>
|
|
</QCardActions>
|
|
</QCard>
|
|
</QDialog>
|
|
</QTd>
|
|
</template>
|
|
</QTable>
|
|
</template>
|
|
</VnPaginate>
|
|
|
|
<QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
|
|
<div class="q-mt-xl q-px-md">
|
|
<VnSelect
|
|
:label="t('Company')"
|
|
:options="companiesOptions"
|
|
@update:model-value="updateCompanyId($event)"
|
|
hide-selected
|
|
option-label="code"
|
|
option-value="id"
|
|
v-model="companyId"
|
|
:rules="validate('entry.companyFk')"
|
|
/>
|
|
</div>
|
|
|
|
<QCard class="q-ma-md q-pa-md q-mt-lg" v-if="receiptsData?.length">
|
|
<QCardSection>
|
|
<div class="flex justify-center text-subtitle1 text-bold">
|
|
{{ t('Total by company') }}
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div class="q-mr-sm" v-if="clientRisks?.length">
|
|
{{ clientRisks[0].company.code }}:
|
|
</div>
|
|
<div v-if="clientRisks?.length">
|
|
{{ toCurrency(clientRisks[0].amount) }}
|
|
</div>
|
|
</div>
|
|
</QCardSection>
|
|
</QCard>
|
|
</QDrawer>
|
|
|
|
<QPageSticky :offset="[18, 18]">
|
|
<QBtn @click.stop="showNewPaymentDialog()" color="primary" fab icon="add" />
|
|
<QTooltip>
|
|
{{ t('New payment') }}
|
|
</QTooltip>
|
|
</QPageSticky>
|
|
</template>
|
|
|
|
<i18n>
|
|
en:
|
|
bill: 'N/INV {ref}'
|
|
es:
|
|
Company: Empresa
|
|
Total by company: Total por empresa
|
|
New payment: Añadir pago
|
|
Date: Fecha
|
|
Creation date: Fecha de creación
|
|
Employee: Empleado
|
|
Reference: Referencia
|
|
bill: 'N/FRA {ref}'
|
|
Bank: Caja
|
|
Debit: Debe
|
|
Havings: Haber
|
|
Balance: Balance
|
|
Conciliated: Conciliado
|
|
Send compensation: Enviar compensación
|
|
Do you want to report compensation to the client by mail?: ¿Desea informar de la compensación al cliente por correo?
|
|
</i18n>
|