|
|
<template>
|
|
|
<view class="detail-container">
|
|
|
<view class="detail-card">
|
|
|
<text class="detail-title">任务详情</text>
|
|
|
<view class="detail-item">
|
|
|
<text class="detail-label">任务号：</text>
|
|
|
<text class="detail-value">{{ taskData.taskId }}</text>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
<text class="detail-label">盘点状态：</text>
|
|
|
<text class="detail-value">{{ taskData.statusName }}</text>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
<text class="detail-label">上位缺件：</text>
|
|
|
<text class="detail-value">{{ taskData.wmsCountNumber }}</text>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
<text class="detail-label">缺件：</text>
|
|
|
<text class="detail-value">{{ taskData.countNumber }}</text>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
<text class="detail-label">上位托盘：</text>
|
|
|
<text class="detail-value">{{ taskData.wmsPltCode }}</text>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
<text class="detail-label">托盘码：</text>
|
|
|
<text class="detail-value">{{ taskData.pltCode }}</text>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
<text class="detail-label">地址：</text>
|
|
|
<text class="detail-value">{{ position(taskData) }}</text>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
<text class="detail-label">时间：</text>
|
|
|
<text class="detail-value">{{ formatTime(taskData.createTime) }}</text>
|
|
|
</view>
|
|
|
<!-- 图片显示 -->
|
|
|
<view class="pics-container" v-if="taskData.urlResources">
|
|
|
<u-image
|
|
|
v-for="(pic, picIndex) in taskData.urlResources"
|
|
|
:key="picIndex"
|
|
|
:title="pic.url"
|
|
|
:src="pic.url" width="80px" height="80px"
|
|
|
class="detail-pic"
|
|
|
mode="aspectFill"
|
|
|
/>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
taskData: {} // 任务数据
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
// 解析 URL 参数
|
|
|
if (options.data) {
|
|
|
this.taskData = JSON.parse(decodeURIComponent(options.data));
|
|
|
console.log('任务详情数据:', this.taskData);
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
formatTime(timestamp) {
|
|
|
const date = new Date(timestamp);
|
|
|
const year = date.getFullYear();
|
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
},
|
|
|
position(row) {
|
|
|
const from = row.fromSide == 2 ? "库外" : row.streetName + "-" + (row.direction ? "左侧-" : "右侧-") + row.row + '层-' + row.column + '列' + (row.side == 2 ? "深货位" : "");
|
|
|
return from;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.detail-container {
|
|
|
padding: 20rpx;
|
|
|
background-color: #f7f7f7;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
.detail-card {
|
|
|
padding: 20rpx;
|
|
|
background: #fff;
|
|
|
border-radius: 10rpx;
|
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
.detail-title {
|
|
|
display: block;
|
|
|
font-size: 30rpx;
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 30rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.detail-item {
|
|
|
display: flex;
|
|
|
margin-bottom: 15rpx;
|
|
|
}
|
|
|
.detail-label {
|
|
|
font-weight: bold;
|
|
|
width: 170rpx;
|
|
|
}
|
|
|
.detail-value {
|
|
|
flex: 1;
|
|
|
}
|
|
|
/* 图片样式 - 横向排列 */
|
|
|
.pics-container {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
margin-top: 20rpx;
|
|
|
gap: 10rpx;
|
|
|
}
|
|
|
.detail-pic {
|
|
|
width: 80px;
|
|
|
height: 80px;
|
|
|
border-radius: 8rpx;
|
|
|
}
|
|
|
</style> |