优化

src/modules/overseas-master-data/components/OwnedBusinessDetailLayout.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import '@/styles/adminDensity.css'
+import AdminPage from '@/shared/components/AdminPage.vue'
+import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
+
+defineProps<{ dispatchNo?: string; statusText?: string; loading?: boolean }>()
+const activeTab = defineModel<'task' | 'route' | 'history'>('activeTab', { default: 'task' })
+const emit = defineEmits<{ back: [] }>()
+</script>
+
+<template>
+  <AdminPage class="admin-density" spacing="compact">
+    <DetailPageLayout aria-label="自有业务详情">
+      <template #header>
+        <div class="owned-business-detail-heading">
+          <div><strong>自有业务</strong><span class="owned-business-reference">{{ dispatchNo || '—' }}</span><span v-if="statusText">{{ statusText }}</span></div>
+          <div class="density-actions"><slot name="actions" /><el-button class="density-action" @click="emit('back')">返回自有业务</el-button></div>
+        </div>
+      </template>
+      <slot name="state" />
+      <div v-loading="loading" :aria-busy="loading">
+        <el-tabs v-model="activeTab" class="density-element-tabs density-contained-tabs">
+          <el-tab-pane name="task" label="任务与车辆信息"><slot v-if="activeTab === 'task'" name="task" /></el-tab-pane>
+          <el-tab-pane name="route" label="路线货物与凭证"><slot v-if="activeTab === 'route'" name="route" /></el-tab-pane>
+          <el-tab-pane name="history" label="操作记录"><slot v-if="activeTab === 'history'" name="history" /></el-tab-pane>
+        </el-tabs>
+      </div>
+    </DetailPageLayout>
+  </AdminPage>
+</template>
+
+<style scoped>
+.owned-business-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-4); }
+.owned-business-detail-heading > div { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--admin-space-4); }
+.owned-business-reference { overflow-wrap: anywhere; }
+</style>