49 lines
3.1 KiB
Vue
49 lines
3.1 KiB
Vue
<script setup lang="ts">
|
||
import '@/styles/adminDensity.css'
|
||
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, listReceivingOverseasWarehouses, 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 detail = ref<PalletDto | null>(null)
|
||
const warehouseName = ref('—')
|
||
const loading = ref(false)
|
||
const loadError = ref<ApiErrorDetails | null>(null)
|
||
const groups = [
|
||
{ title: '基础信息', fields: ['托盘编码', '托盘类型', '仓库', '容积(m³)', '采购价格', '所属FBA仓', '状态'] },
|
||
{ title: '使用信息', fields: ['库位', '创建时间', '更新时间', '备注'] },
|
||
]
|
||
const values = computed(() => ({
|
||
托盘编码: detail.value?.palletCode || '—', 托盘类型: detail.value?.palletType || '—', 仓库: warehouseName.value,
|
||
'容积(m³)': detail.value?.capacityCbm ?? '—', 采购价格: detail.value?.unitPrice ?? '—', 所属FBA仓: detail.value?.fbaWarehouseCode || '—', 状态: detail.value?.status || '—',
|
||
库位: '—', 创建时间: formatOverseasDateTime(detail.value?.createdAt), 更新时间: formatOverseasDateTime(detail.value?.updatedAt), 备注: detail.value?.remark || '—',
|
||
}))
|
||
|
||
async function load() {
|
||
if (!warehouseId.value || palletId.value === '—') { loadError.value = getApiErrorDetails(new Error('托盘详情缺少仓库参数')); return }
|
||
loading.value = true; loadError.value = null
|
||
try {
|
||
const [pallet, warehouses] = await Promise.all([getPallet(warehouseId.value, palletId.value), listReceivingOverseasWarehouses()])
|
||
detail.value = pallet
|
||
const warehouse = warehouses.records.find((item) => String(item.id) === warehouseId.value)
|
||
warehouseName.value = warehouse ? `${warehouse.warehouseName}（${warehouse.warehouseCode}）` : '—'
|
||
} catch (error) { loadError.value = getApiErrorDetails(error, '托盘详情加载失败，请重试') }
|
||
finally { loading.value = false }
|
||
}
|
||
|
||
function back() { void router.push({ name: 'overseas-pallets' }) }
|
||
onMounted(load)
|
||
</script>
|
||
|
||
<template><OverseasReadOnlyDetail class="admin-density" dense title="托盘详情" reference-label="托盘编码" :reference-value="detail?.palletCode || '—'" back-label="返回托盘管理" domain="托盘详情" :groups="groups" :field-values="values" :pending="false" status-text="真实数据" :loading="loading" :show-content="!loadError" @back="back">
|
||
<template v-if="loadError" #state><LoadErrorState title="托盘详情加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template>
|
||
</OverseasReadOnlyDetail></template>
|