forked from verdnatura/salix-front
Merge pull request 'Se crea la tarjeta de balances' (#79) from features/ms_157_balance_card into dev
Reviewed-on: hyervoni/salix-front-mindshore#79
This commit is contained in:
commit
1f7747343c
|
|
@ -1,3 +1,282 @@
|
|||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { date, QCheckbox, QBtn, useQuasar } from 'quasar';
|
||||
|
||||
import { toCurrency } from 'src/filters';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const quasar = useQuasar();
|
||||
const stateStore = useStateStore();
|
||||
|
||||
const clientRisks = ref(null);
|
||||
const companiesOptions = ref([]);
|
||||
const companyId = ref(442);
|
||||
const rows = ref(null);
|
||||
const workerId = ref(0);
|
||||
const receiptsRef = ref(null);
|
||||
const clientRisksRef = ref(null);
|
||||
|
||||
const filterCompanies = { order: ['code'] };
|
||||
const params = {
|
||||
clientId: `${route.params.id}`,
|
||||
companyId: companyId.value,
|
||||
filter: { limit: 20 },
|
||||
};
|
||||
const filter = {
|
||||
include: { relation: 'company', scope: { fields: ['code'] } },
|
||||
where: { clientFk: `${route.params.id}`, companyFk: companyId.value },
|
||||
};
|
||||
|
||||
const tableColumnComponents = {
|
||||
payed: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
created: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
userName: {
|
||||
component: QBtn,
|
||||
props: () => ({ flat: true, color: 'blue' }),
|
||||
event: (prop) => {
|
||||
workerId.value = prop.row.clientFk;
|
||||
},
|
||||
},
|
||||
description: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
bankFk: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
debit: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
credit: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
balance: {
|
||||
component: 'span',
|
||||
props: () => {},
|
||||
event: () => {},
|
||||
},
|
||||
isConciliate: {
|
||||
component: QCheckbox,
|
||||
props: (prop) => ({
|
||||
disable: true,
|
||||
'model-value': Boolean(prop.value),
|
||||
}),
|
||||
event: () => {},
|
||||
},
|
||||
};
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
align: 'left',
|
||||
field: 'payed',
|
||||
format: (value) => date.formatDate(value, 'DD/MM/YYYY'),
|
||||
label: t('Date'),
|
||||
name: 'payed',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'created',
|
||||
format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm'),
|
||||
label: t('Creation date'),
|
||||
name: 'created',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'userName',
|
||||
label: t('Employee'),
|
||||
name: 'userName',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'description',
|
||||
label: t('Reference'),
|
||||
name: 'description',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'bankFk',
|
||||
label: t('Bank'),
|
||||
name: 'bankFk',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'debit',
|
||||
label: t('Debit'),
|
||||
name: 'debit',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'credit',
|
||||
format: (value) => toCurrency(value),
|
||||
label: t('Havings'),
|
||||
name: 'credit',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: (value) => value.debit - value.credit,
|
||||
format: (value) => toCurrency(value),
|
||||
label: t('Balance'),
|
||||
name: 'balance',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
field: 'isConciliate',
|
||||
label: t('Conciliated'),
|
||||
name: 'isConciliate',
|
||||
},
|
||||
]);
|
||||
|
||||
const getData = () => {
|
||||
stateStore.rightDrawer = true;
|
||||
receiptsRef.value?.fetch();
|
||||
clientRisksRef.value?.fetch();
|
||||
};
|
||||
|
||||
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;
|
||||
getData();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center">Balance</div>
|
||||
<FetchData
|
||||
:filter="filterCompanies"
|
||||
@on-fetch="(data) => (companiesOptions = data)"
|
||||
auto-load
|
||||
url="Companies"
|
||||
/>
|
||||
<FetchData
|
||||
:params="params"
|
||||
@on-fetch="(data) => (rows = data)"
|
||||
auto-load
|
||||
ref="receiptsRef"
|
||||
url="Receipts/filter"
|
||||
/>
|
||||
<FetchData
|
||||
:filter="filter"
|
||||
@on-fetch="(data) => (clientRisks = data)"
|
||||
auto-load
|
||||
ref="clientRisksRef"
|
||||
url="ClientRisks"
|
||||
/>
|
||||
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:pagination="{ rowsPerPage: 12 }"
|
||||
:rows="rows"
|
||||
class="full-width q-mt-md"
|
||||
row-key="id"
|
||||
v-if="rows?.length"
|
||||
>
|
||||
<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="props.col.name !== 'isConciliate'">
|
||||
{{ props.value }}
|
||||
</template>
|
||||
<WorkerDescriptorProxy :id="workerId" />
|
||||
</component>
|
||||
</QTr>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
|
||||
<h5 class="flex justify-center label-color" v-else>
|
||||
{{ t('globals.noResults') }}
|
||||
</h5>
|
||||
|
||||
<QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
|
||||
<div class="q-mt-xl q-px-md">
|
||||
<VnSelectFilter
|
||||
:label="t('Company')"
|
||||
:options="companiesOptions"
|
||||
@update:model-value="updateCompanyId($event)"
|
||||
hide-selected
|
||||
option-label="code"
|
||||
option-value="id"
|
||||
v-model="companyId"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<QCard class="q-ma-md q-pa-md q-mt-lg" v-if="rows?.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>
|
||||
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
|
||||
Bank: Caja
|
||||
Debit: Debe
|
||||
Havings: Haber
|
||||
Balance: Balance
|
||||
Conciliated: Conciliado
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -137,21 +137,15 @@ const toCustomerConsigneeEdit = (consigneeId) => {
|
|||
</div>
|
||||
</div>
|
||||
</QCard>
|
||||
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
<QBtn
|
||||
@click.stop="toCustomerConsigneeCreate()"
|
||||
color="primary"
|
||||
fab
|
||||
icon="add"
|
||||
/>
|
||||
<QTooltip>
|
||||
{{ t('New consignee') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</QCard>
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
<QBtn @click.stop="toCustomerConsigneeCreate()" color="primary" fab icon="add" />
|
||||
<QTooltip>
|
||||
{{ t('New consignee') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -49,8 +49,8 @@ onBeforeMount(async () => {
|
|||
filter,
|
||||
});
|
||||
await arrayData.value.fetch({ append: false });
|
||||
totalAmount.value = arrayData.value.store.data.reduce((acumulador, objetoActual) => {
|
||||
return acumulador + objetoActual.amount;
|
||||
totalAmount.value = arrayData.value.store.data.reduce((accumulator, currentValue) => {
|
||||
return accumulator + currentValue.amount;
|
||||
}, 0);
|
||||
stateStore.rightDrawer = true;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ const toCustomerNoteCreate = () => {
|
|||
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
<QBtn
|
||||
@click.stop="toCustomerConsigneeCreate()"
|
||||
@click.stop="toCustomerNoteCreate()"
|
||||
color="primary"
|
||||
fab
|
||||
icon="add"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import VnInput from 'src/components/common/VnInput.vue';
|
|||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
|
||||
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
||||
import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
|
||||
import CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
|
@ -233,7 +233,7 @@ const refreshData = () => {
|
|||
v-model="data.customsAgentFk"
|
||||
>
|
||||
<template #form>
|
||||
<CustomsNewCustomsAgent @on-data-saved="refreshData()" />
|
||||
<CustomerNewCustomsAgent @on-data-saved="refreshData()" />
|
||||
</template>
|
||||
</VnSelectCreate>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,286 @@
|
|||
<script setup>
|
||||
import { onBeforeMount, reactive, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const $props = defineProps({
|
||||
companyId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
totalCredit: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
promise: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const closeButton = ref(null);
|
||||
const urlCreate = ref([]);
|
||||
const companyOptions = ref([]);
|
||||
const bankOptions = ref([]);
|
||||
const clientFindOne = ref([]);
|
||||
const deliveredAmount = ref(null);
|
||||
const amountToReturn = ref(null);
|
||||
const viewRecipt = ref(true);
|
||||
const sendEmail = ref(false);
|
||||
const isLoading = ref(false);
|
||||
|
||||
const filterBanks = {
|
||||
fields: ['id', 'bank', 'accountingTypeFk'],
|
||||
include: { relation: 'accountingType' },
|
||||
order: 'id',
|
||||
limit: 30,
|
||||
};
|
||||
|
||||
const filterClientFindOne = {
|
||||
fields: ['email'],
|
||||
where: {
|
||||
id: `${route.params.id}`,
|
||||
},
|
||||
};
|
||||
|
||||
const initialData = reactive({
|
||||
amountPaid: $props.totalCredit,
|
||||
bankFk: null,
|
||||
clientFk: `${route.params.id}`,
|
||||
companyFk: $props.companyId,
|
||||
compensationAccount: null,
|
||||
description: null,
|
||||
email: clientFindOne.value.email,
|
||||
payed: null,
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
urlCreate.value = `Clients/${route.params.id}/createReceipt`;
|
||||
});
|
||||
|
||||
const setPaymentType = (id) => {
|
||||
initialData.payed = '2001-01-01T11:00:00.000Z';
|
||||
if (id === 1) initialData.description = 'Credit card';
|
||||
if (id === 2) initialData.description = 'Cash';
|
||||
if (id === 3 || id === 3117) initialData.description = '';
|
||||
if (id === 4) initialData.description = 'Transfer';
|
||||
};
|
||||
|
||||
const calculateFromAmount = (event) => {
|
||||
amountToReturn.value = parseFloat(event) * -1 + parseFloat(deliveredAmount.value);
|
||||
};
|
||||
|
||||
const calculateFromDeliveredAmount = (event) => {
|
||||
amountToReturn.value = parseFloat($props.totalCredit) * -1 + parseFloat(event);
|
||||
};
|
||||
|
||||
const setClientEmail = (data) => {
|
||||
initialData.email = data.email;
|
||||
};
|
||||
|
||||
const onDataSaved = async () => {
|
||||
isLoading.value = true;
|
||||
if ($props.promise) {
|
||||
try {
|
||||
await $props.promise();
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
if (closeButton.value) closeButton.value.click();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDialog ref="dialogRef">
|
||||
<fetch-data
|
||||
@on-fetch="(data) => (companyOptions = data)"
|
||||
auto-load
|
||||
url="Companies"
|
||||
/>
|
||||
<fetch-data
|
||||
:filter="filterBanks"
|
||||
@on-fetch="(data) => (bankOptions = data)"
|
||||
auto-load
|
||||
url="Banks"
|
||||
/>
|
||||
<fetch-data
|
||||
:filter="filterClientFindOne"
|
||||
@on-fetch="setClientEmail"
|
||||
auto-load
|
||||
url="Clients/findOne"
|
||||
/>
|
||||
|
||||
<FormModel
|
||||
:default-actions="false"
|
||||
:form-initial-data="initialData"
|
||||
:observe-form-changes="false"
|
||||
:url-create="urlCreate"
|
||||
@on-data-saved="onDataSaved()"
|
||||
>
|
||||
<template #form="{ data }">
|
||||
<span ref="closeButton" class="row justify-end close-icon" v-close-popup>
|
||||
<QIcon name="close" size="sm" />
|
||||
</span>
|
||||
|
||||
<h5 class="flex justify-center q-mt-xs">
|
||||
{{ t('New payment') }}
|
||||
</h5>
|
||||
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInputDate
|
||||
:label="t('Date')"
|
||||
:required="true"
|
||||
v-model="data.payed"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Company')"
|
||||
:options="companyOptions"
|
||||
:required="true"
|
||||
hide-selected
|
||||
option-label="code"
|
||||
option-value="id"
|
||||
v-model="data.companyFk"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Bank')"
|
||||
:options="bankOptions"
|
||||
:required="true"
|
||||
@update:model-value="setPaymentType($event)"
|
||||
hide-selected
|
||||
option-label="bank"
|
||||
option-value="id"
|
||||
v-model="data.bankFk"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>
|
||||
{{ scope.opt.id }}: {{ scope.opt.bank }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('Amount')"
|
||||
:required="true"
|
||||
@update:model-value="calculateFromAmount($event)"
|
||||
type="number"
|
||||
v-model.number="data.amountPaid"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<div class="text-h6" v-if="data.bankFk === 3 || data.bankFk === 3117">
|
||||
{{ t('Compensation') }}
|
||||
</div>
|
||||
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col" v-if="data.bankFk === 3 || data.bankFk === 3117">
|
||||
<VnInput
|
||||
:label="t('Compensation account')"
|
||||
v-model="data.compensationAccount"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('Reference')"
|
||||
:required="true"
|
||||
v-model="data.description"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<div class="q-mt-lg" v-if="data.bankFk === 2">
|
||||
<div class="text-h6">{{ t('Cash') }}</div>
|
||||
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('Delivered amount')"
|
||||
@update:model-value="calculateFromDeliveredAmount($event)"
|
||||
type="number"
|
||||
v-model="deliveredAmount"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput
|
||||
:label="t('Amount to return')"
|
||||
disable
|
||||
type="number"
|
||||
v-model="amountToReturn"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<QCheckbox v-model="viewRecipt" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<QCheckbox v-model="sendEmail" />
|
||||
</div>
|
||||
</VnRow>
|
||||
</div>
|
||||
|
||||
<div class="q-mt-lg row justify-end">
|
||||
<QBtn
|
||||
:disabled="isLoading"
|
||||
:label="t('globals.cancel')"
|
||||
:loading="isLoading"
|
||||
class="q-ml-sm"
|
||||
color="primary"
|
||||
flat
|
||||
type="reset"
|
||||
v-close-popup
|
||||
/>
|
||||
<QBtn
|
||||
:disabled="isLoading"
|
||||
:label="t('globals.save')"
|
||||
:loading="isLoading"
|
||||
color="primary"
|
||||
type="submit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FormModel>
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
New payment: Añadir pago
|
||||
Date: Fecha
|
||||
Company: Empresa
|
||||
Bank: Caja
|
||||
Amount: Importe
|
||||
Reference: Referencia
|
||||
Cash: Efectivo
|
||||
Delivered amount: Cantidad entregada
|
||||
Amount to return: Cantidad a devolver
|
||||
View recipt: Ver recibido
|
||||
Send email: Enviar correo
|
||||
Compensation: Compensación
|
||||
Compensation account: Cuenta para compensar
|
||||
</i18n>
|
||||
Loading…
Reference in New Issue