费用优化

src/modules/overseas-warehouse/pages/DeliveryOrderDetailView.vue

@@ -13,6 +13,7 @@ import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import { formatOverseasDateTime } from '../lastMilePresentation'
 import { getDeliveryOrder, type DeliveryOrderDetail, type DeliveryFeeRow } from '../api/deliveryOrders'
 import { coveredServiceLabels } from '../feeCoverageTypes'
+import { BusinessDocumentFees } from '@/modules/overseas-business'
 
 const route = useRoute()
 const router = useRouter()
@@ -102,13 +103,15 @@ watch([deliveryNo, customerId], () => { void load() }, { immediate: true })
             </section>
           </el-tab-pane>
 
-          <el-tab-pane name="fees"><template #label><span class="density-tab-icon" aria-hidden="true">💰</span><span>{{ `费用明细 (${detail?.fees.length || 0})` }}</span></template>
+          <el-tab-pane name="fees"><template #label><span class="density-tab-icon" aria-hidden="true">💰</span><span>费用明细</span></template>
             <section class="tab-content" aria-label="派送单费用明细">
+              <BusinessDocumentFees v-if="detail" business-type="DELIVERY_ORDER" :business-no="detail.order.deliveryNo" :customer-id="detail.order.customerId" :business-id="detail.order.id" />
               <template v-if="detail?.feeCoverage?.references.length">
                 <p>本次已确认的原费用覆盖（{{ formatOverseasDateTime(detail.feeCoverage.confirmedAt) }}）：原费用金额供核对，不计作本次新增。</p>
                 <p v-for="reference in detail.feeCoverage.references" :key="`${reference.source.financeFeeId}-${reference.services.join('-')}`">{{ detail.feeCoverage.cargo.find(cargo => cargo.sourceInboundId === reference.source.sourceInboundId)?.inboundCode || reference.source.inboundCode || '—' }} · {{ reference.source.feeItemName || '—' }} · {{ reference.source.currency }} {{ reference.source.amount }} · 版本 {{ reference.source.sourceVersion }} · 已含{{ reference.services.map(service => coveredServiceLabels[service]).join('、') }}</p>
               </template>
-              <el-table :data="detail?.fees || []" border stripe empty-text="暂无费用明细">
+              <h2 v-if="detail?.fees.length" class="fulfillment-fees-heading">履约费用记录</h2>
+              <el-table v-if="detail?.fees.length" :data="detail.fees" border stripe empty-text="暂无履约费用">
                 <el-table-column type="index" label="序号" width="80" /><el-table-column label="应收/应付" width="120"><template #default="scope">{{ scope.row.feeDirection === 'PAYABLE' ? '应付' : scope.row.feeDirection === 'RECEIVABLE' ? '应收' : show(scope.row.feeDirection) }}</template></el-table-column>
                 <el-table-column label="费用类型" min-width="180"><template #default="scope">{{ feeLabels[scope.row.feeType] || scope.row.feeType }}</template></el-table-column><el-table-column prop="currency" label="币种" width="100" />
                 <el-table-column prop="amount" label="金额" min-width="140" align="right" /><el-table-column label="费用状态" min-width="165"><template #default="scope">{{ feeStatus(scope.row as DeliveryFeeRow) }}</template></el-table-column><el-table-column prop="remark" label="备注" min-width="240" />
@@ -142,6 +145,7 @@ watch([deliveryNo, customerId], () => { void load() }, { immediate: true })
 .title-line h1 { margin: 0; font-size: var(--admin-font-section); line-height: 28px; font-weight: 500; }
 .delivery-detail { min-height: 0; overflow: hidden; border: 0; border-radius: 0; }
 .tab-content { width: 100%; padding: 0; box-sizing: border-box; }
+.tab-content .fulfillment-fees-heading { margin-top: var(--admin-space-5); }
 .info-item--wide { grid-column: 1 / -1; }
 
 </style>