forked from verdnatura/salix-front
510 lines
20 KiB
Vue
510 lines
20 KiB
Vue
<script setup>
|
|
import { onMounted, ref, computed } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import axios from 'axios';
|
|
import { dashIfEmpty, toDate, toCurrency } from 'src/filters';
|
|
import CardSummary from 'components/ui/CardSummary.vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
import FetchedTags from 'components/ui/FetchedTags.vue';
|
|
import InvoiceOutDescriptorProxy from 'pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
|
|
import VnLv from 'src/components/ui/VnLv.vue';
|
|
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
|
|
import { getUrl } from 'src/composables/getUrl';
|
|
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
|
import VnTitle from 'src/components/common/VnTitle.vue';
|
|
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const { t } = useI18n();
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const entityId = computed(() => $props.id || route.params.id);
|
|
|
|
const summaryRef = ref();
|
|
const ticket = ref();
|
|
const salesLines = ref(null);
|
|
const editableStates = ref([]);
|
|
const ticketUrl = ref();
|
|
const grafanaUrl = 'https://grafana.verdnatura.es';
|
|
|
|
onMounted(async () => {
|
|
ticketUrl.value = (await getUrl('ticket/')) + entityId.value + '/';
|
|
});
|
|
async function setData(data) {
|
|
if (data) {
|
|
ticket.value = data;
|
|
salesLines.value = data.sales;
|
|
}
|
|
}
|
|
|
|
function formattedAddress() {
|
|
if (!ticket.value) return '';
|
|
|
|
const address = ticket.value.address;
|
|
const postcode = address.postalCode;
|
|
const province = address.province ? `(${address.province.name})` : '';
|
|
|
|
return `${address.street} - ${postcode} - ${address.city} ${province}`;
|
|
}
|
|
|
|
function isEditable() {
|
|
try {
|
|
return !ticket.value.ticketState?.state?.alertLevel;
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
async function changeState(value) {
|
|
if (!ticket.value.id) return;
|
|
|
|
const formData = {
|
|
ticketFk: ticket.value.id,
|
|
code: value,
|
|
};
|
|
|
|
await axios.post(`Tickets/state`, formData);
|
|
router.go(route.fullPath);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
url="States/editableStates"
|
|
@on-fetch="(data) => (editableStates = data)"
|
|
auto-load
|
|
/>
|
|
<CardSummary
|
|
ref="summaryRef"
|
|
:url="`Tickets/${entityId}/summary`"
|
|
@on-fetch="(data) => setData(data)"
|
|
data-key="TicketSummary"
|
|
>
|
|
<template #header="{ entity }">
|
|
<div>
|
|
Ticket #{{ entity.id }} - {{ entity.client?.name }} ({{
|
|
entity.client?.id
|
|
}}) -
|
|
{{ entity.nickname }}
|
|
</div>
|
|
</template>
|
|
<template #header-right>
|
|
<QBtnDropdown
|
|
side
|
|
top
|
|
color="black"
|
|
text-color="white"
|
|
:label="t('ticket.summary.changeState')"
|
|
:disable="!isEditable()"
|
|
>
|
|
<QList>
|
|
<QVirtualScroll
|
|
style="max-height: 300px"
|
|
:items="editableStates"
|
|
separator
|
|
v-slot="{ item, index }"
|
|
>
|
|
<QItem
|
|
:key="index"
|
|
dense
|
|
clickable
|
|
v-close-popup
|
|
@click="changeState(item.code)"
|
|
>
|
|
<QItemSection>
|
|
<QItemLabel>{{ item.name }}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</QVirtualScroll>
|
|
</QList>
|
|
</QBtnDropdown>
|
|
</template>
|
|
<template #body>
|
|
<QCard class="vn-one">
|
|
<VnTitle
|
|
:url="ticketUrl + 'basic-data/step-one'"
|
|
:text="t('globals.summary.basicData')"
|
|
/>
|
|
<VnLv :label="t('ticket.summary.state')">
|
|
<template #value>
|
|
<QChip :color="ticket.ticketState?.state?.classColor ?? 'dark'">
|
|
{{ ticket.ticketState?.state?.name }}
|
|
</QChip>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('ticket.summary.salesPerson')">
|
|
<template #value>
|
|
<VnUserLink
|
|
:name="ticket.client?.salesPersonUser?.name"
|
|
:worker-id="ticket.client?.salesPersonFk"
|
|
/>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv
|
|
:label="t('ticket.summary.agency')"
|
|
:value="ticket.agencyMode?.name"
|
|
/>
|
|
<VnLv :label="t('ticket.summary.zone')" :value="ticket?.zone?.name" />
|
|
<VnLv
|
|
:label="t('ticket.summary.warehouse')"
|
|
:value="ticket.warehouse?.name"
|
|
/>
|
|
<VnLv
|
|
:label="t('ticket.summary.collection')"
|
|
:value="ticket.ticketCollections[0]?.collectionFk"
|
|
>
|
|
<template #value>
|
|
<a
|
|
:href="`${grafanaUrl}/d/d552ab74-85b4-4e7f-a279-fab7cd9c6124/control-de-expediciones?orgId=1&var-collectionFk=${ticket.ticketCollections[0]?.collectionFk}`"
|
|
target="_blank"
|
|
class="grafana"
|
|
>
|
|
{{ ticket.ticketCollections[0]?.collectionFk }}
|
|
</a>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('ticket.summary.route')" :value="ticket.routeFk" />
|
|
<VnLv :label="t('ticket.summary.invoice')">
|
|
<template #value>
|
|
<span :class="{ link: ticket.refFk }">
|
|
{{ dashIfEmpty(ticket.refFk) }}
|
|
<InvoiceOutDescriptorProxy
|
|
:id="ticket.id"
|
|
v-if="ticket.refFk"
|
|
/>
|
|
</span>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv
|
|
:label="t('ticket.summary.weight')"
|
|
:value="dashIfEmpty(ticket.weight)"
|
|
/>
|
|
</QCard>
|
|
<QCard class="vn-one">
|
|
<VnTitle
|
|
:url="ticketUrl + 'basic-data/step-one'"
|
|
:text="t('globals.summary.basicData')"
|
|
/>
|
|
<VnLv
|
|
:label="t('ticket.summary.shipped')"
|
|
:value="toDate(ticket.shipped)"
|
|
/>
|
|
<VnLv
|
|
:label="t('ticket.summary.landed')"
|
|
:value="toDate(ticket.landed)"
|
|
/>
|
|
<VnLv :label="t('globals.packages')" :value="ticket.packages" />
|
|
<VnLv :value="ticket.address.phone">
|
|
<template #label>
|
|
{{ t('ticket.summary.consigneePhone') }}
|
|
<VnLinkPhone :phone-number="ticket.address.phone" />
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :value="ticket.address.mobile">
|
|
<template #label>
|
|
{{ t('ticket.summary.consigneeMobile') }}
|
|
<VnLinkPhone :phone-number="ticket.address.mobile" />
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :value="ticket.client.phone">
|
|
<template #label>
|
|
{{ t('ticket.summary.clientPhone') }}
|
|
<VnLinkPhone :phone-number="ticket.client.phone" />
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :value="ticket.client.mobile">
|
|
<template #label>
|
|
{{ t('ticket.summary.clientMobile') }}
|
|
<VnLinkPhone :phone-number="ticket.client.mobile" />
|
|
</template>
|
|
</VnLv>
|
|
<VnLv
|
|
:label="t('ticket.summary.consignee')"
|
|
:value="formattedAddress()"
|
|
/>
|
|
</QCard>
|
|
<QCard class="vn-one" v-if="ticket.notes.length">
|
|
<VnTitle
|
|
:url="ticketUrl + 'observation'"
|
|
:text="t('ticket.pageTitles.notes')"
|
|
/>
|
|
<VnLv
|
|
v-for="note in ticket.notes"
|
|
:key="note.id"
|
|
:label="note.observationType.description"
|
|
:value="note.description"
|
|
>
|
|
<template #value>
|
|
<QInput
|
|
v-model="note.description"
|
|
filled
|
|
type="textarea"
|
|
class="notes"
|
|
readonly
|
|
/>
|
|
</template>
|
|
</VnLv>
|
|
</QCard>
|
|
<QCard class="vn-one">
|
|
<VnTitle :text="t('ticket.summary.summaryAmount')" />
|
|
<div class="bodyCard">
|
|
<VnLv
|
|
:label="t('ticket.summary.subtotal')"
|
|
:value="toCurrency(ticket.totalWithoutVat)"
|
|
/>
|
|
<VnLv
|
|
:label="t('ticket.summary.vat')"
|
|
:value="toCurrency(ticket.totalWithVat - ticket.totalWithoutVat)"
|
|
/>
|
|
<VnLv
|
|
:label="t('ticket.summary.total')"
|
|
:value="toCurrency(ticket.totalWithVat)"
|
|
/>
|
|
</div>
|
|
</QCard>
|
|
<QCard class="vn-max">
|
|
<VnTitle
|
|
:url="ticketUrl + 'sale'"
|
|
:text="t('ticket.summary.saleLines')"
|
|
/>
|
|
<QTable :rows="ticket.sales" style="text-align: center">
|
|
<template #body-cell="{ value }">
|
|
<QTd>{{ value }}</QTd>
|
|
</template>
|
|
<template #header="props">
|
|
<QTr class="tr-header" :props="props">
|
|
<QTh auto-width></QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.item') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.visible') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.available') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.quantity') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.description') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.discount') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.amount') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.packing') }}</QTh>
|
|
</QTr>
|
|
</template>
|
|
<template #body="props">
|
|
<QTr :props="props">
|
|
<QTd>
|
|
<QBtn
|
|
flat
|
|
round
|
|
size="xs"
|
|
icon="vn:claims"
|
|
v-if="props.row.claim"
|
|
color="primary"
|
|
:to="{
|
|
name: 'ClaimCard',
|
|
params: {
|
|
id: props.row.claim.claimFk,
|
|
},
|
|
}"
|
|
>
|
|
<QTooltip
|
|
>{{ t('ticket.summary.claim') }}:
|
|
{{ props.row.claim.claimFk }}</QTooltip
|
|
>
|
|
</QBtn>
|
|
<QBtn
|
|
flat
|
|
round
|
|
size="xs"
|
|
icon="vn:claims"
|
|
v-if="props.row.claimBeginning"
|
|
color="primary"
|
|
:to="{
|
|
name: 'ClaimCard',
|
|
params: {
|
|
id: props.row.claimBeginning.claimFk,
|
|
},
|
|
}"
|
|
>
|
|
<QTooltip
|
|
>{{ t('ticket.summary.claim') }}:
|
|
{{ props.row.claimBeginning.claimFk }}</QTooltip
|
|
>
|
|
</QBtn>
|
|
<QIcon
|
|
name="warning"
|
|
v-show="props.row.visible < 0"
|
|
size="xs"
|
|
color="primary"
|
|
>
|
|
<QTooltip
|
|
>{{ t('ticket.summary.visible') }}:
|
|
{{ props.row.visible }}</QTooltip
|
|
>
|
|
</QIcon>
|
|
<QIcon
|
|
name="vn:reserva"
|
|
v-show="props.row.reserved"
|
|
size="xs"
|
|
color="primary"
|
|
>
|
|
<QTooltip>
|
|
{{ t('ticket.summary.reserved') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
<QIcon
|
|
name="vn:unavailable"
|
|
v-show="props.row.itemShortage"
|
|
size="xs"
|
|
color="primary"
|
|
>
|
|
<QTooltip>
|
|
{{ t('ticket.summary.itemShortage') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
<QIcon
|
|
name="vn:components"
|
|
v-show="props.row.hasComponentLack"
|
|
size="xs"
|
|
color="primary"
|
|
>
|
|
<QTooltip>
|
|
{{ t('ticket.summary.hasComponentLack') }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</QTd>
|
|
<QTd>
|
|
<QBtn class="link" flat>
|
|
{{ props.row.itemFk }}
|
|
<ItemDescriptorProxy :id="props.row.itemFk" />
|
|
</QBtn>
|
|
</QTd>
|
|
<QTd>{{ props.row.visible }}</QTd>
|
|
<QTd>{{ props.row.available }}</QTd>
|
|
<QTd>{{ props.row.quantity }}</QTd>
|
|
<QTd class="description-cell">
|
|
<div class="row full-width justify-between">
|
|
{{ props.row.item.name }}
|
|
<div v-if="props.row.item.subName" class="subName">
|
|
{{ props.row.item.subName.toUpperCase() }}
|
|
</div>
|
|
</div>
|
|
<FetchedTags
|
|
class="fetched-tags"
|
|
:item="props.row.item"
|
|
:max-length="5"
|
|
></FetchedTags>
|
|
</QTd>
|
|
<QTd>{{ props.row.price }} €</QTd>
|
|
<QTd>{{ props.row.discount }} %</QTd>
|
|
<QTd
|
|
>{{
|
|
toCurrency(
|
|
props.row.quantity *
|
|
props.row.price *
|
|
((100 - props.row.discount) / 100)
|
|
)
|
|
}}
|
|
</QTd>
|
|
<QTd>{{ dashIfEmpty(props.row.item.itemPackingTypeFk) }}</QTd>
|
|
</QTr>
|
|
</template>
|
|
</QTable>
|
|
</QCard>
|
|
<QCard
|
|
class="vn-max"
|
|
v-if="ticket.packagings.length > 0 || ticket.services.length > 0"
|
|
>
|
|
<VnTitle :url="ticketUrl + 'package'" :text="t('globals.packages')" />
|
|
<QTable :rows="ticket.packagings" flat>
|
|
<template #header="props">
|
|
<QTr :props="props">
|
|
<QTh auto-width>{{ t('ticket.summary.created') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.package') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.quantity') }}</QTh>
|
|
</QTr>
|
|
</template>
|
|
<template #body="props">
|
|
<QTr :props="props">
|
|
<QTd>{{ toDate(props.row.created) }}</QTd>
|
|
<QTd>{{ props.row.packaging.item.name }}</QTd>
|
|
<QTd>{{ props.row.quantity }}</QTd>
|
|
</QTr>
|
|
</template>
|
|
</QTable>
|
|
<VnTitle
|
|
:url="ticketUrl + 'service'"
|
|
:text="t('ticket.summary.service')"
|
|
/>
|
|
<QTable :rows="ticket.services" flat>
|
|
<template #header="props">
|
|
<QTr :props="props">
|
|
<QTh auto-width>{{ t('ticket.summary.quantity') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.description') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.taxClass') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.amount') }}</QTh>
|
|
</QTr>
|
|
</template>
|
|
<template #body="props">
|
|
<QTr :props="props">
|
|
<QTd>{{ props.row.quantity }}</QTd>
|
|
<QTd>{{ props.row.description }}</QTd>
|
|
<QTd>{{ toCurrency(props.row.price) }}</QTd>
|
|
<QTd>{{ props.row.taxClass.description }}</QTd>
|
|
<QTd>{{
|
|
toCurrency(props.row.quantity * props.row.price)
|
|
}}</QTd>
|
|
</QTr>
|
|
</template>
|
|
</QTable>
|
|
</QCard>
|
|
</template>
|
|
</CardSummary>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.notes {
|
|
width: max-content;
|
|
}
|
|
|
|
.q-card.q-card--dark.q-dark.vn-one {
|
|
& > .bodyCard {
|
|
padding: 1%;
|
|
}
|
|
}
|
|
.q-table {
|
|
tr,
|
|
th,
|
|
.q-td {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
}
|
|
|
|
.subName {
|
|
margin-left: 10%;
|
|
}
|
|
|
|
.tr-header,
|
|
.subName {
|
|
color: var(--vn-label-color);
|
|
}
|
|
|
|
.description-cell {
|
|
width: 25%;
|
|
}
|
|
|
|
.fetched-tags {
|
|
max-width: 70%;
|
|
}
|
|
.grafana {
|
|
color: $primary-light;
|
|
}
|
|
</style>
|