52 lines
4.9 KiB
Vue
52 lines
4.9 KiB
Vue
<script setup lang="ts">
|
||
import '../overseasFeeDetails.css'
|
||
import type { OverseasFee } from '../api/overseasFees'
|
||
import { feeMoney } from '../overseasFeePresentation'
|
||
import { storageRentSourceType, storageRentTime } from '../storageRentPresentation'
|
||
defineProps<{ fee: OverseasFee }>()
|
||
const number = (value: number) => new Intl.NumberFormat('zh-CN', { maximumFractionDigits: 12 }).format(Number(value))
|
||
const unit = (value: string) => value === 'PALLET' ? '托' : 'CBM'
|
||
</script>
|
||
<template>
|
||
<section v-if="fee.storageRent" aria-label="仓租计费明细">
|
||
<el-descriptions :column="2" border class="density-descriptions overseas-fee-descriptions">
|
||
<el-descriptions-item label="出库批次">{{ fee.storageRent.outboundNo }}</el-descriptions-item>
|
||
<el-descriptions-item label="出库时间">{{ storageRentTime(fee.storageRent.outboundAt) }}</el-descriptions-item>
|
||
<el-descriptions-item label="原计算金额">{{ feeMoney(fee.storageRent.calculatedAmount, fee.originalCurrency) }}</el-descriptions-item>
|
||
<el-descriptions-item label="应扣金额">{{ feeMoney(fee.amount, fee.currency) }}</el-descriptions-item>
|
||
<el-descriptions-item label="实扣金额">{{ feeMoney(fee.storageRent.chargedAmount, fee.currency) }}</el-descriptions-item>
|
||
<el-descriptions-item v-if="fee.exchangeRate != null" label="结算换算">{{ feeMoney(fee.originalAmount, fee.originalCurrency) }} × {{ number(fee.exchangeRate) }} = {{ feeMoney(fee.amount, fee.currency) }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-table :data="fee.storageRent.lines" border empty-text="暂无计租批次">
|
||
<el-table-column label="来源类型" min-width="130"><template #default="{ row }">{{ storageRentSourceType(row.sourceBusinessType) }}</template></el-table-column>
|
||
<el-table-column label="来源单号" min-width="180"><template #default="{ row }">{{ row.sourceBusinessNo || '—' }}</template></el-table-column>
|
||
<el-table-column label="入库批次" min-width="160"><template #default="{ row }">{{ row.batchNo || '—' }}</template></el-table-column>
|
||
<el-table-column label="入库时间" min-width="170"><template #default="{ row }">{{ storageRentTime(row.inboundAt) }}</template></el-table-column>
|
||
<el-table-column prop="quantity" label="本次出库数量" width="130" />
|
||
<el-table-column prop="days" label="库龄天数" width="100" />
|
||
<el-table-column label="原计算仓租" min-width="130"><template #default="{ row }">{{ feeMoney(row.calculatedAmount, fee.originalCurrency) }}</template></el-table-column>
|
||
</el-table>
|
||
<h4>仓租计算过程</h4>
|
||
<template v-if="fee.storageRent.calculations?.length">
|
||
<div v-for="(calculation, index) in fee.storageRent.calculations" :key="index">
|
||
<el-descriptions :column="2" border class="density-descriptions overseas-fee-descriptions">
|
||
<el-descriptions-item label="来源单号">{{ calculation.sourceBusinessNo || '—' }}</el-descriptions-item>
|
||
<el-descriptions-item label="入库批次">{{ calculation.batchNo || '—' }}</el-descriptions-item>
|
||
<el-descriptions-item label="计费口径">{{ calculation.ruleCode === 'RETURN_PALLET' ? '按原托整托计费，余一箱仍计一托' : calculation.ruleCode === 'RETURN_SHARE' ? '历史费用：按原托份额计费' : '按本次出库体积计费' }}</el-descriptions-item>
|
||
<el-descriptions-item label="计租数量">{{ number(calculation.billingQuantity) }} {{ unit(calculation.billingUnit) }}</el-descriptions-item>
|
||
<el-descriptions-item label="累计库龄">{{ calculation.storageDays }} 天</el-descriptions-item>
|
||
<el-descriptions-item label="此前已计费">{{ calculation.previouslyChargedDays }} 天</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-table :data="calculation.tiers" border empty-text="本计租日已计费，本次不重复收费" aria-label="仓租阶梯计算">
|
||
<el-table-column label="计费区间" min-width="130"><template #default="{ row }">第 {{ row.startDay }}–{{ row.endDay }} 天</template></el-table-column>
|
||
<el-table-column label="单价" min-width="160"><template #default="{ row }">{{ fee.originalCurrency }} {{ number(row.unitPrice) }}/{{ unit(calculation.billingUnit) }}/天</template></el-table-column>
|
||
<el-table-column label="计算过程" min-width="300"><template #default="{ row }">{{ row.days }} 天 × {{ number(calculation.billingQuantity) }} {{ unit(calculation.billingUnit) }} × {{ fee.originalCurrency }} {{ number(row.unitPrice) }} = {{ fee.originalCurrency }} {{ number(row.amount) }}</template></el-table-column>
|
||
</el-table>
|
||
<p>本批次计算金额：{{ fee.originalCurrency }} {{ number(calculation.calculatedAmount) }}</p>
|
||
</div>
|
||
<p>各阶梯按原始精度累加，仓租合计四舍五入至 2 位小数；计价采用生成费用时保存的报价。</p>
|
||
</template>
|
||
<p v-else>该笔费用未保存完整计算依据，暂无法展示计算过程。</p>
|
||
</section>
|
||
</template>
|