client-web/src/modules/order-management/views/DeliveryOrderDetailView.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft } from '@lucide/vue'
import dayjs from 'dayjs'
import { getDeliveryOrder, type DeliveryOrderDetail, type DeliveryOrderItem } from '../api/deliveryOrders'
import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'

const props = defineProps<{ deliveryNo: string }>()
const router = useRouter()
const loading = ref(false)
const errorMessage = ref('')
const detail = ref<DeliveryOrderDetail | null>(null)
const statusLabels: Record<string, string> = { PENDING: '待派送', IN_TRANSIT: '派送中', DELIVERED: '已送达', SIGNED: '已签收', CANCELLED: '已取消' }
const deliveryMethodLabels: Record<string, string> = { FBA_PICKUP: 'FBA 自提', CUSTOMER_PICKUP: '客户自提', TRUCK_PALLET: '卡派打托', TRUCK_FLOOR: '卡派地板', EXPRESS: '快递', OUTSOURCED: '外配', DEDICATED_TRUCK: '专车直送', LTL: '零担派送' }
const pickupMethodLabels: Record<string, string> = { ONE_PICKUP_ONE_DROP: '一提一卸', ONE_PICKUP_MULTI_DROP: '一提多卸', MULTI_PICKUP_ONE_DROP: '多提一卸', MULTI_PICKUP_MULTI_DROP: '多提多卸', WAREHOUSE_PICKUP: '仓库自提' }
const loadingTypeLabels: Record<string, string> = { PALLET: '托盘', FLOOR: '地板', MIXED: '混装' }
const vehicleTypeLabels: Record<string, string> = { TRUCK: '卡车', VAN: '厢式货车', BOX_TRUCK: '箱式货车', TRAILER: '拖挂车' }
const appointmentAccountLabels: Record<string, string> = { SELF: '自有账号', PLATFORM: '平台账号', CARRIER: '承运商账号' }
const tableValueFormatter = (_row: object, _column: unknown, value: string | number | null | undefined) => display(value)
const itemColumns: DataTableColumn[] = [
  { prop: 'palletNo', label: '托盘码', minWidth: 170, formatter: tableValueFormatter }, { prop: 'inboundCode', label: '入仓码', minWidth: 190, formatter: tableValueFormatter },
  { prop: 'skuCode', label: 'SKU', minWidth: 160, formatter: tableValueFormatter }, { prop: 'productName', label: '品名', minWidth: 180, formatter: tableValueFormatter },
  { prop: 'packageCount', label: '箱数', width: 90, align: 'right', headerAlign: 'right', formatter: tableValueFormatter },
  { prop: 'weightKg', label: '重量（kg）', width: 120, align: 'right', headerAlign: 'right', formatter: tableValueFormatter },
  { prop: 'volumeCbm', label: '体积（m³）', width: 120, align: 'right', headerAlign: 'right', formatter: tableValueFormatter },
]
const feeColumns: DataTableColumn[] = [
  { prop: 'feeType', label: '费用类型', minWidth: 180, formatter: tableValueFormatter }, { prop: 'currency', label: '币种', width: 100, formatter: tableValueFormatter },
  { prop: 'amount', label: '金额', width: 140, align: 'right', headerAlign: 'right', formatter: tableValueFormatter }, { prop: 'remark', label: '备注', minWidth: 240, formatter: tableValueFormatter },
]

const items = computed<DeliveryOrderItem[]>(() => {
  const value = detail.value?.items
  if (!value) return []
  return Array.isArray(value) ? value : value.records
})

function display(value: string | number | null | undefined) {
  return value === null || value === undefined || value === '' ? '—' : String(value)
}

function formatDateTime(value: string | null | undefined) {
  return value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '—'
}

function formatQuantity(value: number | null | undefined, unit: string) {
  return value === null || value === undefined ? '—' : `${value} ${unit}`
}

function statusLabel(value: string) { return statusLabels[value] ?? display(value) }
function statusTone(value: string) {
  if (value === 'DELIVERED' || value === 'SIGNED') return 'success'
  if (value === 'IN_TRANSIT') return 'primary'
  if (value === 'CANCELLED') return 'danger'
  return 'warning'
}
function mappedLabel(value: string | null | undefined, labels: Record<string, string>) {
  return value ? labels[value] ?? value : '—'
}

async function loadDetail() {
  loading.value = true
  errorMessage.value = ''
  try {
    detail.value = await getDeliveryOrder(props.deliveryNo)
  } catch (error) {
    detail.value = null
    errorMessage.value = error instanceof Error ? error.message : '派送单详情加载失败，请重试'
  } finally {
    loading.value = false
  }
}

function backToList() {
  void router.push({ name: 'orders-delivery' })
}

onMounted(loadDetail)
</script>

<template>
  <section class="delivery-page" aria-label="派送单详情">
    <div v-if="errorMessage" class="delivery-card delivery-state delivery-state--error" role="alert"><p>{{ errorMessage }}</p><el-button @click="loadDetail">重试</el-button></div>
    <div v-else v-loading="loading" class="delivery-detail-content">
      <template v-if="detail">
        <article class="delivery-detail-surface">
          <header class="delivery-detail-header">
            <div class="delivery-detail-title">
              <el-button link type="primary" @click="backToList"><ArrowLeft :size="16" />返回列表</el-button>
              <div><h2>{{ display(detail.deliveryNo) }}</h2><p>{{ display(detail.overseasWarehouseName) }} · {{ mappedLabel(detail.deliveryMethod, deliveryMethodLabels) }}</p></div>
            </div>
            <span class="client-status" :data-tone="statusTone(detail.status)">{{ statusLabel(detail.status) }}</span>
          </header>

        <section class="delivery-detail-section">
          <h3>订单概览</h3>
          <div class="delivery-detail-grid">
            <div><span>排车单号</span><strong>{{ display(detail.dispatchNo) }}</strong></div>
            <div><span>出库单号</span><strong>{{ display(detail.outboundNo) }}</strong></div>
            <div><span>海外仓</span><strong>{{ display(detail.overseasWarehouseName) }}</strong></div>
            <div><span>派送方式</span><strong>{{ mappedLabel(detail.deliveryMethod, deliveryMethodLabels) }}</strong></div>
            <div><span>提货方式</span><strong>{{ mappedLabel(detail.pickupMethod, pickupMethodLabels) }}</strong></div>
            <div><span>装载类型</span><strong>{{ mappedLabel(detail.loadingType, loadingTypeLabels) }}</strong></div>
            <div><span>托盘数</span><strong>{{ formatQuantity(detail.palletCount, '托') }}</strong></div>
            <div><span>箱数</span><strong>{{ formatQuantity(detail.packageCount, '箱') }}</strong></div>
            <div><span>总重量</span><strong>{{ formatQuantity(detail.totalWeightKg, 'kg') }}</strong></div>
            <div><span>总体积</span><strong>{{ formatQuantity(detail.totalVolumeCbm, 'm³') }}</strong></div>
          </div>
        </section>

        <section class="delivery-detail-section">
          <h3>运输与预约</h3>
          <div class="delivery-detail-grid">
            <div><span>运单号</span><strong>{{ display(detail.waybillNo) }}</strong></div>
            <div><span>承运商</span><strong>{{ display(detail.carrierName) }}</strong></div>
            <div><span>车型</span><strong>{{ mappedLabel(detail.vehicleType, vehicleTypeLabels) }}</strong></div>
            <div><span>车辆尺寸</span><strong>{{ display(detail.vehicleSize) }}</strong></div>
            <div><span>车牌号</span><strong>{{ display(detail.vehiclePlate) }}</strong></div>
            <div><span>司机姓名</span><strong>{{ display(detail.driverName) }}</strong></div>
            <div><span>司机电话</span><strong>{{ display(detail.driverPhone) }}</strong></div>
            <div><span>预约账号</span><strong>{{ mappedLabel(detail.appointmentAccount, appointmentAccountLabels) }}</strong></div>
            <div><span>卖家名称</span><strong>{{ display(detail.sellerName) }}</strong></div>
            <div><span>计划派送</span><strong>{{ formatDateTime(detail.plannedDeliveryAt) }}</strong></div>
            <div><span>预计到达</span><strong>{{ formatDateTime(detail.expectedArrivalAt) }}</strong></div>
            <div><span>签收时间</span><strong>{{ formatDateTime(detail.signedAt) }}</strong></div>
            <div><span>创建时间</span><strong>{{ formatDateTime(detail.createdAt) }}</strong></div>
            <div><span>更新时间</span><strong>{{ formatDateTime(detail.updatedAt) }}</strong></div>
            <div class="delivery-span-all"><span>备注</span><strong>{{ display(detail.remark) }}</strong></div>
          </div>
        </section>

        <section class="delivery-detail-section">
          <div class="delivery-detail-section-heading"><h3>货物明细</h3><span>共 {{ items.length }} 条</span></div>
          <DataTable :data="items" :columns="itemColumns" empty-text="暂无货物明细" />
        </section>

        <section class="delivery-detail-section">
          <div class="delivery-detail-section-heading"><h3>费用明细</h3><span>共 {{ detail.fees.length }} 条</span></div>
          <DataTable :data="detail.fees" :columns="feeColumns" empty-text="暂无费用明细" />
        </section>
        </article>
      </template>
    </div>
  </section>
</template>

<style scoped src="./deliveryOrders.css"></style>