64 lines
4.4 KiB
Vue
64 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
|
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
|
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
|
import StatusBadge from '@/shared/components/StatusBadge.vue'
|
|
import { getPlatformOrderFulfillmentTree, type UnifiedOrderFulfillmentTree } from '../api/orderFulfillment'
|
|
import { unifiedOrderFulfillmentRoleLabel, unifiedOrderFulfillmentStatusLabel } from '../status'
|
|
|
|
const props = defineProps<{ tenantId: string; orderId: string; inboundCode?: string | null; compact?: boolean }>()
|
|
const tree = ref<UnifiedOrderFulfillmentTree | null>(null)
|
|
const loading = ref(false)
|
|
const error = ref<ApiErrorDetails | null>(null)
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
error.value = null
|
|
try { tree.value = await getPlatformOrderFulfillmentTree(props.tenantId, props.orderId) }
|
|
catch (cause) { error.value = getApiErrorDetails(cause) }
|
|
finally { loading.value = false }
|
|
}
|
|
|
|
onMounted(() => { void load() })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fulfillment-tree-panel" :class="{ compact }" aria-label="拆分履约聚合">
|
|
<LoadErrorState v-if="error" title="拆分履约暂时无法加载" :message="error.message" :loading="loading" @retry="load">
|
|
<ApiErrorMeta :details="error" />
|
|
</LoadErrorState>
|
|
<div v-else-if="loading" class="tree-loading" aria-live="polite">正在加载拆分履约…</div>
|
|
<template v-else-if="tree">
|
|
<div class="tree-summary">
|
|
<div><span>入仓码</span><strong>{{ props.inboundCode || '暂缺' }}</strong></div>
|
|
<div><span>原始总量</span><strong>{{ tree.originalPackageCount ?? '—' }} 箱</strong></div>
|
|
<div><span>累计已装</span><strong>{{ tree.cumulativeLoadedPackageCount ?? '—' }} 箱</strong></div>
|
|
<div><span>当前余量</span><strong>{{ tree.currentRemainderPackageCount ?? '—' }} 箱</strong></div>
|
|
</div>
|
|
<el-alert v-if="tree.historicalTwoChildModel" type="info" :closable="false" show-icon title="该记录使用历史双子单模型，仅兼容展示；新拆分不会再生成已装子单。" />
|
|
<el-table :data="tree.fragments" row-key="orderId" border stripe empty-text="暂无拆分分片">
|
|
<el-table-column label="分片" min-width="180"><template #default="{ row }"><strong>{{ unifiedOrderFulfillmentRoleLabel(row.splitRole) }}</strong><small v-if="row.splitSequence != null"> · 第 {{ row.splitSequence }} 次</small></template></el-table-column>
|
|
<el-table-column label="类型" width="120"><template #default="{ row }">{{ unifiedOrderFulfillmentRoleLabel(row.splitRole) }}</template></el-table-column>
|
|
<el-table-column label="本单计划" width="100"><template #default="{ row }">{{ row.plannedPackageCount ?? '—' }} 箱</template></el-table-column>
|
|
<el-table-column label="已拣" width="90"><template #default="{ row }">{{ row.pickedPackageCount ?? '—' }}</template></el-table-column>
|
|
<el-table-column label="未拣" width="90"><template #default="{ row }">{{ row.unpickedPackageCount ?? '—' }}</template></el-table-column>
|
|
<el-table-column label="状态" width="130"><template #default="{ row }"><StatusBadge :status="unifiedOrderFulfillmentStatusLabel(row.status, row.splitRole)" /></template></el-table-column>
|
|
<el-table-column label="柜次" min-width="150"><template #default="{ row }">{{ row.containerBookingId ? '已关联柜次' : '—' }}</template></el-table-column>
|
|
</el-table>
|
|
</template>
|
|
<el-empty v-else description="暂无拆分履约数据" :image-size="64" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.fulfillment-tree-panel { display: grid; gap: 16px; }
|
|
.tree-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-surface-muted); }
|
|
.tree-summary div { display: grid; gap: 4px; min-width: 0; }
|
|
.tree-summary span { color: var(--cc-muted); font-size: 12px; }
|
|
.tree-summary strong { overflow: hidden; color: var(--cc-text); text-overflow: ellipsis; white-space: nowrap; }
|
|
.tree-loading { min-height: 120px; display: grid; place-items: center; color: var(--cc-muted); }
|
|
small { color: var(--cc-muted); font-weight: 400; }
|
|
@media (max-width: 720px) { .tree-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
|
</style>
|