500 lines
16 KiB
Vue
500 lines
16 KiB
Vue
<script setup>
|
|
import axios from 'axios';
|
|
import { ref, computed } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { toDate, toCurrency } from 'src/filters';
|
|
import dashIfEmpty from 'src/filters/dashIfEmpty';
|
|
import { useSession } from 'src/composables/useSession';
|
|
|
|
import VnLv from 'src/components/ui/VnLv.vue';
|
|
import VnUserLink from 'src/components/ui/VnUserLink.vue';
|
|
import VnTitle from 'src/components/common/VnTitle.vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
import CardSummary from 'components/ui/CardSummary.vue';
|
|
|
|
import ClaimSummaryAction from 'src/pages/Claim/Card/ClaimSummaryAction.vue';
|
|
import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
|
|
|
|
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
|
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
|
|
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
|
import ClaimDescriptorMenu from './ClaimDescriptorMenu.vue';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const { t } = useI18n();
|
|
const { getTokenMultimedia } = useSession();
|
|
const token = getTokenMultimedia();
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const entityId = computed(() => $props.id || route.params.id);
|
|
const ClaimStates = ref([]);
|
|
const claimDmsRef = ref();
|
|
const claimDms = ref([]);
|
|
const multimediaDialog = ref();
|
|
const multimediaSlide = ref();
|
|
const claimDmsFilter = ref({
|
|
include: [
|
|
{
|
|
relation: 'dms',
|
|
},
|
|
],
|
|
});
|
|
|
|
const detailsColumns = ref([
|
|
{
|
|
name: 'item',
|
|
label: 'claim.item',
|
|
field: (row) => row.sale.itemFk,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'landed',
|
|
label: 'claim.landed',
|
|
field: (row) => row.sale.ticket.landed,
|
|
format: (value) => toDate(value),
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'quantity',
|
|
label: 'claim.quantity',
|
|
field: (row) => row.sale.quantity,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'claimed',
|
|
label: 'claim.claimed',
|
|
field: (row) => row.quantity,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'description',
|
|
label: 'globals.description',
|
|
field: (row) => row.sale.concept,
|
|
},
|
|
{
|
|
name: 'price',
|
|
label: 'claim.price',
|
|
field: (row) => row.sale.price,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'discount',
|
|
label: 'claim.discount',
|
|
field: (row) => row.sale.discount,
|
|
format: (value) => `${value} %`,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'total',
|
|
label: 'claim.total',
|
|
field: (row) =>
|
|
toCurrency(row.quantity * row.sale.price * ((100 - row.sale.discount) / 100)),
|
|
sortable: true,
|
|
},
|
|
]);
|
|
|
|
const markerLabels = [
|
|
{ value: 1, label: t('claim.company') },
|
|
{ value: 5, label: t('claim.person') },
|
|
];
|
|
|
|
const STATE_COLOR = {
|
|
pending: 'warning',
|
|
incomplete: 'info',
|
|
resolved: 'positive',
|
|
canceled: 'negative',
|
|
};
|
|
|
|
function stateColor(code) {
|
|
return STATE_COLOR[code];
|
|
}
|
|
|
|
const developmentColumns = ref([
|
|
{
|
|
name: 'claimReason',
|
|
label: 'claim.reason',
|
|
field: (row) => row.claimReason?.description,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'claimResult',
|
|
label: 'claim.result',
|
|
field: (row) => row.claimResult?.description,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'claimResponsible',
|
|
label: 'claim.responsible',
|
|
field: (row) => row.claimResponsible.description,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'worker',
|
|
label: 'claim.worker',
|
|
field: (row) => row.worker?.user.nickname,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'claimRedelivery',
|
|
label: 'claim.redelivery',
|
|
field: (row) => row.claimRedelivery.description,
|
|
sortable: true,
|
|
},
|
|
]);
|
|
|
|
async function getClaimDms() {
|
|
claimDmsFilter.value.where = { claimFk: entityId.value };
|
|
await claimDmsRef.value.fetch();
|
|
}
|
|
|
|
function setClaimDms(data) {
|
|
claimDms.value = [];
|
|
data.forEach((media) => {
|
|
claimDms.value.push({
|
|
isVideo: media.dms.contentType == 'video/mp4',
|
|
url: `/api/Claims/${media.dmsFk}/downloadFile?access_token=${token}`,
|
|
dmsFk: media.dmsFk,
|
|
});
|
|
});
|
|
}
|
|
|
|
function openDialog(dmsId) {
|
|
multimediaSlide.value = dmsId;
|
|
multimediaDialog.value = true;
|
|
}
|
|
|
|
async function changeState(value) {
|
|
await axios.patch(`Claims/updateClaim/${entityId.value}`, { claimStateFk: value });
|
|
router.go(route.fullPath);
|
|
}
|
|
|
|
function claimUrl(section) {
|
|
return '#/claim/' + entityId.value + '/' + section;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
url="ClaimDms"
|
|
:filter="claimDmsFilter"
|
|
@on-fetch="(data) => setClaimDms(data)"
|
|
ref="claimDmsRef"
|
|
/>
|
|
<FetchData url="ClaimStates" @on-fetch="(data) => (ClaimStates = data)" auto-load />
|
|
<CardSummary
|
|
ref="summary"
|
|
:url="`Claims/${entityId}/getSummary`"
|
|
:entity-id="entityId"
|
|
@on-fetch="getClaimDms"
|
|
data-key="claimSummary"
|
|
>
|
|
<template #header="{ entity: { claim } }">
|
|
{{ claim.id }} - {{ claim.client.name }} ({{ claim.client.id }})
|
|
</template>
|
|
<template #header-right>
|
|
<QBtnDropdown
|
|
side
|
|
top
|
|
color="black"
|
|
text-color="white"
|
|
:label="t('globals.changeState')"
|
|
>
|
|
<QList>
|
|
<QVirtualScroll
|
|
class="max-container-height"
|
|
:items="ClaimStates"
|
|
separator
|
|
v-slot="{ item, index }"
|
|
>
|
|
<QItem
|
|
:key="index"
|
|
dense
|
|
clickable
|
|
v-close-popup
|
|
@click="changeState(item.id)"
|
|
>
|
|
<QItemSection>
|
|
<QItemLabel>{{ item.description }}</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</QVirtualScroll>
|
|
</QList>
|
|
</QBtnDropdown>
|
|
</template>
|
|
<template #menu="{ entity }">
|
|
<ClaimDescriptorMenu :claim="entity.claim" />
|
|
</template>
|
|
<template #body="{ entity: { claim, salesClaimed, developments } }">
|
|
<QCard class="vn-one" v-if="$route.name != 'ClaimSummary'">
|
|
<VnTitle
|
|
:url="claimUrl('basic-data')"
|
|
:text="t('globals.pageTitles.basicData')"
|
|
/>
|
|
<VnLv :label="t('claim.created')" :value="toDate(claim.created)" />
|
|
<VnLv :label="t('claim.state')">
|
|
<template #value>
|
|
<QChip :color="stateColor(claim.claimState.code)" dense>
|
|
{{ claim.claimState.description }}
|
|
</QChip>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('globals.salesPerson')">
|
|
<template #value>
|
|
<VnUserLink
|
|
:name="claim.client?.salesPersonUser?.name"
|
|
:worker-id="claim.client?.salesPersonFk"
|
|
/>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('claim.attendedBy')">
|
|
<template #value>
|
|
<VnUserLink
|
|
:name="claim.worker?.user?.nickname"
|
|
:worker-id="claim.workerFk"
|
|
/>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv :label="t('claim.customer')">
|
|
<template #value>
|
|
<span class="link cursor-pointer">
|
|
{{ claim.client?.name }}
|
|
<CustomerDescriptorProxy :id="claim.clientFk" />
|
|
</span>
|
|
</template>
|
|
</VnLv>
|
|
<VnLv
|
|
:label="t('claim.pickup')"
|
|
:value="`${dashIfEmpty(claim.pickup)}`"
|
|
/>
|
|
</QCard>
|
|
<QCard class="vn-two">
|
|
<VnTitle :url="claimUrl('notes')" :text="t('claim.notes')" />
|
|
<ClaimNotes
|
|
:id="entityId"
|
|
:add-note="false"
|
|
style="max-height: 300px"
|
|
order="created ASC"
|
|
/>
|
|
</QCard>
|
|
<QCard class="vn-two" v-if="claimDms?.length">
|
|
<VnTitle :url="claimUrl('photos')" :text="t('claim.photos')" />
|
|
<div class="container max-container-height" style="overflow: auto">
|
|
<div
|
|
class="multimedia-container"
|
|
v-for="(media, index) of claimDms"
|
|
:key="index"
|
|
>
|
|
<div class="relative-position">
|
|
<QIcon
|
|
name="play_circle"
|
|
color="primary"
|
|
size="xl"
|
|
class="absolute-center zindex"
|
|
v-if="media.isVideo"
|
|
@click.stop="openDialog(media.dmsFk)"
|
|
>
|
|
<QTooltip>Video</QTooltip>
|
|
</QIcon>
|
|
<QCard
|
|
class="multimedia relative-position"
|
|
style="max-height: 128px"
|
|
>
|
|
<QImg
|
|
:src="media.url"
|
|
class="rounded-borders cursor-pointer fit"
|
|
@click="openDialog(media.dmsFk)"
|
|
v-if="!media.isVideo"
|
|
>
|
|
</QImg>
|
|
<video
|
|
:src="media.url"
|
|
class="rounded-borders cursor-pointer fit"
|
|
muted="muted"
|
|
v-if="media.isVideo"
|
|
@click="openDialog(media.dmsFk)"
|
|
/>
|
|
</QCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</QCard>
|
|
<QCard class="vn-max" v-if="salesClaimed.length > 0">
|
|
<VnTitle :url="claimUrl('lines')" :text="t('claim.details')" />
|
|
<QTable
|
|
:columns="detailsColumns"
|
|
:rows="salesClaimed"
|
|
separator="horizontal"
|
|
dense
|
|
:rows-per-page-options="[0]"
|
|
hide-bottom
|
|
>
|
|
<template #header="props">
|
|
<QTr :props="props">
|
|
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
|
{{ t(col.label) }}
|
|
</QTh>
|
|
</QTr>
|
|
</template>
|
|
<template #body="props">
|
|
<QTr :props="props">
|
|
<QTd v-for="col in props.cols" :key="col.name" :props="props">
|
|
<span v-if="col.name != 'description'">{{
|
|
t(col.value)
|
|
}}</span>
|
|
<span class="link" v-if="col.name === 'description'">{{
|
|
t(col.value)
|
|
}}</span>
|
|
<ItemDescriptorProxy
|
|
v-if="col.name == 'description'"
|
|
:id="props.row.sale.itemFk"
|
|
:sale-fk="props.row.saleFk"
|
|
></ItemDescriptorProxy>
|
|
</QTd>
|
|
</QTr>
|
|
</template>
|
|
</QTable>
|
|
</QCard>
|
|
<QCard class="vn-max" v-if="developments.length > 0">
|
|
<VnTitle :url="claimUrl('development')" :text="t('claim.development')" />
|
|
<QTable
|
|
:columns="developmentColumns"
|
|
:rows="developments"
|
|
flat
|
|
dense
|
|
:rows-per-page-options="[0]"
|
|
hide-bottom
|
|
>
|
|
<template #header="props">
|
|
<QTr :props="props">
|
|
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
|
{{ t(col.label) }}
|
|
</QTh>
|
|
</QTr>
|
|
</template>
|
|
<template #body-cell-worker="props">
|
|
<QTd :props="props" class="link">
|
|
{{ props.value }}
|
|
<WorkerDescriptorProxy :id="props.row.worker?.id" />
|
|
</QTd>
|
|
</template>
|
|
</QTable>
|
|
</QCard>
|
|
<QCard class="vn-max">
|
|
<VnTitle :url="claimUrl('action')" :text="t('claim.actions')" />
|
|
<div id="slider-container" class="q-px-xl q-py-md">
|
|
<QSlider
|
|
v-model="claim.responsibility"
|
|
label
|
|
:label-value="t('claim.responsibility')"
|
|
label-always
|
|
color="var()"
|
|
markers
|
|
:marker-labels="markerLabels"
|
|
:min="1"
|
|
:max="5"
|
|
readonly
|
|
/>
|
|
</div>
|
|
<ClaimSummaryAction :id="entityId" />
|
|
</QCard>
|
|
<QDialog
|
|
v-model="multimediaDialog"
|
|
transition-show="slide-up"
|
|
transition-hide="slide-down"
|
|
>
|
|
<QToolbar class="absolute zindex close-button">
|
|
<QSpace />
|
|
<QBtn icon="close" color="primary" round dense v-close-popup />
|
|
</QToolbar>
|
|
<QCarousel
|
|
swipeable
|
|
animated
|
|
v-model="multimediaSlide"
|
|
arrows
|
|
class="fit"
|
|
>
|
|
<QCarouselSlide
|
|
v-for="media of claimDms"
|
|
:key="media.dmsFk"
|
|
:name="media.dmsFk"
|
|
>
|
|
<QImg
|
|
:src="media.url"
|
|
class="fit"
|
|
fit="scale-down"
|
|
v-if="!media.isVideo"
|
|
/>
|
|
<video
|
|
class="q-ma-none fit"
|
|
v-if="media.isVideo"
|
|
controls
|
|
muted
|
|
autoplay
|
|
>
|
|
<source :src="media.url" type="video/mp4" />
|
|
</video>
|
|
</QCarouselSlide>
|
|
</QCarousel>
|
|
</QDialog>
|
|
</template>
|
|
</CardSummary>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.q-dialog__inner--minimized > div {
|
|
max-width: 80%;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
}
|
|
.multimedia-container {
|
|
flex: 0 0 128px;
|
|
}
|
|
.multimedia {
|
|
transition: all 0.5s;
|
|
opacity: 1;
|
|
height: 250px;
|
|
|
|
.q-img {
|
|
object-fit: cover;
|
|
background-color: black;
|
|
}
|
|
video {
|
|
object-fit: cover;
|
|
background-color: black;
|
|
}
|
|
}
|
|
|
|
.multimedia:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.close-button {
|
|
top: 1%;
|
|
right: 10%;
|
|
}
|
|
|
|
.zindex {
|
|
z-index: 1;
|
|
}
|
|
|
|
.change-state {
|
|
width: 10%;
|
|
}
|
|
|
|
.max-container-height {
|
|
max-height: 300px;
|
|
}
|
|
</style>
|