37 lines
1.9 KiB
Vue
37 lines
1.9 KiB
Vue
<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>
|