72 lines
5.0 KiB
Vue
72 lines
5.0 KiB
Vue
<template>
|
||
<view v-if="user" class="page-shell dropship-task-page">
|
||
<PortalHeader title="一件代发任务" :user="user" fallback-url="/pages/home/home" />
|
||
<view class="task-content">
|
||
<view class="task-toolbar"><view><text class="task-title">待清点组托</text><text class="task-summary">{{ loading ? '正在同步任务' : `共 ${tasks.length} 个任务` }}</text></view><button :disabled="loading" @tap="loadTasks">{{ loading ? '刷新中' : '刷新' }}</button></view>
|
||
<view v-if="error" class="state-card state-error" role="alert">{{ error }}</view>
|
||
<view v-else-if="loading" class="state-card">正在加载真实任务...</view>
|
||
<view v-else-if="!tasks.length" class="state-card">暂无待处理的一件代发清点组托任务</view>
|
||
<button v-for="task in tasks" :key="task.taskId" class="dropship-task-card" :disabled="claimingTaskId === task.taskId || !task.taskId || !task.warehouseId" @tap="enterTask(task)">
|
||
<view class="task-card-head"><text class="task-code">{{ task.inboundCode || '入仓码 —' }}</text><text class="status-badge">{{ statusLabel(task.taskStatus) }}</text></view>
|
||
<text class="customer-name">{{ task.customerName || '客户 —' }}</text>
|
||
<text class="warehouse-name">仓库 {{ task.warehouseName || '—' }}</text>
|
||
<view class="progress-row"><text>清点 {{ task.countedCartons || 0 }}/{{ task.totalCartons || 0 }}</text><text>待绑托 {{ task.unboundCartons || 0 }}</text><text>差异 {{ task.discrepancyCartons || 0 }}</text></view>
|
||
<view class="enter-copy">{{ claimingTaskId === task.taskId ? '领取中...' : taskAction(task) }} ›</view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import PortalHeader from '@/components/PortalHeader.vue'
|
||
import { claimDropshipPalletizingTask, listDropshipPalletizingTasks } from '@/api/pda-dropship.js'
|
||
import { session, requireSession } from '@/stores/session.js'
|
||
import { isOnline } from '@/utils/network.js'
|
||
import { formatApiError } from '@/utils/user-facing.js'
|
||
|
||
export default {
|
||
components: { PortalHeader },
|
||
data() { return { user: session.currentUser, tasks: [], loading: false, error: '', claimingTaskId: null } },
|
||
onShow() { if (!requireSession()) return; this.user = session.currentUser; this.loadTasks() },
|
||
methods: {
|
||
statusLabel(status) { return status === 'CLAIMED' ? '清点组托中' : status === 'COMPLETED' ? '已完成' : '待领取' },
|
||
taskAction(task) { return task.taskStatus === 'CLAIMED' ? '继续作业' : '领取并开始' },
|
||
async loadTasks() {
|
||
if (!isOnline()) { this.error = '当前网络不可用，请联网后刷新'; return }
|
||
this.loading = true; this.error = ''
|
||
try { this.tasks = await listDropshipPalletizingTasks() || [] }
|
||
catch (error) { this.error = formatApiError(error, '一件代发任务加载失败') }
|
||
finally { this.loading = false }
|
||
},
|
||
async enterTask(task) {
|
||
if (!isOnline()) { this.error = '当前网络不可用，不能开始正式作业'; return }
|
||
this.claimingTaskId = task.taskId; this.error = ''
|
||
try {
|
||
if (task.taskStatus !== 'CLAIMED') await claimDropshipPalletizingTask(task.taskId, task.warehouseId)
|
||
uni.navigateTo({ url: `/pages/dropship-palletizing/dropship-palletizing?taskId=${encodeURIComponent(task.taskId)}&warehouseId=${encodeURIComponent(task.warehouseId)}` })
|
||
} catch (error) { this.error = formatApiError(error, '任务领取失败，请刷新后重试') }
|
||
finally { this.claimingTaskId = null }
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.task-content { padding: 12px; }
|
||
.task-toolbar { display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; gap: 10px; }
|
||
.task-title { display: block; color: #172b45; font-size: 18px; font-weight: 800; }
|
||
.task-summary { display: block; margin-top: 2px; color: #667085; font-size: 11px; }
|
||
.task-toolbar button { width: 76px; height: 44px; margin: 0; color: #fff; font-size: 14px; line-height: 44px; background: #1a73e8; }
|
||
.state-card { padding: 24px 12px; border-radius: 10px; color: #667085; font-size: 13px; text-align: center; background: #fff; }
|
||
.state-error { color: #b42318; background: #fff1f0; }
|
||
.dropship-task-card { box-sizing: border-box; width: 100%; margin: 0 0 10px; padding: 13px; border: 1px solid #dce5ef; border-radius: 11px; color: #27384d; text-align: left; background: #fff; }
|
||
.task-card-head, .progress-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||
.task-code { min-width: 0; font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
|
||
.status-badge { flex-shrink: 0; padding: 4px 7px; border-radius: 999px; color: #155eef; font-size: 10px; background: #eff4ff; }
|
||
.customer-name { display: block; margin-top: 7px; font-size: 13px; font-weight: 700; }
|
||
.warehouse-name { display: block; margin-top: 2px; color: #667085; font-size: 11px; }
|
||
.progress-row { margin-top: 10px; padding: 8px; border-radius: 8px; color: #475467; font-size: 11px; background: #f6f8fb; }
|
||
.enter-copy { min-height: 42px; margin-top: 4px; color: #155eef; font-size: 13px; font-weight: 700; line-height: 42px; text-align: right; }
|
||
button::after { border: 0; }
|
||
</style>
|