pda-overseas-uniapp/src/components/ReceivingSessionSummary.vue

<template>
	<view class="receiving-summary">
		<view class="receiving-summary-head">
			<view><text class="receiving-summary-label">当前柜号</text><text class="receiving-summary-container">{{ session?.containerNo || '—' }}</text></view>
			<text class="receiving-summary-status">{{ statusLabel }}</text>
		</view>
		<view class="receiving-summary-context">
			<view class="receiving-summary-destinations"><text class="destination-label">目的仓：</text><view class="destination-tags"><text v-for="value in destinationValues" :key="value">{{ value }}</text></view></view>
		</view>
		<view class="receiving-summary-metrics">
			<view><text class="metric-value">{{ inboundCodeCount }}</text><text class="metric-label">入仓码</text></view>
			<view><text class="metric-value">{{ plannedPalletCount }}</text><text class="metric-label">计划托数</text></view>
			<view><text class="metric-value">{{ totalPackages }}</text><text class="metric-label">计划箱数</text></view>
			<view><text class="metric-value metric-pending">{{ pendingPackages }}</text><text class="metric-label">待收箱数</text></view>
		</view>
		<view v-if="planFlags.length" class="receiving-plan-flags">
			<view v-for="item in planFlags" :key="item.inboundCode" class="receiving-plan-row">
				<text class="receiving-plan-code">{{ item.inboundCode || '—' }}</text>
				<view class="receiving-plan-tags">
					<text :class="item.assigned ? 'flag-positive' : 'flag-muted'">{{ item.assigned ? '已分配' : '未分配' }}</text>
					<text :class="item.mergeAllowed ? 'flag-option' : 'flag-muted'">{{ item.mergeAllowed ? '可合托·非强制' : '不合托' }}</text>
					<text :class="item.urgent ? 'flag-urgent' : 'flag-muted'">{{ item.urgent ? '加急' : '普通' }}</text>
				</view>
			</view>
		</view>
		<view class="receiving-summary-progress"><view><text>收货进度</text><text>{{ receivedPackages }} / {{ totalPackages }} 箱</text></view><view class="progress-track"><view class="progress-fill" :style="{ width: percent + '%' }"></view></view></view>
	</view>
</template>

<script>
	export default {
		props: { session: { type: Object, default: null } },
		computed: {
			planFlags() { return Array.isArray(this.session?.inbounds) ? this.session.inbounds : [] },
			inboundCodeCount() { return Array.isArray(this.session?.inbounds) ? this.session.inbounds.length : 0 },
			plannedPalletCount() { return (this.session?.inbounds || []).reduce((sum, item) => sum + Math.max(0, Number(item?.plannedPalletCount || 0)), 0) },
			destinationValues() { const values = (this.session?.inbounds || []).map((item) => item?.fbaWarehouseCode || item?.destinationWarehouseName || item?.destinationWarehouseCode).filter(Boolean); const unique = [...new Set(values)]; return unique.length ? unique : ['—'] },
			totalPackages() { return Math.max(0, Number(this.session?.totalPackages || 0)) },
			receivedPackages() { return Math.max(0, Number(this.session?.receivedPackages || 0)) },
			pendingPackages() { return Math.max(0, Number(this.session?.pendingPackages ?? this.totalPackages - this.receivedPackages)) },
			percent() { return this.totalPackages ? Math.min(100, Math.round(this.receivedPackages / this.totalPackages * 100)) : 0 },
			statusLabel() { return ({ WAIT_SIGN: '待签收', SIGNED: '已签收', RECEIVING: '收货中', COMPLETED: '已完成' })[this.session?.status] || '待签收' }
		}
	}
</script>

<style scoped>
	.receiving-summary{box-sizing:border-box;margin-bottom:10px;padding:10px 12px;border:1px solid #b8d2f3;border-radius:13px;background:linear-gradient(145deg,#fff,#f2f7ff);box-shadow:0 3px 12px rgba(31,74,125,.08)}
	.receiving-summary-head,.receiving-summary-progress>view:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}
	.receiving-summary-label,.receiving-summary-container,.metric-value,.metric-label{display:block}.receiving-summary-label{color:#718095;font-size:9px;line-height:13px}.receiving-summary-container{margin-top:1px;color:#17324d;font-size:17px;font-weight:850;line-height:22px}
	.receiving-summary-status{flex-shrink:0;padding:4px 8px;border-radius:99px;color:#1668dc;font-size:9px;font-weight:700;background:#e3efff}
	.receiving-summary-context{display:flex;flex-direction:column;gap:4px;margin-top:7px;color:#617389;font-size:9px;line-height:14px}.receiving-summary-destinations{display:flex;min-width:0;align-items:flex-start}.destination-label{flex-shrink:0}.destination-tags{display:flex;min-width:0;flex-wrap:wrap;gap:3px 4px}.destination-tags text{padding:0 5px;border-radius:99px;color:#42617f;line-height:14px;background:#e8f0fa;white-space:nowrap}
	.receiving-summary-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:7px;padding:7px 2px;border-radius:9px;background:rgba(255,255,255,.8)}.receiving-summary-metrics>view{display:flex;align-items:center;flex-direction:column;border-right:1px solid #e3eaf2}.receiving-summary-metrics>view:last-child{border-right:0}
	.receiving-plan-flags{margin-top:7px;padding:3px 8px;border-radius:9px;background:rgba(255,255,255,.82)}.receiving-plan-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid #e9eef5}.receiving-plan-row:last-child{border-bottom:0}.receiving-plan-code{min-width:0;color:#17324d;font-size:10px;font-weight:750;overflow-wrap:anywhere}.receiving-plan-tags{display:flex;flex-shrink:0;gap:3px}.receiving-plan-tags text{padding:2px 5px;border-radius:99px;font-size:8px;line-height:12px}.flag-positive{color:#08705f;background:#e2f6f0}.flag-option{color:#1668dc;background:#e7f0ff}.flag-urgent{color:#b54708;background:#fff0dc}.flag-muted{color:#718095;background:#edf1f5}
	.metric-value{color:#17324d;font-size:17px;font-weight:850;line-height:21px}.metric-pending{color:#b66a08}.metric-label{margin-top:1px;color:#718095;font-size:8px;line-height:12px;text-align:center}
	.receiving-summary-progress{margin-top:7px;color:#607287;font-size:9px}.progress-track{height:5px;margin-top:5px;overflow:hidden;border-radius:99px;background:#dfe8f2}.progress-fill{height:100%;border-radius:inherit;background:#1677e8}
</style>