38 lines
2.0 KiB
Vue
38 lines
2.0 KiB
Vue
<script setup lang="ts">
|
||
import { ref, watch } from 'vue'
|
||
import { getRelabelQuantities, type RelabelQuantityTotals } from '../api/relabelQuantities'
|
||
const props = defineProps<{ query?: Record<string, unknown>; relabelNo?: string }>()
|
||
const data = ref<RelabelQuantityTotals | null>(null)
|
||
const error = ref('')
|
||
let generation = 0
|
||
function dimension(known: number, unknown: number, unit: string) {
|
||
if (unknown > 0 && known === 0) return `未提供（${unknown} 票）`
|
||
return `已知 ${known} ${unit}${unknown > 0 ? `（${unknown} 票未提供）` : ''}`
|
||
}
|
||
watch(() => [props.query, props.relabelNo], async () => {
|
||
const current = ++generation
|
||
data.value = null; error.value = ''
|
||
try {
|
||
const result = await getRelabelQuantities({ ...props.query, ...(props.relabelNo ? { relabelNo: props.relabelNo } : {}) })
|
||
if (current === generation) data.value = result
|
||
} catch { if (current === generation) error.value = '数量汇总加载失败，请刷新重试' }
|
||
}, { immediate: true, deep: true })
|
||
</script>
|
||
<template>
|
||
<section class="relabel-quantity-panel" aria-label="贴标数量维度">
|
||
<p v-if="error" role="alert">{{ error }}</p>
|
||
<template v-else-if="data">
|
||
<strong>{{ relabelNo ? '本单数量' : '全部筛选结果' }}</strong>
|
||
<span>{{ data.orderCount }} 票</span><span>{{ data.skuCount }} 种 SKU</span>
|
||
<span>贴标件数：{{ dimension(Number(data.knownLabelPieceCount), Number(data.unknownPieceOrders), '件') }}</span>
|
||
<span>箱数：{{ dimension(Number(data.knownCartonCount), Number(data.unknownCartonOrders), '箱') }}</span>
|
||
<p v-if="relabelNo && data.orders[relabelNo]?.duplicateCarton" role="status">存在重复箱唛关联，箱数已去重，贴标件数待核查。</p>
|
||
</template>
|
||
<span v-else>数量加载中…</span>
|
||
</section>
|
||
</template>
|
||
<style scoped>
|
||
.relabel-quantity-panel { display: flex; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface, white); margin-bottom: 12px; }
|
||
.relabel-quantity-panel p { margin: 0; }
|
||
</style>
|