261 lines
9.3 KiB
Vue
261 lines
9.3 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { getTotal } from 'src/composables/getTotal';
|
|
import CrudModel from 'src/components/CrudModel.vue';
|
|
import FetchData from 'src/components/FetchData.vue';
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const route = useRoute();
|
|
const invoceInIntrastat = ref([]);
|
|
const rowsSelected = ref([]);
|
|
const countries = ref([]);
|
|
const intrastats = ref([]);
|
|
const invoiceInFormRef = ref();
|
|
const invoiceInId = computed(() => +route.params.id);
|
|
const filter = { where: { invoiceInFk: invoiceInId.value } };
|
|
const columns = computed(() => [
|
|
{
|
|
name: 'code',
|
|
label: t('Code'),
|
|
field: (row) => row.intrastatFk,
|
|
options: intrastats.value,
|
|
model: 'intrastatFk',
|
|
optionValue: 'id',
|
|
optionLabel: (row) => `${row.id}: ${row.description}`,
|
|
sortable: true,
|
|
tabIndex: 1,
|
|
align: 'left',
|
|
},
|
|
{
|
|
name: 'amount',
|
|
label: t('amount'),
|
|
field: (row) => row.amount,
|
|
sortable: true,
|
|
tabIndex: 2,
|
|
align: 'left',
|
|
},
|
|
{
|
|
name: 'net',
|
|
label: t('net'),
|
|
field: (row) => row.net,
|
|
sortable: true,
|
|
tabIndex: 3,
|
|
align: 'left',
|
|
},
|
|
{
|
|
name: 'stems',
|
|
label: t('stems'),
|
|
field: (row) => row.stems,
|
|
sortable: true,
|
|
tabIndex: 4,
|
|
align: 'left',
|
|
},
|
|
{
|
|
name: 'country',
|
|
label: t('country'),
|
|
field: (row) => row.countryFk,
|
|
options: countries.value,
|
|
model: 'countryFk',
|
|
optionValue: 'id',
|
|
optionLabel: 'code',
|
|
sortable: true,
|
|
tabIndex: 5,
|
|
align: 'left',
|
|
},
|
|
]);
|
|
</script>
|
|
<template>
|
|
<FetchData
|
|
url="Countries"
|
|
auto-load
|
|
@on-fetch="(data) => (countries = data)"
|
|
sort-by="name"
|
|
/>
|
|
<FetchData
|
|
url="Intrastats"
|
|
sort-by="id"
|
|
auto-load
|
|
@on-fetch="(data) => (intrastats = data)"
|
|
/>
|
|
<div class="invoiceIn-intrastat">
|
|
<CrudModel
|
|
ref="invoiceInFormRef"
|
|
data-key="InvoiceInIntrastats"
|
|
url="InvoiceInIntrastats"
|
|
auto-load
|
|
:data-required="{ invoiceInFk: invoiceInId }"
|
|
:filter="filter"
|
|
v-model:selected="rowsSelected"
|
|
@on-fetch="(data) => (invoceInIntrastat = data)"
|
|
>
|
|
<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="{ row, col }">
|
|
<QTd>
|
|
<VnInputNumber v-model="row[col.name]" />
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-code="{ row, col }">
|
|
<QTd>
|
|
<VnSelect
|
|
v-model="row[col.model]"
|
|
:options="col.options"
|
|
:option-value="col.optionValue"
|
|
:option-label="col.optionLabel"
|
|
:filter-options="['id', 'description']"
|
|
data-cy="intrastat-code"
|
|
>
|
|
<template #option="scope">
|
|
<QItem v-bind="scope.itemProps">
|
|
{{ `${scope.opt.id}: ${scope.opt.description}` }}
|
|
</QItem>
|
|
</template>
|
|
</VnSelect>
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-country="{ row, col }">
|
|
<QTd>
|
|
<VnSelect
|
|
v-model="row[col.model]"
|
|
:options="col.options"
|
|
:option-value="col.optionValue"
|
|
:option-label="col.optionLabel"
|
|
/>
|
|
</QTd>
|
|
</template>
|
|
<template #bottom-row>
|
|
<QTr class="bg">
|
|
<QTd />
|
|
<QTd />
|
|
<QTd>
|
|
{{ getTotal(rows, 'amount', { currency: 'default' }) }}
|
|
</QTd>
|
|
<QTd>
|
|
{{ getTotal(rows, 'net') }}
|
|
</QTd>
|
|
<QTd>
|
|
{{ getTotal(rows, 'stems', { decimalPlaces: 0 }) }}
|
|
</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>
|
|
<VnSelect
|
|
:label="t('code')"
|
|
class="full-width"
|
|
v-model="props.row['intrastatFk']"
|
|
:options="intrastats"
|
|
option-value="id"
|
|
:option-label="
|
|
(row) => `${row.id}:${row.description}`
|
|
"
|
|
:filter-options="['id', 'description']"
|
|
>
|
|
<template #option="scope">
|
|
<QItem v-bind="scope.itemProps">
|
|
{{
|
|
`${scope.opt.id}: ${scope.opt.description}`
|
|
}}
|
|
</QItem>
|
|
</template>
|
|
</VnSelect>
|
|
</QItem>
|
|
<QItem
|
|
v-for="(value, index) of [
|
|
'amount',
|
|
'net',
|
|
'stems',
|
|
]"
|
|
:key="index"
|
|
>
|
|
<VnInputNumber
|
|
:label="t(value)"
|
|
class="full-width"
|
|
v-model="props.row[value]"
|
|
clearable
|
|
clear-icon="close"
|
|
/>
|
|
</QItem>
|
|
<QItem>
|
|
<VnSelect
|
|
:label="t('country')"
|
|
class="full-width"
|
|
v-model="props.row['countryFk']"
|
|
:options="countries"
|
|
option-value="id"
|
|
option-label="code"
|
|
/>
|
|
</QItem>
|
|
</QList>
|
|
</QCard>
|
|
</div>
|
|
</template>
|
|
</QTable>
|
|
</template>
|
|
</CrudModel>
|
|
</div>
|
|
<QPageSticky position="bottom-right" :offset="[25, 25]">
|
|
<QBtn
|
|
color="primary"
|
|
icon="add"
|
|
shortcut="+"
|
|
size="lg"
|
|
round
|
|
@click="invoiceInFormRef.insert()"
|
|
/>
|
|
</QPageSticky>
|
|
</template>
|
|
<style lang="scss">
|
|
.invoiceIn-intrastat {
|
|
> .q-card {
|
|
.vn-label-value {
|
|
display: flex;
|
|
gap: 1em;
|
|
|
|
.label {
|
|
flex: 1;
|
|
}
|
|
.value {
|
|
flex: 0.5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<i18n>
|
|
en:
|
|
amount: Amount
|
|
net: Net
|
|
stems: Stems
|
|
country: Country
|
|
es:
|
|
Code: Código
|
|
amount: Valor mercancía
|
|
net: Neto
|
|
stems: Tallos
|
|
country: País
|
|
Total amount: Total importe
|
|
Total net: Total neto
|
|
Total stems: Total tallos
|
|
</i18n>
|