优化

src/modules/loading-lists/components/LoadingListDetailDrawer.vue

@@ -22,10 +22,11 @@ const props = defineProps<{
   customsSaving?: boolean
 }>()
 
-const emit = defineEmits<{ retry: []; edit: []; confirmPreload: []; attachCustoms: []; completeCustoms: [] }>()
+const emit = defineEmits<{ retry: []; edit: []; editWarehouseRemark: [item: LoadingItem]; confirmPreload: []; attachCustoms: []; completeCustoms: [] }>()
 
 const itemColumns: DataTableColumn[] = [
-  { key: 'sequence', prop: 'loadSequence', label: '装柜顺序', fixed: 'left', width: 92, hideable: false, movable: false },
+  { key: 'actions', label: '操作', fixed: 'left', width: 106, slotName: 'actions', hideable: false, movable: false },
+  { key: 'sequence', prop: 'loadSequence', label: '装柜顺序', width: 92 },
   { key: 'inboundCode', prop: 'inboundCode', label: '入仓码', minWidth: 150 },
   { key: 'orderNo', prop: 'orderNo', label: '订单号', minWidth: 150 },
   { key: 'containerNo', prop: 'containerNo', label: '集装箱号', minWidth: 145, formatter: (row: LoadingItem) => row.containerNo || '—' },
@@ -45,9 +46,9 @@ const itemColumns: DataTableColumn[] = [
   { key: 'fbaTrackingNo', prop: 'fbaTrackingNo', label: 'FBA 追踪编码', minWidth: 155 },
   { key: 'shipmentNo', prop: 'shipmentNo', label: '货件号', minWidth: 140 },
   { key: 'shippingMark', prop: 'shippingMark', label: '唛头', minWidth: 130 },
-  { key: 'internalRemark', prop: 'internalRemark', label: '备注（内部）', minWidth: 160, showOverflowTooltip: true },
-  { key: 'customerRemark', prop: 'customerRemark', label: '备注（客户）', minWidth: 160, showOverflowTooltip: true },
-  { key: 'warehouseRemark', prop: 'warehouseRemark', label: '备注（仓库）', minWidth: 160, showOverflowTooltip: true },
+  { key: 'customerRemark', prop: 'customerRemark', label: '备注（客户）', minWidth: 190, slotName: 'customerRemark' },
+  { key: 'internalRemark', prop: 'internalRemark', label: '备注（内部）', minWidth: 190, slotName: 'internalRemark' },
+  { key: 'warehouseRemark', prop: 'warehouseRemark', label: '备注（仓库）', minWidth: 210, slotName: 'warehouseRemark' },
   { key: 'customsDocument', label: '报关资料', minWidth: 170, slotName: 'customsDocument' },
   { key: 'frozenAt', label: '冻结时间', minWidth: 150, slotName: 'frozenAt' },
 ]
@@ -143,7 +144,7 @@ function formatNumber(value?: number | null, digits = 3) {
       <div v-else-if="mode === 'confirmed'" class="detail-actions"><el-button v-if="canManageCustoms && !detail.customsDocument?.completedAt" @click="emit('attachCustoms')"><FileUp :size="16" />{{ detail.customsDocument ? '更换报关资料' : '上传报关资料' }}</el-button><el-button v-if="canManageCustoms && detail.customsDocument && !detail.customsDocument.completedAt" type="primary" :loading="customsSaving" @click="emit('completeCustoms')"><Check :size="16" />完成报关</el-button><StatusBadge v-if="detail.customsDocument?.completedAt" status="报关完成" /></div>
 
       <section class="detail-section surface-panel">
-        <header class="detail-section__header"><h2>装柜货物明细</h2><span>{{ detail.items.length }} 条</span></header>
+        <header class="detail-section__header"><div><h2>装柜货物明细</h2><p>仓库备注将随装柜完成资料下发海外仓</p></div><span>{{ detail.items.length }} 条</span></header>
         <DataTable
           :data="detail.items"
           :columns="itemColumns"
@@ -153,10 +154,17 @@ function formatNumber(value?: number | null, digits = 3) {
           empty-text="暂无装柜货物明细"
           aria-label="装柜货物明细"
         >
+          <template #actions="{ row }">
+            <el-button v-if="mode === 'preload' && canEdit && ['EDITING', 'LOADING'].includes(summary.status)" size="small" type="primary" plain :aria-label="`编辑 ${row.inboundCode || row.orderNo} 的仓库备注`" @click="emit('editWarehouseRemark', row as LoadingItem)"><Pencil :size="14" />编辑备注</el-button>
+            <span v-else aria-label="只读">—</span>
+          </template>
           <template #grossWeight="{ row }">{{ formatNumber(row.grossWeightKg) }}</template>
           <template #netWeight="{ row }">{{ formatNumber(row.netWeightKg) }}</template>
           <template #volume="{ row }">{{ formatNumber(row.volumeCbm) }}</template>
           <template #dimensionalWeight="{ row }">{{ formatNumber(row.dimensionalWeightKg) }}</template>
+          <template #customerRemark="{ row }"><div class="remark-cell"><span>{{ row.customerRemark || '—' }}</span><small>来源：客户下单</small></div></template>
+          <template #internalRemark="{ row }"><div class="remark-cell"><span>{{ row.internalRemark || '—' }}</span><small>来源：订单内部备注</small></div></template>
+          <template #warehouseRemark="{ row }"><div class="remark-cell"><span>{{ row.warehouseRemark || '—' }}</span><small>{{ mode === 'preload' ? '由仓库维护' : '装柜完成时冻结' }}</small></div></template>
           <template #frozenAt="{ row }">{{ formatDateTime(row.frozenAt) }}</template>
           <template #customsDocument><span class="document-cell">{{ detail.customsDocument?.fileName || '未上传' }}</span></template>
         </DataTable>
@@ -192,11 +200,13 @@ function formatNumber(value?: number | null, digits = 3) {
 .detail-summary__wide { grid-column: span 2; }
 .detail-actions { display: flex; justify-content: flex-end; }
 .detail-section, .history-section { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); background: #fff; }
-.detail-section__header { display: flex; align-items: baseline; gap: 10px; padding: 18px 18px 0; }
+.detail-section__header { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 0; }
 .detail-section__header h2 { margin: 0; font-size: 16px; }
 .detail-section__header span { color: var(--cc-muted); font-size: 12px; }
+.detail-section__header p { margin: 4px 0 0; color: var(--cc-muted); font-size: 12px; }
 .detail-section :deep(.el-table) { width: 100%; }
 .detail-section small { display: block; margin-top: 3px; color: var(--cc-muted); }
+.remark-cell { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
 .history-section { padding: 18px; }
 .history-section header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
 .history-section h2 { margin: 0; font-size: 16px; }