feat: add phase 5 overseas PDA fulfillment
This commit is contained in:
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<view v-if="user" class="page-shell portal-page fulfillment-page">
|
||||
<PortalHeader title="排车拣货" :user="user" />
|
||||
<scroll-view class="fulfillment-scroll" scroll-y>
|
||||
<view class="portal-content fulfillment-content">
|
||||
<view class="fulfillment-heading">
|
||||
<text class="fulfillment-title">排车拣货与发车</text>
|
||||
<text class="fulfillment-subtitle">客户与当前海外仓由登录令牌和服务端确定；扫描排车单号或任务中的托盘码开始作业</text>
|
||||
</view>
|
||||
|
||||
<view class="fulfillment-card">
|
||||
<ScanTargetInput name="dispatch" :model-value="scanCode" label="排车单号或托盘码" placeholder="扫描排车单号 / 托盘码" :active="true" @update:modelValue="updateScanCode" @submit="handleScan" />
|
||||
<button class="secondary-button" :disabled="!scanCode || loading || busy" @tap="handleScan(scanCode)">{{ current ? '匹配托盘' : '打开排车任务' }}</button>
|
||||
<text class="scan-help">网络失败不会清空草稿，再次提交会沿用同一幂等键。</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="fulfillment-state"><text>正在加载排车任务…</text></view>
|
||||
<view v-else-if="error" class="fulfillment-error" role="alert">
|
||||
<text class="state-title">{{ error.message }}</text>
|
||||
<text v-if="error.code">错误码：{{ error.code }}</text>
|
||||
<text v-if="error.requestId">requestId：{{ error.requestId }}</text>
|
||||
<text v-if="error.traceId">traceId：{{ error.traceId }}</text>
|
||||
<text v-if="error.network" class="offline-note">网络连接失败，未完成作业与幂等键已保留。</text>
|
||||
<button class="secondary-button" :disabled="loading || busy" @tap="retry">重试</button>
|
||||
</view>
|
||||
|
||||
<template v-if="!loading && !current">
|
||||
<view class="list-toolbar"><text>待处理排车任务</text><button :disabled="loading" @tap="loadTasks">刷新</button></view>
|
||||
<view v-if="tasks.length" class="task-list">
|
||||
<button v-for="task in tasks" :key="task.dispatchNo" class="task-card" @tap="openTask(task.dispatchNo)">
|
||||
<view class="task-head"><text class="business-code">{{ task.dispatchNo || '—' }}</text><text class="status-badge">{{ statusLabel(task.status) }}</text></view>
|
||||
<text class="task-meta">任务号 {{ task.taskNo || '—' }} · 车牌 {{ task.vehiclePlate || '—' }}</text>
|
||||
</button>
|
||||
</view>
|
||||
<view v-else-if="!error" class="fulfillment-state"><text class="state-title">暂无排车拣货任务</text><text>可刷新列表，或直接扫描排车单号恢复作业。</text></view>
|
||||
</template>
|
||||
|
||||
<template v-if="current">
|
||||
<view class="fulfillment-card summary-card">
|
||||
<view class="task-head"><text class="business-code">{{ current.dispatchNo || '—' }}</text><text class="status-badge">{{ statusLabel(current.status) }}</text></view>
|
||||
<text class="task-meta">任务号 {{ current.taskNo || '—' }} · 车牌 {{ current.vehiclePlate || '—' }}</text>
|
||||
<view class="metrics"><view><text class="metric-value">{{ plannedPackages }}</text><text>计划箱数</text></view><view><text class="metric-value success">{{ pickedPackages }}</text><text>已拣箱数</text></view><view><text class="metric-value warning">{{ remainingPackages }}</text><text>待拣箱数</text></view></view>
|
||||
<button class="link-button" :disabled="busy" @tap="closeTask">返回任务列表</button>
|
||||
</view>
|
||||
|
||||
<view v-if="current.items.length" class="item-list">
|
||||
<view v-for="item in current.items" :key="item.palletNo" class="fulfillment-card item-card" :class="{ selected: selectedItem?.palletNo === item.palletNo }" @tap="selectPallet(item)">
|
||||
<view class="task-head"><text class="business-code">{{ item.palletNo || '未关联托盘码' }}</text><text>{{ item.pickedPackages }}/{{ item.scheduledPackages }} 箱</text></view>
|
||||
<text class="task-meta">{{ routeLabel(item) }}</text>
|
||||
<view class="progress"><view :style="{ width: `${itemProgress(item)}%` }"></view></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="fulfillment-state"><text class="state-title">任务没有可拣货明细</text><text>请联系平台确认排车托盘是否已下发。</text></view>
|
||||
|
||||
<view v-if="selectedItem && selectedRemaining > 0" class="fulfillment-card">
|
||||
<text class="card-title">本次拣货：{{ selectedItem.palletNo }}</text>
|
||||
<view class="count-row"><text>拣货箱数</text><input type="number" :value="packages" @input="updatePackages" /><text>最多 {{ selectedRemaining }} 箱</text></view>
|
||||
<button class="primary-button" :disabled="!canPick || busy" @tap="submitPick">{{ busyAction === 'pick' ? '提交中…' : '确认拣货' }}</button>
|
||||
</view>
|
||||
|
||||
<view v-if="canCompleteStage" class="fulfillment-card gate-card">
|
||||
<text class="card-title">完成拣货</text>
|
||||
<text v-if="remainingPackages > 0" class="gate-warning">尚有 {{ remainingPackages }} 箱未拣，不能完成排车拣货。</text>
|
||||
<text v-else class="gate-note">全部计划箱数已拣齐，可以完成任务。</text>
|
||||
<button class="primary-button" :disabled="!canComplete || busy" @tap="completePicking">{{ busyAction === 'complete' ? '完成中…' : '完成排车拣货' }}</button>
|
||||
</view>
|
||||
|
||||
<view v-if="pickingCompleted" class="fulfillment-card gate-card">
|
||||
<text class="card-title">发车门禁</text>
|
||||
<text v-if="!allPicked" class="gate-warning">服务端仍显示 {{ remainingPackages }} 箱未拣，不允许发车。</text>
|
||||
<text v-else-if="departed" class="gate-success">该排车任务已执行发车，不可重复提交。</text>
|
||||
<text v-else class="gate-note">拣货已完成且全部箱数核平，服务端将再次校验出库单和托盘门禁。</text>
|
||||
<button v-if="!departed" class="depart-button" :disabled="!canDepart || busy" @tap="depart">{{ busyAction === 'depart' ? '发车中…' : '确认发车' }}</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view v-if="successMessage" class="fulfillment-success" role="status"><text>{{ successMessage }}</text></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PortalHeader from '@/components/PortalHeader.vue'
|
||||
import ScanTargetInput from '@/components/ScanTargetInput.vue'
|
||||
import { completeDispatchPicking, departDispatch, getDispatchTask, listDispatchTasks, pickDispatchItem } from '@/api/fulfillment.js'
|
||||
import { fulfillment, fulfillmentIdempotencyKey, releaseFulfillmentKey, restoreFulfillmentDraft, updateFulfillmentDraft } from '@/stores/fulfillment.js'
|
||||
import { requireSession, session } from '@/stores/session.js'
|
||||
import { playErrorSound, playSuccessSound } from '@/utils/audio-feedback.js'
|
||||
import { startScanBroadcast } from '@/utils/scan-broadcast.js'
|
||||
|
||||
const finishedStatuses = ['COMPLETED', 'PICKING_COMPLETED', 'READY_TO_DEPART', 'DEPARTED']
|
||||
|
||||
export default {
|
||||
components: { PortalHeader, ScanTargetInput },
|
||||
data() { return { user: session.currentUser, tasks: [], current: null, scanCode: '', loading: false, busy: false, busyAction: '', error: null, successMessage: '' } },
|
||||
computed: {
|
||||
packages() { return fulfillment.dispatch.packages },
|
||||
selectedItem() { return this.current?.items?.find((item) => item.palletNo === fulfillment.dispatch.palletCode) || null },
|
||||
selectedPosition() { return this.selectedItem?.positions?.find((item) => item.availablePackages > 0) || this.selectedItem?.positions?.[0] || null },
|
||||
selectedRemaining() { return Math.max(0, Math.min(this.selectedItem?.scheduledPackages - this.selectedItem?.pickedPackages || 0, this.selectedPosition?.availablePackages || 0)) },
|
||||
plannedPackages() { return (this.current?.items || []).reduce((total, item) => total + item.scheduledPackages, 0) },
|
||||
pickedPackages() { return (this.current?.items || []).reduce((total, item) => total + item.pickedPackages, 0) },
|
||||
remainingPackages() { return Math.max(0, this.plannedPackages - this.pickedPackages) },
|
||||
allPicked() { return this.plannedPackages > 0 && this.remainingPackages === 0 },
|
||||
pickingCompleted() { return finishedStatuses.includes(this.current?.status) },
|
||||
departed() { return this.current?.status === 'DEPARTED' },
|
||||
canPick() { return this.selectedPosition && Number(this.packages) > 0 && Number(this.packages) <= this.selectedRemaining && !this.pickingCompleted },
|
||||
canCompleteStage() { return Boolean(this.current) && !this.pickingCompleted },
|
||||
canComplete() { return this.plannedPackages > 0 && this.remainingPackages === 0 },
|
||||
canDepart() { return this.pickingCompleted && this.allPicked && !this.departed }
|
||||
},
|
||||
onShow() {
|
||||
if (!requireSession()) return
|
||||
this.user = session.currentUser
|
||||
restoreFulfillmentDraft(`${this.user?.id || ''}:${this.user?.warehouseId || ''}`)
|
||||
this.startScanner()
|
||||
if (fulfillment.dispatch.currentNo) this.openTask(fulfillment.dispatch.currentNo)
|
||||
else this.loadTasks()
|
||||
},
|
||||
onHide() { this.stopScanner() },
|
||||
beforeUnmount() { this.stopScanner() },
|
||||
methods: {
|
||||
startScanner() { this.stopScanner(); this._stopScanner = startScanBroadcast({ onScan: (value) => this.handleScan(value), onError: (error) => this.setError(error, '扫码广播注册失败') }) },
|
||||
stopScanner() { if (this._stopScanner) this._stopScanner(); this._stopScanner = null },
|
||||
updateScanCode(value) { this.scanCode = value },
|
||||
updatePackages(event) { const value = Math.trunc(Number(event.detail.value || 0)); updateFulfillmentDraft('dispatch', { packages: Number.isFinite(value) ? Math.max(0, value) : 0 }) },
|
||||
async loadTasks() { await this.run('加载排车任务', async () => { this.tasks = await listDispatchTasks(); this.current = null }, true) },
|
||||
async openTask(dispatchNo) {
|
||||
const code = String(dispatchNo || '').trim(); if (!code) return
|
||||
await this.run('恢复排车任务', async () => { const previousNo = fulfillment.dispatch.currentNo; this.current = await getDispatchTask(code); updateFulfillmentDraft('dispatch', { currentNo: this.current.dispatchNo, palletCode: previousNo === this.current.dispatchNo ? fulfillment.dispatch.palletCode : '' }); this.scanCode = '' }, true)
|
||||
},
|
||||
closeTask() { this.current = null; this.scanCode = ''; this.error = null; this.successMessage = ''; updateFulfillmentDraft('dispatch', { currentNo: '', palletCode: '', packages: 1 }); this.loadTasks() },
|
||||
handleScan(raw) {
|
||||
const code = String(raw?.detail?.value ?? raw ?? this.scanCode).trim(); if (!code || this.busy || this.loading) return
|
||||
console.info('[Overseas PDA dispatch] scan', { code, task: this.current?.dispatchNo || '' })
|
||||
this.scanCode = code
|
||||
if (!this.current || code === this.current.dispatchNo || code === this.current.taskNo) return this.openTask(code === this.current?.taskNo ? this.current.dispatchNo : code)
|
||||
const item = this.current.items.find((value) => [value.palletNo, value.fbaWarehouseCode].includes(code))
|
||||
if (!item) return this.setError(new Error('扫码未匹配当前排车任务的托盘或稳定业务码'), '扫码未匹配')
|
||||
this.selectPallet(item); this.scanCode = ''; playSuccessSound()
|
||||
},
|
||||
selectPallet(item) { if (!item?.palletNo || item.scheduledPackages <= item.pickedPackages) return; updateFulfillmentDraft('dispatch', { palletCode: item.palletNo, packages: Math.max(1, Math.min(item.scheduledPackages - item.pickedPackages, item.positions?.[0]?.availablePackages || 1)) }) },
|
||||
async submitPick() {
|
||||
if (!this.canPick) return
|
||||
const payload = { dispatchNo: this.current.dispatchNo, palletNo: this.selectedItem.palletNo, positionId: this.selectedPosition.id, packages: Number(this.packages), productQuantity: 0 }
|
||||
const key = fulfillmentIdempotencyKey('dispatch', 'pick', payload)
|
||||
await this.run('提交排车拣货', async () => {
|
||||
await pickDispatchItem(this.current.dispatchNo, this.selectedItem.dispatchItemId, { positionId: this.selectedPosition.id, packages: Number(this.packages), productQuantity: 0, idempotencyKey: key.value })
|
||||
this.current = await getDispatchTask(this.current.dispatchNo); releaseFulfillmentKey('dispatch', key.signature); updateFulfillmentDraft('dispatch', { palletCode: '', packages: 1 }); this.successMessage = '本次排车拣货已记录'; playSuccessSound()
|
||||
})
|
||||
},
|
||||
async completePicking() {
|
||||
if (!this.canComplete) return
|
||||
const key = fulfillmentIdempotencyKey('dispatch', 'complete', { dispatchNo: this.current.dispatchNo })
|
||||
await this.run('完成排车拣货', async () => { await completeDispatchPicking(this.current.dispatchNo, { idempotencyKey: key.value }); this.current = await getDispatchTask(this.current.dispatchNo); releaseFulfillmentKey('dispatch', key.signature); this.successMessage = '排车拣货任务已完成'; playSuccessSound() })
|
||||
},
|
||||
async depart() {
|
||||
if (!this.canDepart) return
|
||||
const key = fulfillmentIdempotencyKey('dispatch', 'depart', { dispatchNo: this.current.dispatchNo })
|
||||
await this.run('执行发车', async () => { const result = await departDispatch(this.current.dispatchNo, { idempotencyKey: key.value, remark: '海外 PDA 拣货核平后发车' }); this.current = { ...this.current, status: result?.status || 'DEPARTED' }; releaseFulfillmentKey('dispatch', key.signature); this.successMessage = '排车已发车'; playSuccessSound() })
|
||||
},
|
||||
async retry() { if (this.current?.dispatchNo) await this.openTask(this.current.dispatchNo); else if (fulfillment.dispatch.currentNo) await this.openTask(fulfillment.dispatch.currentNo); else await this.loadTasks() },
|
||||
async run(action, work, loading = false) { if (this.busy || this.loading) return; this.error = null; this.successMessage = ''; if (loading) this.loading = true; else { this.busy = true; this.busyAction = action.includes('发车') ? 'depart' : action.includes('完成') ? 'complete' : 'pick' } try { await work() } catch (error) { this.setError(error, `${action}失败`) } finally { this.loading = false; this.busy = false; this.busyAction = '' } },
|
||||
setError(error, fallback) { const forbidden = ['403', 'A0403'].includes(String(error?.code || '')); this.error = { message: forbidden ? '当前账号没有海外仓 PDA 作业权限，请联系管理员授权' : error?.message || fallback, code: error?.code, requestId: error?.requestId, traceId: error?.traceId, network: Boolean(error?.network) }; console.error('[Overseas PDA dispatch] failed', this.error); playErrorSound() },
|
||||
statusLabel(status) { return ({ PDA_PENDING: '待拣货', PENDING: '待拣货', PICKING: '拣货中', IN_PROGRESS: '拣货中', COMPLETED: '拣货完成', PICKING_COMPLETED: '拣货完成', READY_TO_DEPART: '待发车', DEPARTED: '已发车', CANCELLED: '已取消' })[status] || status || '状态未知' },
|
||||
routeLabel(item) { return item.warehouseRouteLabel || [item.destinationWarehouseCode, item.destinationWarehouseName, item.fbaWarehouseCode].filter(Boolean).join(' · ') || '目的仓未关联' },
|
||||
itemProgress(item) { return item.scheduledPackages ? Math.min(100, Math.round(item.pickedPackages / item.scheduledPackages * 100)) : 0 }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './fulfillment.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
.fulfillment-page { height: 100vh; overflow: hidden; }
|
||||
.fulfillment-scroll { height: calc(100vh - 48px - var(--status-bar-height, 0px)); }
|
||||
.fulfillment-content { padding-bottom: 44px; }
|
||||
.fulfillment-heading { margin: 4px 2px 12px; }
|
||||
.fulfillment-title, .fulfillment-subtitle, .scan-help, .state-title, .fulfillment-error text, .fulfillment-success text, .task-meta, .card-title, .gate-note, .gate-warning, .gate-success, .offline-note { display: block; }
|
||||
.fulfillment-title { color: #14263d; font-size: 21px; font-weight: 800; }
|
||||
.fulfillment-subtitle { margin-top: 4px; color: #708197; font-size: 11px; line-height: 17px; }
|
||||
.fulfillment-card { box-sizing: border-box; margin-bottom: 10px; padding: 14px; border: 1px solid #dce5f0; border-radius: 13px; background: #fff; box-shadow: 0 4px 15px rgba(32,67,111,.06); }
|
||||
.secondary-button, .primary-button, .depart-button, .link-button { box-sizing: border-box; width: 100%; min-height: 44px; margin: 10px 0 0; border-radius: 8px; font-size: 13px; line-height: 44px; }
|
||||
.secondary-button { border: 1px solid #9dc0f4; color: #135ee8; background: #f8fbff; }
|
||||
.primary-button { color: #fff; font-weight: 800; background: #135ee8; }
|
||||
.depart-button { color: #fff; font-weight: 800; background: #0a8754; }
|
||||
.link-button { color: #5d6f84; background: #f1f4f8; }
|
||||
.secondary-button[disabled], .primary-button[disabled], .depart-button[disabled], .link-button[disabled] { color: #9aa7b5; background: #e8edf3; opacity: 1; }
|
||||
.scan-help, .gate-note { margin-top: 8px; color: #718095; font-size: 10px; line-height: 16px; }
|
||||
.fulfillment-state { margin-bottom: 10px; padding: 28px 16px; border-radius: 12px; color: #748399; font-size: 11px; line-height: 18px; text-align: center; background: #fff; }
|
||||
.state-title { margin-bottom: 4px; color: #263b55; font-size: 14px; font-weight: 800; }
|
||||
.fulfillment-error, .fulfillment-success { margin-bottom: 10px; padding: 12px; border-radius: 10px; font-size: 10px; line-height: 17px; }
|
||||
.fulfillment-error { color: #a62323; background: #fff0f0; }
|
||||
.fulfillment-success { color: #087443; background: #e8f8ef; }
|
||||
.offline-note { margin-top: 7px; color: #8a5a00; }
|
||||
.list-toolbar, .task-head, .count-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.list-toolbar { margin: 16px 2px 10px; color: #233951; font-size: 13px; font-weight: 800; }
|
||||
.list-toolbar button { min-height: 32px; margin: 0; padding: 0 12px; border-radius: 7px; color: #135ee8; font-size: 11px; line-height: 32px; background: #e9f2ff; }
|
||||
.task-list, .item-list { display: flex; flex-direction: column; gap: 9px; }
|
||||
.task-card { box-sizing: border-box; width: 100%; min-height: 76px; margin: 0; padding: 13px; border: 1px solid #dce5f0; border-radius: 11px; text-align: left; background: #fff; }
|
||||
.task-card::after { border: 0; }
|
||||
.business-code { color: #16304d; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
|
||||
.status-badge { flex-shrink: 0; padding: 4px 7px; border-radius: 99px; color: #165fbf; font-size: 10px; background: #e6f0ff; }
|
||||
.task-meta { margin-top: 6px; color: #718095; font-size: 10px; line-height: 16px; }
|
||||
.summary-card { display: block; }
|
||||
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 12px; padding: 10px 0; border-radius: 9px; background: #f5f8fc; }
|
||||
.metrics view { display: flex; align-items: center; flex-direction: column; gap: 3px; color: #718095; font-size: 9px; }
|
||||
.metrics view + view { border-left: 1px solid #dce5f0; }
|
||||
.metric-value { color: #135ee8; font-size: 20px; font-weight: 800; }
|
||||
.metric-value.success { color: #087443; }
|
||||
.metric-value.warning { color: #a56800; }
|
||||
.item-card { margin: 0; }
|
||||
.item-card.selected { border: 2px solid #135ee8; background: #f8fbff; }
|
||||
.progress { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: #e4eaf1; }
|
||||
.progress view { height: 100%; border-radius: 99px; background: #20a464; }
|
||||
.card-title { color: #17314f; font-size: 13px; font-weight: 800; }
|
||||
.count-row { margin-top: 12px; color: #65768b; font-size: 10px; }
|
||||
.count-row input { box-sizing: border-box; width: 78px; height: 42px; padding: 0 8px; border: 2px solid #135ee8; border-radius: 8px; color: #17314f; font-size: 17px; text-align: center; background: #fff; }
|
||||
.gate-card textarea { box-sizing: border-box; width: 100%; height: 76px; margin-top: 10px; padding: 9px; border: 1px solid #d3dde9; border-radius: 8px; color: #27384d; font-size: 12px; background: #fbfcfe; }
|
||||
.gate-warning { margin-top: 8px; color: #a56800; font-size: 11px; line-height: 17px; }
|
||||
.gate-success { margin-top: 8px; color: #087443; font-size: 11px; line-height: 17px; }
|
||||
Reference in New Issue
Block a user