178 lines
6.5 KiB
Vue
178 lines
6.5 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { toDate, toCurrency } from 'src/filters';
|
|
import CardSummary from 'components/ui/CardSummary.vue';
|
|
import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
|
|
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const entityId = computed(() => $props.id || route.params.id);
|
|
|
|
const detailsColumns = ref([
|
|
{
|
|
name: 'item',
|
|
label: 'claim.summary.item',
|
|
field: (row) => row.sale.itemFk,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'landed',
|
|
label: 'claim.summary.landed',
|
|
field: (row) => row.sale.ticket.landed,
|
|
format: (value) => toDate(value),
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'quantity',
|
|
label: 'claim.summary.quantity',
|
|
field: (row) => row.sale.quantity,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'claimed',
|
|
label: 'claim.summary.claimed',
|
|
field: (row) => row.quantity,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'description',
|
|
label: 'claim.summary.description',
|
|
field: (row) => row.sale.concept,
|
|
},
|
|
{
|
|
name: 'price',
|
|
label: 'claim.summary.price',
|
|
field: (row) => row.sale.price,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'discount',
|
|
label: 'claim.summary.discount',
|
|
field: (row) => row.sale.discount,
|
|
format: (value) => `${value} %`,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'total',
|
|
label: 'claim.summary.total',
|
|
field: ({ sale }) =>
|
|
toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
|
|
sortable: true,
|
|
},
|
|
]);
|
|
|
|
function stateColor(code) {
|
|
if (code === 'pending') return 'green';
|
|
if (code === 'managed') return 'orange';
|
|
if (code === 'resolved') return 'red';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<CardSummary ref="summary" :url="`Claims/${entityId}/getSummary`">
|
|
<template #header="{ entity: { claim } }">
|
|
{{ claim.id }} - {{ claim.client.name }}
|
|
</template>
|
|
<template #body="{ entity: { claim, salesClaimed } }">
|
|
<QCardSection class="row q-pa-none q-col-gutter-md">
|
|
<div class="col">
|
|
<QList>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QItemLabel caption>
|
|
{{ t('claim.summary.created') }}
|
|
</QItemLabel>
|
|
<QItemLabel>{{ toDate(claim.created) }}</QItemLabel>
|
|
</QItemSection>
|
|
<QItemSection v-if="claim.claimState">
|
|
<QItemLabel caption>
|
|
{{ t('claim.summary.state') }}
|
|
</QItemLabel>
|
|
<QItemLabel>
|
|
<QChip
|
|
:color="stateColor(claim.claimState.code)"
|
|
dense
|
|
>
|
|
{{ claim.claimState.description }}
|
|
</QChip>
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
<QItem>
|
|
<QItemSection v-if="claim.worker && claim.worker.user">
|
|
<QItemLabel caption>
|
|
{{ t('claim.summary.assignedTo') }}
|
|
</QItemLabel>
|
|
<QItemLabel>
|
|
<span class="link">
|
|
{{ claim.worker.user.nickname }}
|
|
<WorkerDescriptorProxy :id="claim.workerFk" />
|
|
</span>
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
<QItemSection
|
|
v-if="claim.client && claim.client.salesPersonUser"
|
|
>
|
|
<QItemLabel caption>
|
|
{{ t('claim.summary.attendedBy') }}
|
|
</QItemLabel>
|
|
<QItemLabel>
|
|
<span class="link">
|
|
{{ claim.client.salesPersonUser.name }}
|
|
<WorkerDescriptorProxy
|
|
:id="claim.client.salesPersonFk"
|
|
/>
|
|
</span>
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
</QItem>
|
|
</QList>
|
|
</div>
|
|
</QCardSection>
|
|
<QCardSection class="q-pa-md">
|
|
<h6>{{ t('claim.summary.details') }}</h6>
|
|
<QTable :columns="detailsColumns" :rows="salesClaimed" flat>
|
|
<template #header="props">
|
|
<QTr :props="props">
|
|
<QTh v-for="col in props.cols" :key="col.name" :props="props">
|
|
{{ t(col.label) }}
|
|
</QTh>
|
|
</QTr>
|
|
</template>
|
|
</QTable>
|
|
</QCardSection>
|
|
<QCardSection class="q-pa-md">
|
|
<h6>{{ t('claim.summary.actions') }}</h6>
|
|
<QSeparator />
|
|
<div id="slider-container">
|
|
<QSlider
|
|
v-model="claim.responsibility"
|
|
label
|
|
:label-value="t('claim.summary.responsibility')"
|
|
label-always
|
|
color="primary"
|
|
markers
|
|
:marker-labels="[
|
|
{ value: 1, label: t('claim.summary.company') },
|
|
{ value: 5, label: t('claim.summary.person') },
|
|
]"
|
|
:min="1"
|
|
:max="5"
|
|
readonly
|
|
/>
|
|
</div>
|
|
</QCardSection>
|
|
</template>
|
|
</CardSummary>
|
|
</template>
|