detail.vue 6.24 KB
<template>
	<view>
		<view class="content">
			<view class="top">
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						任务编号
					</view>
					<view>
						{{detailInfo.id}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						任务类型
					</view>
					<view>
						{{taskTypeFormat(detailInfo.taskType)}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						任务状态
					</view>
					<view>
						<text class="already" v-if="detailInfo.status >= 100">已完成</text>
						<text class="not" v-else>未完成</text>
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						确认人
					</view>
					<view>
						{{detailInfo.confirmedBy}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						容器号
					</view>
					<view>
						{{detailInfo.containerCode}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						源库位号
					</view>
					<view>
						{{detailInfo.fromLocation}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						目的库位号
					</view>
					<view>
						{{detailInfo.toLocation}}
					</view>
				</view>
				
				
			</view>
			<view class="center">
				
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						货主
					</view>
					<view>
						{{companyCodeFormat(detailInfo.companyCode)}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						重量
					</view>
					<view>
						{{detailInfo.weight}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						站台
					</view>
					<view>
						{{detailInfo.stationCode}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						开始拣货时间
					</view>
					<view>
						{{formatTime(detailInfo.startPickDateTime)}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						截止拣货时间
					</view>
					<view>
						{{formatTime(detailInfo.endPickDateTime)}}
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						创建人
					</view>
					<view>
						{{detailInfo.createdBy}}
					</view>
				</view>
				<view class="common u-f u-f-jcsb plr-10">
					<view>
						创建时间
					</view>
					<view>
						{{formatTime(detailInfo.created)}}
					</view>
				</view>
			</view>
			
		</view>
		<view class="footer u-f u-f-aic">
			<view class="btn" @tap="delTask(detailInfo.id,detailInfo.index)" v-if="detailInfo.status < 10">
				取消
			</view>
			<view  class="btn" @tap="complete(detailInfo.id)" v-if="detailInfo.status < 100">
				完成
			</view>
			
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				detailInfo: {},
				taskTypeArr: [],
				companyArr: [],
				timer: null
			}
		},
		onLoad(option) {
		this.$http.dict.getCompaniesByToken().then(res => {
			console.log(res)
			this.companyArr = res.data
		});
		try {
		    const value = uni.getStorageSync('task_detail');
		    if (value) {
		        console.log(value);
				this.detailInfo = value;
				this.detailInfo.index = option.index;
		    }
		} catch (e) {
		    // error
		};
		try {
		    const value = uni.getStorageSync('task_type');
		    if (value) {
		        console.log(value);
				this.taskTypeArr = value
		    }
		} catch (e) {
		    // error
		}
			

		},
        onUnload() {
        	if(this.timer) {
        		clearInterval(this.timer);  
        		this.timer = null;  
        	}
        },
		methods: {
			// 任务类型字典翻译
			taskTypeFormat(taskType) {
			      return this.selectDictLabel(this.taskTypeArr, taskType);
			},
			// 货主字典翻译
			companyCodeFormat(companyCode) {
				return this.selectCommonLabel(this.companyArr, companyCode);
			},
			// 取消按钮操作
			delTask(id,index) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该任务吗?',
					success: (res) => {
						 if (res.confirm) {
							 this.$http.task.delTaskHeader(id).then(res => {
								if(res.data.code == 200){
									uni.$emit('detailDelTask',{index:index});
									this.$msg('取消成功!')
									uni.navigateBack()
								} else {
									uni.showModal({
									    title: '提示',
									    content: res.data.msg
									});
								}
							 })
					      } else if (res.cancel) {
							  console.log('用户点击取消');
						  }
					}
				});	
			},
			// 完成按钮操作
			complete(id) {
				uni.showModal({
					title: '提示',
					content: '确定要完成该任务吗?',
					success: (res) => {
						if (res.confirm) {
							this.$http.task.completeTask(id).then(res => {
								if (res.data.code == 200) {
									
									uni.$emit('detailCompleteTask',{index:index});
									this.timer2 = setTimeout(() => {
										uni.navigateBack()
									}, 500)
								} else {
									uni.showModal({
										title: '提示',
										content: res.data.msg
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
		.content {
			overflow-y: auto;
			padding-bottom: 100rpx;
			
			.top,.center,.bottom {
				background-color: $uni-bg-color;
				.common {
					height: 90rpx;
					line-height: 90rpx;
					font-size: $uni-font-size-lg;
					border-bottom: 2rpx solid $uni-border-color;
					.already {
						color: $uni-color-success;
					}
					.not {
						color: $uni-color-warning;
					}
					.num {
						color: $uni-color-primary;
						font-size: $uni-font-size-base;
					}
				}
				
			}
			.center {
				margin: $uni-spacing-col-base 0;
			}
			.bottom {
				margin-bottom: 20rpx;
			}
		
		}
		
		.footer {
			position: fixed;
			width: 100%;
			bottom: 0;
			height: 100rpx;
			border-top: 2rpx solid $uni-border-color;
			border-bottom: 2rpx solid $uni-border-color;
			background-color: $uni-bg-color;
			
			.btn {
				width: 50%;
				height: 60rpx;
				line-height: 60rpx;
				margin: 0 $uni-spacing-row-base;
				border: 2rpx solid $uni-border-color;
				border-radius: 80rpx !important;
				text-align: center;
				border-color: $uni-border-color;
			}
		}
</style>