parent
c22c8d9f11
commit
4d602aadfd
|
|
@ -0,0 +1,329 @@
|
||||||
|
<script setup>
|
||||||
|
import { computed, onBeforeMount, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { useAcl } from 'src/composables/useAcl';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { useQuasar } from 'quasar';
|
||||||
|
import { getSupplierRisk } from 'src/composables/getRisk';
|
||||||
|
|
||||||
|
import { toCurrency, toDate, toDateHourMin } from 'src/filters';
|
||||||
|
import { useState } from 'composables/useState';
|
||||||
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
|
import { usePrintService } from 'composables/usePrintService';
|
||||||
|
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||||
|
|
||||||
|
import VnTable from 'components/VnTable/VnTable.vue';
|
||||||
|
import VnInput from 'components/common/VnInput.vue';
|
||||||
|
import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
|
||||||
|
import VnFilter from 'components/VnTable/VnFilter.vue';
|
||||||
|
|
||||||
|
import CreateNewPayment from 'src/components/CreateNewPayment.vue';
|
||||||
|
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
|
||||||
|
|
||||||
|
const { openConfirmationModal } = useVnConfirm();
|
||||||
|
const { sendEmail, openReport } = usePrintService();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { hasAny } = useAcl();
|
||||||
|
|
||||||
|
const quasar = useQuasar();
|
||||||
|
const route = useRoute();
|
||||||
|
const state = useState();
|
||||||
|
const stateStore = useStateStore();
|
||||||
|
const user = state.getUser();
|
||||||
|
|
||||||
|
const supplierRisk = ref([]);
|
||||||
|
const tableRef = ref();
|
||||||
|
const companyId = ref();
|
||||||
|
const companyUser = ref(user.value.companyFk);
|
||||||
|
const balances = ref([]);
|
||||||
|
const vnFilterRef = ref({});
|
||||||
|
const filter = computed(() => {
|
||||||
|
return {
|
||||||
|
supplierId: route.params.id,
|
||||||
|
companyId: companyId.value ?? companyUser.value,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const companyFilterColumn = {
|
||||||
|
align: 'left',
|
||||||
|
name: 'companyId',
|
||||||
|
label: t('Company'),
|
||||||
|
component: 'select',
|
||||||
|
attrs: {
|
||||||
|
url: 'Companies',
|
||||||
|
optionLabel: 'code',
|
||||||
|
optionValue: 'id',
|
||||||
|
sortBy: 'code',
|
||||||
|
},
|
||||||
|
columnFilter: {
|
||||||
|
event: {
|
||||||
|
remove: () => (companyId.value = null),
|
||||||
|
'update:modelValue': (newCompanyFk) => {
|
||||||
|
if (!newCompanyFk) return;
|
||||||
|
vnFilterRef.value.addFilter(newCompanyFk);
|
||||||
|
companyUser.value = newCompanyFk;
|
||||||
|
},
|
||||||
|
blur: () => !companyId.value && (companyId.value = companyUser.value),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
visible: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = computed(() => [
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'payed',
|
||||||
|
label: t('Date'),
|
||||||
|
format: ({ payed }) => toDate(payed),
|
||||||
|
cardVisible: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'created',
|
||||||
|
label: t('Creation date'),
|
||||||
|
format: ({ created }) => toDateHourMin(created),
|
||||||
|
cardVisible: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
label: t('Employee'),
|
||||||
|
columnField: {
|
||||||
|
component: 'userLink',
|
||||||
|
attrs: ({ row }) => {
|
||||||
|
return {
|
||||||
|
workerId: row.workerFk,
|
||||||
|
name: row.userName,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
cardVisible: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'description',
|
||||||
|
label: t('Reference'),
|
||||||
|
isTitle: true,
|
||||||
|
class: 'extend',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'bankFk',
|
||||||
|
label: t('Bank'),
|
||||||
|
cardVisible: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'debit',
|
||||||
|
label: t('Debit'),
|
||||||
|
format: ({ debit }) => debit && toCurrency(debit),
|
||||||
|
isId: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'credit',
|
||||||
|
label: t('Havings'),
|
||||||
|
format: ({ credit }) => credit && toCurrency(credit),
|
||||||
|
cardVisible: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'balance',
|
||||||
|
label: t('Balance'),
|
||||||
|
format: ({ balance }) => toCurrency(balance),
|
||||||
|
cardVisible: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'isConciliate',
|
||||||
|
label: t('Conciliated'),
|
||||||
|
cardVisible: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'tableActions',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
title: t('globals.downloadPdf'),
|
||||||
|
icon: 'cloud_download',
|
||||||
|
show: (row) => row.isInvoice,
|
||||||
|
action: (row) => showBalancePdf(row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('Send compensation'),
|
||||||
|
icon: 'outgoing_mail',
|
||||||
|
show: (row) => !!row.isCompensation,
|
||||||
|
action: ({ id }) =>
|
||||||
|
openConfirmationModal(
|
||||||
|
t('Send compensation'),
|
||||||
|
t('Do you want to report compensation to the supplier by mail?'),
|
||||||
|
() => sendEmail(`Receipts/${id}/balance-compensation-email`)
|
||||||
|
),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
stateStore.rightDrawer = true;
|
||||||
|
companyId.value = companyUser.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
async function getSupplierRisks() {
|
||||||
|
const filter = {
|
||||||
|
where: { supplierFk: route.params.id, companyFk: companyUser.value },
|
||||||
|
};
|
||||||
|
const { data } = await getSupplierRisk(filter);
|
||||||
|
supplierRisk.value = data;
|
||||||
|
return supplierRisk.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getCurrentBalance() {
|
||||||
|
const currentBalance = (await getSupplierRisks()).find((balance) => {
|
||||||
|
return balance.companyFk === companyId.value;
|
||||||
|
});
|
||||||
|
return currentBalance && currentBalance.amount;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onFetch(data) {
|
||||||
|
balances.value = [];
|
||||||
|
for (const [index, balance] of data.entries()) {
|
||||||
|
if (index === 0) {
|
||||||
|
balance.balance = await getCurrentBalance();
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const previousBalance = data[index - 1];
|
||||||
|
balance.balance =
|
||||||
|
previousBalance?.balance - (previousBalance?.debit - previousBalance?.credit);
|
||||||
|
}
|
||||||
|
balances.value = data;
|
||||||
|
}
|
||||||
|
|
||||||
|
const showNewPaymentDialog = () => {
|
||||||
|
quasar.dialog({
|
||||||
|
component: CreateNewPayment,
|
||||||
|
componentProps: {
|
||||||
|
companyId: companyId.value,
|
||||||
|
totalCredit: supplierRisk.value[0]?.amount,
|
||||||
|
promise: () => tableRef.value.reload(),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const showBalancePdf = ({ id }) => {
|
||||||
|
openReport(`InvoiceOuts/${id}/download`, {}, '_blank');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VnSubToolbar class="q-mb-md">
|
||||||
|
<template #st-data>
|
||||||
|
<div class="column justify-center q-px-md q-py-sm">
|
||||||
|
<span class="text-bold">{{ t('Total by company') }}</span>
|
||||||
|
<div class="row justify-center" v-if="supplierRisk?.length">
|
||||||
|
{{ supplierRisk[0].company.code }}:
|
||||||
|
{{ toCurrency(supplierRisk[0].amount) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #st-actions>
|
||||||
|
<div>
|
||||||
|
<VnFilter
|
||||||
|
ref="vnFilterRef"
|
||||||
|
v-model="companyId"
|
||||||
|
data-key="CustomerBalance"
|
||||||
|
:column="companyFilterColumn"
|
||||||
|
search-url="balance"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</VnSubToolbar>
|
||||||
|
<VnTable
|
||||||
|
ref="tableRef"
|
||||||
|
data-key="CustomerBalance"
|
||||||
|
url="Receipts/filter"
|
||||||
|
search-url="balance"
|
||||||
|
:user-params="filter"
|
||||||
|
:columns="columns"
|
||||||
|
:right-search="false"
|
||||||
|
:is-editable="false"
|
||||||
|
:column-search="false"
|
||||||
|
@on-fetch="onFetch"
|
||||||
|
:disable-option="{ card: true }"
|
||||||
|
auto-load
|
||||||
|
>
|
||||||
|
<template #column-balance="{ rowIndex }">
|
||||||
|
{{ toCurrency(balances[rowIndex]?.balance) }}
|
||||||
|
</template>
|
||||||
|
<template #column-description="{ row }">
|
||||||
|
<div class="link" v-if="row.isInvoice">
|
||||||
|
{{ t('bill', { ref: row.description }) }}
|
||||||
|
<InvoiceOutDescriptorProxy :id="row.description" />
|
||||||
|
</div>
|
||||||
|
<span v-else class="q-pa-xs dotted rounded-borders" :title="row.description">
|
||||||
|
{{ row.description }}
|
||||||
|
</span>
|
||||||
|
<QPopupEdit
|
||||||
|
v-model="row.description"
|
||||||
|
v-slot="scope"
|
||||||
|
@save="
|
||||||
|
(value) =>
|
||||||
|
value != row.description &&
|
||||||
|
axios.patch(`Receipts/${row.id}`, { description: value })
|
||||||
|
"
|
||||||
|
auto-save
|
||||||
|
>
|
||||||
|
<VnInput
|
||||||
|
v-model="scope.value"
|
||||||
|
:disable="
|
||||||
|
!hasAny([{ model: 'Receipt', props: '*', accessType: 'WRITE' }])
|
||||||
|
"
|
||||||
|
@keypress.enter="scope.set"
|
||||||
|
autofocus
|
||||||
|
/>
|
||||||
|
</QPopupEdit>
|
||||||
|
</template>
|
||||||
|
</VnTable>
|
||||||
|
<QPageSticky :offset="[18, 18]" style="z-index: 2">
|
||||||
|
<QBtn
|
||||||
|
@click.stop="showNewPaymentDialog()"
|
||||||
|
color="primary"
|
||||||
|
fab
|
||||||
|
icon="add"
|
||||||
|
shortcut="+"
|
||||||
|
/>
|
||||||
|
<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 supplier by mail?: ¿Desea informar de la compensación al cliente por correo?
|
||||||
|
</i18n>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dotted {
|
||||||
|
border: 1px dotted var(--vn-header-color);
|
||||||
|
}
|
||||||
|
.dotted:hover {
|
||||||
|
border: 1px dotted $primary;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue