163 lines
5.6 KiB
Vue
163 lines
5.6 KiB
Vue
<script setup lang="ts">
|
|
import { format } from 'date-fns'
|
|
import type { Order } from '@/models/Order'
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const props = defineProps<Props>()
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const { t } = useI18n()
|
|
|
|
interface Props {
|
|
orderData: Order
|
|
}
|
|
|
|
const panelStatus = ref(0)
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 👉 Receptions -->
|
|
<VExpansionPanels
|
|
v-model="panelStatus"
|
|
variant="accordion"
|
|
>
|
|
<template v-if="orderData.receptions && orderData.receptions.length > 0">
|
|
<VExpansionPanel
|
|
v-for="(section, index) in orderData.receptions"
|
|
:key="index"
|
|
elevation="0"
|
|
>
|
|
<template #title>
|
|
<VCardText class="pa-sm-2">
|
|
<div class="d-flex justify-space-between align-center mb-4">
|
|
<div>
|
|
Recep #{{ index + 1 }} /
|
|
<VChip
|
|
v-bind="resolveOrderStatus(section.status)"
|
|
variant="tonal"
|
|
label
|
|
size="default"
|
|
/>
|
|
{{ section.intransitSystemCd }} / {{ section.intransitLocationCd }}
|
|
</div>
|
|
<div class="d-flex">
|
|
<span class="text-body-1 text-disabled font-weight-medium"> {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}</span>
|
|
</div>
|
|
</div>
|
|
</vcardtext>
|
|
</template>
|
|
|
|
<VExpansionPanelText>
|
|
<!-- 👉 Reception lines -->
|
|
<div class="mb-6">
|
|
<VRow>
|
|
<template
|
|
v-for="receptionLine in orderData.receptions[index].lines"
|
|
:key="receptionLine.lineFulfillId"
|
|
>
|
|
<VCol
|
|
cols="12"
|
|
md="4"
|
|
sm="6"
|
|
>
|
|
<VCard
|
|
flat
|
|
border
|
|
>
|
|
<VCardText>
|
|
<div class="d-flex justify-space-between align-center mb-4">
|
|
<VChip
|
|
variant="tonal"
|
|
label
|
|
>
|
|
{{ receptionLine.lineItemNo }}
|
|
</VChip>
|
|
|
|
<div class="d-flex">
|
|
<span class="text-body-1 font-weight-medium align-center">
|
|
{{ receptionLine.itemId }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<VList class="card-list mt-1">
|
|
<VListItem cla>
|
|
<div class="text-body-1">
|
|
<span class="font-weight-bold me-2">{{ $t('Package') }}:</span>
|
|
<span>
|
|
{{ receptionLine.colisId }}
|
|
</span>
|
|
</div>
|
|
</VListItem>
|
|
<VListItem cla>
|
|
<div class="text-body-1">
|
|
<span class="font-weight-bold me-2">{{ $t('Cd') }}:</span>
|
|
<span>
|
|
{{ receptionLine.intransitSystemCd }} / {{ receptionLine.intransitLocationCd }}
|
|
</span>
|
|
</div>
|
|
</VListItem>
|
|
<VListItem cla>
|
|
<div class="text-body-1">
|
|
<span class="font-weight-bold me-2">{{ $t('Qty') }}:</span>
|
|
<span>
|
|
{{ receptionLine.validatedIntransitQty }} / {{ receptionLine.intransitQty }}
|
|
</span>
|
|
</div>
|
|
</VListItem>
|
|
<VListItem>
|
|
<div class="text-body-1">
|
|
<span class="font-weight-bold me-2">{{ $t('Tracking') }}:</span>
|
|
<span>
|
|
{{ receptionLine.trackingNumber }}
|
|
</span>
|
|
</div>
|
|
</VListItem>
|
|
<VListItem>
|
|
<div class="text-body-1">
|
|
<span class="font-weight-bold me-2">{{ $t('Weight') }}:</span>
|
|
<span>
|
|
{{ receptionLine.orderLineShipWeight }}
|
|
</span>
|
|
</div>
|
|
</VListItem>
|
|
<VListItem>
|
|
<VChip
|
|
v-bind="resolveOrderStatus(receptionLine.status)"
|
|
variant="tonal"
|
|
label
|
|
size="x-small"
|
|
/>
|
|
{{ format(section.transactionDate, "dd/MM/yyyy HH:mm:ss") }}
|
|
</VListItem>
|
|
</VList>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</template>
|
|
</VRow>
|
|
</div>
|
|
</VExpansionPanelText>
|
|
</VExpansionPanel>
|
|
</template>
|
|
<div
|
|
v-else
|
|
class="text-h4"
|
|
>
|
|
No reception available
|
|
</div>
|
|
</VExpansionPanels>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.v-expansion-panel-text__wrapper{
|
|
padding-block: 0.75rem !important;
|
|
padding-inline: 0.5rem !important;
|
|
}
|
|
|
|
.v-expansion-panel--active{
|
|
.v-expansion-panel-title{
|
|
border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.12) !important;
|
|
}
|
|
}
|
|
</style>
|