优化

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

@@ -10,7 +10,7 @@ import { formatOverseasDateTime } from '../lastMilePresentation'
 import { overseasWarehousePermissions as permission } from '../permissions'
 import { returnSourceKey, returnSourceReference } from '../returnSource'
 
-const props = defineProps<{ customerId: string; exceptionNo: string; active: boolean }>()
+const props = defineProps<{ customerId: string; exceptionNo: string; active: boolean; actionsTarget?: string }>()
 const emit = defineEmits<{ changed: [] }>()
 const access = useAccessPreviewStore()
 const canProcess = computed(() => access.can('platform:overseas-warehouse:exception-order:process'))
@@ -156,9 +156,8 @@ watch(() => [props.customerId, props.exceptionNo, props.active], () => { ++seque
 <template>
   <section v-loading="loading" aria-label="异常处理详情">
     <p v-if="error" role="alert">{{ error }}</p><p v-if="message" role="status">{{ message }}</p>
-    <el-button :disabled="busy" @click="load">重新读取详情</el-button>
     <template v-if="detail">
-      <el-descriptions :column="2" border>
+      <el-descriptions class="density-descriptions exception-detail-fields" :column="2" border>
         <el-descriptions-item label="异常单号">{{ detail.order.exceptionNo }}</el-descriptions-item>
         <el-descriptions-item label="处理状态">{{ ({ PENDING: '待处理', PROCESSING: '处理中', COMPLETED: '已完成', CANCELLED: '已取消' } as Record<string, string>)[detail.order.status] || detail.order.status }}</el-descriptions-item>
         <el-descriptions-item label="客户">{{ detail.order.customerName || '—' }}</el-descriptions-item>
@@ -180,7 +179,7 @@ watch(() => [props.customerId, props.exceptionNo, props.active], () => { ++seque
       <section v-if="detail.returnReceipts.length" aria-label="退回实收与重派关联" class="exception-return-history workbench-evidence">
         <h3>退回实收与重派关联</h3>
         <div v-for="receipt in detail.returnReceipts" :key="receipt.receiptNo" class="exception-return-batch">
-          <el-descriptions :column="3" border>
+          <el-descriptions class="density-descriptions" :column="3" border>
             <el-descriptions-item label="退回收货号">{{ receipt.receiptNo }}</el-descriptions-item>
             <el-descriptions-item label="本批实收">{{ receipt.receivedPackages }} 箱</el-descriptions-item>
             <el-descriptions-item label="实收时间">{{ formatOverseasDateTime(receipt.receivedAt) }}</el-descriptions-item>
@@ -200,8 +199,8 @@ watch(() => [props.customerId, props.exceptionNo, props.active], () => { ++seque
       </section>
       <p v-if="detail.order.evidenceFileIds?.length">已保存 {{ detail.order.evidenceFileIds.length }} 份历史证据；本次可按需选用，不自动全部提交。</p>
       <template v-if="canProcess">
-        <el-form label-position="top" :disabled="locked">
-          <el-form-item label="处理说明 / 取消原因（选填）"><el-input v-model="notes" data-test="notes" type="textarea" :rows="2" maxlength="1000" /></el-form-item>
+        <el-form class="density-form density-form--outlined exception-processing-form" label-position="left" label-width="140px" :disabled="locked">
+          <el-form-item label="处理说明 / 取消原因（选填）" label-width="220px"><el-input v-model="notes" data-test="notes" type="textarea" :rows="2" maxlength="1000" placeholder="请输入处理说明或取消原因（选填）" /></el-form-item>
           <template v-if="allowed('COMPLETE_EXCEPTION')">
             <label>处理证据 <input data-test="evidence" type="file" :disabled="locked" @change="upload" /></label>
             <div v-for="(fileId, index) in detail.order.evidenceFileIds || []" :key="fileId"><label><input :data-test="`history-${index}`" type="checkbox" :checked="selectedHistory.includes(fileId)" :disabled="locked" @change="selectHistory(fileId, $event)" />选用历史证据 {{ index + 1 }}</label></div>
@@ -219,15 +218,21 @@ watch(() => [props.customerId, props.exceptionNo, props.active], () => { ++seque
             <p v-else-if="detail.order.exceptionType === 'RETURN'">关闭此异常只记录处理结果，不代表货物交接完成，也不会释放车辆或司机。</p>
           </template>
         </el-form>
-        <el-button v-if="allowed('START_PROCESSING')" data-test="start" :disabled="busy || (!!pending && pending.action !== 'start-processing')" @click="execute('start-processing')">{{ '开始处理' }}</el-button>
-        <el-button v-if="allowed('CANCEL_EXCEPTION')" data-test="cancel" :disabled="busy || (!!pending && pending.action !== 'cancel')" @click="execute('cancel')">{{ '取消异常' }}</el-button>
-        <el-button v-if="allowed('COMPLETE_EXCEPTION')" data-test="complete" :disabled="busy || (!!pending && pending.action !== 'complete')" @click="execute('complete')">{{ warehouseReturn ? '提交本批实收' : '完成处理' }}</el-button>
+        <Teleport :to="actionsTarget || 'body'" :disabled="!actionsTarget" defer>
+          <div class="density-actions density-actions--footer">
+        <el-button v-if="allowed('START_PROCESSING')" data-test="start" type="primary" :disabled="busy || (!!pending && pending.action !== 'start-processing')" @click="execute('start-processing')">{{ '开始处理' }}</el-button>
+        <el-button v-if="allowed('CANCEL_EXCEPTION')" data-test="cancel" type="danger" plain :disabled="busy || (!!pending && pending.action !== 'cancel')" @click="execute('cancel')">{{ '取消异常' }}</el-button>
+        <el-button v-if="allowed('COMPLETE_EXCEPTION')" data-test="complete" type="primary" :disabled="busy || (!!pending && pending.action !== 'complete')" @click="execute('complete')">{{ warehouseReturn ? '提交本批实收' : '完成处理' }}</el-button>
+          </div>
+        </Teleport>
       </template>
     </template>
   </section>
 </template>
 
 <style scoped>
+.exception-processing-form { margin-top: var(--admin-space-5); }
+.exception-detail-fields :deep(.el-descriptions__table) { table-layout: fixed; }
 .exception-return-history { margin: 12px 0; }
 .exception-return-history h3 { margin: 0 0 8px; font-size: 14px; }
 .exception-return-batch + .exception-return-batch { margin-top: 12px; }