244 lines
9.0 KiB
Vue
244 lines
9.0 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import axios from 'axios';
|
|
import { toDate } from 'src/filters';
|
|
import { useArrayData } from 'src/composables/useArrayData';
|
|
import CrudModel from 'src/components/CrudModel.vue';
|
|
import FetchData from 'src/components/FetchData.vue';
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
import { toCurrency } from 'src/filters';
|
|
import useNotify from 'src/composables/useNotify.js';
|
|
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
|
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
|
|
|
|
const route = useRoute();
|
|
const { notify } = useNotify();
|
|
const { t } = useI18n();
|
|
const arrayData = useArrayData();
|
|
const invoiceIn = computed(() => arrayData.store.data);
|
|
|
|
const rowsSelected = ref([]);
|
|
const banks = ref([]);
|
|
const invoiceInFormRef = ref();
|
|
const invoiceId = +route.params.id;
|
|
const filter = { where: { invoiceInFk: invoiceId } };
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
name: 'duedate',
|
|
label: t('Date'),
|
|
field: (row) => toDate(row.dueDated),
|
|
sortable: true,
|
|
tabIndex: 1,
|
|
align: 'left',
|
|
},
|
|
{
|
|
name: 'bank',
|
|
label: t('Bank'),
|
|
field: (row) => row.bankFk,
|
|
options: banks.value,
|
|
model: 'bankFk',
|
|
optionValue: 'id',
|
|
optionLabel: 'bank',
|
|
sortable: true,
|
|
tabIndex: 2,
|
|
align: 'left',
|
|
},
|
|
{
|
|
name: 'amount',
|
|
label: t('Amount'),
|
|
field: (row) => row.amount,
|
|
sortable: true,
|
|
tabIndex: 3,
|
|
align: 'left',
|
|
},
|
|
{
|
|
name: 'foreignvalue',
|
|
label: t('Foreign value'),
|
|
field: (row) => row.foreignValue,
|
|
sortable: true,
|
|
tabIndex: 4,
|
|
align: 'left',
|
|
},
|
|
]);
|
|
|
|
const isNotEuro = (code) => code != 'EUR';
|
|
|
|
async function insert() {
|
|
await axios.post('/InvoiceInDueDays/new', { id: +invoiceId });
|
|
await invoiceInFormRef.value.reload();
|
|
notify(t('globals.dataSaved'), 'positive');
|
|
}
|
|
const getTotalAmount = (rows) => rows.reduce((acc, { amount }) => acc + +amount, 0);
|
|
</script>
|
|
<template>
|
|
<FetchData
|
|
url="Accountings"
|
|
auto-load
|
|
limit="30"
|
|
@on-fetch="(data) => (banks = data)"
|
|
/>
|
|
<CrudModel
|
|
v-if="invoiceIn"
|
|
ref="invoiceInFormRef"
|
|
data-key="InvoiceInDueDays"
|
|
url="InvoiceInDueDays"
|
|
:filter="filter"
|
|
auto-load
|
|
:data-required="{ invoiceInFk: invoiceId }"
|
|
v-model:selected="rowsSelected"
|
|
@on-fetch="(data) => (areRows = !!data.length)"
|
|
>
|
|
<template #body="{ rows }">
|
|
<QTable
|
|
v-model:selected="rowsSelected"
|
|
selection="multiple"
|
|
:columns="columns"
|
|
:rows="rows"
|
|
row-key="$index"
|
|
:grid="$q.screen.lt.sm"
|
|
>
|
|
<template #body-cell-duedate="{ row }">
|
|
<QTd>
|
|
<VnInputDate v-model="row.dueDated" />
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-bank="{ row, col }">
|
|
<QTd>
|
|
<VnSelect
|
|
v-model="row[col.model]"
|
|
:options="col.options"
|
|
:option-value="col.optionValue"
|
|
:option-label="col.optionLabel"
|
|
>
|
|
<template #option="scope">
|
|
<QItem v-bind="scope.itemProps">
|
|
<QItemSection>
|
|
<QItemLabel>{{
|
|
`${scope.opt.id}: ${scope.opt.bank}`
|
|
}}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</template>
|
|
</VnSelect>
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-amount="{ row }">
|
|
<QTd>
|
|
<VnInputNumber
|
|
v-model="row.amount"
|
|
:is-outlined="false"
|
|
clearable
|
|
clear-icon="close"
|
|
/>
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-foreignvalue="{ row }">
|
|
<QTd>
|
|
<VnInputNumber
|
|
:class="{
|
|
'no-pointer-events': !isNotEuro(invoiceIn.currency.code),
|
|
}"
|
|
:disable="!isNotEuro(invoiceIn.currency.code)"
|
|
v-model="row.foreignValue"
|
|
clearable
|
|
clear-icon="close"
|
|
/>
|
|
</QTd>
|
|
</template>
|
|
<template #bottom-row>
|
|
<QTr class="bg">
|
|
<QTd />
|
|
<QTd />
|
|
<QTd />
|
|
<QTd>
|
|
{{
|
|
toCurrency(getTotalAmount(rows), invoiceIn.currency.code)
|
|
}}
|
|
</QTd>
|
|
<QTd />
|
|
</QTr>
|
|
</template>
|
|
<template #item="props">
|
|
<div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
|
|
<QCard>
|
|
<QCardSection>
|
|
<QCheckbox v-model="props.selected" dense />
|
|
</QCardSection>
|
|
<QSeparator />
|
|
<QList>
|
|
<QItem>
|
|
<VnInputDate
|
|
class="full-width"
|
|
:label="t('Date')"
|
|
v-model="props.row.dueDated"
|
|
/>
|
|
</QItem>
|
|
<QItem>
|
|
<VnSelect
|
|
:label="t('Bank')"
|
|
class="full-width"
|
|
v-model="props.row['bankFk']"
|
|
:options="banks"
|
|
option-value="id"
|
|
option-label="bank"
|
|
>
|
|
<template #option="scope">
|
|
<QItem v-bind="scope.itemProps">
|
|
<QItemSection>
|
|
<QItemLabel>{{
|
|
`${scope.opt.id}: ${scope.opt.bank}`
|
|
}}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</template>
|
|
</VnSelect>
|
|
</QItem>
|
|
<QItem>
|
|
<VnInputNumber
|
|
:label="t('Amount')"
|
|
class="full-width"
|
|
v-model="props.row.amount"
|
|
/>
|
|
</QItem>
|
|
<QItem>
|
|
<VnInputNumber
|
|
:label="t('Foreign value')"
|
|
class="full-width"
|
|
:class="{
|
|
'no-pointer-events': !isNotEuro(
|
|
invoiceIn.currency.code
|
|
),
|
|
}"
|
|
:disable="!isNotEuro(invoiceIn.currency.code)"
|
|
v-model="props.row.foreignValue"
|
|
clearable
|
|
clear-icon="close"
|
|
/>
|
|
</QItem>
|
|
</QList>
|
|
</QCard>
|
|
</div>
|
|
</template>
|
|
</QTable>
|
|
</template>
|
|
</CrudModel>
|
|
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
|
<QBtn color="primary" icon="add" size="lg" round @click="insert" />
|
|
</QPageSticky>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
background-color: var(--vn-light-gray);
|
|
}
|
|
</style>
|
|
<i18n>
|
|
es:
|
|
Date: Fecha
|
|
Bank: Caja
|
|
Amount: Importe
|
|
Foreign value: Divisa
|
|
</i18n>
|