66 lines
2.6 KiB
Vue
66 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ArrowLeft } from '@lucide/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>
|
|
<div class="business-page inbound-detail-page">
|
|
<section class="surface-panel detail-page">
|
|
<header class="detail-page-header">
|
|
<div class="detail-page-heading">
|
|
<h1>入库详情</h1>
|
|
<p>查看基本信息、货物测量、审核、费用及托盘库位记录。</p>
|
|
</div>
|
|
<div class="detail-page-actions">
|
|
<el-button @click="backToList"><ArrowLeft :size="16" />返回入库单列表</el-button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="detail-page-content">
|
|
<InboundWorkflowWorkspace
|
|
v-if="inboundId && customerId"
|
|
:customer-id="customerId"
|
|
:inbound-id="inboundId"
|
|
/>
|
|
<el-empty
|
|
v-else
|
|
:description="inboundId ? '缺少所属企业信息，请从入库单列表重新打开' : '缺少有效的入库单标识'"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.inbound-detail-page { min-width: 0; }
|
|
.detail-page { overflow: hidden; }
|
|
.detail-page-header { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--cc-border); }
|
|
.detail-page-heading { min-width: 0; }
|
|
.detail-page-heading h1 { margin: 0; color: var(--cc-text); font-size: 20px; line-height: 1.35; }
|
|
.detail-page-heading p { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
|
|
.detail-page-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 12px; }
|
|
.detail-page-content { min-width: 0; }
|
|
@media (max-width: 720px) {
|
|
.detail-page-header { align-items: flex-start; flex-direction: column; padding: 16px; }
|
|
.detail-page-actions { width: 100%; align-items: stretch; flex-direction: column; }
|
|
.detail-page-actions :deep(.el-button) { width: 100%; min-height: 44px; }
|
|
}
|
|
</style>
|