优化
This commit is contained in:
@@ -11,7 +11,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="work-content">
|
||||
<view class="work-content" :class="{ 'evidence-active': activeStage === 'evidence' && loadingStageReady }">
|
||||
<view class="box-select-wrap">
|
||||
<button class="box-select-btn" @tap="toggleBoxDropdown">
|
||||
<text>集装箱号 {{ currentBox.currentContainerNo || '同步中' }} · 柜次号 {{ currentBox.cabinetNo || '同步中' }} · 订单 {{ currentBox.orderNo }}</text>
|
||||
@@ -130,18 +130,27 @@
|
||||
<text class="sync-state" :class="remoteSyncState.tone">{{ remoteSyncState.label }}</text>
|
||||
</view>
|
||||
<view class="evidence-grid">
|
||||
<view v-for="slot in evidenceSlots" :key="slot.type" class="evidence-card" :class="{ filled: evidenceEntries(slot.type).length }">
|
||||
<text class="evidence-label">{{ slot.label }}</text>
|
||||
<view v-for="photo in evidenceEntries(slot.type)" :key="photo.id || photo.fileId || photo.localPath" class="evidence-file-row">
|
||||
<image v-if="evidencePreviewSource(photo)" class="evidence-thumbnail" :src="evidencePreviewSource(photo)" mode="aspectFill" @tap="previewEvidencePhoto(photo, slot.type)" />
|
||||
<view class="evidence-file-detail" @tap="previewEvidencePhoto(photo, slot.type)"><text class="evidence-file">{{ photo.fileName || '已记录' }}</text></view>
|
||||
<button v-if="photo.id && photo.status !== 'VOID' && photo.status !== 'VOIDED'" class="evidence-retry-btn" @tap="voidEvidencePhoto(photo)">作废</button>
|
||||
<view v-for="slot in evidenceSlots" :key="slot.type" class="evidence-card" :class="{ filled: evidenceEntries(slot.type).length }">
|
||||
<view class="evidence-card-header">
|
||||
<view class="evidence-card-title">
|
||||
<text class="evidence-label">{{ slot.label }}</text>
|
||||
<text class="evidence-count" :class="{ complete: evidenceEntries(slot.type).length }">{{ evidenceEntries(slot.type).length ? evidenceEntries(slot.type).length + ' 张' : '待拍摄' }}</text>
|
||||
</view>
|
||||
<button class="evidence-btn evidence-add-btn" @tap="chooseEvidence(slot)">{{ evidenceUploadLabel(slot.type) }}</button>
|
||||
</view>
|
||||
<view v-if="evidenceEntries(slot.type).length" class="evidence-photo-grid">
|
||||
<view v-for="photo in evidenceEntries(slot.type)" :key="photo.id || photo.fileId || photo.localPath" class="evidence-photo-item">
|
||||
<image v-if="evidencePreviewSource(photo)" class="evidence-thumbnail" :src="evidencePreviewSource(photo)" mode="aspectFill" @tap="previewEvidencePhoto(photo, slot.type)" />
|
||||
<view v-else class="evidence-thumbnail evidence-thumbnail-placeholder" @tap="previewEvidencePhoto(photo, slot.type)">图片处理中</view>
|
||||
<text class="evidence-file" @tap="previewEvidencePhoto(photo, slot.type)">{{ photo.fileName || '已记录' }}</text>
|
||||
<button v-if="photo.id && photo.status !== 'VOID' && photo.status !== 'VOIDED'" class="evidence-void-btn" @tap="voidEvidencePhoto(photo)">作废</button>
|
||||
</view>
|
||||
</view>
|
||||
<text v-else class="evidence-empty-hint">现场拍摄后自动上传，可继续追加</text>
|
||||
<text v-if="evidenceQueueEntry(slot.type)" class="evidence-upload-state" :class="evidenceQueueEntry(slot.type).status.toLowerCase()">
|
||||
{{ evidenceUploadState(slot.type) }}
|
||||
</text>
|
||||
<text v-else-if="hasPendingLocalEvidence(slot.type)" class="evidence-upload-state pending">本地暂存，待自动上传</text>
|
||||
<button class="evidence-btn" @tap="chooseEvidence(slot)">{{ evidenceUploadLabel(slot.type) }}</button>
|
||||
<button v-if="evidenceQueueEntry(slot.type)?.status === 'FAILED'" class="evidence-retry-btn" @tap="retryEvidence(slot.type)">重试上传</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
+49
-21
@@ -3,19 +3,28 @@
|
||||
<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 class="task-heading">
|
||||
<text class="task-title">待处理任务</text>
|
||||
<text class="task-summary">{{ loading ? '正在同步' : `共 ${tasks.length} 个可处理任务` }}</text>
|
||||
</view>
|
||||
<button class="task-refresh" :disabled="loading" @tap="loadTasks">{{ loading ? '刷新中' : '刷新' }}</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)">{{ taskActionLabel(task) }}</button>
|
||||
<view class="task-list">
|
||||
<button v-for="task in tasks" :key="task.taskId" class="task-card" :disabled="!isTaskReady(task)" :aria-label="`${taskActionLabel(task)}，集装箱号 ${task.currentContainerNo}`" @tap="enterTask(task)">
|
||||
<view class="task-card-head">
|
||||
<view class="task-container-info"><text class="task-label">集装箱号</text><text class="task-code">{{ task.currentContainerNo }}</text></view>
|
||||
<text class="task-status" :class="{ progress: task.workflowStatus === 'IN_PROGRESS', evidence: task.workflowStatus === 'AWAITING_REVIEW' }">{{ statusLabel(task.workflowStatus) }}</text>
|
||||
</view>
|
||||
<view class="task-identifiers"><text class="task-cabinet">柜次号 {{ task.cabinetNo }}</text><text class="task-order">{{ task.displayNo || '未命名订单' }}</text></view>
|
||||
<view class="task-card-foot">
|
||||
<view class="task-meta-group"><text class="task-warehouse">{{ task.warehouseName || (task.warehouseId ? `仓库 ${task.warehouseId}` : '缺少仓库信息') }}</text><text class="task-pending">待处理 {{ task.pendingItemCount ?? task.itemCount ?? 0 }} 项</text></view>
|
||||
<view class="task-enter"><text>{{ taskActionLabel(task) }}</text><text class="task-enter-arrow">›</text></view>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="toast.visible" class="app-toast" :class="toast.type" role="status">{{ toast.message }}</view>
|
||||
@@ -73,19 +82,38 @@
|
||||
</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-content { padding: 12px 12px 40px; }
|
||||
.task-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
|
||||
.task-heading { display: flex; min-width: 0; flex-direction: column; }
|
||||
.task-title { color: #12233f; font-size: 18px; font-weight: 700; line-height: 25px; }
|
||||
.task-summary { margin-top: 2px; color: #667085; font-size: 11px; line-height: 16px; }
|
||||
.task-refresh { flex-shrink: 0; margin: 0; min-width: 76px; height: 44px; border: 0; border-radius: 9px; background: #1a73e8; color: #fff; font-size: 14px; line-height: 44px; }
|
||||
.task-refresh[disabled] { opacity: .6; }
|
||||
.task-error, .task-state { padding: 24px 16px; border-radius: 12px; background: #fff; color: #667085; text-align: center; }
|
||||
.task-error, .task-state { padding: 20px 14px; border-radius: 10px; background: #fff; color: #667085; font-size: 13px; line-height: 20px; 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; }
|
||||
.task-notice { padding: 10px 12px; margin-bottom: 10px; border-left: 3px solid #f79009; border-radius: 6px; background: #fffaeb; color: #7a2e0e; font-size: 12px; line-height: 18px; }
|
||||
.task-list { display: flex; flex-direction: column; gap: 9px; }
|
||||
.task-card { box-sizing: border-box; width: 100%; margin: 0; padding: 12px; border: 1px solid #dce6f1; border-radius: 10px; color: #12233f; text-align: left; background: #fff; box-shadow: 0 2px 8px rgba(23, 55, 93, .05); }
|
||||
.task-card:active { border-color: #8ab8ef; background: #f7faff; }
|
||||
.task-card[disabled] { opacity: .62; }
|
||||
.task-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
|
||||
.task-container-info { display: flex; min-width: 0; flex-direction: column; }
|
||||
.task-label { color: #667085; font-size: 10px; line-height: 15px; }
|
||||
.task-code { overflow: hidden; margin-top: 1px; color: #12233f; font-size: 17px; font-weight: 700; line-height: 23px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.task-status { flex-shrink: 0; padding: 4px 7px; border-radius: 99px; color: #52616f; font-size: 10px; line-height: 16px; background: #eef2f6; }
|
||||
.task-status.progress { color: #155eef; background: #eff4ff; }
|
||||
.task-status.evidence { color: #9a5b13; background: #fff4e5; }
|
||||
.task-identifiers { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 8px; }
|
||||
.task-cabinet, .task-order { padding: 3px 7px; border-radius: 5px; color: #475467; font-size: 11px; line-height: 17px; background: #f2f4f7; }
|
||||
.task-order { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.task-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #edf1f5; }
|
||||
.task-meta-group { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
|
||||
.task-warehouse { overflow: hidden; color: #667085; font-size: 10px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.task-pending { color: #344054; font-size: 12px; font-weight: 600; line-height: 17px; }
|
||||
.task-enter { display: flex; min-height: 40px; flex-shrink: 0; align-items: center; gap: 5px; padding-left: 10px; color: #155eef; font-size: 12px; font-weight: 600; }
|
||||
.task-enter-arrow { font-size: 22px; font-weight: 400; line-height: 22px; }
|
||||
@media (max-width: 340px) {
|
||||
.task-content { padding-right: 10px; padding-left: 10px; }
|
||||
.task-enter { max-width: 124px; text-align: right; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user