优化

src/modules/overseas-warehouse/components/DispatchDocumentsDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
-import { computed, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { ElMessageBox } from 'element-plus'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
@@ -13,6 +13,7 @@ import type { DispatchDetail } from '../dispatchContracts'
 import { dispatchReviewAttachmentFields, dispatchReviewEvidence } from '../dispatchPresentation'
 import DeliveryDocumentsDialog from './DeliveryDocumentsDialog.vue'
 import DispatchVehicleDocuments from './DispatchVehicleDocuments.vue'
+import DispatchLoadingDocuments from './DispatchLoadingDocuments.vue'
 import DispatchEvidenceFiles from './DispatchEvidenceFiles.vue'
 
 const open = defineModel<boolean>({ default: false })
@@ -22,18 +23,21 @@ const access = useAccessPreviewStore()
 const detail = ref<DispatchDetail | null>(null), loading = ref(false), error = ref<ApiErrorDetails | null>(null)
 const tab = ref('RECEIPT'), selected = ref(''), fuelVisited = ref(false)
 const editor = ref<InstanceType<typeof DeliveryDocumentsDialog>>(), vehicleEditor = ref<InstanceType<typeof DispatchVehicleDocuments>>()
+const loadingEditor = ref<InstanceType<typeof DispatchLoadingDocuments>>()
 const deliveries = computed(() => detail.value?.documents.deliveries || [])
 const delivery = computed(() => deliveries.value.find(item => item.deliveryNo === selected.value))
 const reviewEvidence = computed(() => dispatchReviewEvidence(detail.value))
-const busy = computed(() => Boolean(editor.value?.busy || vehicleEditor.value?.busy))
+const busy = computed(() => Boolean(editor.value?.busy || vehicleEditor.value?.busy || loadingEditor.value?.busy))
 let sequence = 0
+onBeforeUnmount(() => { sequence++ })
 async function load() {
   const current = ++sequence; loading.value = true; error.value = null
   try {
     const value = await getDispatch(props.dispatchNo)
     if (current !== sequence || !open.value) return
     if (value.dispatchNo !== props.dispatchNo) throw new Error('资料与当前排车单不一致')
-    if (value.status !== 'ACTIVE' || !['DELIVERING', 'DELIVERED'].includes(value.stage)) throw new Error('仅派送中和配送完成可管理资料')
+    if (value.status !== 'ACTIVE' || !['AFTER_LOADING', 'DELIVERING', 'DELIVERED'].includes(value.stage)) throw new Error('仅装车后、派送中和配送完成可管理资料')
+    if (!detail.value && value.stage === 'AFTER_LOADING') tab.value = 'LOADING'
     detail.value = value
     if (!value.documents.deliveries.some(item => item.deliveryNo === selected.value)) selected.value = value.documents.deliveries[0]?.deliveryNo || ''
   } catch (cause) { if (current === sequence) error.value = getApiErrorDetails(cause, '排车资料读取失败') }
@@ -48,6 +52,7 @@ async function selectDelivery(value: string) { if (value !== selected.value && a
 async function beforeClose(done: () => void) { if (await canLeave()) done() }
 function selectTab(value: string) { if (!busy.value) { tab.value = value; if (value === 'FUEL') fuelVisited.value = true } }
 function saved() { emit('saved') }
+async function loadingSaved() { emit('saved'); await load() }
 watch(() => [open.value, props.dispatchNo] as const, ([visible]) => {
   sequence++; detail.value = null; selected.value = ''; tab.value = 'RECEIPT'; fuelVisited.value = false; error.value = null
   if (visible && props.dispatchNo) void load()
@@ -58,12 +63,14 @@ watch(() => [open.value, props.dispatchNo] as const, ([visible]) => {
     <LoadErrorState v-if="error" compact title="排车资料读取失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
     <template v-if="detail">
       <div class="density-status-tabs" role="tablist" aria-label="排车资料类别"><button v-for="item in [{ key: 'RECEIPT', label: '签收文件' }, { key: 'FUEL', label: '油耗图片' }, { key: 'LOADING', label: '装车资料' }]" :key="item.key" role="tab" :aria-selected="tab === item.key" :disabled="busy" :class="{ 'is-active': tab === item.key }" @click="selectTab(item.key)">{{ item.label }}</button></div>
-      <div v-show="tab !== 'FUEL'">
+      <DispatchLoadingDocuments v-if="tab === 'LOADING'" ref="loadingEditor" :key="dispatchNo" :dispatch-no="dispatchNo" @saved="loadingSaved" />
+      <div v-show="tab !== 'FUEL'" v-if="detail.stage !== 'AFTER_LOADING'">
         <el-form class="density-form" label-position="left" label-width="80px"><el-form-item label="派送单"><el-select :model-value="selected" :disabled="busy || !access.can(permission.deliveryList)" aria-label="选择派送单" @update:model-value="selectDelivery"><el-option v-for="item in deliveries" :key="item.deliveryNo" :value="item.deliveryNo" :label="item.deliveryNo" /></el-select></el-form-item></el-form>
-        <DeliveryDocumentsDialog v-if="delivery && access.can(permission.deliveryList)" ref="editor" :key="delivery.customerId + ':' + delivery.deliveryNo" :model-value="open" embedded :delivery-no="delivery.deliveryNo" :customer-id="delivery.customerId" :categories="tab === 'RECEIPT' ? ['RECEIPT'] : ['LOADING_PHOTO', 'BOL']" @saved="saved" />
+        <DeliveryDocumentsDialog v-if="delivery && access.can(permission.deliveryList)" ref="editor" :key="delivery.customerId + ':' + delivery.deliveryNo" :model-value="open" embedded :delivery-no="delivery.deliveryNo" :customer-id="delivery.customerId" :categories="tab === 'RECEIPT' ? ['RECEIPT'] : ['BOL']" @saved="saved" />
         <p v-else>{{ access.can(permission.deliveryList) ? '暂无关联派送单' : '当前账号无派送资料查看权限' }}</p>
       </div>
-      <DispatchVehicleDocuments v-if="fuelVisited" v-show="tab === 'FUEL'" ref="vehicleEditor" :key="dispatchNo" :dispatch-no="dispatchNo" @saved="saved" />
+      <p v-if="detail.stage === 'AFTER_LOADING' && tab !== 'LOADING'">请先补齐装车资料，进入派送中后管理{{ tab === 'FUEL' ? '油耗图片' : '签收文件' }}。</p>
+      <DispatchVehicleDocuments v-if="fuelVisited && detail.stage !== 'AFTER_LOADING'" v-show="tab === 'FUEL'" ref="vehicleEditor" :key="dispatchNo" :dispatch-no="dispatchNo" @saved="saved" />
       <section v-if="tab === 'LOADING'" class="density-dialog-section"><h3 class="density-dialog-section__title">车辆及司机附件</h3><DispatchEvidenceFiles v-for="field in dispatchReviewAttachmentFields" :key="field.key" :model-value="reviewEvidence[field.key]" :dispatch-no="dispatchNo" :kind="field.kind" :label="field.label" readonly /></section>
     </template>
   </AppDialog>