455 lines
36 KiB
Vue
455 lines
36 KiB
Vue
<script setup lang="ts">
|
||
import SmartLoadingCandidateInbounds from '../components/SmartLoadingCandidateInbounds.vue'
|
||
import '@/styles/adminDensity.css'
|
||
import { computed, onMounted, reactive, ref } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { ArrowLeft, ListChecks, RefreshCw, Sparkles } from '@lucide/vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||
import AdminPage from '@/shared/components/AdminPage.vue'
|
||
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||
import AppDialog from '@/shared/components/AppDialog.vue'
|
||
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
||
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
||
import LineClampText from '@/shared/components/LineClampText.vue'
|
||
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
||
import {
|
||
adjustSmartLoadingItem, assignSmartLoadingGroup, assignSmartLoadingItem, assignSmartLoadingPallet, getContainer,
|
||
getSmartLoadingPlanByBooking, listSmartLoadingCandidates,
|
||
recommendSmartLoading, removeSmartLoadingGroup, removeSmartLoadingItem,
|
||
} from '../api/platformContainerLoading'
|
||
import type { ContainerBookingResource, SmartLoadingCandidate, SmartLoadingCandidateGroupMember, SmartLoadingPlan } from '../types'
|
||
import { groupSmartLoadingItems, type SmartLoadingInboundItem } from '../smartLoadingItems'
|
||
import { loadSmartLoadingPlanCoLoadGroups, type SmartLoadingPlanCoLoadGroup } from '../smartLoadingPlanGroups'
|
||
import { getSmartLoadingChannelGroup } from '../smartLoadingChannelGroups'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const access = useAccessPreviewStore()
|
||
const containerId = computed(() => String(route.params.containerId || ''))
|
||
const container = ref<ContainerBookingResource | null>(null)
|
||
const plan = ref<SmartLoadingPlan | null>(null)
|
||
const candidates = ref<SmartLoadingCandidate[]>([])
|
||
const loading = ref(false)
|
||
const mutating = ref(false)
|
||
const loadError = ref<ApiErrorDetails | null>(null)
|
||
const mutationError = ref<ApiErrorDetails | null>(null)
|
||
const noDraft = ref(false)
|
||
const editingQuantityId = ref('')
|
||
const assignOpen = ref(false)
|
||
const selectedCandidate = ref<SmartLoadingCandidateRow | null>(null)
|
||
const assignForm = reactive({ packageCount: 1 })
|
||
const quantityDrafts = reactive<Record<string, number>>({})
|
||
const planGroupsByInboundId = ref(new Map<string, SmartLoadingPlanCoLoadGroup>())
|
||
|
||
const canAssign = computed(() => access.can('platform:firstleg:smart-loading:assign'))
|
||
const canDelete = computed(() => access.can('platform:firstleg:smart-loading:delete'))
|
||
const canViewLoadingList = computed(() => access.can('platform:firstleg:loading-list:list'))
|
||
const editable = computed(() => plan.value?.canEdit === true)
|
||
const assignable = computed(() => plan.value?.canAssign === true)
|
||
const assignedInboundIds = computed(() => new Set((plan.value?.items || []).map((item) => item.inboundId)))
|
||
const assignedPalletIds = computed(() => new Set((plan.value?.items || []).map((item) => item.palletId).filter(Boolean)))
|
||
type SmartLoadingCandidateRow = SmartLoadingCandidate & { memberInboundIds: string[]; memberInboundCodes: string[]; memberOrderSummaries: string[]; memberOrderCount: number; inboundFragmentCount: number }
|
||
function memberOrderSummaries<T extends { orderId: string; orderNo?: string | null; inboundCode?: string | null }>(members: T[]) {
|
||
const orders = new Map<string, { label: string; inboundCodes: string[] }>()
|
||
for (const member of members) {
|
||
const current = orders.get(member.orderId) || { label: member.orderNo || '订单编码待补充', inboundCodes: [] }
|
||
const inboundCode = member.inboundCode || '入仓码暂缺'
|
||
if (!current.inboundCodes.includes(inboundCode)) current.inboundCodes.push(inboundCode)
|
||
orders.set(member.orderId, current)
|
||
}
|
||
return [...orders.values()].map((order) => `${order.label}：${order.inboundCodes.join('、')}`)
|
||
}
|
||
function groupMemberLabel(group: SmartLoadingPlanCoLoadGroup) {
|
||
return group.inboundFragmentCount === group.memberOrderCount
|
||
? `${group.memberOrderCount} 票`
|
||
: `${group.memberOrderCount} 票 · ${group.inboundFragmentCount} 个入仓片段`
|
||
}
|
||
const displayedCandidates = computed<SmartLoadingCandidateRow[]>(() => {
|
||
return candidates.value.map((candidate) => {
|
||
const members: Array<{ inboundId: string | null; orderId: string; orderNo?: string | null; inboundCode?: string | null }> = candidate.groupMembers.length
|
||
? candidate.groupMembers
|
||
: [candidate]
|
||
return {
|
||
...candidate,
|
||
memberInboundIds: members.map((member) => member.inboundId).filter((id): id is string => Boolean(id)),
|
||
memberInboundCodes: members.map((member) => member.inboundCode || '入仓码暂缺'),
|
||
memberOrderSummaries: memberOrderSummaries(members),
|
||
memberOrderCount: new Set(members.map((member) => member.orderId)).size,
|
||
inboundFragmentCount: Number(candidate.memberCount || members.length),
|
||
}
|
||
})
|
||
})
|
||
const planPalletMembersByPalletId = computed(() => new Map(
|
||
(plan.value?.palletMembers || []).map((entry) => [entry.palletId, entry.members]),
|
||
))
|
||
type SmartLoadingPlanRow = SmartLoadingInboundItem & { coLoadGroup: SmartLoadingPlanCoLoadGroup | null; palletMembers: SmartLoadingCandidateGroupMember[]; memberInboundCodes: string[]; memberOrderSummaries: string[] }
|
||
const displayedPlanItems = computed<SmartLoadingPlanRow[]>(() => {
|
||
const inboundRows = groupSmartLoadingItems(plan.value?.items || [])
|
||
const result: SmartLoadingPlanRow[] = []
|
||
const grouped = new Map<string, SmartLoadingInboundItem[]>()
|
||
for (const row of inboundRows) {
|
||
const group = planGroupsByInboundId.value.get(row.inboundId)
|
||
if (!group) {
|
||
result.push({ ...row, coLoadGroup: null, palletMembers: row.palletId ? planPalletMembersByPalletId.value.get(row.palletId) || [] : [], memberInboundCodes: [row.inboundCode || '入仓码暂缺'], memberOrderSummaries: memberOrderSummaries([row]) })
|
||
continue
|
||
}
|
||
grouped.set(group.groupId, [...(grouped.get(group.groupId) || []), row])
|
||
}
|
||
for (const rows of grouped.values()) {
|
||
const first = rows[0]
|
||
const group = planGroupsByInboundId.value.get(first.inboundId)!
|
||
result.push({
|
||
...first,
|
||
id: `coload:${group.groupId}`,
|
||
inboundCode: rows.map((row) => row.inboundCode).filter(Boolean).join('、'),
|
||
customerName: [...new Set(rows.map((row) => row.customerName).filter(Boolean))].join('、'),
|
||
skuCode: [...new Set(rows.map((row) => row.skuCode).filter(Boolean))].join('、'),
|
||
productNameZh: [...new Set(rows.map((row) => row.productNameZh).filter(Boolean))].join('、'),
|
||
packageCount: rows.reduce((sum, row) => sum + row.packageCount, 0),
|
||
productQuantity: rows.reduce((sum, row) => sum + Number(row.productQuantity || 0), 0),
|
||
grossWeightKg: rows.reduce((sum, row) => sum + Number(row.grossWeightKg || 0), 0),
|
||
volumeCbm: rows.reduce((sum, row) => sum + Number(row.volumeCbm || 0), 0),
|
||
pickedPackageCount: rows.reduce((sum, row) => sum + row.pickedPackageCount, 0),
|
||
minPackageCount: rows.reduce((sum, row) => sum + row.minPackageCount, 0),
|
||
canAdjust: false,
|
||
canRemove: rows.every((row) => row.canRemove),
|
||
sourceItems: rows.flatMap((row) => row.sourceItems),
|
||
detailCount: rows.reduce((sum, row) => sum + row.detailCount, 0),
|
||
coLoadGroup: group,
|
||
palletMembers: [],
|
||
memberInboundCodes: rows.map((row) => row.inboundCode || '入仓码暂缺'),
|
||
memberOrderSummaries: memberOrderSummaries(rows),
|
||
})
|
||
}
|
||
return result
|
||
})
|
||
const totalVolume = computed(() => (plan.value?.items || []).reduce((sum, item) => sum + Number(item.volumeCbm || 0), 0))
|
||
const totalWeight = computed(() => (plan.value?.items || []).reduce((sum, item) => sum + Number(item.grossWeightKg || 0), 0))
|
||
const volumeLimit = computed(() => Number(container.value?.capacityCbm || 0) * 1.5)
|
||
const weightLimit = computed(() => Number(container.value?.maxWeightKg || 0) * 1.5)
|
||
const volumePercent = computed(() => volumeLimit.value ? totalVolume.value / volumeLimit.value * 100 : 0)
|
||
const weightPercent = computed(() => weightLimit.value ? totalWeight.value / weightLimit.value * 100 : 0)
|
||
const displayedVolumePercent = computed(() => percentage(volumePercent.value))
|
||
const displayedWeightPercent = computed(() => percentage(weightPercent.value))
|
||
|
||
const itemColumns: DataTableColumn[] = [
|
||
{ key: 'actions', label: '操作', width: 90, fixed: 'left', slotName: 'actions' },
|
||
{ key: 'sequence', prop: 'loadSequence', label: '顺序', width: 75 },
|
||
{ key: 'order', label: '入仓码', minWidth: 190, slotName: 'order' },
|
||
{ key: 'palletNo', prop: 'palletNo', label: '托盘号', minWidth: 150, showOverflowTooltip: true },
|
||
{ key: 'coLoadGroup', label: '装柜规则', minWidth: 170, slotName: 'coLoadGroup' },
|
||
{ key: 'customerName', prop: 'customerName', label: '客户', minWidth: 150, slotName: 'customerName' },
|
||
{ key: 'goods', label: '货物', minWidth: 190, slotName: 'goods' },
|
||
{ key: 'packageCount', label: '分配箱数', width: 150, slotName: 'packageCount' },
|
||
{ key: 'volumeCbm', label: '体积', width: 120, slotName: 'volume' },
|
||
{ key: 'grossWeightKg', label: '毛重', width: 130, slotName: 'weight' },
|
||
]
|
||
const candidateColumns: DataTableColumn[] = [
|
||
{ key: 'actions', label: '操作', width: 110, fixed: 'left', slotName: 'actions' },
|
||
{ key: 'inboundCode', label: '入仓码', minWidth: 220, fixed: 'left', slotName: 'candidateInbounds' },
|
||
{ key: 'palletNo', prop: 'palletNo', label: '托盘号', minWidth: 150, showOverflowTooltip: true },
|
||
{ key: 'coLoadGroup', label: '装柜规则', minWidth: 170, slotName: 'coLoadGroup' },
|
||
{ key: 'customerName', prop: 'customerName', label: '客户', minWidth: 150, slotName: 'customerName' },
|
||
{ key: 'goodsSummary', prop: 'goodsSummary', label: '货物摘要', minWidth: 180, slotName: 'goodsSummary' },
|
||
{ key: 'availablePackageCount', prop: 'availablePackageCount', label: '箱数', width: 90 },
|
||
{ key: 'cartonIdentityStatus', label: '箱号归属', width: 110, slotName: 'cartonIdentityStatus' },
|
||
{ key: 'averageUnitVolumeCbm', label: '单位体积', width: 120, slotName: 'averageUnitVolume' },
|
||
{ key: 'unitGrossWeightKg', label: '单位毛重', width: 120, slotName: 'unitGrossWeight' },
|
||
]
|
||
|
||
function formatNumber(value: number, digits = 3) { return Number.isFinite(value) ? value.toLocaleString('zh-CN', { maximumFractionDigits: digits }) : '0' }
|
||
function percentage(value: number) { return Number.isFinite(value) ? Number(Math.max(value, 0).toFixed(2)) : 0 }
|
||
function candidateRow(source: object) { return source as SmartLoadingCandidateRow }
|
||
function itemRow(source: object) { return source as SmartLoadingInboundItem }
|
||
function adjustmentMax(source: object) {
|
||
const item = itemRow(source)
|
||
return Math.max(item.minPackageCount, item.totalPackageCount || item.packageCount)
|
||
}
|
||
function startQuantityEdit(source: object) {
|
||
const item = itemRow(source)
|
||
quantityDrafts[item.id] = item.packageCount
|
||
editingQuantityId.value = item.id
|
||
}
|
||
function explainCandidate(source: object) {
|
||
const candidate = candidateRow(source)
|
||
const volume = Number(candidate.averageUnitVolumeCbm || 0)
|
||
const weight = Number(candidate.unitGrossWeightKg || 0)
|
||
const volumeRoom = volumeLimit.value ? Math.floor(Math.max(volumeLimit.value - totalVolume.value, 0) / Math.max(volume, 0.000001)) : candidate.availablePackageCount
|
||
const weightRoom = weightLimit.value ? Math.floor(Math.max(weightLimit.value - totalWeight.value, 0) / Math.max(weight, 0.000001)) : candidate.availablePackageCount
|
||
return `按 150% 上限，当前最多可装 ${Math.max(Math.min(candidate.availablePackageCount, volumeRoom, weightRoom), 0)} 箱`
|
||
}
|
||
function displayCabinetNo(value: ContainerBookingResource | null | undefined) {
|
||
if (!value) return '待生成'
|
||
const cabinetNo = String(value.cabinetNo || '').trim()
|
||
return /^\d{15,}$/.test(cabinetNo) ? '待生成' : cabinetNo || '待生成'
|
||
}
|
||
function displayContainerNo(value: ContainerBookingResource | null | undefined) {
|
||
const containerNo = String(value?.containerNo || '').trim()
|
||
return containerNo && !/^(?:MAN|SPLIT)-/i.test(containerNo) ? containerNo : '待补录'
|
||
}
|
||
function syncDrafts(preserved: Record<string, number> = {}) {
|
||
for (const key of Object.keys(quantityDrafts)) delete quantityDrafts[key]
|
||
for (const item of displayedPlanItems.value) quantityDrafts[item.id] = preserved[item.id] ?? item.packageCount
|
||
}
|
||
function acceptPlan(next: SmartLoadingPlan, preserved: Record<string, number> = {}) { plan.value = next; noDraft.value = false; syncDrafts(preserved) }
|
||
async function acceptPlanWithGroups(next: SmartLoadingPlan, preserved: Record<string, number> = {}) {
|
||
acceptPlan(next, preserved)
|
||
planGroupsByInboundId.value = await loadSmartLoadingPlanCoLoadGroups(next)
|
||
syncDrafts(preserved)
|
||
}
|
||
|
||
async function load() {
|
||
loading.value = true; loadError.value = null; noDraft.value = false
|
||
planGroupsByInboundId.value = new Map()
|
||
try {
|
||
container.value = await getContainer(containerId.value)
|
||
if (container.value.planStatus === 'COMPLETED') {
|
||
plan.value = null
|
||
candidates.value = []
|
||
return
|
||
}
|
||
try { await acceptPlanWithGroups(await getSmartLoadingPlanByBooking(containerId.value)) }
|
||
catch (error) {
|
||
const detail = getApiErrorDetails(error)
|
||
if (detail.code === 'A0404') { plan.value = null; noDraft.value = true }
|
||
else throw error
|
||
}
|
||
const channelGroup = getSmartLoadingChannelGroup(container.value.channelGroupCode)
|
||
candidates.value = plan.value?.canAssign && channelGroup
|
||
? (await listSmartLoadingCandidates({ channelGroupCodes: [channelGroup.code], warehouseId: container.value.warehouseId, page: 1, size: 200 })).records
|
||
: []
|
||
} catch (error) { loadError.value = getApiErrorDetails(error, '智能装柜工作台加载失败') }
|
||
finally { loading.value = false }
|
||
}
|
||
function openOperationalList() {
|
||
if (!container.value || container.value.planStatus === 'EDITING') return
|
||
void router.push({
|
||
name: container.value.planStatus === 'LOADING' ? 'loading-plans' : 'domestic-container-detail',
|
||
params: container.value.planStatus === 'COMPLETED' ? { containerId: container.value.id } : undefined,
|
||
query: container.value.planStatus === 'COMPLETED' ? { tab: 'loading-list' } : { planId: container.value.planId || undefined, warehouseId: container.value.warehouseId },
|
||
})
|
||
}
|
||
function openAssign(source: object) {
|
||
const candidate = candidateRow(source)
|
||
if (candidateBlocked(candidate)) return
|
||
selectedCandidate.value = candidate
|
||
assignForm.packageCount = candidate.coLoadGroupId ? Number(candidate.groupTotalBoxes || candidate.availablePackageCount) : Math.min(candidate.availablePackageCount, 1)
|
||
assignOpen.value = true
|
||
}
|
||
async function assign() {
|
||
const currentPlan = plan.value
|
||
const selected = selectedCandidate.value
|
||
const inboundId = selected?.inboundId
|
||
if (!currentPlan || !selected || !inboundId) return
|
||
if (selected.unitType !== 'SEALED_PALLET' && assignForm.packageCount < 1) return
|
||
if (selected.coLoadGroupId && (selected.blockReason || selected.locked)) return
|
||
mutating.value = true
|
||
mutationError.value = null
|
||
try {
|
||
const next = selected.unitType === 'SEALED_PALLET' && selected.palletId
|
||
? await assignSmartLoadingPallet(currentPlan.id, { palletId: selected.palletId, expectedVersion: currentPlan.version })
|
||
: selected.coLoadGroupId
|
||
? await assignSmartLoadingGroup(currentPlan.id, inboundId, currentPlan.version)
|
||
: await assignSmartLoadingItem(currentPlan.id, { inboundId, packageCount: assignForm.packageCount, expectedVersion: currentPlan.version })
|
||
await acceptPlanWithGroups(next)
|
||
assignOpen.value = false
|
||
ElMessage.success(selected.coLoadGroupId ? `同柜不可拆组 ${selected.groupNo} 已整组分配` : '货物已分配')
|
||
} catch (error) { await handleMutationError(error, '分配失败') }
|
||
finally { mutating.value = false }
|
||
}
|
||
function candidateBlocked(candidate: SmartLoadingCandidateRow) {
|
||
if (candidate.unitType === 'SEALED_PALLET') {
|
||
return Boolean(candidate.blockReason) || candidate.locked === true || !candidate.palletId
|
||
|| !candidate.indivisible || assignedPalletIds.value.has(candidate.palletId)
|
||
}
|
||
return Boolean(candidate.blockReason) || candidate.locked === true
|
||
|| !candidate.inboundId
|
||
|| candidate.memberInboundIds.some((inboundId) => assignedInboundIds.value.has(inboundId))
|
||
|| candidate.availablePackageCount < 1
|
||
}
|
||
async function recommend() {
|
||
if (!plan.value) return
|
||
mutating.value = true
|
||
mutationError.value = null
|
||
try {
|
||
try {
|
||
await acceptPlanWithGroups(await recommendSmartLoading(plan.value.id, plan.value.version))
|
||
} catch (error) {
|
||
const details = getApiErrorDetails(error, '智能推荐失败')
|
||
if (details.code !== 'A0409' || !/(版本|并发|已被修改|已变化)/.test(details.message)) throw error
|
||
await load()
|
||
if (!plan.value) throw error
|
||
await acceptPlanWithGroups(await recommendSmartLoading(plan.value.id, plan.value.version))
|
||
}
|
||
ElMessage.success('智能建议已生成，请人工核对明细')
|
||
}
|
||
catch (error) { await handleMutationError(error, '智能推荐失败') }
|
||
finally { mutating.value = false }
|
||
}
|
||
async function adjust(source: object) {
|
||
const item = itemRow(source)
|
||
if (item.unitType === 'SEALED_PALLET') return
|
||
if (!plan.value || mutating.value) return
|
||
const count = Number(quantityDrafts[item.id])
|
||
if (count === item.packageCount) return
|
||
if (!Number.isInteger(count) || count < item.minPackageCount) { ElMessage.warning(`分配箱数不能低于已拣下限 ${item.minPackageCount} 箱`); return }
|
||
mutating.value = true
|
||
mutationError.value = null
|
||
try { await acceptPlanWithGroups(await adjustSmartLoadingItem(plan.value.id, item.id, count, plan.value.version, item.version)); editingQuantityId.value = ''; ElMessage.success('箱数已调整') }
|
||
catch (error) { await handleMutationError(error, '调整失败') }
|
||
finally { mutating.value = false }
|
||
}
|
||
async function remove(source: object) {
|
||
const item = itemRow(source)
|
||
if (!plan.value || !item.canRemove) return
|
||
const row = source as SmartLoadingPlanRow
|
||
const message = row.coLoadGroup
|
||
? `确认整组移除 ${row.coLoadGroup.groupNo}（${groupMemberLabel(row.coLoadGroup)}、${row.packageCount} 箱）吗？组内所有入仓片段将联动移除。`
|
||
: `确认从计划移除入仓码“${item.inboundCode || '—'}”的 ${item.packageCount} 箱吗？`
|
||
await ElMessageBox.confirm(message, row.coLoadGroup ? '移除同柜不可拆组' : '移除装柜明细', { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: row.coLoadGroup ? '移除整组' : '移除', cancelButtonText: '取消' }).catch(() => false).then(async (confirmed) => {
|
||
if (!confirmed || !plan.value) return
|
||
mutating.value = true
|
||
mutationError.value = null
|
||
try {
|
||
if (row.coLoadGroup) {
|
||
await acceptPlanWithGroups(await removeSmartLoadingGroup(plan.value!.id, row.coLoadGroup.groupId, plan.value!.version))
|
||
await load()
|
||
ElMessage.success(`同柜不可拆组 ${row.coLoadGroup.groupNo} 已整组移除`)
|
||
return
|
||
}
|
||
let current = plan.value!
|
||
for (const original of item.sourceItems) {
|
||
const currentItem = current.items.find((value) => value.id === original.id)
|
||
if (!currentItem) continue
|
||
current = await removeSmartLoadingItem(current.id, currentItem.id, current.version, currentItem.version)
|
||
await acceptPlanWithGroups(current)
|
||
}
|
||
await load()
|
||
ElMessage.success('该入仓码已从装柜方案移除')
|
||
}
|
||
catch (error) { await handleMutationError(error, '移除失败', true) }
|
||
finally { mutating.value = false }
|
||
})
|
||
}
|
||
async function handleMutationError(error: unknown, fallback: string, pickingConflict = false) {
|
||
const details = getApiErrorDetails(error, fallback)
|
||
if (details.code === 'A0409') {
|
||
const preserved = { ...quantityDrafts }
|
||
await load()
|
||
syncDrafts(preserved)
|
||
}
|
||
const pickingMessage = pickingConflict && details.code === 'A0409' && details.message.includes('拣货')
|
||
? '该订单在拣货中不许删除'
|
||
: null
|
||
mutationError.value = { ...details, message: pickingMessage || details.message || (details.code === 'A0409' ? '计划或 PDA 明细已变化，已刷新最新版本并保留本次输入，请重新操作' : details.message) }
|
||
ElMessage.error(mutationError.value.message)
|
||
}
|
||
|
||
onMounted(load)
|
||
</script>
|
||
|
||
<template>
|
||
<AdminPage class="admin-density">
|
||
<section class="business-page workbench">
|
||
<section class="surface-panel workbench-command-bar" aria-label="装柜作业摘要">
|
||
<div class="workbench-identities">
|
||
<div class="workbench-identity">
|
||
<span>柜次号</span>
|
||
<strong>{{ loading ? '正在加载' : displayCabinetNo(container) }}</strong>
|
||
</div>
|
||
<div class="workbench-identity">
|
||
<span>集装箱号</span>
|
||
<strong>{{ loading ? '正在加载' : displayContainerNo(container) }}</strong>
|
||
</div>
|
||
</div>
|
||
<div class="header-actions">
|
||
<el-button link class="density-back" aria-label="返回货柜列表" @click="router.back()"><ArrowLeft :size="18" />返回</el-button>
|
||
<el-tooltip content="刷新" placement="top"><el-button :loading="loading" aria-label="刷新智能装柜" @click="load"><RefreshCw :size="16" /></el-button></el-tooltip>
|
||
<el-button v-if="canAssign && assignable && plan?.status === 'EDITING'" type="primary" plain :loading="mutating" @click="recommend"><Sparkles :size="16" />智能推荐</el-button>
|
||
</div>
|
||
</section>
|
||
<LoadErrorState v-if="loadError" title="智能装柜加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
|
||
<template v-else>
|
||
<LoadErrorState v-if="mutationError" title="装柜操作失败" :message="mutationError.message" compact retry-text="刷新最新计划" @retry="load"><template #details><ApiErrorMeta :details="mutationError" /></template></LoadErrorState>
|
||
<section v-if="container?.planStatus === 'COMPLETED'" class="readonly-status-card" aria-label="装柜完成状态">
|
||
<el-tag type="success">装柜完成</el-tag>
|
||
<strong>该柜次已完成装柜</strong>
|
||
<p>智能装柜方案已锁定，不能继续调整。请进入装柜清单查看完整记录。</p>
|
||
<el-button v-if="canViewLoadingList" type="primary" @click="openOperationalList"><ListChecks :size="16" />查看装柜清单</el-button>
|
||
</section>
|
||
<template v-else>
|
||
<section v-if="container" class="summary-band"><div><span>柜型</span><strong>{{ container.containerType }}</strong></div><div><span>装柜仓库</span><strong>{{ container.warehouseName || '—' }}</strong></div></section>
|
||
<section v-if="container" class="capacity-grid"><div><div class="meter-title"><span>体积占用（含 150% 上限）</span><strong>{{ formatNumber(totalVolume) }} / {{ formatNumber(volumeLimit) }} m³</strong></div><el-progress :percentage="Math.min(displayedVolumePercent,100)" :status="volumePercent > 100 ? 'exception' : undefined" /></div><div><div class="meter-title"><span>重量占用（含 150% 上限）</span><strong>{{ formatNumber(totalWeight,1) }} / {{ formatNumber(weightLimit,1) }} kg</strong></div><el-progress :percentage="Math.min(displayedWeightPercent,100)" :status="weightPercent > 100 ? 'exception' : undefined" /></div></section>
|
||
<el-empty v-if="noDraft" description="该柜次缺少自动生成的预装计划，请刷新后重试" />
|
||
<template v-else-if="plan">
|
||
<el-alert v-if="plan.status === 'LOADING' && plan.canEdit" type="warning" :closable="false" show-icon title="已下发 PDA，仍可维护未完成的装柜明细" description="新增、增加或移除未拣明细会刷新 PDA 明细与版本；PDA 端需要刷新后继续操作。" />
|
||
<el-alert v-else-if="!plan.canEdit" :type="plan.finalCompletionStatus === 'COMPLETED' ? 'success' : 'info'" :closable="false" show-icon :title="plan.finalCompletionStatus === 'IN_PROGRESS' ? '正在最终确认，装柜方案暂时只读' : plan.finalCompletionStatus === 'COMPLETED' ? '装柜已完成，方案永久只读' : '当前装柜方案只读'" :description="plan.blockedReason || '请刷新计划获取最新作业状态。'" />
|
||
<DataTable :data="displayedPlanItems" :columns="itemColumns" :loading="loading || mutating" stripe preference-key="smart-loading-items" column-settings-mode="hide" empty-text="暂无已分配货物">
|
||
<template #toolbar-start><div><h2>{{ displayContainerNo(container) }} 装柜方案</h2><p>智能建议必须经人工核对。</p></div></template>
|
||
<template #actions="{ row }"><div class="row-actions density-actions"><el-button data-tone="danger" class="density-action" v-if="canDelete && editable && row.canRemove" size="small" type="danger" plain @click="remove(row)">删除</el-button></div></template>
|
||
<template #order="{ row }"><SmartLoadingCandidateInbounds :members="row.palletMembers" :sealed-pallet="row.unitType === 'SEALED_PALLET'" :fallback-inbound-code="row.inboundCode" /></template>
|
||
<template #customerName="{ row }"><LineClampText :content="row.customerName" /></template>
|
||
<template #coLoadGroup="{ row }"><details v-if="row.coLoadGroup" class="candidate-group"><summary>整组加入 · 不可拆</summary><el-tag size="small" type="warning"><LineClampText :content="`${row.coLoadGroup.groupNo} · ${groupMemberLabel(row.coLoadGroup)}`" /></el-tag><LineClampText :content="row.memberOrderSummaries.join('；')" /><LineClampText :content="`全部入仓片段联动，固定 ${row.coLoadGroup.fullPackageCount} 箱`" /></details><LineClampText v-else :content="row.unitType === 'SEALED_PALLET' ? '整托加入 · 不可拆' : '按箱加入'" /></template>
|
||
<template #goods="{ row }"><div class="goods-cell"><LineClampText :content="row.productNameZh || '未命名货物'" /><LineClampText class="goods-cell__sku" :content="row.skuCode || '无 SKU'" /></div></template>
|
||
<template #packageCount="{ row }"><LineClampText v-if="row.unitType === 'SEALED_PALLET'" :content="`${row.packageCount} 箱（整托固定）`" /><LineClampText v-else-if="row.coLoadGroup" :content="`${row.packageCount} 箱（整组固定）`" /><div v-else class="package-count-editor"><el-input-number v-if="editingQuantityId === row.id" v-model="quantityDrafts[row.id]" :min="row.minPackageCount" :max="adjustmentMax(row)" :step="1" :controls="false" :disabled="mutating" placeholder="请输入使用箱数" @blur="adjust(row)" @keyup.enter="adjust(row)" /><div v-else class="package-count-summary"><div class="package-count-used"><strong>使用：{{ row.packageCount }}</strong><el-button v-if="canAssign && editable && row.canAdjust" class="density-action" :disabled="mutating" aria-label="调整箱数" @click="startQuantityEdit(row)">调整</el-button></div><small v-if="(row.remainingPackageCount ?? 0) > 0">未用：{{ row.remainingPackageCount }}</small></div><LineClampText v-if="row.detailCount > 1 && editable" :content="`含 ${row.detailCount} 个规格，需删除后重加`" /><LineClampText v-if="row.pickedPackageCount > 0" :content="`已拣 ${row.pickedPackageCount} 箱`" /></div></template>
|
||
<template #volume="{ row }">{{ formatNumber(Number(row.volumeCbm || 0)) }} m³</template><template #weight="{ row }">{{ formatNumber(Number(row.grossWeightKg || 0),1) }} kg</template>
|
||
</DataTable>
|
||
<DataTable :data="displayedCandidates" :columns="candidateColumns" :loading="loading || mutating" stripe preference-key="smart-loading-candidates" column-settings-mode="hide" empty-text="当前仓库暂无可装柜货物">
|
||
<template #toolbar-start><div><h2>候选货物</h2><p>系统基于装柜仓库、物流渠道、可用箱数及 150% 容量上限校验。</p></div></template>
|
||
<template #actions="{ row }"><el-button data-tone="primary" class="density-action" v-if="canAssign && assignable" size="small" type="primary" plain :disabled="candidateBlocked(row as SmartLoadingCandidateRow)" @click="openAssign(row)">加入</el-button></template>
|
||
<template #candidateInbounds="{ row }"><SmartLoadingCandidateInbounds :candidate="row as SmartLoadingCandidate" /></template>
|
||
<template #customerName="{ row }"><LineClampText :content="row.customerName" /></template>
|
||
<template #goodsSummary="{ row }"><LineClampText :content="row.goodsSummary || '—'" /></template>
|
||
<template #coLoadGroup="{ row }"><details v-if="row.coLoadGroupId" class="candidate-group"><summary>整组加入 · 不可拆</summary><el-tag size="small" type="warning"><LineClampText :content="`${row.groupNo} · ${row.memberOrderCount} 票 · ${row.inboundFragmentCount} 个入仓片段`" /></el-tag><LineClampText :content="row.memberOrderSummaries.join('；')" /><LineClampText :content="`整组 ${row.groupTotalBoxes} 箱，必须全量进入同一柜`" /><LineClampText v-if="row.blockReason" class="candidate-block" :content="row.blockReason" /><LineClampText v-else-if="row.locked" content="该组已锁定，不能重复分配" /></details><LineClampText v-else :content="row.unitType === 'SEALED_PALLET' ? '整托加入 · 不可拆' : '按箱加入'" /></template>
|
||
<template #averageUnitVolume="{ row }">{{ formatNumber(Number(row.averageUnitVolumeCbm || 0)) }} m³</template><template #unitGrossWeight="{ row }">{{ formatNumber(Number(row.unitGrossWeightKg || 0),1) }} kg</template>
|
||
<template #cartonIdentityStatus><el-tag size="small" type="info" effect="plain">未核验</el-tag></template>
|
||
</DataTable>
|
||
</template>
|
||
</template>
|
||
</template>
|
||
<AppDialog class="admin-density-dialog" v-model="assignOpen" :title="selectedCandidate?.unitType === 'SEALED_PALLET' ? '整托加入当前柜次' : selectedCandidate?.coLoadGroupId ? '整组加入当前柜次' : '按入仓码分配箱数'" :confirm-loading="mutating" :confirm-disabled="Boolean(selectedCandidate?.blockReason || selectedCandidate?.locked)" :confirm-text="selectedCandidate?.unitType === 'SEALED_PALLET' ? '确认整托分配' : selectedCandidate?.coLoadGroupId ? '确认整组分配' : '确认分配'" @confirm="assign"><div v-if="selectedCandidate" class="assign-dialog"><p><strong>{{ selectedCandidate.palletNo || selectedCandidate.groupNo || selectedCandidate.inboundCode || '入仓码暂缺' }}</strong></p><template v-if="selectedCandidate.coLoadGroupId"><p>组内 {{ selectedCandidate.memberOrderCount }} 票、{{ selectedCandidate.inboundFragmentCount }} 个入仓片段，共 {{ selectedCandidate.groupTotalBoxes }} 箱</p><p v-for="summary in selectedCandidate.memberOrderSummaries" :key="summary">{{ summary }}</p><el-alert :title="selectedCandidate.blockReason || '同柜且不可拆：全部订单及其入仓片段按完整箱数一次加入，不能部分输入或单独移除。'" :type="selectedCandidate.blockReason ? 'error' : 'warning'" :closable="false" /></template><template v-else-if="selectedCandidate.unitType === 'SEALED_PALLET'"><p>托盘号 {{ selectedCandidate.palletNo || '—' }} · 整托 {{ selectedCandidate.availablePackageCount }} 箱</p><SmartLoadingCandidateInbounds :candidate="selectedCandidate" /><el-alert title="该封托托盘将作为一个不可拆分单元整托加入；装柜阶段复用此托盘，不会重新生成工作托盘。" type="warning" :closable="false" /></template><template v-else><p>{{ selectedCandidate.goodsSummary || '货物摘要暂缺' }} · 可用 {{ selectedCandidate.availablePackageCount }} 箱</p><el-form class="density-form" label-position="top"><el-form-item label="本次计划装柜箱数" required><el-input-number v-model="assignForm.packageCount" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" placeholder="请输入本次分配箱数" /></el-form-item></el-form><el-alert :title="explainCandidate(selectedCandidate)" type="info" :closable="false" /><small>只记录数量，具体上柜箱号未核验。</small></template></div></AppDialog>
|
||
</section>
|
||
</AdminPage>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.workbench { display: grid; gap: var(--admin-space-5); min-width: 0; }
|
||
.workbench-command-bar,.header-actions,.row-actions,.meter-title { display: flex; align-items: center; }
|
||
.workbench-command-bar { justify-content: space-between; gap: var(--admin-space-5); padding: var(--admin-space-5) var(--admin-space-5); }
|
||
.workbench-identities { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-7); }
|
||
.workbench-identity { display: grid; min-width: 0; gap: 3px; }
|
||
.workbench-identity span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
|
||
.workbench-identity strong { font-size: var(--admin-font-title); overflow-wrap: anywhere; }
|
||
.workbench h2,.workbench h2 + p { margin: 0; }
|
||
.workbench h2 { font-size: var(--admin-font-section); }
|
||
.workbench h2 + p,.workbench small { display: block; margin-top: var(--admin-space-1); color: var(--cc-muted); }
|
||
.header-actions,.row-actions { flex-wrap: wrap; gap: var(--admin-space-3); }
|
||
.header-actions :deep(.el-button + .el-button),.row-actions :deep(.el-button + .el-button) { margin-left: 0; }
|
||
.summary-band { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border: 1px solid var(--cc-border); background: var(--cc-border); }
|
||
.summary-band>div { display: grid; gap: 5px; padding: var(--admin-space-5); background: var(--admin-surface); }
|
||
.summary-band span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
|
||
.capacity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--admin-space-5); padding: var(--admin-space-5); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--admin-surface); }
|
||
.readonly-status-card { display: grid; justify-items: start; gap: var(--admin-space-4); padding: var(--admin-space-6); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--admin-surface); }
|
||
.readonly-status-card strong { font-size: var(--admin-font-section); }
|
||
.readonly-status-card p { margin: 0; color: var(--cc-muted); }
|
||
.meter-title { justify-content: space-between; gap: var(--admin-space-5); margin-bottom: var(--admin-space-4); font-size: var(--admin-font-body); }
|
||
.row-actions { min-width: 150px; }
|
||
.goods-cell { display: grid; min-width: 0; gap: 2px; }
|
||
.goods-cell :deep(.line-clamp-text) { width: 100%; font-weight: 600; }
|
||
.goods-cell :deep(.goods-cell__sku.line-clamp-text) { color: var(--cc-muted); font-size: var(--admin-font-caption); font-weight: 400; }
|
||
.package-count-editor { display: grid; min-width: 0; gap: var(--admin-space-1); }
|
||
.package-count-summary { display: grid; gap: 3px; line-height: 1.35; }
|
||
.package-count-used { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-2); }
|
||
.package-count-summary strong { font-size: var(--admin-font-body); font-weight: 600; }
|
||
.package-count-summary small { color: var(--cc-muted); font-size: var(--admin-font-caption); }
|
||
.workbench :deep(.package-count-editor .el-input-number) { width: 100%; min-width: 0; }
|
||
.assign-dialog p { margin: 0 0 var(--admin-space-4); }
|
||
.assign-dialog :deep(.el-input-number) { width: 100%; }
|
||
.candidate-group { display: grid; width: 100%; min-width: 0; gap: 3px; }
|
||
.candidate-group :deep(.el-tag),.candidate-group :deep(.el-tag__content),.candidate-group :deep(.line-clamp-text) { max-width: 100%; min-width: 0; }
|
||
.candidate-group :deep(.line-clamp-text) { width: 100%; color: var(--cc-muted); font-size: var(--admin-font-caption); }
|
||
.candidate-group .candidate-block { color: var(--el-color-danger); }
|
||
@media (max-width: 760px) { .workbench-command-bar,.header-actions { width: 100%; flex-direction: column; align-items: stretch; } .workbench-identities { flex-direction: column; align-items: stretch; gap: 10px; } .summary-band,.capacity-grid { grid-template-columns: 1fr; } .meter-title { align-items: flex-start; flex-direction: column; } .header-actions .el-button { min-height: 44px; margin-left: 0; } }
|
||
</style>
|