优化

src/modules/loading-lists/components/LoadingListsView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { Eye, Pencil } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -31,6 +31,7 @@ import {
 
 const props = defineProps<{ mode: LoadingListMode }>()
 const route = useRoute()
+const router = useRouter()
 const access = useAccessPreviewStore()
 const rows = ref<LoadingListSummary[]>([])
 const loading = ref(false)
@@ -39,7 +40,6 @@ const page = ref(1)
 const pageSize = ref(20)
 const total = ref(0)
 const query = reactive<QueryModel>({ keyword: '', createdRange: [] })
-const detailOpen = ref(false)
 const detailLoading = ref(false)
 const detailError = ref<ApiErrorDetails | null>(null)
 const detail = ref<LoadingDetail | null>(null)
@@ -150,11 +150,14 @@ async function openDeepLinkedDetail() {
   const key = `${props.mode}:${planId}:${warehouseId}`
   if (handledDeepLink.value === key) return
   handledDeepLink.value = key
+  if (isPreload.value) {
+    await router.replace({ name: 'preload-plan-detail', params: { planId }, query: { warehouseId } })
+    return
+  }
   selectedPlanId.value = planId
   selectedWarehouseId.value = warehouseId
   detail.value = null
   detailError.value = null
-  detailOpen.value = true
   await loadDetail()
   const expectedStatuses = isPreload.value ? ['EDITING', 'LOADING'] : ['COMPLETED']
   const loadedDetail = detail.value as LoadingDetail | null
@@ -198,11 +201,14 @@ async function loadDetail() {
 
 function openDetail(rowValue: object) {
   const row = rowValue as LoadingListSummary
+  if (isPreload.value) {
+    void router.push({ name: 'preload-plan-detail', params: { planId: String(row.planId) }, query: { warehouseId: String(row.warehouseId || '') } })
+    return
+  }
   selectedPlanId.value = String(row.planId)
   selectedWarehouseId.value = String(row.warehouseId || '')
   detail.value = null
   detailError.value = null
-  detailOpen.value = true
   void loadDetail()
 }
 
@@ -213,7 +219,6 @@ async function openEditFromRow(rowValue: object) {
   selectedWarehouseId.value = String(row.warehouseId || '')
   detail.value = null
   detailError.value = null
-  detailOpen.value = true
   await loadDetail()
   const loadedDetail = detail.value as LoadingDetail | null
   if (loadedDetail && ['EDITING', 'LOADING'].includes(loadedDetail.summary.status)) openEdit()
@@ -317,7 +322,8 @@ onMounted(() => {
     </ListPageLayout>
 
     <LoadingListDetailDrawer
-      v-model="detailOpen"
+      v-if="!isPreload && (detailLoading || detailError || detail)"
+      class="confirmed-inline-detail surface-panel"
       :mode="mode"
       :loading="detailLoading"
       :detail="detail"
@@ -329,7 +335,9 @@ onMounted(() => {
 
     <AppDialog
       v-model="editOpen"
+      class="loading-transport-dialog"
       title="编辑预装运输信息"
+      width="min(620px, calc(100vw - 28px))"
       confirm-text="保存"
       :confirm-loading="editSaving"
       :confirm-disabled="!canEdit"
@@ -352,7 +360,9 @@ onMounted(() => {
 <style scoped>
 .loading-lists-page { display: grid; min-width: 0; gap: 16px; }
 .table-panel { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); background: #fff; }
+.confirmed-inline-detail { padding: 20px; border: 1px solid var(--cc-border); background: #fff; }
 .transport-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 16px; }
 .transport-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
-@media (max-width: 640px) { .transport-form { grid-template-columns: 1fr; } .transport-form :deep(.el-form-item:last-child) { grid-column: auto; } }
+:global(.loading-transport-dialog.el-dialog) { max-height: 90vh; overflow: hidden; }
+@media (max-width: 720px) { .confirmed-inline-detail { padding: 12px; } .transport-form { grid-template-columns: 1fr; } .transport-form :deep(.el-form-item:last-child) { grid-column: auto; } }
 </style>