@@ -233,7 +233,7 @@ defineExpose({ reload: loadFee })
< span class = "fee-heading-icon" aria -hidden = " true " > < CircleDollarSign :size = "20" / > < / span >
< div >
< h3 id = "inbound-fee-title" > 入库费用快照 < / h3 >
< p > 展示审核完成后锁定的计费依据和对客费用 ， 不在此重复触发试算或 发布。 < / p >
< p > 测量审核后的头程费用 ， 人工确认后才 发布。 < / p >
< / div >
< / div >
< div class = "fee-heading-actions" >
@@ -317,41 +317,44 @@ defineExpose({ reload: loadFee })
< / div >
< / section >
< div class = "fee-detail-gri d" >
< section aria -labelledby = " rule -title " >
< div class = "section-title" > < div > < h4 id = "rule-title" > 客户计费规则 < / h4 > < p > { { snapshot . ruleCode } } · V { { snapshot . chargeRuleVersion } } < / p > < / div > < / div >
< dl >
< div > < dt > 客户 < / dt > < dd > { { snapshot . customerName } } < / dd > < / div >
< div > < dt > 业务类型 < / dt > < dd > { { firstLegBusinessTypeLabel ( snapshot . businessType ) } } < / dd > < / div >
< div > < dt > 计费口径 < / dt > < dd > { { chargeModeLabel } } < / dd > < / div >
< div > < dt > 舍入规则 < / dt > < dd > 保留 { { snapshot . roundingScale } } 位 ， { { roundingModeLabel ( snapshot . roundingMode ) } } < / dd > < / div >
< / dl >
< / section >
< section aria -labelledby = " rate -title " >
< div class = "section-title" > < div > < h4 id = "rate-title" > 渠道价格 < / h4 > < p > { { snapshot . rateCode } } · V { { snapshot . carrierRateVersion } } < / p > < / div > < / div >
< dl >
< div > < dt > 起运仓 < / dt > < dd > { { snapshot . originWarehouseName } } < / dd > < / div >
< div > < dt > 渠道 < / dt > < dd > { { snapshot . channelCode } } < / dd > < / div >
< div > < dt > FBA 目的 仓< / dt > < dd > { { snapshot . destinationCode } } < / dd > < / div >
< div > < dt > 价格有效期 < / dt > < dd > { { formatDateTime ( snapshot . rateEffectiveFrom ) } } 至 { { formatDateTime ( snapshot . rateEffectiveTo ) } } < / dd > < / div >
< / dl >
< / section >
< / div >
< details class = "fee-advance d" >
< summary > 查看价格来源与时间记录 < / summary >
< div class = "fee-detail-grid" >
< section v-if = "snapshot.ruleCode" aria-labelledby="rule-title" >
< div class = "section-title" > < div > < h4 id = "rule-title" > 客户计费规则 < / h4 > < p > { { snapshot . ruleCode } } · V { { snapshot . chargeRuleVersion } } < / p > < / div > < / div >
< dl >
< div > < dt > 客户 < / dt > < dd > { { snapshot . customerName } } < / dd > < / div >
< div > < dt > 业务类型 < / dt > < dd > { { firstLegBusinessTypeLabel ( snapshot . businessType ) } } < / dd > < / div >
< div > < dt > 计费口径 < / dt > < dd > { { chargeModeLabel } } < / dd > < / div >
< div > < dt > 舍入规则 < / dt > < dd > { { snapshot . roundingScale == null ? '—' : ` 保留 ${ snapshot . roundingScale } 位， ${ roundingModeLabel ( snapshot . roundingMode ) } ` } } < / dd > < / div >
< / dl >
< / section >
< section aria -labelledby = " rate -title " >
< div class = "section-title" > < div > < h4 id = "rate-title" > 渠道价格 < / h4 > < p > { { snapshot . rateCode } } · V { { snapshot . carrierRateVersion } } < / p > < / div > < / div >
< dl >
< div > < dt > 起运 仓< / dt > < dd > { { snapshot . originWarehouseName } } < / dd > < / div >
< div > < dt > 渠道 < / dt > < dd > { { snapshot . channelCode } } < / dd > < / div >
< div > < dt > FBA 目的仓 < / dt > < dd > { { snapshot . destinationCode } } < / dd > < / div >
< div > < dt > 价格有效期 < / dt > < dd > { { formatDateTime ( snapshot . rateEffectiveFrom ) } } 至 { { formatDateTime ( snapshot . rateEffectiveTo ) } } < / dd > < / div >
< / dl >
< / section >
< / div >
< section class = "fee-timeline" aria -labelledby = " fee -timeline -title " >
< div class = "section-title" > < div > < h4 id = "fee-timeline-title" > 快照时间 < / h4 > < p > 每个节点均由后端状态机记录 。 < / p > < / div > < / div >
< ol >
< li > < span > 试算 < / span > < strong > { { formatDateTime ( snapshot . calculatedAt ) } } < / strong > < / li >
< li : class = "{ pending: !snapshot.confirmedAt }" > < span > 确认 < / span > < strong > { { formatDateTime ( snapshot . confirmedAt ) } } < / strong > < / li >
< li : class = "{ pending: !snapshot.sentAt }" > < span > 发布给客户 < / span > < strong > { { formatDateTime ( snapshot . sentAt ) } } < / strong > < / li >
< / ol >
< / section >
< section class = "fee-timeline" aria -labelledby = " fee -timeline -title " >
< div class = "section-title" > < div > < h4 id = "fee-timeline-title" > 时间记录 < / h4 > < / div > < / div >
< ol >
< li > < span > 试算 < / span > < strong > { { formatDateTime ( snapshot . calculatedAt ) } } < / strong > < / li >
< li : class = "{ pending: !snapshot.confirmedAt }" > < span > 确认 < / span > < strong > { { formatDateTime ( snapshot . confirmedAt ) } } < / strong > < / li >
< li : class = "{ pending: !snapshot.sentAt }" > < span > 发布 < / span > < strong > { { formatDateTime ( snapshot . sentAt ) } } < / strong > < / li >
< / ol >
< / section >
< / details >
< / div >
< AppDialog
v-model = "adjustOpen"
title = "调整入库费用"
width = "min(5 60px, calc(100vw - 28px))"
width = "min(7 60px, calc(100vw - 28px))"
confirm -text = " 确认调整并生成新版本 "
confirm -type = " warning "
:confirm-loading = "adjusting"
@@ -371,15 +374,15 @@ defineExpose({ reload: loadFee })
< div class = "adjustment-amounts" >
< el-form-item label = "调整后计费量" prop = "chargeableQuantity" required >
< el-input-number v-model = "adjustmentForm.chargeableQuantity" aria-label="调整后计费量" :min="0.0001" :max="999999999999.9999" :precision="4" :step="1" controls-position="right" / >
< span > { { chargeUnitLabel } } < / span >
< span class = "adjustment-unit" > { { chargeUnitLabel } } < / span >
< / el-form-item >
< el-form-item label = "调整后单价" prop = "unitPrice" required >
< el-input-number v-model = "adjustmentForm.unitPrice" aria-label="调整后单价" :min="0" :max="999999999999.9999" :precision="4" :step="0.1" controls-position="right" / >
< span > { { snapshot ? . currency } } / { { chargeUnitLabel } } < / span >
< span class = "adjustment-unit" > { { snapshot ? . currency } } / { { chargeUnitLabel } } < / span >
< / el-form-item >
< el-form-item label = "调整后附加费" prop = "additionalAmount" required >
< el-input-number v-model = "adjustmentForm.additionalAmount" aria-label="调整后附加费" :min="0" :max="999999999999.99" :precision="2" :step="10" controls-position="right" / >
< span > { { snapshot ? . currency } } < / span >
< span class = "adjustment-unit" > { { snapshot ? . currency } } < / span >
< / el-form-item >
< / div >
< div class = "adjustment-total" > < span > 当前服务端计算金额 < / span > < strong > { { formatMoney ( snapshot ? . totalAmount , snapshot ? . currency ) } } < / strong > < small > 提交后以服务端返回的新版本金额为准 < / small > < / div >
@@ -406,24 +409,24 @@ defineExpose({ reload: loadFee })
. inbound - fee - panel : deep ( . el - alert . el - button ) { margin - top : 8 px ; }
. empty - note { margin : 0 ; color : var ( -- cc - muted ) ; font - size : 12 px ; }
. fee - content { border - top : 1 px solid var ( -- cc - border ) ; }
. fee - summary { display : grid ; grid - template - columns : minmax ( 260 px , 1.35 fr ) repeat ( 2 , minmax ( 180 px , 1 fr ) ) ; border - bottom : 1 px solid var ( -- cc - border ) ; background : # f8fafc ; }
. fee - total , . fee - summary - item { display : flex ; min - width : 0 ; flex - direction : column ; justify - content : center ; gap : 6 px ; padding : 20 px ; }
. fee - summary { display : grid ; grid - template - columns : minmax ( 240 px , 1.25 fr ) repeat ( 2 , minmax ( 160 px , 1 fr ) ) ; border - bottom : 1 px solid var ( -- cc - border ) ; }
. fee - total , . fee - summary - item { display : flex ; min - width : 0 ; flex - direction : column ; justify - content : center ; gap : 3 px ; padding : 11 px 14 px ; }
. fee - summary - item { border - left : 1 px solid var ( -- cc - border ) ; }
. fee - summary span , . fee - summary small { color : var ( -- cc - muted ) ; font - size : 11 px ; }
. fee - summary strong { font - size : 18 px ; line - height : 1.25 ; overflow - wrap : anywhere ; }
. fee - total strong { color : # 0 f5c49 ; font - size : 27 px ; letter - spacing : - .02 em ; }
. fee - total strong { color : # 0 f5c49 ; font - size : 21 px ; letter - spacing : - .01 em ; }
. version - status { display : flex ; flex - wrap : wrap ; align - items : center ; gap : 8 px ; }
. calculation - section , . fee - timeline { padding : 22 px 0 ; border - bottom : 1 px solid var ( -- cc - border ) ; }
. calculation - section , . fee - timeline { padding : 14 px 0 ; border - bottom : 1 px solid var ( -- cc - border ) ; }
. section - title { display : flex ; align - items : flex - start ; justify - content : space - between ; gap : 16 px ; }
. section - title h4 { font - size : 14 px ; }
. calculation - flow { display : grid ; grid - template - columns : repeat ( 4 , minmax ( 0 , 1 fr ) ) ; margin - top : 16 px ; border : 1 px solid var ( -- cc - border ) ; border - radius : 12 px ; overflow : hidden ; }
. calculation - flow > div { display : flex ; min - width : 0 ; min - height : 88 px ; flex - direction : column ; justify - content : center ; gap : 6 px ; padding : 14 px 16 px ; border - right : 1 px solid var ( -- cc - border ) ; }
. calculation - flow { display : grid ; grid - template - columns : repeat ( 4 , minmax ( 0 , 1 fr ) ) ; margin - top : 10 px ; border - top : 1 px solid var ( -- cc - border ) ; border - bottom : 1 px solid var ( -- cc - border ) ; }
. calculation - flow > div { display : flex ; min - width : 0 ; min - height : 58 px ; flex - direction : column ; justify - content : center ; gap : 3 px ; padding : 9 px 12 px ; border - right : 1 px solid var ( -- cc - border ) ; }
. calculation - flow > div : last - child { border - right : 0 ; }
. calculation - flow span , . calculation - flow small { color : var ( -- cc - muted ) ; font - size : 11 px ; }
. calculation - flow strong { font - size : 15 px ; overflow - wrap : anywhere ; }
. calculation - flow . is - chargeable { background : # f0fdf9 ; }
. calculation - flow . is - chargeable { background : # f7fbfa ; }
. calculation - flow . is - chargeable strong { color : # 087 d70 ; }
. amount - equation { display : flex ; flex - wrap : wrap ; align - items : center ; gap : 10 px ; margin - top : 12 px ; padding : 12 px 14 px ; border - radius : 8 px ; background : # f8fafc ; color : # 475467 ; font - size : 12 px ; }
. amount - equation { display : flex ; flex - wrap : wrap ; align - items : center ; gap : 8 px ; margin - top : 8 px ; padding : 7 px 0 ; color : # 475467 ; font - size : 12 px ; }
. amount - equation i { color : # 98 a2b3 ; font - style : normal ; }
. amount - equation strong { color : var ( -- cc - text ) ; font - size : 15 px ; }
. fee - detail - grid { display : grid ; grid - template - columns : repeat ( 2 , minmax ( 0 , 1 fr ) ) ; border - bottom : 1 px solid var ( -- cc - border ) ; }
@@ -442,15 +445,21 @@ defineExpose({ reload: loadFee })
. fee - timeline li . pending : : before { background : # 98 a2b3 ; }
. fee - timeline span { color : var ( -- cc - muted ) ; font - size : 11 px ; }
. fee - timeline strong { font - size : 12 px ; overflow - wrap : anywhere ; }
. fee - advanced { border - top : 1 px solid var ( -- cc - border ) ; }
. fee - advanced > summary { padding : 10 px 2 px ; color : var ( -- cc - primary ) ; font - size : 12 px ; font - weight : 600 ; cursor : pointer ; }
. fee - advanced : not ( [ open ] ) > summary { border - bottom : 0 ; }
. fee - advanced . fee - detail - grid > section : only - child { grid - column : 1 / - 1 ; }
. adjustment - alert { margin - top : 12 px ; }
. adjustment - form { margin - top : 18 px ; }
. adjustment - amounts { display : grid ; grid - template - columns : repeat ( 2 , minmax ( 0 , 1 fr ) ) ; gap : 16 px ; }
. adjustment - amounts : deep ( . el - form - item _ _content ) { flex - wrap : nowrap ; }
. adjustment - amounts { display : grid ; grid - template - columns : repeat ( 3 , minmax ( 0 , 1 fr ) ) ; gap : 18 px ; }
. adjustment - amounts : deep ( . el - form - item ) { min - width : 0 ; margin - bottom : 18 px ; }
. adjustment - amounts : deep ( . el - form - item _ _content ) { display : grid ; grid - template - columns : minmax ( 0 , 1 fr ) auto ; flex - wrap : nowrap ; column - gap : 8 px ; }
. adjustment - amounts : deep ( . el - input - number ) { width : 100 % ; }
. adjustment - amounts : deep ( . el - form - item _ _content > span ) { margin - left : 8 px ; color : var ( -- cc - muted ) ; font - size : 12 px ; }
. adjustment - total { display : flex ; align - items : baseline ; justify - content : space - between ; gap : 16 px ; margin : 0 0 18 px ; padding : 13 px 14 px ; border - radius : 8 px ; background : # f8fafc ; }
. adjustment - unit { min - width : max - content ; color : var ( -- cc - muted ) ; font - size : 12 px ; white - space : nowrap ; }
. adjustment - total { display : grid ; grid - template - columns : auto minmax ( 150 px , 1 fr ) auto ; align - items : baseline ; gap : 18 px ; margin : 0 0 18 px ; padding : 13 px 16 px ; border - radius : 8 px ; background : # f8fafc ; }
. adjustment - total span { color : var ( -- cc - muted ) ; font - size : 12 px ; }
. adjustment - total strong { font - size : 18 px ; }
. adjustment - total strong { justify - self : center ; font - size : 18 px ; white - space : nowrap ; }
. adjustment - total small { color : var ( -- cc - muted ) ; font - size : 11 px ; text - align : right ; }
. sr - only { position : absolute ; width : 1 px ; height : 1 px ; overflow : hidden ; clip : rect ( 0 0 0 0 ) ; clip - path : inset ( 50 % ) ; white - space : nowrap ; }
@ media ( max - width : 900 px ) {
@@ -466,7 +475,7 @@ defineExpose({ reload: loadFee })
. fee - heading { align - items : stretch ; flex - direction : column ; }
. fee - heading - actions { justify - content : flex - start ; }
. fee - heading - actions . el - button : not ( . is - circle ) { flex : 1 ; min - height : 44 px ; }
. fee - summary , . calculation - flow , . fee - detail - grid , . fee - timeline ol , . adjustment - amounts { grid - template - columns : 1 fr ; }
. fee - summary , . calculation - flow , . fee - detail - grid , . fee - timeline ol { grid - template - columns : 1 fr ; }
. fee - summary - item { border - top : 1 px solid var ( -- cc - border ) ; border - left : 0 ; }
. calculation - flow > div { min - height : 76 px ; border - right : 0 ; border - bottom : 1 px solid var ( -- cc - border ) ; }
. calculation - flow > div : last - child { border - bottom : 0 ; }
@@ -475,6 +484,16 @@ defineExpose({ reload: loadFee })
. fee - timeline ol { gap : 16 px ; }
. fee - timeline li { padding - left : 20 px ; }
. fee - timeline li : : after { display : none ; }
. adjustment - amounts { grid - template - columns : repeat ( 2 , minmax ( 0 , 1 fr ) ) ; }
. adjustment - total { grid - template - columns : auto 1 fr ; }
. adjustment - total strong { justify - self : end ; }
. adjustment - total small { grid - column : 1 / - 1 ; text - align : left ; }
}
@ media ( max - width : 520 px ) {
. adjustment - amounts { grid - template - columns : 1 fr ; gap : 0 ; }
. adjustment - total { grid - template - columns : 1 fr ; gap : 6 px ; }
. adjustment - total strong { justify - self : start ; }
}
@ media ( max - width : 360 px ) {
