WZC2/fe/PDA/pages/task/thirdLocationDetail.vue

<template>
	<page-meta root-font-size="18px"></page-meta>
	<view class="">
		<view class="top_card">
			<com-job-scan-detail :jobContent="datacontent" :allCount="allCount" :scanCount="scanCount" scanHint="已收数量"
				:isShowOther="true" showOther="未发数量">
			</com-job-scan-detail>
		</view>
		<button v-if="showFinishButton" type="primary" @click="finish" style="margin: 20rpx;"> 任务终止</button>

		<scroll-view scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"
			class="scroll-detail">
			<view class="" v-for="(item, index) in details" :key="index">
				<view class="detail-list margin_top" style="margin-bottom: 150rpx;" >
					<!-- 单选卡片 -->
					<view class="detail-content">
						<view class="choose_main">
							<view class="ljh_box">
								<view class="tit_ljh">{{ item.itemCode }}</view>
								<view class="ljh_left">
									<view class="font_xs text_lightblue">{{ item.itemName }}</view>
									<view class="font_xs text_lightblue">{{ item.itemDesc1 }}</view>
								</view>
							</view>
							<view class="list_form hold_form">
								<view class="uni-container">
									<uni-table style="overflow-x: hidden;">
										<uni-tr>
											<uni-th width="70"></uni-th>
											<uni-th width="120" align="center">推荐</uni-th>
											<uni-th width="120" align="center">实际</uni-th>
										</uni-tr>
										<uni-tr>
											<uni-th width="70">数量</uni-th>
											<uni-th width="120" align="center">
												<view class="text_black">{{item.recommendQty}}({{item.uom}})</text>
												</view>
											</uni-th>
											<!-- -->
											<uni-th width="120" align="center">
												<view class="" v-if="item.scaned">
													<com-number-box :ref="'comNumberBox_'+index"
														v-model="item.handledQty" :max="99999" :min="0"
														@change="qtyChanged($event,item,index)">
													</com-number-box>
												</view>
												<!-- <view v-if="dataContent.scaned" class="text_black">
													{{dataContent.handledQty}}({{dataContent.uom}})
												</view> -->
											</uni-th>
										</uni-tr>
										<uni-tr>
											<uni-th width="70">来源库位</uni-th>
											<uni-th width="120" align="center">
												<view class="text_black">{{ item.fromLocationCode }}</view>
											</uni-th>
											<uni-th width="120" align="center">
												<view class="">
													<button v-if="item.scaned" type="primary" size="mini"
														style="margin-left: 30rpx;"
														@click="remove(item,index)">移除</button>
												</view>
											</uni-th>
										</uni-tr>
										<uni-tr>
											<uni-th width="70">单件码</uni-th>
											<uni-th width="120" align="center">
												<view class="text_black">{{ item.singleCodeRequest }}</view>
											</uni-th>
											<uni-th width="120" align="center">
												<view class="text_black">{{ item.singleCodeJob }}</view>
											</uni-th>
										</uni-tr>
									</uni-table>
								</view>
							</view>
						</view>
						<view class="choose_marked" v-if="item.scaned">
							<image src="@/static/image_marked.svg"></image>
						</view>
					</view>
				</view>
			</view>

		</scroll-view>

		<div class="new_bot_box">
			<win-collapse-location scanTitle='扫描目标库位' ref='comCollapseLocation' @getLocationCode='getDefaultToLocation'
				@clear='clearDefaultLocation'>
			</win-collapse-location>
			<view class="new_btn_bot bot_pos uni-flex">
				<button class="new_clear_btn btn_double" @click="cancel()">清空</button>
				<button class="new_save_btn btn_double" @click="submit()">提交</button>
			</view>
		</div>
		<win-scan-button @goScan='openScanPopup'></win-scan-button>
		<winScanByProductCode ref="scanPackPopup" title="单件码" @getScanResult='getScanResult'></winScanByProductCode>
		<comMessage ref="comMessage" @afterCloseCommitMessage='closeCommitMessage()'></comMessage>
	</view>
</template>

<script>
	import {
		getThirdLocationDetail,
		takeThirdLocationJob,
		cancelTakeThirdLocationJob,
		finshThirdLocationJob,
		locations,
		thirdLocationRequestClose
	} from '@/api/index.js';
	import {
		showConfirmMsg,
		goHome,
		navigateBack
	} from '@/common/basic.js';
	import winScanButton from '@/mycomponents/wincom/winScanButton.vue'
	import winMulitScan from '@/mycomponents/wincom/winMulitScan.vue'
	import winScanByPack from '@/mycomponents/wincom/winScanByPack.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import comJobScanDetail from '@/mycomponents/comjob/comJobScanDetail.vue'
	import winCollapseLocation from '@/mycomponents/wincom/winCollapseLocation.vue'
	import winScanByProductCode from '@/mycomponents/wincom/winScanByProductCode.vue'
	import comNumberBox from '@/mycomponents/common/comNumberBox.vue';
	import comProductCode from '@/mycomponents/coms/task/comProductCode.vue';



	export default {
		components: {
			winScanButton,
			winMulitScan,
			winScanByPack,
			comMessage,
			comJobScanDetail,
			winCollapseLocation,
			winScanByProductCode,
			comNumberBox,
			comProductCode
		},
		data() {
			return {
				type: '',
				id: "",
				datacontent: {},
				details: [],
				toLocation: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				ispending: false,
				balancesItem: {},
				titleArray: ['箱标签', '目标库位'],
				allCount: 0,
				scanCount: 0,
				jobStatus: "",
				toLocationInfo: null,
				showFinishButton: false
			}
		},
		onLoad(param) {
			this.id = param.id;
			if (param.jobStatus == 1) {
				this.receive((callback => {
					this.getDetail();
				}));
			} else {
				this.getDetail();
			}
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			} else if (e.index === 1) {
				window.location.reload();
			}
		},
		//拦截返回按钮事件
		onBackPress(e) {
			//已经接收但是没提交任务
			if (e.from == 'backbutton') {
				if (this.jobStatus == 2) {
					//取消承接任务	
					cancelTakeThirdLocationJob(this.id).then(res => {
						uni.navigateBack();
					}).catch(error => {
						uni.navigateBack();
					})
				} else {
					uni.navigateBack();
				}
				return true;
			}
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#5A7CF3 !important"
			})
		},
		methods: {
			//扫描默认目标库位
			getDefaultToLocation(locationCode) {
				uni.showLoading({
					title: "扫描中",
					mask: true
				});
				locations(locationCode).then(res => {
					uni.hideLoading();
					if (res) {
						this.toLocationInfo = res
					} else {
						this.showMessage('目标库位【' + locationCode + '】不存在');
					}

				}).catch(err => {
					uni.hideLoading();
					this.toLocationInfo = null
					this.showMessage(err.message);

				})
			},

			clearDefaultLocation() {
				this.toLocationInfo = null
			},
			finish() {
				showConfirmMsg("是否确认终止?", callback => {
					if (callback) {
						uni.showLoading({
							title: "加载中",
							mask: true
						})
						thirdLocationRequestClose(this.id).then(res => {
							uni.hideLoading()
							uni.showToast({
								title: "终止成功"
							})
							navigateBack(1)
						}).catch(error => {
							uni.hideLoading()
							this.showMessage("终止失败" + error)
						})
					}
				})
			},
			remove(item, index) {
				showConfirmMsg("是否移除当前【" + item.itemCode + "】扫描信息", res => {
					if (res) {
						item.scaned = false;
						item.handledQty = null;
						item.singleCodeJob = ""
					}
				})
			},
			qtyChanged(value, item, index) {
				if (value <= 0) {
					this.showMessage('收货货数量必须大于0')
					item.qty = item.handledQty
					this.$refs['comNumberBox_' + index][0].setValue(item.qty);
				} else {
					if (value > item.recommendQty) {
						this.showMessage("收货货数量[" + value + "]不能大于申请数量[" + item.recommendQty + "]");
						item.handledQty = item.recommendQty
						this.$refs['comNumberBox_' + index][0].setValue(item.handledQty);
					}

				}
			},
			openScanPopup() {
				this.$refs.scanPackPopup.openScanPopup();
			},
			//加载零件信息
			getDetail() {
				let that = this;
				let params = {
					id: that.id,
				};
				getThirdLocationDetail(params)
					.then(item => {
						console.log('item', item);
						that.datacontent = item;
						that.jobStatus = item.jobStatus
						that.details = item.details;
						that.allCount = 0;
						that.details.forEach(res => {
							res.scaned = false;
							that.allCount = that.allCount + res.recommendQty + res.handledQty
						})
						that.ispending = item.jobStatus === 2;
						this.getScanCount()
						if (this.scanCount > 0) {
							this.showFinishButton = true
						} else {
							this.showFinishButton = false
						}

						// that.toLocation = item.details[0].recommendLocationCode;
					})
					.catch(err => {
						this.showMessage('未查找到详细信息')
					});
			},
			//扫描箱标签
			getScanResult(result) {
				let item = this.details.find(r => {
					return r.itemCode == result.itemCode
				});

				if (item === undefined) {
					this.showMessage('在任务详情中,未找到物料号【' + result.itemCode + '】');
					return;
				} else {
					if (item.scaned) {
						this.showMessage('物料号【' + result.itemCode + '】已经扫描,请扫描下一箱零件');
						return;
					} else {
						item.scaned = true;
						item.handledQty = item.recommendQty;
						item.singleCodeJob = result.scanCode
						setTimeout(res => {
							this.$forceUpdate()
						}, 1000)

					}
				}

			},

			getScanCount() {
				this.scanCount = 0;
				this.datacontent.details.forEach(res => {
					this.scanCount = this.scanCount + res.handledQty
				})

			},

			closeScanPopup() {
				this.$refs.scanPopup.closeScanPopup();
			},

			cancel() {
				showConfirmMsg("是否清除已经扫描的数据?", res => {
					if (res) {
						this.getDetail();
					}
				})

			},


			//接收
			receive(callback) {
				let params = {
					id: this.id
				};
				takeThirdLocationJob(params)
					.then(res => {
						callback(true);
					})
					.catch(err => {
						this.showMessage(err.message);
						callback(false);
					});
			},

			submit() {
				let that = this;
				if (that.datacontent.details.length === 0) {
					this.showMessage('该任务没有要收货的零件');
					return;
				}

				let items = that.datacontent.details.filter(r => r.scaned);
				if (items.length === 0) {
					this.showMessage('请扫描要收货的零件');
					return;
				} else if (items.length < that.datacontent.details.length) {
					this.showMessage('还有未扫描的零件,不可以收货');
					return;
				} else {
					if (this.toLocationInfo == null) {
						this.showMessage('请扫描目标库位');
						return;
					}

					that.finsh();
				}
			},

			finsh() {
				uni.showLoading({
					title: "提交中...",
					mask:true
				});
				this.setParams();
				let params = JSON.stringify(this.datacontent);
				console.log("提交", params);
				finshThirdLocationJob(this.id, params)
					.then(res => {
						uni.hideLoading();
						if (res != null) {
							this.showCommitSuccessMessage();
						}
					})
					.catch(err => {
						this.showMessage(err.message);
						uni.hideLoading();
					});
			},
			setParams() {
				this.datacontent.details.forEach(res => {
					// res.handledFromLocationCode = res.recommendFromLocationCode;
					// res.handledFromLocationA rea = res.recommendFromLocationArea;
					// res.handledFromLocationGroup = res.recommendFromLocationGroup;
					// res.handledFromLocationErpCode = res.recommendFromLocationErpCode
					// res.handledFromWarehouseCode = res.recommendFromWarehouseCode;

					res.toLocationCode = this.toLocationInfo.code;
					res.toLocationArea = this.toLocationInfo.areaCode;
					// res.toLocationGroup = this.toLocationInfo.locationGroupCode;
					// res.toLocationErpCode = this.toLocationInfo.erpLocationCode;

				})

			},

			showCommitSuccessMessage() {
				this.$refs.comMessage.showCommitSuccess();
			},

			closeCommitMessage() {
				navigateBack(1); //点关闭直接返回列表
				uni.hideLoading();
			},


			clearScanLocation() {
				// this.$refs.scanLocation.getfocus();
				// this.$refs.scanLocation.clear();
			},
			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},

			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
		}
	}
</script>

<style scoped lang="scss">
</style>