274 lines
9.2 KiB
Vue
274 lines
9.2 KiB
Vue
<script setup>
|
|
import { computed, } from 'vue';
|
|
import { toDate, toPercentage, } from 'filters/index';
|
|
|
|
import { useDialogPluginComponent } from 'quasar';
|
|
import { useI18n } from 'vue-i18n';
|
|
const { t } = useI18n();
|
|
// const quasar = useQuasar();
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
name: 'Id',
|
|
label: t('Id item'),
|
|
field: (row) => row.itemFk,
|
|
},
|
|
{
|
|
name: 'ticket',
|
|
label: t('Ticket'),
|
|
field: (row) => row.ticketFk,
|
|
align: 'center',
|
|
},
|
|
{
|
|
name: 'destination',
|
|
label: t('Destination'),
|
|
field: (row) => row.claimDestinationFk,
|
|
align: 'left',
|
|
},
|
|
{
|
|
name: 'Landed',
|
|
label: t('Landed'),
|
|
field: (row) => toDate(row.landed),
|
|
},
|
|
{
|
|
name: 'quantity',
|
|
label: t('Quantity'),
|
|
field: (row) => row.quantity,
|
|
},
|
|
{
|
|
name: 'concept',
|
|
label: t('Description'),
|
|
field: (row) => row.concept,
|
|
align: 'left',
|
|
},
|
|
{
|
|
name: 'price',
|
|
label: t('Price'),
|
|
field: (row) => row.price,
|
|
format: (value) => value,
|
|
align: 'center',
|
|
},
|
|
{
|
|
name: 'discount',
|
|
label: t('Discount'),
|
|
field: (row) => row.discount,
|
|
format: (value) => toPercentage(value / 100),
|
|
align: 'left',
|
|
},
|
|
{
|
|
name: 'total',
|
|
label: t('Total'),
|
|
field: (row) => row.total,
|
|
format: (value) => value,
|
|
align: 'center',
|
|
},
|
|
{
|
|
name: 'delete',
|
|
},
|
|
]);
|
|
|
|
|
|
|
|
defineEmits([...useDialogPluginComponent.emits]);
|
|
|
|
const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
|
</script>
|
|
|
|
<template>
|
|
<QDialog ref="dialogRef" @hide="onDialogHide">
|
|
<CrudModel
|
|
v-if="claim"
|
|
data-key="ClaimEnds"
|
|
url="ClaimEnds/filter"
|
|
save-url="ClaimEnds/crud"
|
|
ref="claimActionsForm"
|
|
v-model:selected="selectedRows"
|
|
:filter="{ where: { claimFk: claimId } }"
|
|
:default-remove="true"
|
|
:default-save="false"
|
|
:default-reset="false"
|
|
@on-fetch="setData"
|
|
auto-load
|
|
>
|
|
<template #body>
|
|
<QTable
|
|
:columns="columns"
|
|
:rows="rows"
|
|
:dense="$q.screen.lt.md"
|
|
row-key="id"
|
|
selection="multiple"
|
|
v-model:selected="selectedRows"
|
|
:grid="$q.screen.lt.md"
|
|
:pagination="{ rowsPerPage: 0 }"
|
|
:hide-bottom="true"
|
|
>
|
|
<template #body-cell-ticket="{ value }">
|
|
<QTd align="center">
|
|
<span class="link">
|
|
{{ value }}
|
|
<TicketDescriptorProxy :id="value" />
|
|
</span>
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-destination="{ row }">
|
|
<QTd>
|
|
<VnSelectFilter
|
|
v-model="row.claimDestinationFk"
|
|
:options="destinationTypes"
|
|
option-label="description"
|
|
option-value="id"
|
|
:autofocus="true"
|
|
dense
|
|
input-debounce="0"
|
|
hide-selected
|
|
@update:model-value="(value) => updateDestination(value, row)"
|
|
/>
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-price="{ value }">
|
|
<QTd align="center">
|
|
{{ toCurrency(value) }}
|
|
</QTd>
|
|
</template>
|
|
<template #body-cell-total="{ value }">
|
|
<QTd align="center">
|
|
{{ toCurrency(value) }}
|
|
</QTd>
|
|
</template>
|
|
<!-- View for grid mode -->
|
|
<template #item="props">
|
|
<div class="q-mb-md col-12 grid-style-transition">
|
|
<QCard>
|
|
<QCardSection class="row justify-between">
|
|
<QCheckbox v-model="props.selected" />
|
|
<QBtn color="primary" icon="delete" flat round />
|
|
</QCardSection>
|
|
|
|
<QSeparator inset />
|
|
<QList dense>
|
|
<QItem v-for="column of props.cols" :key="column.name">
|
|
<QItemSection>
|
|
<QItemLabel caption>
|
|
{{ column.label }}
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
<QItemSection side>
|
|
<QItemLabel v-if="column.name === 'destination'">
|
|
<VnSelectFilter
|
|
v-model="props.row.claimDestinationFk"
|
|
:options="destinationTypes"
|
|
option-label="description"
|
|
option-value="id"
|
|
:autofocus="true"
|
|
dense
|
|
input-debounce="0"
|
|
hide-selected
|
|
@update:model-value="
|
|
(value) =>
|
|
updateDestination(
|
|
value,
|
|
props.row
|
|
)
|
|
"
|
|
/>
|
|
</QItemLabel>
|
|
<QItemLabel v-else>
|
|
{{ column.value }}
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</QList>
|
|
</QCard>
|
|
</div>
|
|
</template>
|
|
</QTable>
|
|
</template>
|
|
<template #moreBeforeActions>
|
|
<QBtn
|
|
color="primary"
|
|
text-color="white"
|
|
:unelevated="true"
|
|
:label="tMobile('Regularize')"
|
|
:title="t('Regularize')"
|
|
icon="check"
|
|
@click="regularizeClaim"
|
|
:disable="claim.claimStateFk == resolvedStateId"
|
|
/>
|
|
|
|
<QBtn
|
|
color="primary"
|
|
text-color="white"
|
|
:unelevated="true"
|
|
:disable="!selectedRows.length"
|
|
:label="tMobile('Change destination')"
|
|
:title="t('Change destination')"
|
|
icon="swap_horiz"
|
|
@click="dialogDestination = !dialogDestination"
|
|
/>
|
|
<QBtn
|
|
color="primary"
|
|
text-color="white"
|
|
:unelevated="true"
|
|
:label="tMobile('Import claim')"
|
|
:title="t('Import claim')"
|
|
icon="Upload"
|
|
@click="importToNewRefundTicket"
|
|
:disable="claim.claimStateFk == resolvedStateId"
|
|
/>
|
|
</template>
|
|
</CrudModel>
|
|
<QDialog v-model="dialogDestination">
|
|
<QCard>
|
|
<QCardSection>
|
|
<QItem class="q-pa-sm">
|
|
<span class="q-dialog__title text-white">
|
|
{{ t('dialog title') }}
|
|
</span>
|
|
<QBtn icon="close" flat round dense v-close-popup />
|
|
</QItem>
|
|
</QCardSection>
|
|
<QItemSection>
|
|
<VnSelectFilter
|
|
class="q-pa-sm"
|
|
v-model="claimDestinationFk"
|
|
:options="destinationTypes"
|
|
option-label="description"
|
|
option-value="id"
|
|
:autofocus="true"
|
|
dense
|
|
input-debounce="0"
|
|
hide-selected
|
|
/>
|
|
</QItemSection>
|
|
<QCardActions class="justify-end q-mr-sm">
|
|
<QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
|
|
<QBtn
|
|
:disable="!claimDestinationFk"
|
|
:label="t('globals.save')"
|
|
color="primary"
|
|
v-close-popup
|
|
@click="updateDestinations(claimDestinationFk)"
|
|
/>
|
|
</QCardActions>
|
|
</QCard>
|
|
</QDialog>
|
|
|
|
</QDialog>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.q-dialog .summary .header {
|
|
position: sticky;
|
|
z-index: $z-max;
|
|
top: 0;
|
|
}
|
|
</style>
|