优化

2026-09-18 16:48:35 +08:00
parent e3cca80ff2
commit 1d407620d2
59 changed files with 1879 additions and 1545 deletions
@@ -4,12 +4,31 @@ 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
@@ -29,6 +48,17 @@ 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 = ''
@@ -50,24 +80,28 @@ onMounted(loadDetail)
 </script>

 <template>
-  <section class="delivery-page" aria-labelledby="delivery-detail-title">
-    <button type="button" class="delivery-back" @click="backToList"><ArrowLeft :size="16" />返回派送单列表</button>
-    <div class="delivery-heading"><div><h2 id="delivery-detail-title">派送单详情</h2><p>{{ display(detail?.deliveryNo || deliveryNo) }}</p></div></div>
-
+  <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">
-        <section class="delivery-card delivery-section">
-          <h3>订单信息</h3>
+        <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.deliveryNo) }}</strong></div>
            <div><span>排车单号</span><strong>{{ display(detail.dispatchNo) }}</strong></div>
            <div><span>出库单号</span><strong>{{ display(detail.outboundNo) }}</strong></div>
-            <div><span>状态</span><strong>{{ display(detail.status) }}</strong></div>
            <div><span>海外仓</span><strong>{{ display(detail.overseasWarehouseName) }}</strong></div>
-            <div><span>派送方式</span><strong>{{ display(detail.deliveryMethod) }}</strong></div>
-            <div><span>提货方式</span><strong>{{ display(detail.pickupMethod) }}</strong></div>
-            <div><span>装载类型</span><strong>{{ display(detail.loadingType) }}</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>
@@ -75,17 +109,17 @@ onMounted(loadDetail)
          </div>
        </section>

-        <section class="delivery-card delivery-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>{{ display(detail.vehicleType) }}</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>{{ display(detail.appointmentAccount) }}</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>
@@ -96,28 +130,16 @@ onMounted(loadDetail)
          </div>
        </section>

-        <section class="delivery-card delivery-section">
-          <h3>货物明细</h3>
-          <el-table :data="items" empty-text="暂无货物明细">
-            <el-table-column prop="palletNo" label="托盘码" min-width="150"><template #default="{ row }">{{ display(row.palletNo) }}</template></el-table-column>
-            <el-table-column prop="inboundCode" label="入仓码" min-width="150"><template #default="{ row }">{{ display(row.inboundCode) }}</template></el-table-column>
-            <el-table-column prop="skuCode" label="SKU" min-width="140"><template #default="{ row }">{{ display(row.skuCode) }}</template></el-table-column>
-            <el-table-column prop="productName" label="品名" min-width="180"><template #default="{ row }">{{ display(row.productName) }}</template></el-table-column>
-            <el-table-column prop="packageCount" label="箱数" width="100"><template #default="{ row }">{{ display(row.packageCount) }}</template></el-table-column>
-            <el-table-column prop="weightKg" label="重量(kg)" width="120"><template #default="{ row }">{{ display(row.weightKg) }}</template></el-table-column>
-            <el-table-column prop="volumeCbm" label="体积(m³)" width="120"><template #default="{ row }">{{ display(row.volumeCbm) }}</template></el-table-column>
-          </el-table>
+        <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-card delivery-section">
-          <h3>费用明细</h3>
-          <el-table :data="detail.fees || []" empty-text="暂无费用明细">
-            <el-table-column prop="feeType" label="费用类型" min-width="180"><template #default="{ row }">{{ display(row.feeType) }}</template></el-table-column>
-            <el-table-column prop="currency" label="币种" width="110"><template #default="{ row }">{{ display(row.currency) }}</template></el-table-column>
-            <el-table-column prop="amount" label="金额" width="140"><template #default="{ row }">{{ display(row.amount) }}</template></el-table-column>
-            <el-table-column prop="remark" label="备注" min-width="220"><template #default="{ row }">{{ display(row.remark) }}</template></el-table-column>
-          </el-table>
+        <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>