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

<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import AdminPage from '@/shared/components/AdminPage.vue'
import LoadingListDetailDrawer from '../components/LoadingListDetailDrawer.vue'
import {
  getConfirmedLoadingList,
  type ConfirmedSummary,
  type LoadingDetail,
} from '../api/platformLoadingLists'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const detail = ref<LoadingDetail<ConfirmedSummary> | null>(null)
const error = ref<ApiErrorDetails | null>(null)
let loadSequence = 0
const planId = computed(() => String(route.params.planId || ''))
const warehouseId = computed(() => typeof route.query.warehouseId === 'string' ? route.query.warehouseId : '')

async function loadDetail() {
  const sequence = ++loadSequence
  detail.value = null
  if (!planId.value || !warehouseId.value) {
    loading.value = false
    error.value = { code: 'MISSING_WAREHOUSE_CONTEXT', message: '该清单缺少所属仓库信息，无法安全查询详情，请返回列表重新进入。' }
    return
  }
  loading.value = true
  error.value = null
  try {
    const result = await getConfirmedLoadingList(planId.value, warehouseId.value)
    if (sequence !== loadSequence) return
    if (result.summary.status !== 'COMPLETED') {
      error.value = { code: 'MODE_STATUS_MISMATCH', message: '该计划尚未形成正式装柜清单，请从预装清单入口查看。' }
      return
    }
    detail.value = result
    loading.value = false
    if (route.query.print === '1') {
      await nextTick()
      if (sequence !== loadSequence) return
      window.print()
      const { print: _print, ...query } = route.query
      await router.replace({ name: 'loading-list-detail', params: { planId: planId.value }, query })
    }
  } catch (cause) {
    if (sequence !== loadSequence) return
    detail.value = null
    error.value = getApiErrorDetails(cause, '装柜清单详情加载失败，请稍后重试')
  } finally {
    if (sequence === loadSequence) loading.value = false
  }
}

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

function printDetail() {
  window.print()
}

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

<template>
  <AdminPage>
    <div class="confirmed-loading-detail-page">
      <el-button v-if="detail" class="print-action" :disabled="loading" @click="printDetail">打印</el-button>
      <LoadingListDetailDrawer
        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 print { .print-action { display: none; } }
@media (min-width: 1920px) { .confirmed-loading-detail-page { width: 100%; max-width: none; gap: 12px; } }
</style>