优化

src/modules/container-loading/components/ContainerLastLegFeesPanel.vue

@@ -9,7 +9,7 @@ import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import { listContainerFeeSupplierOptions, uploadContainerFeePaymentVoucher, type ContainerFeePaymentMethod, type ContainerFeeSettlementMode, type ContainerFeeSupplierOption } from '@/modules/loading-lists'
 import { adjustOverseasContainerFee, createOverseasContainerFee, listOverseasContainerCustomers, listOverseasContainerFees, reviewOverseasContainerFee, submitOverseasContainerFee, voidOverseasContainerFee, type OverseasContainerCustomer, type OverseasContainerFeeDirection, type OverseasContainerFeeItem, type OverseasContainerFeeSaveRequest, type OverseasContainerFeeSource } from '../api/overseasContainerFees'
 
-const props = defineProps<{ containerBookingId: string; containerNo: string | null }>()
+const props = withDefaults(defineProps<{ title?: string; containerBookingId: string; containerNo: string | null; readonly?: boolean }>(), { title: '目的港及海外段费用（尾程）', readonly: false })
 const access = useAccessPreviewStore()
 const rows = ref<OverseasContainerFeeSource[]>([])
 const customers = ref<OverseasContainerCustomer[]>([])
@@ -21,8 +21,8 @@ const error = ref<ApiErrorDetails | null>(null)
 const dialogOpen = ref(false)
 const editing = ref<OverseasContainerFeeSource | null>(null)
 const canView = computed(() => access.can('platform:finance:customer-arap:list'))
-const canEdit = computed(() => access.can('platform:finance:fee-source:edit'))
-const canReview = computed(() => access.can('platform:finance:fee-source:review'))
+const canEdit = computed(() => !props.readonly && access.can('platform:finance:fee-source:edit'))
+const canReview = computed(() => !props.readonly && access.can('platform:finance:fee-source:review'))
 const feeItems: Array<{ value: OverseasContainerFeeItem; label: string }> = [
   { value: 'PORT_FEE', label: '港口费' }, { value: 'STORAGE_FEE', label: '堆存费' },
   { value: 'CONTAINER_REPAIR_FEE', label: '修箱费' }, { value: 'CRANE_FEE', label: '吊机费' },
@@ -56,7 +56,7 @@ function saveRequest(row?: OverseasContainerFeeSource): OverseasContainerFeeSave
 async function load() {
   if (!canView.value) return
   loading.value = true; error.value = null
-  try { [rows.value, customers.value, suppliers.value] = await Promise.all([listOverseasContainerFees(props.containerBookingId), listOverseasContainerCustomers(props.containerBookingId), listContainerFeeSupplierOptions(null)]) }
+  try { [rows.value, customers.value, suppliers.value] = await Promise.all([listOverseasContainerFees(props.containerBookingId), listOverseasContainerCustomers(props.containerBookingId), props.readonly ? Promise.resolve([]) : listContainerFeeSupplierOptions(null)]) }
   catch (cause) { error.value = getApiErrorDetails(cause, '尾程计费加载失败') }
   finally { loading.value = false }
 }
@@ -107,7 +107,8 @@ onMounted(load)
 
 <template>
   <div class="last-leg-fees">
-    <header class="last-leg-fees__header"><div><h2>尾程计费</h2><p>按真实货柜统一维护港口、堆存、修箱、吊机和码头拖车费用。</p></div><el-button v-if="canEdit" type="primary" :disabled="!containerNo || customers.length === 0" @click="openCreate">新增费用</el-button></header>
+    <header class="last-leg-fees__header"><div><h2>{{ title }}</h2><p>按真实货柜展示港口、堆存、修箱、吊机和码头拖车费用，金额按币种分别列示。</p></div><el-button v-if="canEdit" type="primary" :disabled="!containerNo || customers.length === 0" @click="openCreate">新增费用</el-button></header>
+    <el-alert v-if="readonly" type="info" :closable="false" title="当前路由仅查看海外段费用，写操作请从清关提柜详情进入。" />
     <el-alert v-if="!containerNo" type="warning" :closable="false" title="当前货柜尚未补录真实集装箱号，暂不能新增尾程费用。" />
     <el-alert v-if="!canView" type="warning" :closable="false" title="当前账号无权查看尾程计费。" />
     <LoadErrorState v-else-if="error" title="尾程计费加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>