Merge branch 'release/test' of http://git.buggoglobal.com/html/admin-web into dev

src/modules/overseas-warehouse/components/OrderReferenceText.test.ts

@@ -0,0 +1,26 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import OrderReferenceText from './OrderReferenceText.vue'
+
+describe('OrderReferenceText', () => {
+  it.each([
+    ['desktop-1920', '170px'],
+    ['narrow', '88px'],
+  ])('keeps the complete server order number in %s layouts', (_viewport, width) => {
+    const orderNo = 'LEGACY-LAST-MILE-ORDER-202608270000000001'
+    const wrapper = mount({
+      components: { OrderReferenceText },
+      template: `<div style="width:${width}"><OrderReferenceText value="${orderNo}" /></div>`,
+    })
+
+    const reference = wrapper.get('.order-reference-text')
+    expect(reference.text()).toBe(orderNo)
+    expect(reference.attributes('title')).toBe(orderNo)
+  })
+
+  it('renders the new short number in full and does not guess from another identifier', () => {
+    const wrapper = mount(OrderReferenceText, { props: { value: 'LMO-260827-0001' } })
+    expect(wrapper.text()).toBe('LMO-260827-0001')
+    expect(wrapper.attributes('title')).toBe('LMO-260827-0001')
+  })
+})

src/modules/overseas-warehouse/components/OrderReferenceText.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  value?: string | null
+  emptyText?: string
+}>(), { value: null, emptyText: '—' })
+
+const displayValue = computed(() => {
+  const value = String(props.value ?? '')
+  return value || props.emptyText
+})
+
+const fullTitle = computed(() => displayValue.value === props.emptyText ? undefined : displayValue.value)
+</script>
+
+<template>
+  <span class="order-reference-text" :title="fullTitle">{{ displayValue }}</span>
+</template>
+
+<style scoped>
+.order-reference-text {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  white-space: nowrap;
+}
+</style>

src/modules/overseas-warehouse/components/OverseasDetailShell.vue

@@ -22,7 +22,7 @@ defineEmits<{ back: [] }>()
       <el-button :aria-label="backLabel" @click="$emit('back')"><ArrowLeft :size="16" />返回</el-button>
       <div class="overseas-detail-title">
         <h1>{{ title }}</h1>
-        <p>{{ referenceLabel }} <strong>{{ referenceValue }}</strong></p>
+        <p>{{ referenceLabel }} <strong><slot name="reference">{{ referenceValue }}</slot></strong></p>
       </div>
       <span class="overseas-detail-status" :class="{ 'is-live': !pending }" role="status">{{ statusText }}</span>
     </header>
@@ -37,8 +37,8 @@ defineEmits<{ back: [] }>()
 .overseas-detail-head { display: flex; min-height: 44px; align-items: center; gap: 12px; }
 .overseas-detail-title { min-width: 0; flex: 1; }
 .overseas-detail-title h1 { margin: 0; color: var(--cc-text); font-size: 20px; line-height: 1.35; }
-.overseas-detail-title p { margin: 3px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
-.overseas-detail-title strong { color: var(--cc-text); overflow-wrap: anywhere; }
+.overseas-detail-title p { display: flex; min-width: 0; align-items: baseline; gap: 4px; margin: 3px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
+.overseas-detail-title strong { min-width: 0; max-width: 100%; color: var(--cc-text); }
 .overseas-detail-status { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 10px; border: 1px solid #f3d19e; border-radius: 999px; background: #fdf6ec; color: #b88230; font-size: 12px; font-weight: 600; white-space: nowrap; }
 .overseas-detail-status.is-live { border-color: var(--el-color-success-light-7); background: var(--el-color-success-light-9); color: var(--el-color-success-dark-2); }
 </style>

src/modules/overseas-warehouse/components/SmartDispatchDialog.vue

@@ -11,6 +11,7 @@ import OperationErrorToast from '@/shared/components/OperationErrorToast.vue'
 import { createDispatchDraftContainer, deleteDispatchDraftContainer, listDispatchCandidates, listDispatchDrafts, lockDispatchDraftPallet, preArrangeDispatch, releaseDispatchDraft, unlockDispatchDraftPallet, type DispatchPalletCandidateDto } from '../api/dispatches'
 import { formatOverseasDateTime } from '../lastMilePresentation'
 import type { InboundOrderListItem } from '../types'
+import OrderReferenceText from './OrderReferenceText.vue'
 
 type VehicleSpec = { value: string; label: string; capacity: number; maxWeightLb: number }
 interface LoadingContainer { id: string; capacity: number; maxWeightLb: number; vehicleLabel: string; palletIds: string[] }
@@ -212,7 +213,7 @@ watch([warehouseTab, () => query.orderType], () => {
         <header><div><h3>出库单列表 <span>({{ orderGroups.length }}单)</span></h3><div class="order-type-tabs"><button v-for="option in [{ value: '', label: '全部' }, ...orderTypeOptions]" :key="option.value || 'all'" type="button" :class="{ active: query.orderType === option.value }" @click="query.orderType = option.value">{{ option.label }}</button></div></div></header>
         <div v-loading="loading" class="order-table-wrap">
           <el-table :data="orderGroups" border height="520" highlight-current-row row-key="key" @current-change="activeOrderKey = $event?.key || ''">
-            <el-table-column label="订单号" min-width="150"><template #default="{ row }">{{ text(row.first.orderNo) }}</template></el-table-column>
+            <el-table-column label="订单号" min-width="170"><template #default="{ row }"><OrderReferenceText :value="text(row.first.orderNo)" /></template></el-table-column>
             <el-table-column label="订单类型" width="100"><template #default="{ row }">{{ orderType(row.first.orderType) }}</template></el-table-column>
             <el-table-column label="重量(lb)" width="100" align="right"><template #default="{ row }">{{ number(Number(row.first.volumeWeightKg || 0) * 2.2046226218, 0) }}LB</template></el-table-column>
             <el-table-column label="托盘数量" width="90" align="right"><template #default="{ row }">{{ row.pallets.length }}</template></el-table-column>
@@ -226,7 +227,7 @@ watch([warehouseTab, () => query.orderType], () => {
       </section>
 
       <section class="detail-pane" aria-label="入仓单托盘和箱号详情">
-        <header><h3>托盘明细 <span>{{ activePallets.length ? `(${activePallets.length}托)` : '' }}</span></h3><span>订单号：{{ text(activePallets[0]?.orderNo) }}</span></header>
+        <header><h3>托盘明细 <span>{{ activePallets.length ? `(${activePallets.length}托)` : '' }}</span></h3><span class="detail-order-reference">订单号：<OrderReferenceText :value="text(activePallets[0]?.orderNo)" /></span></header>
         <div class="pallet-list">
           <div v-for="item in activePallets" :key="palletId(item)" class="pallet-row" :class="{ assigned: containerFor(palletId(item)) }" draggable="true" @dragstart="dragStart($event, item)">
             <GripVertical :size="16" class="drag-handle" />
@@ -247,7 +248,7 @@ watch([warehouseTab, () => query.orderType], () => {
           <div v-for="(container, index) in containers" :key="container.id" class="loading-container" :class="{ 'loading-container--overweight': containerWeightLb(container) > container.maxWeightLb * 1.1 }" @dragover.prevent @drop.prevent="dropInto($event, container.id)">
             <div class="container-head"><strong>{{ container.vehicleLabel }}</strong><span>托数 <b>{{ container.palletIds.length }}</b>/{{ container.capacity }} · 重量 <b>{{ number(containerWeightLb(container), 0) }}LB</b>/{{ container.maxWeightLb }}LB <em v-if="containerWeightLb(container) > container.maxWeightLb * 1.1">超限10%</em></span><el-button text type="danger" :aria-label="`删除装车车型${index + 1}`" @click="deleteContainer(container)"><Trash2 :size="15" /></el-button></div>
             <div class="container-body">
-              <div v-for="id in container.palletIds" :key="id" class="loaded-pallet"><span><strong>{{ text(palletSnapshot(id)?.palletNo || id) }}</strong>{{ text(palletSnapshot(id)?.orderNo) }}</span><el-button text type="danger" :loading="busyPalletIds.includes(id)" @click="removePallet(id)">移除</el-button></div>
+              <div v-for="id in container.palletIds" :key="id" class="loaded-pallet"><span><strong>{{ text(palletSnapshot(id)?.palletNo || '托盘号待补充') }}</strong><OrderReferenceText :value="text(palletSnapshot(id)?.orderNo)" /></span><el-button text type="danger" :loading="busyPalletIds.includes(id)" @click="removePallet(id)">移除</el-button></div>
               <span v-if="!container.palletIds.length" class="drop-hint">拖入托盘，移入后立即锁定</span>
             </div>
           </div>
@@ -277,6 +278,7 @@ watch([warehouseTab, () => query.orderType], () => {
 .dispatch-workbench { display: grid; grid-template-columns: minmax(550px, 1.5fr) minmax(330px, .85fr) minmax(390px, 1fr); gap: 16px; margin-top: 16px; }
 .order-pane, .detail-pane, .container-pane { min-width: 0; }
 .order-pane header, .detail-pane header, .container-pane header { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 10px; }
+.detail-order-reference { display: flex; min-width: 0; max-width: 240px; align-items: baseline; gap: 3px; }
 h3, p { margin: 0; } h3 { font-size: 16px; } h3 span, header > span, p { color: var(--cc-muted); font-size: 12px; font-weight: 400; }
 .order-type-tabs { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; }
 .order-type-tabs button { flex: 0 0 auto; padding: 5px 12px; border-radius: 16px; font-size: 12px; }
@@ -298,7 +300,7 @@ h3, p { margin: 0; } h3 { font-size: 16px; } h3 span, header > span, p { color:
 .container-head span { color: var(--cc-muted); font-size: 12px; }.container-head b { color: var(--el-color-primary); }
 .container-body { min-height: 76px; padding: 8px; }.drop-hint { display: grid; min-height: 60px; place-items: center; color: var(--cc-muted); font-size: 12px; }
 .loaded-pallet { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--cc-border); }
-.loaded-pallet > span { display: flex; min-width: 0; flex-direction: column; color: var(--cc-muted); font-size: 12px; }.loaded-pallet strong { color: var(--cc-text); font-size: 13px; }
+.loaded-pallet > span { display: flex; min-width: 0; flex: 1; flex-direction: column; color: var(--cc-muted); font-size: 12px; }.loaded-pallet strong { color: var(--cc-text); font-size: 13px; }
 .dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px -20px -20px; padding: 14px 20px; border-top: 1px solid var(--cc-border); background: #fafbfc; }
 .dialog-footer > span { color: var(--cc-muted); font-size: 12px; }
 .vehicle-options { display: grid; gap: 14px; }