优化

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

@@ -21,6 +21,7 @@ const props = withDefaults(defineProps<{
   unavailableMessage?: string
   error?: string
   autoOpen?: boolean
+  dialogOnly?: boolean
   canConfirm?: boolean
 }>(), {
   data: null,
@@ -29,18 +30,20 @@ const props = withDefaults(defineProps<{
   unavailableMessage: '还未测量推送',
   error: '',
   autoOpen: false,
+  dialogOnly: false,
   canConfirm: false,
 })
 
 const emit = defineEmits<{
   retry: []
   confirmed: []
+  closed: []
 }>()
 
 const feeDialogOpen = ref(false)
 const confirming = ref(false)
-watch(() => [props.autoOpen, props.data] as const, ([autoOpen, data]) => {
-  if (autoOpen && data) feeDialogOpen.value = true
+watch(() => props.autoOpen, (autoOpen) => {
+  if (autoOpen) feeDialogOpen.value = true
 }, { immediate: true })
 
 async function confirmFee() {
@@ -75,7 +78,7 @@ async function confirmFee() {
 </script>
 
 <template>
-  <section class="inbound-billing-panel" aria-labelledby="inbound-billing-title">
+  <section v-if="!props.dialogOnly" class="inbound-billing-panel" aria-labelledby="inbound-billing-title">
     <header class="inbound-billing-heading">
       <h3 id="inbound-billing-title">入库与费用</h3>
       <div v-if="props.data" class="inbound-billing-actions">
@@ -200,8 +203,24 @@ async function confirmFee() {
       </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">
+  </section>
+
+  <el-dialog v-model="feeDialogOpen" title="确认测量与计费数据" width="min(980px, 94vw)" append-to-body @closed="emit('closed')">
+      <div v-if="props.loading" class="inbound-billing-loading" aria-live="polite" aria-busy="true">
+        <el-skeleton :rows="4" animated />
+        <span class="sr-only">正在加载计费重</span>
+      </div>
+      <div v-else-if="props.error" class="inbound-billing-state is-error" role="alert">
+        <TriangleAlert :size="22" />
+        <div><strong>计费重加载失败</strong><span>{{ props.error }}</span></div>
+        <el-button @click="$emit('retry')"><RefreshCw :size="15" />重新加载</el-button>
+      </div>
+      <div v-else-if="props.unavailable || !props.data" class="inbound-billing-state is-pending" role="status">
+        <Clock3 :size="22" />
+        <div><strong>{{ props.unavailableMessage }}</strong><span>平台推送计费重后，可在这里核对并确认。</span></div>
+      </div>
+      <template v-else>
+      <dl 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>
@@ -222,7 +241,7 @@ async function confirmFee() {
         <el-table-column prop="boxSpecification" label="备注" min-width="130" />
       </el-table>
       <el-alert
-        v-if="props.data?.latestFee.customerConfirmationStatus === 'CONFIRMED'"
+        v-if="props.data.latestFee.customerConfirmationStatus === 'CONFIRMED'"
         class="fee-confirmed-alert"
         :title="`客户已于 ${formatInboundDateTime(props.data.latestFee.customerConfirmedAt)} 确认，费用已锁定，不允许修改。`"
         type="success"
@@ -230,12 +249,12 @@ async function confirmFee() {
         show-icon
       />
       <el-alert v-else class="fee-confirmed-alert" title="请核对全部计费数据。点击确认后还会进行一次确认，完成后费用将锁定。" type="warning" :closable="false" show-icon />
+      </template>
       <template #footer>
         <el-button @click="feeDialogOpen = false">关闭</el-button>
         <el-button v-if="props.data?.latestFee.customerConfirmationStatus !== 'CONFIRMED' && props.canConfirm" type="primary" :loading="confirming" @click="confirmFee">确认费用</el-button>
       </template>
-    </el-dialog>
-  </section>
+  </el-dialog>
 </template>
 
 <style scoped>