78 lines
5.6 KiB
Vue
78 lines
5.6 KiB
Vue
<template>
|
|
<view class="page-shell task-page">
|
|
<PortalHeader title="拣货任务" :user="user" :fallback-url="'/pages/home/home'" />
|
|
<view class="task-content">
|
|
<view class="task-toolbar">
|
|
<text class="task-title">待处理任务</text>
|
|
<button class="task-refresh" :disabled="loading" @tap="loadTasks">刷新</button>
|
|
</view>
|
|
<view v-if="error" class="task-error" role="alert">{{ error }}</view>
|
|
<view v-if="loading" class="task-state">正在加载真实任务...</view>
|
|
<view v-else-if="!tasks.length && !error" class="task-state">暂无可领取的拣货任务。请确认预装已补充集装箱号、已关联放舱订舱且预装已确认。</view>
|
|
<view v-if="notice" class="task-notice" role="status">{{ notice }}</view>
|
|
<view v-for="task in tasks" :key="task.taskId" class="task-card">
|
|
<view class="task-card-head"><text class="task-code">集装箱号 {{ task.currentContainerNo }}</text><text class="task-status">{{ statusLabel(task.workflowStatus) }}</text></view>
|
|
<text class="task-order">柜次号 {{ task.cabinetNo }}</text>
|
|
<text class="task-order">{{ task.displayNo || '未命名订单' }}</text>
|
|
<text class="task-meta">{{ task.warehouseName || (task.warehouseId ? `仓库 ${task.warehouseId}` : '缺少仓库信息') }} · 待处理 {{ task.pendingItemCount ?? task.itemCount ?? 0 }} 项</text>
|
|
<button class="task-enter" :disabled="!isTaskReady(task)" @tap="enterTask(task)">{{ isTaskReady(task) ? '进入并开始拣货' : '任务暂不可进入' }}</button>
|
|
</view>
|
|
</view>
|
|
<view v-if="toast.visible" class="app-toast" :class="toast.type" role="status">{{ toast.message }}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import PortalHeader from '@/components/PortalHeader.vue'
|
|
import { listLoadingOrders } from '@/api/pda-loading.js'
|
|
import { session, requireSession } from '@/stores/session.js'
|
|
import { isOnline, watchNetwork } from '@/utils/network.js'
|
|
|
|
export default {
|
|
components: { PortalHeader },
|
|
data() { return { user: session.currentUser, tasks: [], loading: false, error: '', notice: '', online: true, toast: { visible: false, message: '', type: '' } } },
|
|
onLoad() { if (!requireSession()) return; this._stopNetwork = watchNetwork((value) => { this.online = value }) },
|
|
onShow() { if (!requireSession()) return; this.user = session.currentUser; this.loadTasks() },
|
|
onUnload() { if (this._stopNetwork) this._stopNetwork(); clearTimeout(this._toastTimer) },
|
|
methods: {
|
|
statusLabel(status) { return status === 'IN_PROGRESS' ? '拣货中' : '待领取' },
|
|
isTaskReady(task) { return Boolean(task.taskId && task.loadingPlanId && task.containerBookingId && task.cabinetNo && task.currentContainerNo && task.warehouseId && task.version !== null && task.version !== undefined && Number.isInteger(Number(task.version)) && task.assignmentVersion !== null && task.assignmentVersion !== undefined && Number.isInteger(Number(task.assignmentVersion)) && ['UNASSIGNED', 'IN_PROGRESS'].includes(task.workflowStatus)) },
|
|
async loadTasks() {
|
|
if (!isOnline()) { this.error = '当前网络不可用，请联网后刷新'; return }
|
|
this.loading = true; this.error = ''; this.notice = ''
|
|
try {
|
|
const result = await listLoadingOrders({ page: 1, size: 50 })
|
|
const records = result.records || []
|
|
this.tasks = records.filter((task) => this.isTaskReady(task))
|
|
if (records.length > this.tasks.length) this.notice = '部分任务尚未完成服务端就绪校验，本机已隐藏，请稍后刷新'
|
|
} catch (error) {
|
|
this.error = error.network ? '当前网络不可用，请联网后刷新' : (error.message || '任务加载失败')
|
|
} finally { this.loading = false }
|
|
},
|
|
enterTask(task) {
|
|
if (!this.isTaskReady(task)) { this.showToast('任务尚未满足后端进入条件', 'error'); return }
|
|
uni.navigateTo({ url: `/pages/picking/picking?cabinetNo=${encodeURIComponent(task.cabinetNo)}¤tContainerNo=${encodeURIComponent(task.currentContainerNo)}&warehouseId=${encodeURIComponent(task.warehouseId)}&taskId=${encodeURIComponent(task.taskId)}&orderNo=${encodeURIComponent(task.displayNo || '')}` })
|
|
},
|
|
showToast(message, type) { clearTimeout(this._toastTimer); this.toast = { visible: true, message, type }; this._toastTimer = setTimeout(() => { this.toast.visible = false }, 2200) }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.task-content { padding: 24px 16px 40px; }
|
|
.task-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
|
|
.task-title { color: #12233f; font-size: 22px; font-weight: 700; }
|
|
.task-refresh { margin: 0; min-width: 92px; height: 44px; border: 0; border-radius: 10px; background: #1a73e8; color: #fff; font-size: 15px; }
|
|
.task-refresh[disabled] { opacity: .6; }
|
|
.task-error, .task-state { padding: 24px 16px; border-radius: 12px; background: #fff; color: #667085; text-align: center; }
|
|
.task-error { color: #b42318; background: #fff1f0; }
|
|
.task-notice { padding: 12px 14px; margin-bottom: 12px; border-left: 4px solid #f79009; background: #fffaeb; color: #7a2e0e; font-size: 14px; }
|
|
.task-card { padding: 16px; margin-bottom: 12px; border: 1px solid #e3eaf3; border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(23, 55, 93, .06); }
|
|
.task-card-head { display: flex; align-items: center; justify-content: space-between; }
|
|
.task-code { color: #12233f; font-weight: 700; }
|
|
.task-status { color: #16794a; font-size: 13px; }
|
|
.task-order, .task-meta { display: block; margin-top: 8px; color: #667085; font-size: 14px; }
|
|
.task-enter { width: 100%; margin: 16px 0 0; height: 48px; border: 0; border-radius: 10px; background: #1a73e8; color: #fff; font-size: 16px; }
|
|
.task-enter[disabled] { background: #d0d5dd; color: #667085; }
|
|
</style>
|