565 lines
24 KiB
Vue
565 lines
24 KiB
Vue
<script setup>
|
|
import RouteDescriptorProxy from 'pages/Route/Card/RouteDescriptorProxy.vue';
|
|
import { onMounted, ref, computed } from 'vue';
|
|
import { useRoute } 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 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 useNotify from 'src/composables/useNotify.js';
|
|
import { useArrayData } from 'composables/useArrayData';
|
|
import VnTitle from 'src/components/common/VnTitle.vue';
|
|
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
|
import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/DepartmentDescriptorProxy.vue';
|
|
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
import VnToSummary from 'src/components/ui/VnToSummary.vue';
|
|
import TicketDescriptorMenu from './TicketDescriptorMenu.vue';
|
|
import VnCurrency from 'src/components/ui/VnCurrency.vue';
|
|
import TicketProblems from 'src/components/TicketProblems.vue';
|
|
import VnDropdown from 'src/components/common/VnDropdown.vue';
|
|
|
|
const route = useRoute();
|
|
const { notify } = useNotify();
|
|
const { t } = useI18n();
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const entityId = computed(() => $props.id || route.params.id);
|
|
|
|
const summary = ref();
|
|
const ticket = computed(() => summary.value?.entity);
|
|
const editableStates = ref([]);
|
|
const ticketUrl = ref();
|
|
const grafanaUrl = 'https://grafana.verdnatura.es';
|
|
|
|
const descriptorData = useArrayData('Ticket');
|
|
|
|
onMounted(async () => {
|
|
ticketUrl.value = (await getUrl('ticket/')) + entityId.value + '/';
|
|
});
|
|
const formattedAddress = computed(() => {
|
|
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) {
|
|
const formData = {
|
|
ticketFk: entityId.value,
|
|
code: value,
|
|
};
|
|
await axios.post(`Tickets/state`, formData);
|
|
notify('globals.dataSaved', 'positive');
|
|
summary.value?.fetch();
|
|
descriptorData.fetch({});
|
|
}
|
|
|
|
function toTicketUrl(section) {
|
|
return '#/ticket/' + entityId.value + '/' + section;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const filter = { fields: ['code', 'name', 'id', 'alertLevel'] };
|
|
const params = { filter: JSON.stringify(filter) };
|
|
editableStates.value = (await axios.get('States/editableStates', { params }))?.data;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<CardSummary
|
|
ref="summary"
|
|
:url="`Tickets/${entityId}/summary`"
|
|
data-key="TicketSummary"
|
|
v-bind="$attrs.width"
|
|
>
|
|
<template #header-left>
|
|
<VnToSummary
|
|
v-if="route?.name !== 'TicketSummary'"
|
|
:route-name="'TicketSummary'"
|
|
:entity-id="entityId"
|
|
:url="ticketUrl"
|
|
/>
|
|
</template>
|
|
<template #header="{ entity }">
|
|
<div>
|
|
Ticket #{{ entity.id }} - {{ entity.client?.name }} ({{
|
|
entity.client?.id
|
|
}}) -
|
|
{{ entity.nickname }}
|
|
</div>
|
|
</template>
|
|
<template #header-right>
|
|
<VnDropdown
|
|
:disable="!isEditable()"
|
|
:options="editableStates"
|
|
option-value="code"
|
|
@change-state="changeState"
|
|
/>
|
|
</template>
|
|
<template #menu="{ entity }">
|
|
<TicketDescriptorMenu :ticket="entity" />
|
|
</template>
|
|
<template #body="{ entity }">
|
|
<QCard class="vn-two">
|
|
<VnTitle
|
|
:url="toTicketUrl('basic-data')"
|
|
:text="t('globals.summary.basicData')"
|
|
/>
|
|
<div class="vn-card-group">
|
|
<div class="vn-card-content">
|
|
<VnLv v-if="entity.ticketState" :label="t('globals.state')">
|
|
<template #value>
|
|
<QBadge
|
|
text-color="black"
|
|
:color="entity.ticketState.state.classColor"
|
|
>
|
|
{{ entity.ticketState.state.name }}
|
|
</QBadge>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('customer.summary.team')">
|
|
<template #value>
|
|
<span class="link">
|
|
{{ entity?.client?.department?.name || '-' }}
|
|
<DepartmentDescriptorProxy
|
|
:id="entity?.client?.departmentFk"
|
|
/>
|
|
</span>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv
|
|
:label="t('globals.agency')"
|
|
:value="entity.agencyMode?.name"
|
|
/>
|
|
<VnLv :label="t('ticket.summary.zone')">
|
|
<template #value>
|
|
<span class="link" @click.stop>
|
|
{{ entity?.zone?.name }}
|
|
<ZoneDescriptorProxy :id="entity.zoneFk" />
|
|
</span>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv
|
|
:label="t('globals.warehouse')"
|
|
:value="entity.warehouse?.name"
|
|
/>
|
|
<VnLv
|
|
v-if="ticket?.ticketCollections?.length > 0"
|
|
: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=${entity.ticketCollections[0]?.collectionFk}`"
|
|
target="_blank"
|
|
class="grafana"
|
|
>
|
|
{{ entity.ticketCollections[0]?.collectionFk }}
|
|
</a>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('ticket.summary.route')">
|
|
<template #value>
|
|
<span class="link">
|
|
{{ entity.routeFk }}
|
|
<RouteDescriptorProxy :id="entity.routeFk" />
|
|
</span>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('ticket.summary.invoice')">
|
|
<template #value>
|
|
<span :class="{ link: entity.refFk }">
|
|
{{ dashIfEmpty(entity.refFk) }}
|
|
<InvoiceOutDescriptorProxy
|
|
:id="entity.invoiceOut.id"
|
|
v-if="entity.refFk"
|
|
/>
|
|
</span>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv
|
|
:label="t('globals.weight')"
|
|
:value="dashIfEmpty(entity.weight)"
|
|
/>
|
|
</div>
|
|
<div class="vn-card-content">
|
|
<VnLv
|
|
:label="t('ticket.summary.shipped')"
|
|
:value="toDate(entity.shipped)"
|
|
/>
|
|
<VnLv
|
|
:label="t('globals.landed')"
|
|
:value="toDate(entity.landed)"
|
|
/>
|
|
<VnLv :label="t('globals.packages')" :value="entity.packages" />
|
|
<VnLv :label="t('ticket.summary.consigneePhone')">
|
|
<template #value>
|
|
<VnLinkPhone :phone-number="entity.address.phone" />
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('ticket.summary.consigneeMobile')">
|
|
<template #value>
|
|
<VnLinkPhone :phone-number="entity.address.mobile" />
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('ticket.summary.clientPhone')">
|
|
<template #value>
|
|
<VnLinkPhone :phone-number="entity.client.phone" />
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('ticket.summary.clientMobile')">
|
|
<template #value>
|
|
<VnLinkPhone :phone-number="entity.client.mobile" />
|
|
</template>
|
|
</VnLv>
|
|
<VnLv
|
|
:label="t('ticket.summary.consignee')"
|
|
:value="`${entity.address?.nickname} #${entity.address?.id}`"
|
|
/>
|
|
<VnLv
|
|
:label="t('ticket.summary.consigneeStreet')"
|
|
:value="formattedAddress"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</QCard>
|
|
<QCard class="vn-one" v-if="entity.notes.length">
|
|
<VnTitle
|
|
:url="toTicketUrl('observation')"
|
|
:text="t('globals.pageTitles.notes')"
|
|
/>
|
|
<QVirtualScroll
|
|
:items="entity.notes"
|
|
v-slot="{ item, index }"
|
|
style="max-height: 300px"
|
|
separator
|
|
>
|
|
<QItem
|
|
:key="index"
|
|
class="vn-label-value"
|
|
style="
|
|
display: inline-block;
|
|
padding: unset;
|
|
min-height: max-content;
|
|
"
|
|
>
|
|
<span class="label" style="margin-right: 4px">
|
|
({{ item.observationType.description }}):
|
|
</span>
|
|
<span>{{ item.description }}</span>
|
|
</QItem>
|
|
</QVirtualScroll>
|
|
</QCard>
|
|
<QCard class="vn-one">
|
|
<VnTitle :text="t('ticket.summary.summaryAmount')" />
|
|
<div class="bodyCard">
|
|
<VnLv :label="t('globals.subtotal')">
|
|
<template #value>
|
|
<VnCurrency
|
|
:model="entity"
|
|
:currency-code="entity.currency.code"
|
|
local-field="totalWithoutVat"
|
|
/>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('globals.vat')">
|
|
<template #value>
|
|
<VnCurrency
|
|
:model="{
|
|
vat: entity.totalWithVat - entity.totalWithoutVat,
|
|
foreignVat:
|
|
entity.foreignTotalWithVat -
|
|
entity.foreignTotalWithoutVat,
|
|
}"
|
|
:currency-code="entity.currency.code"
|
|
local-field="vat"
|
|
/>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('ticket.summary.total')" style="font-weight: bold">
|
|
<template #value>
|
|
<VnCurrency
|
|
:model="entity"
|
|
:currency-code="entity.currency.code"
|
|
local-field="totalWithVat"
|
|
/>
|
|
</template>
|
|
</VnLv>
|
|
</div>
|
|
</QCard>
|
|
<QCard class="vn-max">
|
|
<VnTitle
|
|
:url="toTicketUrl('sale')"
|
|
:text="t('ticket.summary.saleLines')"
|
|
/>
|
|
<QTable :rows="entity.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('globals.item') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.visible') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.available') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.quantity') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.description') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.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 class="q-gutter-x-xs">
|
|
<TicketProblems :row="props.row" />
|
|
</QTd>
|
|
<QTd>
|
|
<QBtn class="link" flat>
|
|
{{ props.row.itemFk }}
|
|
<ItemDescriptorProxy
|
|
:id="props.row.itemFk"
|
|
:sale-fk="props.row.id"
|
|
:warehouse-fk="ticket.warehouseFk"
|
|
/>
|
|
</QBtn>
|
|
</QTd>
|
|
<QTd>
|
|
<QChip
|
|
v-if="props.row.visible < 0"
|
|
dense
|
|
rounded
|
|
:color="'negative'"
|
|
text-color="white"
|
|
>
|
|
{{ props.row.visible }}
|
|
</QChip>
|
|
<span v-else>
|
|
{{ props.row.visible }}
|
|
</span>
|
|
</QTd>
|
|
<QTd>
|
|
<QChip
|
|
v-if="props.row.available < 0"
|
|
dense
|
|
rounded
|
|
:color="'negative'"
|
|
text-color="white"
|
|
>
|
|
{{ props.row.available }}
|
|
</QChip>
|
|
<span v-else>
|
|
{{ props.row.available }}
|
|
</span>
|
|
</QTd>
|
|
<QTd>{{ props.row.quantity }}</QTd>
|
|
<QTd class="description-cell">
|
|
<div class="row full-width justify-between">
|
|
{{ props.row.concept }}
|
|
<div v-if="props.row.item.subName" class="subName">
|
|
{{ props.row.item.subName.toUpperCase() }}
|
|
</div>
|
|
</div>
|
|
<FetchedTags
|
|
class="fetched-tags"
|
|
:item="props.row.item"
|
|
></FetchedTags>
|
|
</QTd>
|
|
<QTd>
|
|
<VnCurrency
|
|
:model="props.row"
|
|
:currency-code="entity.currency.code"
|
|
/>
|
|
</QTd>
|
|
<QTd>{{ props.row.discount }} %</QTd>
|
|
<QTd>
|
|
<VnCurrency
|
|
:model="{
|
|
amount:
|
|
props.row.quantity *
|
|
props.row.price *
|
|
((100 - props.row.discount) / 100),
|
|
foreignAmount:
|
|
props.row.quantity *
|
|
props.row.foreignPrice *
|
|
((100 - props.row.discount) / 100),
|
|
}"
|
|
local-field="amount"
|
|
:currency-code="entity.currency.code"
|
|
/>
|
|
</QTd>
|
|
<QTd>{{ dashIfEmpty(props.row.item.itemPackingTypeFk) }}</QTd>
|
|
</QTr>
|
|
</template>
|
|
</QTable>
|
|
</QCard>
|
|
<QCard class="vn-max" v-if="ticket.packagings.length != 0">
|
|
<VnTitle :url="toTicketUrl('package')" :text="t('globals.packages')" />
|
|
<QTable :rows="ticket.packagings" flat style="text-align: center">
|
|
<template #header="props">
|
|
<QTr class="tr-header" :props="props">
|
|
<QTh auto-width>{{ t('globals.created') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.package') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.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>
|
|
</QCard>
|
|
<QCard class="vn-max" v-if="ticket.services.length != 0">
|
|
<VnTitle
|
|
:url="toTicketUrl('service')"
|
|
:text="t('ticket.summary.service')"
|
|
/>
|
|
<QTable :rows="ticket.services" flat style="text-align: center">
|
|
<template #header="props">
|
|
<QTr class="tr-header" :props="props">
|
|
<QTh auto-width>{{ t('globals.quantity') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.description') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.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>
|
|
<VnCurrency
|
|
:model="props.row"
|
|
:currency-code="entity.currency.code"
|
|
/>
|
|
</QTd>
|
|
<QTd>{{ props.row.taxClass.description }}</QTd>
|
|
<QTd>{{
|
|
toCurrency(props.row.quantity * props.row.price)
|
|
}}</QTd>
|
|
</QTr>
|
|
</template>
|
|
</QTable>
|
|
</QCard>
|
|
<QCard class="vn-max" v-if="ticket.requests.length != 0">
|
|
<VnTitle
|
|
:url="toTicketUrl('request')"
|
|
:text="t('ticket.summary.purchaseRequest')"
|
|
/>
|
|
<QTable :rows="ticket.requests" flat style="text-align: center">
|
|
<template #header="props">
|
|
<QTr class="tr-header" :props="props">
|
|
<QTh auto-width>{{ t('globals.description') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.created') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.requester') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.attender') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.quantity') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.price') }}</QTh>
|
|
<QTh auto-width>{{ t('globals.item') }}</QTh>
|
|
<QTh auto-width>{{ t('ticket.summary.ok') }}</QTh>
|
|
</QTr>
|
|
</template>
|
|
<template #body="props">
|
|
<QTr :props="props">
|
|
<QTd>{{ props.row.description }}</QTd>
|
|
<QTd>{{ toDate(props.row.created) }}</QTd>
|
|
<QTd>{{ props.row.requester?.user?.username }}</QTd>
|
|
<QTd>{{ props.row.atender?.user?.username }}</QTd>
|
|
<QTd>{{ props.row.quantity }}</QTd>
|
|
<QTd>{{ toCurrency(props.row.price) }}</QTd>
|
|
<QTd>
|
|
<span class="link" v-if="props.row.isOk">
|
|
{{ props.row.itemFk }}
|
|
<ItemDescriptorProxy :id="props.row.itemFk" />
|
|
</span>
|
|
</QTd>
|
|
<QTd>
|
|
<QCheckbox
|
|
v-model="props.row.isOk"
|
|
disable
|
|
:toggle-indeterminate="false"
|
|
>
|
|
<QTooltip v-if="props.row.isOk">
|
|
{{ t('Accepted') }}
|
|
</QTooltip>
|
|
<QTooltip v-else>
|
|
{{ t('Denied') }}
|
|
</QTooltip>
|
|
</QCheckbox>
|
|
</QTd>
|
|
</QTr>
|
|
</template>
|
|
</QTable>
|
|
</QCard>
|
|
</template>
|
|
</CardSummary>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.notes {
|
|
width: fit-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>
|