优化

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

@@ -9,10 +9,15 @@ import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.v
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
-import { getFinanceSettlement, listFinancePayableSettlements, listFinanceReceivableSettlements } from '@/modules/finance/api/finance'
+import { getFinanceSettlement, listFinancePayableSettlements, listFinanceReceivableSettlements } from '@/modules/finance'
 import { adjustContainerFee, approveContainerFee, createContainerFee, listApplicableFeeItems, listContainerCostDetails, listContainerFeeSupplierOptions, listContainerFees, rejectContainerFee, uploadContainerFeePaymentVoucher, voidContainerFee, type ApplicableFeeItem, type ContainerCostDetail, type ContainerFeeSupplierOption, type ContainerFeeResource, type ContainerFeeSaveRequest } from '../api/containerFees'
 
-const props = defineProps<{ planId: string; containerBookingId: string; customers: Array<{ accountId: string; customerName: string | null }> }>()
+const props = defineProps<{
+  planId: string
+  containerBookingId: string
+  customers: Array<{ accountId: string; customerName: string | null }>
+  businessReferences: Array<{ orderId: string; orderNo: string; inboundId: string; inboundCode: string | null }>
+}>()
 const access = useAccessPreviewStore()
 const accountId = ref('')
 const fees = ref<ContainerFeeResource[]>([])
@@ -56,6 +61,8 @@ const customerOptions = computed(() => {
   return [...unique].map(([value, label]) => ({ value, label }))
 })
 const selectedCustomer = computed(() => customerOptions.value.find((item) => item.value === accountId.value))
+const orderNumbers = computed(() => new Map(props.businessReferences.map((item) => [item.orderId, item.orderNo])))
+const inboundCodes = computed(() => new Map(props.businessReferences.map((item) => [item.inboundId, item.inboundCode])))
 const applicableItems = computed(() => feeItems.value.filter((item) => form.direction === 'RECEIVABLE'
   ? item.warehouseReceivable || item.pickupReceivable : item.warehousePayable || item.pickupPayable))
 const selectedFeeItem = computed(() => feeItems.value.find((item) => item.id === form.feeItemId))
@@ -73,8 +80,8 @@ const columns: DataTableColumn[] = [
   { key: 'remark', prop: 'remark', label: '备注', minWidth: 180, showOverflowTooltip: true },
 ]
 const allocationColumns: DataTableColumn[] = [
-  { key: 'orderId', prop: 'orderId', label: '订单', fixed: 'left', minWidth: 150 },
-  { key: 'inboundId', prop: 'inboundId', label: '入库单', minWidth: 150 },
+  { key: 'orderNo', label: '订单编码', fixed: 'left', minWidth: 170, slotName: 'orderNo' },
+  { key: 'inboundCode', label: '入仓码', minWidth: 170, slotName: 'inboundCode' },
   { key: 'volumeCbm', label: '订单体积(m³)', width: 125, align: 'right', slotName: 'volume' },
   { key: 'allocationRate', label: '分摊比例', width: 110, align: 'right', slotName: 'rate' },
   { key: 'allocatedAmount', label: '分摊金额(CNY)', width: 135, align: 'right', slotName: 'allocated' },
@@ -300,7 +307,7 @@ onMounted(() => void load())
         <template #amount="{ row }">{{ money(row.amount) }}</template><template #reviewStatus="{ row }"><StatusBadge :status="row.reviewStatus === 'PENDING' ? '待审核' : row.reviewStatus === 'APPROVED' ? '已通过' : '已驳回'" /></template><template #sourceStatus="{ row }"><StatusBadge :status="row.sourceStatus === 'ACTIVE' ? '有效' : '已作废'" /></template>
       </DataTable>
 
-      <div v-if="accountId" class="allocation-section"><header><div><h3>财务体积分摊</h3><p>{{ selectedCustomer?.label }} · 仅展示 Finance 已持久化结果</p></div></header><el-empty v-if="!loading && costs.length === 0" description="尚无与该柜次关联的财务分摊结果" :image-size="64" /><article v-for="cost in costs" :key="cost.id" class="cost-block"><div class="cost-summary"><strong>{{ cost.feeItemName || '柜次成本' }}</strong><span>供应商：{{ cost.supplierName || '服务端未返回' }}</span><span>金额：¥{{ money(cost.amount) }}</span></div><DataTable :data="cost.allocations" :columns="allocationColumns" :preference-key="`container-cost-${cost.id}`" row-key="id" empty-text="服务端未返回分摊明细"><template #volume="{ row }">{{ row.volumeCbm.toFixed(3) }}</template><template #rate="{ row }">{{ (row.allocationRate * 100).toFixed(2) }}%</template><template #allocated="{ row }">{{ money(row.allocatedAmount) }}</template></DataTable></article></div>
+      <div v-if="accountId" class="allocation-section"><header><div><h3>财务体积分摊</h3><p>{{ selectedCustomer?.label }} · 仅展示 Finance 已持久化结果</p></div></header><el-empty v-if="!loading && costs.length === 0" description="尚无与该柜次关联的财务分摊结果" :image-size="64" /><article v-for="cost in costs" :key="cost.id" class="cost-block"><div class="cost-summary"><strong>{{ cost.feeItemName || '柜次成本' }}</strong><span>供应商：{{ cost.supplierName || '服务端未返回' }}</span><span>金额：¥{{ money(cost.amount) }}</span></div><DataTable :data="cost.allocations" :columns="allocationColumns" :preference-key="`container-cost-${cost.id}`" row-key="id" empty-text="服务端未返回分摊明细"><template #orderNo="{ row }">{{ orderNumbers.get(row.orderId) || '订单编码待补充' }}</template><template #inboundCode="{ row }">{{ row.inboundId ? (inboundCodes.get(row.inboundId) || '入仓码待补充') : '—' }}</template><template #volume="{ row }">{{ row.volumeCbm.toFixed(3) }}</template><template #rate="{ row }">{{ (row.allocationRate * 100).toFixed(2) }}%</template><template #allocated="{ row }">{{ money(row.allocatedAmount) }}</template></DataTable></article></div>
     </template>
 
     <AppDialog v-model="editorOpen" :title="target ? '调整已审核费用' : '新增柜次费用'" confirm-text="保存" :confirm-loading="saving" @confirm="save">