36 lines
2.7 KiB
Vue
36 lines
2.7 KiB
Vue
<script setup lang="ts">
|
||
import type { CoveredService, FeeCoveragePreview, FeeCoverageSelection, OriginalFeeSource } from '../feeCoverageTypes'
|
||
import { coveredServiceLabels } from '../feeCoverageTypes'
|
||
const props = defineProps<{ preview: FeeCoveragePreview | null; disabled?: boolean; loading?: boolean }>()
|
||
const selection = defineModel<FeeCoverageSelection[]>({ default: () => [] })
|
||
function selected(id: string) { return selection.value.find(row => row.financeFeeId === id)?.services || [] }
|
||
function inboundCode(source: OriginalFeeSource) { return props.preview?.cargo.find(row => row.sourceInboundId === source.sourceInboundId)?.inboundCode || source.inboundCode || '—' }
|
||
function change(id: string, services: CoveredService[]) {
|
||
const source = props.preview?.feeSources.find(row => row.financeFeeId === id)
|
||
if (!source) return
|
||
selection.value = [...selection.value.filter(row => row.financeFeeId !== id), ...(services.length ? [{ financeFeeId: id, sourceVersion: source.sourceVersion, sourceHash: source.sourceHash, services: [...services].sort() }] : [])].sort((a, b) => a.financeFeeId.localeCompare(b.financeFeeId))
|
||
}
|
||
</script>
|
||
<template>
|
||
<section aria-label="原运费服务覆盖" class="coverage-panel">
|
||
<h3>原运费服务覆盖</h3>
|
||
<p>仅勾选已与客户明确约定包含的服务。原费用金额供核对，不是本次新增金额；同托多票须分别确认。</p>
|
||
<p v-if="loading">正在读取原费用…</p>
|
||
<p v-else-if="!preview">原费用尚未读取，请重新打开后核对。</p>
|
||
<p v-else-if="!preview.sourceComplete">{{ preview.blockReason }}；当前不能引用原费用。</p>
|
||
<p v-else-if="!preview?.feeSources.length">暂无可引用的已确认原费用。</p>
|
||
<div v-for="source in preview?.feeSources || []" :key="source.financeFeeId" class="coverage-row">
|
||
<span>{{ inboundCode(source) }} · {{ source.feeItemName || '—' }} · {{ source.currency }} {{ source.amount }} · 版本 {{ source.sourceVersion }}</span>
|
||
<el-checkbox-group :model-value="selected(source.financeFeeId)" :disabled="disabled || !preview?.sourceComplete" @update:model-value="change(source.financeFeeId, $event as CoveredService[])">
|
||
<el-checkbox v-for="(label, code) in coveredServiceLabels" :key="code" :value="code">已含{{ label }}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
<style scoped>
|
||
.coverage-panel { margin-bottom: 12px; }
|
||
.coverage-panel p { margin: 6px 0; color: var(--el-text-color-secondary); font-size: 12px; }
|
||
.coverage-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--el-border-color-lighter); font-size: 12px; }
|
||
.coverage-row > span { min-width: 0; overflow-wrap: anywhere; }
|
||
</style>
|