301 lines
13 KiB
Vue
301 lines
13 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
|
import VnCurrency from 'src/components/common/VnCurrency.vue';
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
const arrayData = useArrayData('InvoiceIn');
|
|
const invoiceIn = computed(() => arrayData.store.data);
|
|
|
|
const rowsSelected = ref([]);
|
|
const banks = ref([]);
|
|
const invoiceInFormRef = ref();
|
|
const invoiceId = route.params.id;
|
|
|
|
const placeholder = 'yyyy/mm/dd';
|
|
|
|
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();
|
|
}
|
|
</script>
|
|
<template>
|
|
<FetchData url="Banks" 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"
|
|
hide-pagination
|
|
:grid="$q.screen.lt.sm"
|
|
>
|
|
<template #body-cell-duedate="{ row }">
|
|
<QTd>
|
|
<QInput
|
|
v-model="row.dueDated"
|
|
mask="date"
|
|
:placeholder="placeholder"
|
|
clearable
|
|
clear-icon="close"
|
|
>
|
|
<template #append>
|
|
<QIcon name="event" class="cursor-pointer">
|
|
<QPopupProxy
|
|
cover
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
>
|
|
<QDate v-model="row.dueDated" landscape>
|
|
<div
|
|
class="row items-center justify-end q-gutter-sm"
|
|
>
|
|
<QBtn
|
|
:label="t('globals.cancel')"
|
|
color="primary"
|
|
flat
|
|
v-close-popup
|
|
/>
|
|
<QBtn
|
|
:label="t('globals.confirm')"
|
|
color="primary"
|
|
flat
|
|
v-close-popup
|
|
/>
|
|
</div>
|
|
</QDate>
|
|
</QPopupProxy>
|
|
</QIcon>
|
|
</template>
|
|
</QInput>
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-bank="{ row, col }">
|
|
<QTd>
|
|
<VnSelectFilter
|
|
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>
|
|
</VnSelectFilter>
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-amount="{ row }">
|
|
<QTd>
|
|
<VnCurrency
|
|
v-model="row.amount"
|
|
:is-outlined="false"
|
|
clearable
|
|
clear-icon="close"
|
|
/>
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-foreignvalue="{ row }">
|
|
<QTd>
|
|
<QInput
|
|
:class="{
|
|
'no-pointer-events': !isNotEuro(invoiceIn.currency.code),
|
|
}"
|
|
:disable="!isNotEuro(invoiceIn.currency.code)"
|
|
v-model="row.foreignValue"
|
|
clearable
|
|
clear-icon="close"
|
|
/>
|
|
</QTd>
|
|
</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>
|
|
<QInput
|
|
class="full-width"
|
|
:label="t('Date')"
|
|
v-model="props.row.dueDated"
|
|
mask="date"
|
|
:placeholder="placeholder"
|
|
clearable
|
|
clear-icon="close"
|
|
>
|
|
<template #append>
|
|
<QIcon name="event" class="cursor-pointer">
|
|
<QPopupProxy
|
|
cover
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
>
|
|
<QDate
|
|
v-model="props.row.dueDated"
|
|
landscape
|
|
>
|
|
<div
|
|
class="row items-center justify-end q-gutter-sm"
|
|
>
|
|
<QBtn
|
|
:label="
|
|
t('globals.cancel')
|
|
"
|
|
color="primary"
|
|
flat
|
|
v-close-popup
|
|
/>
|
|
<QBtn
|
|
:label="
|
|
t('globals.confirm')
|
|
"
|
|
color="primary"
|
|
flat
|
|
v-close-popup
|
|
/>
|
|
</div>
|
|
</QDate>
|
|
</QPopupProxy>
|
|
</QIcon>
|
|
</template>
|
|
</QInput>
|
|
</QItem>
|
|
<QItem>
|
|
<VnSelectFilter
|
|
: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>
|
|
</VnSelectFilter>
|
|
</QItem>
|
|
<QItem>
|
|
<QInput
|
|
:label="t('Amount')"
|
|
class="full-width"
|
|
v-model="props.row.amount"
|
|
clearable
|
|
clear-icon="close"
|
|
/>
|
|
</QItem>
|
|
<QItem>
|
|
<QInput
|
|
: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></style>
|
|
<i18n>
|
|
es:
|
|
Date: Fecha
|
|
Bank: Caja
|
|
Amount: Importe
|
|
Foreign value: Divisa
|
|
</i18n>
|