detail.vue 7.55 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="mask" @touchmove.stop.prevent @tap="maskClick" v-show="flag == true">
			<view class="operate">
				<view class="cancle-task" @tap.stop="delTask(detailInfo.id,detailInfo.index)" v-if="detailInfo.status < 10">
					取消任务
				</view>
				<view class="complete" @tap.stop="complete(detailInfo.id)" v-if="detailInfo.status < 100">
					完成任务
				</view>
			</view>
			<view class="cancel">
				取消
			</view>
		
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				detailInfo: {},
				taskTypeArr: [],
				companyArr: [],
				timer: null,
				timer2: null,
				 show: false
			}
		},
		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
		}
			

		},
		onNavigationBarButtonTap() {
			this.flag = !this.flag;
			this.show = true;
		},
        onUnload() {
        	if(this.timer) {
        		clearTimeout(this.timer);
        		this.timer = null; 
        	}
			if(this.timer2) {
				clearTimeout(this.timer2);
				this.timer2 = null;
			}
        },
		methods: {
			// 任务类型字典翻译
			taskTypeFormat(taskType) {
			      return this.selectDictLabel(this.taskTypeArr, taskType);
			},
			// 货主字典翻译
			companyCodeFormat(companyCode) {
				return this.selectCommonLabel(this.companyArr, companyCode);
			},
			// 操作遮罩层点击
			maskClick() {
				this.flag = false;
				this.show = false;
			},
			// 取消按钮操作
			delTask(id,index) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该任务吗?',
					success: (res) => {
						 if (res.confirm) {
							 this.$http.task.delTaskHeader(id).then(res => {
								if(res.data.code == 200){
									this.$prePage(2).queryParams.pageNum = 1;
									this.$prePage(2).getTaskList();
									 this.$wx.showToast({
									                    title : 'WMS:取消成功!',
									                    duration : 1500
									                });
									this.timer = setTimeout(() => {
										uni.navigateBack()
									}, 400)
								} 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) {
									this.$prePage(2).queryParams.pageNum = 1;
									this.$prePage(2).getTaskList();
									 this.$wx.showToast({
									                    title : '完成成功!',
									                    duration : 1500
									                });
									this.timer2 = setTimeout(() => {
										uni.navigateBack()
									}, 400)
								} else {
									uni.showModal({
										title: '提示',
										content: res.data.msg
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
		.content {
			overflow-y: auto;
			.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;
			}
			
		
		}
		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			inset: 0;
			z-index: 999;
			background-color: rgba(0, 0, 0, 0.4);
			transition-duration: 0.3s;
		 
		
			.operate {
				position: absolute;
				left: $uni-spacing-row-base;
				right: $uni-spacing-row-base;
				bottom: 130rpx;
				color: $uni-color-primary;
				background-color: $uni-bg-color;
				font-size: $uni-font-size-lg;
		
				
				.cancle-task,
				.complete {
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					border-bottom: 2rpx solid $uni-border-color;
				}
		
				.complete {
					border: none;
				}
		
			}
		
			.cancel {
				position: absolute;
				left: $uni-spacing-row-base;
				right: $uni-spacing-row-base;
				bottom: $uni-spacing-col-base;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				color: $uni-color-primary;
				background-color: $uni-bg-color;
				font-size: $uni-font-size-lg;
				font-weight: bold;
			}
		
		}
		
		
</style>