56 lines
2.0 KiB
Vue
56 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import '@/styles/adminDensity.css'
|
|
import '@/styles/adminWorkbench.css'
|
|
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import AdminPage from '@/shared/components/AdminPage.vue'
|
|
import LoadingListDetailDrawer from '../components/LoadingListDetailDrawer.vue'
|
|
import { useLoadingListDetail } from '../useLoadingListDetail'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const { detail, loading, error, load } = useLoadingListDetail()
|
|
const detailView = ref<InstanceType<typeof LoadingListDetailDrawer>>()
|
|
const planId = computed(() => String(route.params.planId || ''))
|
|
const warehouseId = computed(() => typeof route.query.warehouseId === 'string' ? route.query.warehouseId : '')
|
|
|
|
async function loadDetail() {
|
|
const result = await load('confirmed', planId.value, warehouseId.value)
|
|
if (!result || detail.value !== result || route.query.print !== '1') return
|
|
await nextTick()
|
|
if (!await detailView.value?.print() || detail.value !== result) return
|
|
const { print: _print, ...query } = route.query
|
|
await router.replace({ name: 'loading-list-detail', params: { planId: planId.value }, query })
|
|
}
|
|
|
|
function goBack() {
|
|
if (window.history.length > 1) router.back()
|
|
else void router.push({ name: 'loading-lists' })
|
|
}
|
|
|
|
onMounted(() => void loadDetail())
|
|
watch([planId, warehouseId], () => void loadDetail())
|
|
</script>
|
|
|
|
<template>
|
|
<AdminPage class="admin-workbench admin-density">
|
|
<div class="confirmed-loading-detail-page">
|
|
<LoadingListDetailDrawer ref="detailView" dense
|
|
mode="confirmed"
|
|
:loading="loading"
|
|
:detail="detail"
|
|
:error="error"
|
|
:can-edit="false"
|
|
@back="goBack"
|
|
@retry="loadDetail"
|
|
/>
|
|
</div>
|
|
</AdminPage>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.confirmed-loading-detail-page { display: grid; min-width: 0; width: 100%; gap: 16px; }
|
|
@media (min-width: 1920px) { .confirmed-loading-detail-page { gap: 12px; } }
|
|
@media print { .admin-page.admin-workbench { padding: 0; } }
|
|
</style>
|