134 lines
3.3 KiB
Vue
134 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import type { Order } from '@/models/Order'
|
|
import OrderPanel from '@/views/pages/order/view/OrderPanel.vue'
|
|
import OrderTabGeneral from '@/views/pages/order/view/OrderTabGeneralH.vue'
|
|
import OrderTabPreparation from '@/views/pages/order/view/OrderTabPreparationH.vue'
|
|
import OrderTabReception from '@/views/pages/order/view/OrderTabReceptionH.vue'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const route = useRoute('obi-order-details-id')
|
|
const orderData = ref<Order>()
|
|
const orderTab = ref(null)
|
|
|
|
const tabs = [
|
|
{ title: t('General') },
|
|
{ title: t('Preparation') },
|
|
{ title: t('Receipt') },
|
|
{ title: t('Flow') },
|
|
]
|
|
|
|
const { data, error, execute: fetchOrder } = await useApi<Order>(`/obi/order/${route.params.id}`)
|
|
|
|
const handleData = () => {
|
|
if (error.value)
|
|
console.log(error.value)
|
|
else if (data.value)
|
|
orderData.value = data.value
|
|
}
|
|
|
|
const refreshData = async () => {
|
|
await fetchOrder()
|
|
handleData()
|
|
}
|
|
|
|
handleData()
|
|
</script>
|
|
|
|
<template>
|
|
<VBreadcrumbs
|
|
class="px-0 py-2"
|
|
:items="[
|
|
{ title: t('Home'), to: { name: 'root' } },
|
|
{ title: t('Order list'), to: { name: 'obi-order-list' } },
|
|
{ title: `#${route.params.id}` },
|
|
]"
|
|
/>
|
|
<div>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap gap-y-4 mb-6">
|
|
<div
|
|
v-if="orderData"
|
|
class="d-flex gap-2 align-center mb-0 flex-wrap"
|
|
>
|
|
<h4 class="text-h3 font-weight-medium">
|
|
#{{ orderData.common.orderId }}
|
|
</h4>
|
|
<div class="d-flex gap-2">
|
|
<VChip
|
|
label
|
|
size="x-large"
|
|
v-bind="resolveOrderStatus(orderData.common.statusData.code)"
|
|
/>
|
|
<VChip
|
|
label
|
|
size="x-large"
|
|
:color="orderData.common.consumed ? 'success' : 'error'"
|
|
>
|
|
{{ orderData.common.consumed ? 'Consumed' : 'Not consumed' }}
|
|
</VChip>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
Order not found ...
|
|
</div>
|
|
|
|
<!-- 👉 Reload button -->
|
|
<div class="d-flex gap-4">
|
|
<VBtn
|
|
variant="tonal"
|
|
color="primary"
|
|
@click="refreshData"
|
|
>
|
|
{{ t("Reload") }}
|
|
</VBtn>
|
|
</div>
|
|
</div>
|
|
<!-- 👉 Order -->
|
|
<VRow v-if="orderData">
|
|
<VCol
|
|
cols="12"
|
|
md="5"
|
|
lg="4"
|
|
>
|
|
<OrderPanel :order-data="orderData" />
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
md="7"
|
|
lg="8"
|
|
>
|
|
<VTabs
|
|
v-model="orderTab"
|
|
class="v-tabs-pill mb-3 disable-tab-transition"
|
|
>
|
|
<VTab
|
|
v-for="tab in tabs"
|
|
:key="tab.title"
|
|
>
|
|
<span>{{ tab.title }}</span>
|
|
</VTab>
|
|
</VTabs>
|
|
<VWindow
|
|
v-model="orderTab"
|
|
class="disable-tab-transition"
|
|
:touch="false"
|
|
>
|
|
<!-- 👉 General -->
|
|
<VWindowItem>
|
|
<OrderTabGeneral :order-data="orderData" />
|
|
</VWindowItem>
|
|
<!-- 👉 Preparation -->
|
|
<VWindowItem>
|
|
<OrderTabPreparation :order-data="orderData" />
|
|
</VWindowItem>
|
|
<!-- 👉 Reception -->
|
|
<VWindowItem>
|
|
<OrderTabReception :order-data="orderData" />
|
|
</VWindowItem>
|
|
</VWindow>
|
|
</VCol>
|
|
</VRow>
|
|
</div>
|
|
</template>
|