admin-web/src/modules/loading-lists/pages/ConfirmedLoadingListDetailView.vue

<script setup lang="ts">
import { computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AdminPage from '@/shared/components/AdminPage.vue'
import LoadingListDetailDrawer from '../components/LoadingListDetailDrawer.vue'
import { useLoadingListDetail } from '../useLoadingListDetail'
import { printLoadingList } from '../printLoadingList'

const route = useRoute()
const router = useRouter()
const { detail, loading, error, load } = useLoadingListDetail()
const planId = computed(() => String(route.params.planId || ''))
const warehouseId = computed(() => typeof route.query.warehouseId === 'string' ? route.query.warehouseId : '')

async function loadDetail() {
  const result = await load('confirmed', planId.value, warehouseId.value)
  if (!result || detail.value !== result || route.query.print !== '1') return
  await printLoadingList()
  const { print: _print, ...query } = route.query
  await router.replace({ name: 'loading-list-detail', params: { planId: planId.value }, query })
}

function goBack() {
  if (window.history.length > 1) router.back()
  else void router.push({ name: 'loading-lists' })
}

onMounted(() => void loadDetail())
watch([planId, warehouseId], () => void loadDetail())
</script>

<template>
  <AdminPage>
    <div class="confirmed-loading-detail-page">
      <LoadingListDetailDrawer dense
        mode="confirmed"
        :loading="loading"
        :detail="detail"
        :error="error"
        :can-edit="false"
        @back="goBack"
        @retry="loadDetail"
      />
    </div>
  </AdminPage>
</template>

<style scoped>
.confirmed-loading-detail-page { display: grid; min-width: 0; max-width: 1280px; gap: 16px; }
@media (min-width: 1920px) { .confirmed-loading-detail-page { width: 100%; max-width: none; gap: 12px; } }
</style>