64 lines
2.5 KiB
Vue
64 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ArrowLeft, RefreshCw } from '@lucide/vue'
|
|
import AdminPage from '@/shared/components/AdminPage.vue'
|
|
import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
|
|
import FormSection from '@/shared/components/FormSection.vue'
|
|
import PageToolbar from '@/shared/components/PageToolbar.vue'
|
|
import InboundWorkflowWorkspace from '../components/InboundWorkflowWorkspace.vue'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
function routeValue(value: unknown) {
|
|
if (Array.isArray(value)) return String(value[0] || '')
|
|
return value === null || value === undefined ? '' : String(value)
|
|
}
|
|
|
|
const inboundId = computed(() => routeValue(route.params.inboundId))
|
|
const customerId = computed(() => routeValue(route.query.tenantId))
|
|
|
|
function backToList() {
|
|
void router.push({ name: 'inbound-orders', query: customerId.value ? { tenantId: customerId.value } : undefined })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AdminPage as="div" class="business-page inbound-detail-page">
|
|
<DetailPageLayout class="surface-panel detail-page" aria-label="入库单详情">
|
|
<template #header>
|
|
<PageToolbar title="入库单详情" description="查看基本信息、货品与测量、费用信息、状态历史及其他记录。">
|
|
<div class="detail-page-actions">
|
|
<el-button @click="backToList"><ArrowLeft :size="16" />返回入库单列表</el-button>
|
|
</div>
|
|
</PageToolbar>
|
|
</template>
|
|
|
|
<FormSection title="入库处理工作区" :bordered="false">
|
|
<InboundWorkflowWorkspace
|
|
v-if="inboundId && customerId"
|
|
:customer-id="customerId"
|
|
:inbound-id="inboundId"
|
|
/>
|
|
<el-empty
|
|
v-else
|
|
:description="inboundId ? '缺少所属企业信息，请从入库单列表重新打开' : '缺少有效的入库单标识'"
|
|
/>
|
|
</FormSection>
|
|
</DetailPageLayout>
|
|
</AdminPage>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.inbound-detail-page { min-width: 0; }
|
|
.detail-page { overflow: hidden; padding: 20px 24px; }
|
|
.detail-page-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 12px; }
|
|
@media (max-width: 720px) {
|
|
.detail-page { padding: 16px; }
|
|
.detail-page-actions { width: 100%; align-items: stretch; flex-direction: column; }
|
|
.detail-page-actions :deep(.el-button) { width: 100%; min-height: 44px; }
|
|
}
|
|
@media (max-width: 360px) { .detail-page { padding: 12px; } }
|
|
</style>
|