169 lines
16 KiB
Vue
169 lines
16 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { computed, onMounted, ref } from 'vue'
|
||
|
|
import { useRoute, useRouter } from 'vue-router'
|
||
|
|
import { ArrowLeft, FileUp } from '@lucide/vue'
|
||
|
|
import { ElMessage, type UploadFile } from 'element-plus'
|
||
|
|
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||
|
|
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
||
|
|
import AdminPage from '@/shared/components/AdminPage.vue'
|
||
|
|
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||
|
|
import AppDialog from '@/shared/components/AppDialog.vue'
|
||
|
|
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
||
|
|
import StatusBadge from '@/shared/components/StatusBadge.vue'
|
||
|
|
import ContainerOverviewPanel from '../components/ContainerOverviewPanel.vue'
|
||
|
|
import {
|
||
|
|
cancelContainerException,
|
||
|
|
completeContainerClearance,
|
||
|
|
downloadContainerDocument,
|
||
|
|
downloadContainerPdaPhoto,
|
||
|
|
getContainer,
|
||
|
|
getContainerClearance,
|
||
|
|
getContainerOverview,
|
||
|
|
markContainerException,
|
||
|
|
uploadContainerClearance,
|
||
|
|
uploadContainerDocument,
|
||
|
|
} from '../api/platformContainerLoading'
|
||
|
|
import type { BusinessDocument, ContainerBookingResource, ContainerOverview, ContainerOverviewDocument, ContainerPdaPhoto, ContainerPlanStatus } from '../types'
|
||
|
|
|
||
|
|
const route = useRoute()
|
||
|
|
const router = useRouter()
|
||
|
|
const access = useAccessPreviewStore()
|
||
|
|
const containerId = computed(() => String(route.params.containerId || ''))
|
||
|
|
const canEdit = computed(() => access.can('platform:firstleg:container:edit'))
|
||
|
|
const loading = ref(false)
|
||
|
|
const detail = ref<ContainerBookingResource | null>(null)
|
||
|
|
const overview = ref<ContainerOverview | null>(null)
|
||
|
|
const error = ref<ApiErrorDetails | null>(null)
|
||
|
|
const overviewError = ref<ApiErrorDetails | null>(null)
|
||
|
|
const documentOpen = ref(false)
|
||
|
|
const documentType = ref<'DELIVERY_ORDER' | 'PICKUP_ORDER'>('DELIVERY_ORDER')
|
||
|
|
const documentFile = ref<File | null>(null)
|
||
|
|
const documentSaving = ref(false)
|
||
|
|
const documentDownloading = ref(false)
|
||
|
|
const documentError = ref<ApiErrorDetails | null>(null)
|
||
|
|
const clearanceOpen = ref(false)
|
||
|
|
const clearanceDocument = ref<BusinessDocument | null>(null)
|
||
|
|
const clearanceFile = ref<File | null>(null)
|
||
|
|
const clearanceLoading = ref(false)
|
||
|
|
const clearanceSaving = ref(false)
|
||
|
|
const clearanceError = ref<ApiErrorDetails | null>(null)
|
||
|
|
const exceptionOpen = ref(false)
|
||
|
|
const exceptionReason = ref('')
|
||
|
|
const exceptionSaving = ref(false)
|
||
|
|
const exceptionError = ref<ApiErrorDetails | null>(null)
|
||
|
|
const photoBusyId = ref<string | null>(null)
|
||
|
|
const photoError = ref<ApiErrorDetails | null>(null)
|
||
|
|
|
||
|
|
const selectedDocument = computed(() => overview.value?.documents.find((item) => item.documentType === documentType.value) || null)
|
||
|
|
const documentTitle = computed(() => documentType.value === 'DELIVERY_ORDER' ? 'DO 资料' : 'PU 资料')
|
||
|
|
const title = computed(() => detail.value?.containerNo || detail.value?.cabinetNo || '货柜详情')
|
||
|
|
const exceptionTitle = computed(() => overview.value?.exception.active ? '取消货柜异常' : '标记货柜异常')
|
||
|
|
|
||
|
|
function statusText(status?: ContainerPlanStatus | null) { return status ? ({ WAIT_LOADING: '待装柜', EDITING: '预装柜中', LOADING: '拣货中', COMPLETED: '装柜完成' })[status] : '—' }
|
||
|
|
function formatTime(value?: string | null) { return value?.replace('T', ' ').slice(0, 16) || '—' }
|
||
|
|
|
||
|
|
async function load() {
|
||
|
|
if (!containerId.value) return
|
||
|
|
loading.value = true; error.value = null; overviewError.value = null
|
||
|
|
try {
|
||
|
|
const [resource, aggregate] = await Promise.all([getContainer(containerId.value), getContainerOverview(containerId.value)])
|
||
|
|
detail.value = resource; overview.value = aggregate
|
||
|
|
} catch (cause) { error.value = getApiErrorDetails(cause, '货柜详情加载失败') }
|
||
|
|
finally { loading.value = false }
|
||
|
|
}
|
||
|
|
|
||
|
|
function openDocument(type: string) {
|
||
|
|
if (type === 'DESTINATION_CLEARANCE') { void openClearance(); return }
|
||
|
|
if (!['DELIVERY_ORDER', 'PICKUP_ORDER'].includes(type)) return
|
||
|
|
documentType.value = type as 'DELIVERY_ORDER' | 'PICKUP_ORDER'
|
||
|
|
documentFile.value = null; documentError.value = null; documentOpen.value = true
|
||
|
|
}
|
||
|
|
function selectDocumentFile(file: UploadFile) { documentFile.value = file.raw || null; documentError.value = null }
|
||
|
|
function removeDocumentFile() { documentFile.value = null }
|
||
|
|
async function saveDocument() {
|
||
|
|
if (!documentFile.value || !overview.value) { documentError.value = { code: 'FILE_REQUIRED', message: '请选择需要上传的资料文件' }; return }
|
||
|
|
documentSaving.value = true; documentError.value = null
|
||
|
|
try {
|
||
|
|
await uploadContainerDocument(containerId.value, documentType.value, documentFile.value, selectedDocument.value?.version || 0, `上传${documentTitle.value}`)
|
||
|
|
overview.value = await getContainerOverview(containerId.value)
|
||
|
|
documentOpen.value = false; documentFile.value = null; ElMessage.success(`${documentTitle.value}已上传`)
|
||
|
|
} catch (cause) { documentError.value = getApiErrorDetails(cause, `${documentTitle.value}上传失败`) }
|
||
|
|
finally { documentSaving.value = false }
|
||
|
|
}
|
||
|
|
async function saveBlob(blob: Blob, fileName: string) { const url = URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = url; anchor.download = fileName || '货柜资料'; anchor.click(); URL.revokeObjectURL(url) }
|
||
|
|
async function downloadDocument(item: ContainerOverviewDocument) {
|
||
|
|
if (!['DELIVERY_ORDER', 'PICKUP_ORDER'].includes(item.documentType)) return
|
||
|
|
documentDownloading.value = true
|
||
|
|
try { await saveBlob(await downloadContainerDocument(containerId.value, item.documentType as 'DELIVERY_ORDER' | 'PICKUP_ORDER', item.fileId), item.fileName); ElMessage.success('资料下载已开始') }
|
||
|
|
catch (cause) { ElMessage.error(getApiErrorDetails(cause, '资料下载失败').message) }
|
||
|
|
finally { documentDownloading.value = false }
|
||
|
|
}
|
||
|
|
async function previewPhoto(photo: ContainerPdaPhoto) {
|
||
|
|
photoBusyId.value = photo.evidenceId; photoError.value = null
|
||
|
|
try { const url = URL.createObjectURL(await downloadContainerPdaPhoto(photo.downloadPath)); window.open(url, '_blank', 'noopener,noreferrer'); window.setTimeout(() => URL.revokeObjectURL(url), 60_000) }
|
||
|
|
catch (cause) { photoError.value = getApiErrorDetails(cause, '装柜照片加载失败') }
|
||
|
|
finally { photoBusyId.value = null }
|
||
|
|
}
|
||
|
|
|
||
|
|
function openException() { exceptionReason.value = ''; exceptionError.value = null; exceptionOpen.value = true }
|
||
|
|
async function saveException() {
|
||
|
|
if (!overview.value || !exceptionReason.value.trim()) { exceptionError.value = { code: 'REASON_REQUIRED', message: '请输入异常原因或取消备注' }; return }
|
||
|
|
exceptionSaving.value = true; exceptionError.value = null
|
||
|
|
try {
|
||
|
|
const action = overview.value.exception.active ? cancelContainerException : markContainerException
|
||
|
|
await action(containerId.value, overview.value.container.version, exceptionReason.value.trim())
|
||
|
|
overview.value = await getContainerOverview(containerId.value)
|
||
|
|
exceptionOpen.value = false; ElMessage.success(overview.value.exception.active ? '货柜已标记异常' : '货柜异常已取消')
|
||
|
|
} catch (cause) { exceptionError.value = getApiErrorDetails(cause, '货柜异常处理失败') }
|
||
|
|
finally { exceptionSaving.value = false }
|
||
|
|
}
|
||
|
|
|
||
|
|
async function openClearance() {
|
||
|
|
clearanceOpen.value = true; clearanceDocument.value = null; clearanceFile.value = null; clearanceError.value = null; clearanceLoading.value = true
|
||
|
|
try { clearanceDocument.value = await getContainerClearance(containerId.value) }
|
||
|
|
catch (cause) { const details = getApiErrorDetails(cause); if (details.code !== 'A0404') clearanceError.value = details }
|
||
|
|
finally { clearanceLoading.value = false }
|
||
|
|
}
|
||
|
|
function selectClearanceFile(file: UploadFile) { clearanceFile.value = file.raw || null; clearanceError.value = null }
|
||
|
|
function removeClearanceFile() { clearanceFile.value = null }
|
||
|
|
async function uploadClearance() {
|
||
|
|
if (!clearanceFile.value) { clearanceError.value = { code: 'FILE_REQUIRED', message: '请选择清关资料文件' }; return }
|
||
|
|
clearanceSaving.value = true; clearanceError.value = null
|
||
|
|
try { clearanceDocument.value = await uploadContainerClearance(containerId.value, clearanceFile.value, clearanceDocument.value?.version || 0, '上传目的港清关资料'); overview.value = await getContainerOverview(containerId.value); clearanceFile.value = null; ElMessage.success('清关资料已上传') }
|
||
|
|
catch (cause) { clearanceError.value = getApiErrorDetails(cause, '清关资料上传失败') }
|
||
|
|
finally { clearanceSaving.value = false }
|
||
|
|
}
|
||
|
|
async function completeClearance() {
|
||
|
|
if (!clearanceDocument.value) return
|
||
|
|
clearanceSaving.value = true; clearanceError.value = null
|
||
|
|
try { clearanceDocument.value = await completeContainerClearance(containerId.value, clearanceDocument.value.version, '确认目的港清关完成'); overview.value = await getContainerOverview(containerId.value); ElMessage.success('已完成清关') }
|
||
|
|
catch (cause) { clearanceError.value = getApiErrorDetails(cause, '清关完成失败') }
|
||
|
|
finally { clearanceSaving.value = false }
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(async () => { await load(); if (route.query.action === 'documents') openDocument('DELIVERY_ORDER'); if (route.query.action === 'exception' && canEdit.value) openException() })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<AdminPage class="container-detail-page">
|
||
|
|
<section class="container-overview surface-panel">
|
||
|
|
<header class="container-overview__header"><el-button link type="primary" @click="router.push({ name: 'container-loading' })"><ArrowLeft :size="16" />返回列表</el-button><div><h1>{{ title }}</h1><p>柜次资料、履约轨迹、PDA 进度与单证</p></div><StatusBadge v-if="detail" :status="statusText(detail.planStatus)" /></header>
|
||
|
|
<div v-if="detail" class="container-overview__summary"><div><span>柜次号</span><strong>{{ detail.cabinetNo || '—' }}</strong></div><div><span>集装箱号</span><strong>{{ detail.containerNo || '待录入' }}</strong></div><div><span>装柜清单号</span><strong>{{ detail.planNo || '—' }}</strong></div><div><span>柜型</span><strong>{{ detail.containerType || '—' }}</strong></div><div><span>装柜仓库</span><strong>{{ detail.warehouseName || '—' }}</strong></div></div>
|
||
|
|
</section>
|
||
|
|
<LoadErrorState v-if="error" title="货柜详情加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
|
||
|
|
<template v-else-if="detail">
|
||
|
|
<section class="detail-fields surface-panel"><h2>运输与单证快照</h2><dl><div><dt>真实订舱</dt><dd>{{ detail.oceanBookingId ? (detail.billOfLadingNo || '已关联') : '未关联' }}</dd></div><div><dt>异常状态</dt><dd>{{ detail.exceptionActive ? '异常' : '正常' }}</dd></div><div><dt>目的仓</dt><dd>{{ detail.destinationWarehouseName || detail.destinationWarehouseCode || '—' }}</dd></div><div><dt>船公司</dt><dd>{{ detail.shippingCompanyName || '—' }}</dd></div><div><dt>船名 / 航次</dt><dd>{{ [detail.vesselName, detail.voyageNo].filter(Boolean).join(' / ') || '—' }}</dd></div><div><dt>拖车公司</dt><dd>{{ detail.terminalTruckingCompany || '—' }}</dd></div><div><dt>预计开船</dt><dd>{{ formatTime(detail.estimatedSailingAt) }}</dd></div><div><dt>预计到港</dt><dd>{{ formatTime(detail.estimatedPortArrivalAt) }}</dd></div></dl></section>
|
||
|
|
<LoadErrorState v-if="overviewError" compact title="履约摘要加载失败" :message="overviewError.message" :show-retry="false" />
|
||
|
|
<ContainerOverviewPanel v-else-if="overview" :overview="overview" :can-manage-documents="canEdit" :can-manage-exception="canEdit" :document-busy="documentDownloading" :photo-busy-id="photoBusyId" :photo-error="photoError" @upload-document="openDocument" @download-document="downloadDocument" @manage-exception="openException" @preview-photo="previewPhoto" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<AppDialog v-model="documentOpen" :title="documentTitle" width="min(520px, calc(100vw - 28px))" confirm-text="上传资料" :confirm-loading="documentSaving" :confirm-disabled="!documentFile" @confirm="saveDocument"><el-form label-position="top"><el-form-item :label="documentTitle"><el-upload :auto-upload="false" :limit="1" :on-change="selectDocumentFile" :on-remove="removeDocumentFile"><el-button><FileUp :size="16" />选择文件</el-button><template #tip><div class="el-upload__tip">{{ selectedDocument ? '上传新文件将替换当前资料并保留历史。' : `请选择需要提交的${documentTitle}。` }}</div></template></el-upload></el-form-item></el-form><LoadErrorState v-if="documentError" compact title="资料上传失败" :message="documentError.message" :show-retry="false" /></AppDialog>
|
||
|
|
<AppDialog v-model="exceptionOpen" :title="exceptionTitle" width="min(520px, calc(100vw - 28px))" :confirm-text="overview?.exception.active ? '确认取消' : '确认标记'" :confirm-loading="exceptionSaving" :confirm-disabled="!exceptionReason.trim()" @confirm="saveException"><el-alert :title="overview?.exception.active ? '取消备注为必填项，提交后将保留历史记录。' : '异常原因将同步记录在货柜详情和操作日志中。'" :type="overview?.exception.active ? 'warning' : 'error'" :closable="false" /><el-form label-position="top"><el-form-item :label="overview?.exception.active ? '取消备注' : '异常原因'" required><el-input v-model="exceptionReason" type="textarea" :rows="4" maxlength="500" show-word-limit /></el-form-item></el-form><LoadErrorState v-if="exceptionError" compact title="异常处理失败" :message="exceptionError.message" :show-retry="false" /></AppDialog>
|
||
|
|
<AppDialog v-model="clearanceOpen" title="目的港清关资料" width="min(520px, calc(100vw - 28px))" :loading="clearanceLoading" :show-confirm="!clearanceDocument?.completedAt" confirm-text="上传资料" :confirm-loading="clearanceSaving" :confirm-disabled="!clearanceFile" @confirm="uploadClearance"><el-alert v-if="clearanceDocument?.completedAt" type="success" :closable="false" :title="`清关已完成：${clearanceDocument.fileName}`" /><template v-else><el-form label-position="top"><el-form-item label="清关资料"><el-upload :auto-upload="false" :limit="1" :on-change="selectClearanceFile" :on-remove="removeClearanceFile"><el-button><FileUp :size="16" />选择文件</el-button></el-upload></el-form-item></el-form><el-button v-if="clearanceDocument" type="success" plain :loading="clearanceSaving" @click="completeClearance">确认清关完成</el-button></template><LoadErrorState v-if="clearanceError" compact title="清关资料操作失败" :message="clearanceError.message" :show-retry="false" /></AppDialog>
|
||
|
|
</AdminPage>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.container-detail-page { display:grid; min-width:0; gap:16px; }.container-overview { overflow:hidden; }.container-overview__header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:12px 16px; }.container-overview__header h1 { margin:0; font-size:18px; }.container-overview__header p { margin:2px 0 0; color:var(--cc-muted); font-size:12px; }.container-overview__summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--cc-border); }.container-overview__summary>div { display:flex; min-width:0; flex-direction:column; gap:5px; padding:10px 14px; border-right:1px solid var(--cc-border); }.container-overview__summary>div:last-child { border-right:0; }.container-overview__summary span,dt { color:var(--cc-muted); font-size:12px; }.container-overview__summary strong,dd { overflow:hidden; margin:0; text-overflow:ellipsis; white-space:nowrap; }.detail-fields { padding:14px 16px; }.detail-fields h2 { margin:0 0 12px; font-size:15px; }.detail-fields dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 18px; margin:0; }.detail-fields dl>div { min-width:0; }.detail-fields dd { margin-top:4px; font-size:13px; }
|
||
|
|
</style>
|