60 lines
3.9 KiB
Vue
60 lines
3.9 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 { getRelabelOrder, type RelabelDetailDto } from '../api/relabelOrders'
|
||
import { formatOverseasDateTime } from '../lastMilePresentation'
|
||
import OverseasReadOnlyDetail from '../components/OverseasReadOnlyDetail.vue'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const orderId = computed(() => String(route.params.orderId || ''))
|
||
const detail = ref<RelabelDetailDto | null>(null)
|
||
const loading = ref(false)
|
||
const loadError = ref<ApiErrorDetails | null>(null)
|
||
const groups = [
|
||
{ title: '单据信息', fields: ['换标单号', '关联订单', '状态', '创建时间', '更新时间'] },
|
||
{ title: '商品信息', fields: ['商品SKU', '中文品名', '箱数', '预算总价'] },
|
||
{ title: '作业要求', fields: ['贴标要求', '上传文件', '备注'] },
|
||
{ title: '费用明细', fields: ['开箱费', '挑货费', '换标费', '换箱唛标费', '换标费总计'] },
|
||
]
|
||
function text(value: unknown) { return String(value ?? '').trim() || '—' }
|
||
function status(value: unknown) {
|
||
const labels: Record<string, string> = { PENDING_PROCESSING: '待处理', PROCESSING: '处理中', COMPLETED: '已完成', REJECTED: '已驳回', CANCELLED: '已取消' }
|
||
return labels[String(value || '')] || text(value)
|
||
}
|
||
const referenceValue = computed(() => text(detail.value?.application.relabelNo || '换标单号待补充'))
|
||
const fieldValues = computed<Record<string, string | number>>(() => {
|
||
const value = detail.value
|
||
const items = value?.items || []
|
||
return {
|
||
换标单号: text(value?.application.relabelNo),
|
||
关联订单: text(value?.application.lastlegOrderNo || value?.application.customerOrderNo),
|
||
状态: status(value?.application.status),
|
||
创建时间: formatOverseasDateTime(value?.application.createdAt),
|
||
更新时间: value?.history.length ? formatOverseasDateTime(value.history[value.history.length - 1]?.createdAt) : '—',
|
||
商品SKU: items.map((item) => text(item.skuCode)).join('、') || '—',
|
||
中文品名: items.map((item) => text(item.productNameZh)).join('、') || '—',
|
||
箱数: Number(value?.application.totalPackageCount || 0),
|
||
预算总价: '—',
|
||
贴标要求: items.map((item) => text(item.labelRequirement)).join('；') || '—',
|
||
上传文件: items.map((item) => text(item.relabelFileName)).filter((item) => item !== '—').join('、') || '—',
|
||
备注: text(value?.remark),
|
||
开箱费: '—', 挑货费: '—', 换标费: '—', 换箱唛标费: '—', 换标费总计: '—',
|
||
}
|
||
})
|
||
async function load() {
|
||
if (!orderId.value) { loadError.value = { message: '详情缺少换标单号，请从换标单列表重新进入' }; return }
|
||
loading.value = true; loadError.value = null
|
||
try { detail.value = await getRelabelOrder(orderId.value) }
|
||
catch (error) { loadError.value = getApiErrorDetails(error, '换标单详情加载失败，请重试') }
|
||
finally { loading.value = false }
|
||
}
|
||
function back() { void router.push({ name: 'overseas-relabel-orders' }) }
|
||
onMounted(load)
|
||
</script>
|
||
|
||
<template><OverseasReadOnlyDetail title="换标单详情" reference-label="换标单号" :reference-value="referenceValue" back-label="返回换标单" domain="换标单详情" :groups="groups" :field-values="fieldValues" :pending="false" :status-text="detail ? status(detail.application.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>
|