15 lines
3.1 KiB
Vue
15 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
|
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'; import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
|
import { getPallet, type PalletDto } from '../api/pallets'; import { formatOverseasDateTime } from '../lastMilePresentation'; import OverseasReadOnlyDetail from '../components/OverseasReadOnlyDetail.vue'
|
|
const route = useRoute(); const router = useRouter(); const palletId = computed(() => String(route.params.palletId || '')); const warehouseId = computed(() => String(route.query.warehouseId || '')); const pallet = ref<PalletDto | null>(null); const loading = ref(false); const loadError = ref<ApiErrorDetails | null>(null)
|
|
const groups = [{ title: '基础信息', fields: ['托盘编码', '托盘类型', '仓库', '容积(m³)', '采购价格', '所属FBA仓', '状态'] }, { title: '使用信息', fields: ['关联入库单', '关联箱数', '创建时间', '更新时间', '备注'] }]
|
|
function text(value: unknown) { return String(value ?? '').trim() || '—' }; function status(value: unknown) { const labels: Record<string, string> = { IDLE: '闲置', OCCUPIED: '占用', SCRAPPED: '已报废' }; return labels[String(value || '')] || text(value) }
|
|
const values = computed<Record<string, string | number>>(() => ({ 托盘编码: text(pallet.value?.palletCode), 托盘类型: text(pallet.value?.palletType), 仓库: text(route.query.warehouseName || warehouseId.value), '容积(m³)': Number(pallet.value?.capacityCbm || 0), 采购价格: Number(pallet.value?.unitPrice || 0), 所属FBA仓: '—', 状态: status(pallet.value?.status), 关联入库单: '—', 关联箱数: '—', 创建时间: formatOverseasDateTime(pallet.value?.createdAt), 更新时间: formatOverseasDateTime(pallet.value?.updatedAt), 备注: text(pallet.value?.remark) }))
|
|
async function load() { if (!warehouseId.value || !palletId.value) { loadError.value = { message: '详情缺少仓库范围，请从托盘列表重新进入' }; return }; loading.value = true; loadError.value = null; try { pallet.value = await getPallet(warehouseId.value, palletId.value) } catch (error) { loadError.value = getApiErrorDetails(error, '托盘详情加载失败，请重试') } finally { loading.value = false } }
|
|
function back() { void router.push({ name: 'overseas-pallets' }) }; onMounted(load)
|
|
</script>
|
|
<template><OverseasReadOnlyDetail title="托盘详情" reference-label="托盘编码" :reference-value="pallet?.palletCode || palletId" back-label="返回托盘管理" domain="托盘详情" :groups="groups" :field-values="values" :pending="false" :status-text="pallet ? status(pallet.status) : '加载中'" :loading="loading" :show-content="!loadError" @back="back"><template #state><LoadErrorState v-if="loadError" title="托盘详情加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template></OverseasReadOnlyDetail></template>
|