提交

src/modules/first-leg/components/InboundBillingPanel.test.mjs

@@ -14,13 +14,15 @@ test('renders loading, pending, isolated error, and published states', () => {
   assert.match(source, /\$emit\('retry'\)/)
 })
 
-test('shows the confirmed merchant inbound and fee fields without write actions', () => {
+test('shows the confirmed merchant inbound, measurement details and customer confirmation entry', () => {
   for (const label of ['入仓码', '平台收货仓', '实际毛重', '实测体积', '托盘与库位', '换算与精度', '最终计费量', '基础费用', '附加费用', '费用合计', '平台备注']) {
     assert.match(source, new RegExp(label))
   }
   assert.match(source, /formatInboundMoney\(props\.data\.latestFee\.totalAmount/)
   assert.match(source, /formatConversionPrecision\(/)
-  assert.doesNotMatch(source, /确认费用|调整费用|发送费用|下载照片/)
+  assert.match(source, /确认费用/)
+  assert.match(source, /measurementItems/)
+  assert.doesNotMatch(source, /调整费用|发送费用|下载照片/)
   assert.doesNotMatch(source, /internalNotes|statusHistory|files/)
   assert.match(source, /latestFee\.ruleCode/)
   assert.match(source, /latestFee\.rateCode/)

src/modules/first-leg/components/InboundBillingPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue'
 import { Clock3, PackageCheck, RefreshCw, TriangleAlert } from '@lucide/vue'
 import type { MerchantInboundBilling } from '@/modules/first-leg/types/inboundBilling'
 import {
@@ -17,24 +18,34 @@ const props = withDefaults(defineProps<{
   unavailable?: boolean
   unavailableMessage?: string
   error?: string
+  autoOpen?: boolean
 }>(), {
   data: null,
   loading: false,
   unavailable: false,
-  unavailableMessage: '入库及费用结果尚未发布',
+  unavailableMessage: '还未测量推送',
   error: '',
+  autoOpen: false,
 })
 
 defineEmits<{
   retry: []
 }>()
+
+const feeDialogOpen = ref(false)
+watch(() => [props.autoOpen, props.data] as const, ([autoOpen, data]) => {
+  if (autoOpen && data) feeDialogOpen.value = true
+}, { immediate: true })
 </script>
 
 <template>
   <section class="inbound-billing-panel" aria-labelledby="inbound-billing-title">
     <header class="inbound-billing-heading">
       <h3 id="inbound-billing-title">入库与费用</h3>
-      <el-tag v-if="props.data" type="success" effect="light">待分柜 · 费用已发布</el-tag>
+      <div v-if="props.data" class="inbound-billing-actions">
+        <el-tag type="success" effect="light">待分柜 · 费用已发布</el-tag>
+        <el-button type="primary" @click="feeDialogOpen = true">确认费用</el-button>
+      </div>
     </header>
 
     <div v-if="props.loading" class="inbound-billing-loading" aria-live="polite" aria-busy="true">
@@ -55,7 +66,7 @@ defineEmits<{
       <Clock3 :size="22" />
       <div>
         <strong>{{ props.unavailableMessage }}</strong>
-        <span>客服完成测量审核、入库并发布费用后，将在这里展示最终结果。</span>
+        <span>平台完成测量审核并确认推送费用后，将在这里展示测量与计费结果。</span>
       </div>
     </div>
 
@@ -68,7 +79,7 @@ defineEmits<{
       </dl>
 
       <div class="inbound-result-section">
-        <h4>实测结果</h4>
+        <div class="inbound-section-title"><h4>测量数据</h4><el-tag size="small" type="warning" effect="light">后台推送</el-tag></div>
         <dl class="inbound-measurements">
           <div><dt>实际箱数</dt><dd>{{ formatInboundNumber(props.data.inbound.summary.totalPackageCount, 0) }}</dd></div>
           <div><dt>实际毛重</dt><dd>{{ formatInboundMeasure(props.data.inbound.summary.actualGrossWeightKg, 'kg') }}</dd></div>
@@ -77,6 +88,17 @@ defineEmits<{
           <div><dt>材积重</dt><dd>{{ formatInboundMeasure(props.data.inbound.summary.volumeWeightKg, 'kg') }}</dd></div>
           <div><dt>测量完成</dt><dd>{{ formatInboundDateTime(props.data.inbound.summary.measureCompletedAt) }}</dd></div>
         </dl>
+        <el-table v-if="props.data.measurementItems.length" class="measurement-detail-table" :data="props.data.measurementItems" border size="small">
+          <el-table-column type="index" label="#" width="54" />
+          <el-table-column prop="lengthCm" label="箱规长(cm)" min-width="105" />
+          <el-table-column prop="widthCm" label="箱规宽(cm)" min-width="105" />
+          <el-table-column prop="heightCm" label="箱规高(cm)" min-width="105" />
+          <el-table-column prop="packageCount" label="箱数" min-width="76" />
+          <el-table-column label="每箱体积" min-width="105"><template #default="{ row }">{{ formatInboundMeasure(row.unitVolumeCbm, 'm³') }}</template></el-table-column>
+          <el-table-column label="总体积" min-width="105"><template #default="{ row }">{{ formatInboundMeasure(row.totalVolumeCbm, 'm³') }}</template></el-table-column>
+          <el-table-column label="总材积重" min-width="105"><template #default="{ row }">{{ formatInboundMeasure(row.volumeWeightKg, 'kg') }}</template></el-table-column>
+          <el-table-column prop="boxSpecification" label="备注" min-width="130" />
+        </el-table>
       </div>
 
       <div class="inbound-result-section">
@@ -138,12 +160,36 @@ defineEmits<{
         <p>{{ props.data.inbound.publicRemark }}</p>
       </div>
     </template>
+
+    <el-dialog v-model="feeDialogOpen" title="确认测量与计费数据" width="min(980px, 94vw)" append-to-body>
+      <dl v-if="props.data" class="inbound-measurements fee-dialog-summary">
+        <div><dt>测量总箱数</dt><dd>{{ formatInboundNumber(props.data.measurementSummary.actualPackageCount, 0) }}</dd></div>
+        <div><dt>测量总毛重</dt><dd>{{ formatInboundMeasure(props.data.measurementSummary.actualGrossWeightKg, 'kg') }}</dd></div>
+        <div><dt>测量总体积</dt><dd>{{ formatInboundMeasure(props.data.measurementSummary.actualVolumeCbm, 'm³') }}</dd></div>
+        <div><dt>测量总材积重</dt><dd>{{ formatInboundMeasure(props.data.measurementSummary.volumeWeightKg, 'kg') }}</dd></div>
+        <div><dt>计费体积</dt><dd>{{ formatInboundMeasure(props.data.billingBasis.chargeableVolumeCbm, 'm³') }}</dd></div>
+        <div><dt>计费重量</dt><dd>{{ formatInboundMeasure(props.data.billingBasis.chargeableWeightKg, 'kg') }}</dd></div>
+      </dl>
+      <el-table v-if="props.data?.measurementItems.length" class="measurement-detail-table" :data="props.data.measurementItems" border size="small">
+        <el-table-column type="index" label="#" width="54" />
+        <el-table-column prop="lengthCm" label="箱规长(cm)" min-width="105" />
+        <el-table-column prop="widthCm" label="箱规宽(cm)" min-width="105" />
+        <el-table-column prop="heightCm" label="箱规高(cm)" min-width="105" />
+        <el-table-column prop="packageCount" label="箱数" min-width="76" />
+        <el-table-column label="每箱体积" min-width="105"><template #default="{ row }">{{ formatInboundMeasure(row.unitVolumeCbm, 'm³') }}</template></el-table-column>
+        <el-table-column label="总体积" min-width="105"><template #default="{ row }">{{ formatInboundMeasure(row.totalVolumeCbm, 'm³') }}</template></el-table-column>
+        <el-table-column label="总材积重" min-width="105"><template #default="{ row }">{{ formatInboundMeasure(row.volumeWeightKg, 'kg') }}</template></el-table-column>
+        <el-table-column prop="boxSpecification" label="备注" min-width="130" />
+      </el-table>
+      <template #footer><el-button type="primary" @click="feeDialogOpen = false">确认</el-button></template>
+    </el-dialog>
   </section>
 </template>
 
 <style scoped>
 .inbound-billing-panel { margin-top: 22px; }
 .inbound-billing-heading, .inbound-section-title, .fee-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.inbound-billing-actions { display: flex; align-items: center; gap: 10px; }
 .inbound-billing-heading h3, .inbound-result-section h4 { margin: 0; color: var(--navy); }
 .inbound-billing-heading h3 { font-size: 15px; }
 .inbound-result-section h4 { font-size: 13px; }
@@ -166,6 +212,8 @@ defineEmits<{
 .inbound-section-title > span { color: var(--muted); font-size: 10px; text-align: right; }
 .inbound-measurements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0 0; background: #f6f8f8; }
 .inbound-measurements > div { min-width: 0; padding: 12px; }
+.measurement-detail-table { margin-top: 12px; }
+.fee-dialog-summary { margin-top: 0; }
 .pallet-location-list { margin-top: 9px; border-top: 1px solid var(--border); }
 .pallet-location-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--border); }
 .pallet-location-list article > svg { color: var(--primary); }