salix-front/src/pages/Ticket/Card/TicketTransfer.vue

159 lines
4.0 KiB
Vue

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import VnInput from 'src/components/common/VnInput.vue';
import TicketTransferForm from './TicketTransferForm.vue';
import { toDateFormat } from 'src/filters/date.js';
const emit = defineEmits(['ticketTransfered']);
const $props = defineProps({
mana: {
type: Number,
default: null,
},
newPrice: {
type: Number,
default: 0,
},
transfer: {
type: Object,
default: () => {},
},
ticket: {
type: [Array, Object],
default: () => {},
},
});
onMounted(() => (_transfer.value = $props.transfer));
const { t } = useI18n();
const transferFormRef = ref(null);
const _transfer = ref();
const transferLinesColumns = computed(() => [
{
label: t('ticketList.id'),
name: 'itemFk',
field: 'itemFk',
align: 'left',
},
{
label: t('basicData.item'),
name: 'item',
field: 'concept',
align: 'left',
},
{
label: t('basicData.quantity'),
name: 'quantity',
field: 'quantity',
align: 'left',
},
]);
const destinationTicketColumns = computed(() => [
{
label: t('ticketList.id'),
name: 'id',
field: 'id',
align: 'left',
},
{
label: t('ticketList.shipped'),
name: 'item',
field: 'shipped',
align: 'left',
format: (val) => toDateFormat(val),
},
{
label: t('basicData.agency'),
name: 'agency',
field: 'agencyName',
align: 'left',
},
{
label: t('basicData.address'),
name: 'address',
field: 'address',
align: 'left',
},
]);
const handleRowClick = (row) => {
const ticketId = row.id;
if (transferFormRef.value) {
transferFormRef.value.transferSales(ticketId);
}
};
</script>
<template>
<QTable
:rows="transfer.sales"
:columns="transferLinesColumns"
:title="t('Sales to transfer')"
row-key="id"
:pagination="{ rowsPerPage: 0 }"
class="full-width q-mt-md"
:no-data-label="t('globals.noResults')"
>
<template #body-cell-quantity="{ row }">
<QTd @click.stop>
<VnInput
v-model.number="row.quantity"
:clearable="false"
style="max-width: 60px"
/>
</QTd>
</template>
</QTable>
<QSeparator vertical spaced />
<QTable
v-if="transfer.lastActiveTickets"
:rows="transfer.lastActiveTickets"
:columns="destinationTicketColumns"
:title="t('Destination ticket')"
row-key="id"
class="full-width q-mt-md"
@row-click="(_, row) => handleRowClick(row)"
:no-data-label="t('globals.noResults')"
:pagination="{ rowsPerPage: 0 }"
>
<template #body-cell-address="{ row }">
<QTd @click.stop>
<span>
{{ row.nickname }}
{{ row.name }}
{{ row.street }}
{{ row.postalCode }}
{{ row.city }}
</span>
<QTooltip>
{{ row.nickname }}
{{ row.name }}
{{ row.street }}
{{ row.postalCode }}
{{ row.city }}
</QTooltip>
</QTd>
</template>
<template #no-data>
<TicketTransferForm ref="transferFormRef" v-bind="$props" />
</template>
<template #bottom>
<TicketTransferForm ref="transferFormRef" v-bind="$props" />
</template>
</QTable>
</template>
<style lang="scss">
.q-table__bottom.row.items-center.q-table__bottom--nodata {
border-top: none;
}
</style>
<i18n>
es:
Sales to transfer: Líneas a transferir
Destination ticket: Ticket destinatario
</i18n>