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

<!-- 发料任务详情 -->
<template>
	<page-meta root-font-size="16px"></page-meta>
	<view class="">
		<view class="top_card">
			<com-job-scan-detail :jobContent="datacontent" :allCount="allCount" :isShowScanHint="true" scanHint="已发数"
				:scanCount="scanCount" :isShowOther="true" :isShowShouRong="true" :shouRongCount="shouRongCount">
			</com-job-scan-detail>
		</view>
		<scroll-view scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"
			class="scroll-detail" style="padding-bottom: 40rpx;">
			<view class="" v-for="(item, index) in details" :key="index">
				<view class="detail-list margin_top">
					<!-- 单选卡片 -->
					<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="">
										<uni-tr>
											<uni-th width="100" align="center">
												<text
													style="font-weight:800; font-size: 35rpx; color: black; ">推荐</text>
											</uni-th>
											<uni-th width="120" align="center">来源</uni-th>
											<uni-th width="120" align="center">目标</uni-th>
										</uni-tr>

										<uni-tr>
											<uni-td width="100" align="center">库位</uni-td>
											<uni-td width="120" align="center">
												{{item.recommendFromLocationCode}}</uni-td>
											<uni-td width="120" align="center">
												{{item.recommendToLocationCode}}</uni-td>
										</uni-tr>
										<uni-tr>
											<uni-td width="100" align="center">数量({{item.uom}})</uni-td>
											<uni-td width="120" align="center">{{item.recommendFromQty}}</uni-td>
											<uni-td width="120" align="center">{{item.recommendToQty }}</uni-td>
										</uni-tr>

									</uni-table>
								</view>
							</view>

							<view class="list_form hold_form">
								<view class="uni-container">
									<uni-table style="">
										<uni-tr>
											<uni-th width="100" align="center">
												<text
													style="font-weight:800; font-size: 35rpx; color: black; ">实际</text></uni-th>
											<uni-th width="120" align="center">来源</uni-th>
											<uni-th width="120" align="center">目标</uni-th>
										</uni-tr>

										<uni-tr>
											<uni-td width="100" align="center">库位</uni-td>
											<uni-td width="120" align="center">
												{{item.handledFromLocationCode}}</uni-td>
											<uni-td width="120" align="center"> {{item.handledToLocationCode}}</uni-td>
										</uni-tr>
										<uni-tr>
											<uni-td width="100" align="center">数量({{item.uom}})</uni-td>
											<uni-td width="120" align="center">{{item.tempHandledFromQty}}</uni-td>
											<uni-td width="120" align="center">
												<view
													style="display: flex;flex-direction: row;justify-content:center;align-items: center;">
													<com-number-box ref="comNumberBoxRef"
														v-model="item.tempHandledToQty" :max="999999" :min="0"
														style='width: 100px;' @change="qtyChanged($event,item,index)">
													</com-number-box>
												</view>
											</uni-td>
										</uni-tr>

									</uni-table>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="" style="margin-left: 50rpx; margin-right: 50rpx;">
					<button type="primary" size="default" @click="recommend">推荐库存</button>
				</view>

			</view>

		</scroll-view>
		<view class="" v-if="details.length>0"
			style=" display: flex; width: 100%;padding-bottom: 150rpx; flex-direction: row; justify-content: space-around;">
			<view class="" style=" align-items: center;">
				<view class="scan_float_top" @click="openScanPopup">
					<image src="@/static/icons_ui/icon_scan_white.svg"></image>
					<view>单件码</view>
				</view>
			</view>
			<view class="" style="">
				<view class="scan_float_top" @click="openLocationFrom">
					<image src="@/static/icons_ui/icon_scan_white.svg"></image>
					<view>来源库位</view>
				</view>
			</view>
			<view class="" style="">
				<view class="scan_float_top" @click="openLocationTo">
					<image src="@/static/icons_ui/icon_scan_white.svg"></image>
					<view>目标库位</view>
				</view>
			</view>

		</view>
		<view class="uni-flex uni-row new_btn_bot" v-if="showBtn">
			<button class="new_clear_btn btn_double" @click="clear()">清空</button>
			<button class="new_save_btn btn_double" @click="submit()">提交</button>
		</view>
		<com-balance ref='issueitems' @selectedItem='selectedBalanceItem'></com-balance>
		<selectClickList ref="selectPopup" title="推荐信息" @select="selectPlan"></selectClickList>
		<winScanLocationCode ref="locationFrom" title="来源库位" @getLocation="getFromLocation"></winScanLocationCode>
		<winScanLocationCode ref="locationTo" title="目标库位" @getLocation="getToLocation"></winScanLocationCode>

		<winScanByProductCode ref="scanPackPopup" title="单件码" @getScanResult='getScanResult'></winScanByProductCode>
		<com-message ref="comMessage" @afterCloseCommitMessage='closeCommitMessage()'
			@afterCloseScanMessage='closeScanMessage'></com-message>
	</view>
</template>

<script>
	import {
		getAssembleIssueDetail,
		takeAssembleIssueJob,
		cancelTakeAssembleIssueJob,
		finshAssembleIssueJob,
		getCountByItemCode,
		getRecommendBalance
	} from '@/api/index.js';
	import {
		calc
	} from '@/common/calc.js';
	import {
		getJobStatuStyle,
		getJobStatuDesc,
		showConfirmMsg,
		goHome,
		compareDesc,
		compareStr,
		getCurrDateTime,
		navigateBack,
		scanSuccessAudio,
		scanFailedAudio
	} from '@/common/basic.js';
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import winScanButtonLeft from '@/mycomponents/wincom/winScanButtonLeft.vue'
	import winScanButtonTop from '@/mycomponents/wincom/winScanButtonTop.vue'
	import winScanButtonBottom from '@/mycomponents/wincom/winScanButtonBottom.vue'
	import winMulitScan from '@/mycomponents/wincom/winMulitScan.vue'
	import comBalance from '@/mycomponents/common/comBalance.vue'
	import comJobScanDetail from '@/mycomponents/comjob/comJobScanDetail.vue'
	import winScanByPack from '@/mycomponents/wincom/winScanByPack.vue'
	import comNumberBox from '@/mycomponents/common/comNumberBox.vue';
	import winScanLocationCode from '@/mycomponents/wincom/winScanLocationCode.vue';
	import winScanByProductCode from '@/mycomponents/wincom/winScanByProductCode.vue'
	import selectClickList from "@/mycomponents/popup/selectClickList.vue"

	export default {
		components: {
			comMessage,
			winScanButtonLeft,
			winScanButtonTop,
			winScanButtonBottom,
			winMulitScan,
			comBalance,
			comJobScanDetail,
			winScanByPack,
			comNumberBox,
			winScanLocationCode,
			winScanByProductCode,
			selectClickList
		},
		data() {
			return {
				id: "",
				datacontent: {},
				details: [],
				toLocation: '',
				old: {
					scrollTop: 0
				},
				allCount: 0,
				scanCount: 0,
				isPack: true,
				titleArray: ['箱标签'],
				jobStatus: "",
				toLocationInfo: {},
				singCode: "",
				shouRongCount: null,
				showBtn: true
			}
		},
		props: {
			itemCode: "",
		},
		onLoad(param) {
			this.id = param.id;
			this.getDetail();
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				if (this.datacontent.isClaims && this.datacontent.claimsUserId == localStorage.getItem('userId')) {
					cancelTakeAssembleIssueJob(this.id).then(res => {}).catch(error => {})
				}
				goHome();
			} else if (e.index === 1) {
				window.location.reload();
			}
		},
		//拦截返回按钮事件
		onBackPress(e) {
			//已经接收但是没提交任务
			if (e.from == 'backbutton') {
				if (this.datacontent.isClaims && this.datacontent.claimsUserId == localStorage.getItem('userId')) {
					//取消承接任务	
					cancelTakeAssembleIssueJob(this.id).then(res => {
						uni.navigateBack();
					}).catch(error => {
						uni.navigateBack();
					})
				} else {
					uni.navigateBack();
				}
				return true;
			}
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#5A7CF3 !important"
			})
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPackPopup.openScanPopup();
			},
			openLocationTo() {
				this.$refs.locationTo.openScanPopup()
			},
			openLocationFrom() {
				this.$refs.locationFrom.openScanPopup()
			},
			getFromLocation(locationInfo) {
				var current = this.details[0]
				if (locationInfo.code != current.recommendFromLocationCode) {
					scanFailedAudio()
					this.showMessage(" 扫描来源库位[" + locationInfo.code + "]与推荐来源库位[" + current
						.recommendFromLocationCode + "]不一致,请重新扫描")
					return;
				}
				scanSuccessAudio()
				current.handledFromLocationCode = locationInfo.code
				current.handledFromLocationArea = locationInfo.locationArea
				current.handledFromLocationGroup = locationInfo.locationGroup
				current.handledFromLocationErpCode = locationInfo.locationErpCode
				current.handledFromWarehouseCode = locationInfo.warehouseCode
				current.handledFromPackingCode = ""
				current.handledFromLot = ""

			},

			getToLocation(locationInfo) {
				var current = this.details[0]
				if (locationInfo.code != current.recommendToLocationCode) {
					scanFailedAudio()
					this.showMessage("扫描目标库位[" + locationInfo.code + "]与推荐目标库位[" + current
						.recommendToLocationCode + "]不一致,请重新扫描")
					return;
				}
				scanSuccessAudio()
				this.toLocationInfo = locationInfo
				current.handledToLocationCode = locationInfo.code
				current.handledToLocationArea = locationInfo.areaCode
				current.handledToLocationGroup = locationInfo.locationGroupCode
				current.handledToLocationErpCode = locationInfo.erpLocationCode
				current.handledToWarehouseCode = locationInfo.warehouseCode
				current.handledToPackingCode = ""
				current.handledToLot = ""
			},
			//加载零件信息
			getDetail() {
				let that = this;
				if (that.id == undefined) {
					return;
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let params = {
					id: that.id,
				};
				getAssembleIssueDetail(params)
					.then(item => {
						console.log('item', item);
						that.datacontent = item;
						that.jobStatus = item.jobStatus;
						that.details = item.details;
						if (that.details != null) {
							that.details.forEach(
								r => {
									r.scaned = false;
									r.scanDate = new Date()
									r.handledFromLocationCode = ""
									r.handledToLocationCode = ""
								}
							);

							this.allCount = that.details[0].recommendFromQty;
							this.scanCount = that.details[0].handledToQty;
							that.details[0].defaultHandleQty = that.details[0].handledFromQty;
							that.details[0].tempHandledToQty = 0
							that.details[0].tempHandledFromQty = 0
							//查找收容数
							getCountByItemCode(that.details[0].itemCode).then(res => {
								uni.hideLoading();
								if (res) {
									var qty = res.qty;
									this.shouRongCount = qty;
									this.details[0].tempHandledToQty = qty;
									this.details[0].tempHandledFromQty = qty;
									this.$forceUpdate()
								} else {
									this.showMessage("没有查找到[" + that.details[0].itemCode + "]的收容数")
								}
							}).catch(error => {
								uni.hideLoading();
								this.showMessage(error)
							})
							this.setReceived();
						}

					})
					.catch(err => {
						uni.hideLoading();
						this.showMessage('未查找到详细信息')

					});
			},

			setReceived() {
				//是否承接
				//已经承接
				if (this.datacontent.isClaims) {
					this.datacontent.jobStatus =2
					//承接并且承接人是自己显示，不是自己隐藏
					if (this.datacontent.claimsUserId == localStorage.getItem('userId')) {
						this.showBtn = true
					} else {
						this.showBtn = false
					}
				} else {
					//未承接，调用承接接口，承接成功后显示按钮
					this.receive((callback => {
						if (callback) {
							this.datacontent.isClaims = true;
							this.datacontent.jobStatus = 2
							this.showBtn = true
							this.datacontent.claimsUserName = localStorage.getItem('userName')
							this.datacontent.claimsUserId = localStorage.getItem('userId')
						} else {
							this.showBtn = false
							this.datacontent.isClaims = false;
							this.datacontent.jobStatus = 1
							this.datacontent.claimsUserId = ""
						}
					}));
				}
			},
			getScanResult(result) {
				let item = this.details.find(r => {
					return r.itemCode == result.itemCode
				});

				if (item == undefined) {
					scanFailedAudio()
					this.showMessage('在任务详情中,未找到ERP料号【' + result.itemCode + '】');
					return;
				}
				scanSuccessAudio()
				this.singCode = result.itemCode
				this.$refs.scanPackPopup.closeScanPopup();

			},

			recommend() {
				var itemCode = this.details[0].itemCode
				var productLine = this.details[0].prodLine
				if (!itemCode) {
					this.showMessage("物料为空")
					return;
				}
				if (!productLine) {
					this.showMessage("生产线为空")
					return;
				}

				uni.showLoading({
					title: "加载中",
					mask: true
				})

				getRecommendBalance(itemCode, productLine, false).then(res => {
					uni.hideLoading()
					if (res.length > 0) {
						var list = [];
						list = res;
						list.forEach(item => {
							item.label = item.PLAN_NO;
							item.value = item.SHIFT_CODE
						})
						this.$refs.selectPopup.openScanPopup(list)
					} else {
						this.showMessage("推荐列表为0")
					}
				}).catch(error => {
					uni.hideLoading()
					this.showMessage(error)
				})
			},

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

			submit() {
				let that = this;
				if (that.details.length === 0) {
					this.showMessage('该任务没有零件');
					return;
				}
				if (this.singCode == "") {
					this.showMessage('请先扫描单件码');
					return;
				}

				if (!that.details[0].handledFromLocationCode) {
					this.showMessage('请先扫描来源库位');
					return;
				}
				if (!that.details[0].handledToLocationCode) {
					this.showMessage('请先扫描目标库位');
					return;
				}

				if (that.details[0].itempHandledToQty == 0 || that.details[0].itempHandledToQty == "") {
					this.showMessage('发料数量必须大于0');
					return;
				}
				if(that.details[0].tempHandledToQty>calc.sub(this.allCount,this.scanCount)){
					showConfirmMsg("发料数量大于未发数量,是否提交?",res=>{
						if(res){
							that.finsh();
						}
					})
				}else {
					that.finsh();
				}

			},


			finsh() {
				let that = this;
				uni.showLoading({
					title: "提交中...",
					mask: true
				});
				that.details[0].handledFromQty = that.details[0].tempHandledToQty
				that.details[0].handledToQty = that.details[0].tempHandledToQty
				let params = that.details[0];
				finshAssembleIssueJob(that.id, params.id, params)
					.then(res => {
						uni.hideLoading();
						if (res != null) {
							that.showCommitSuccessMessage();
						}
					})
					.catch(err => {
						that.showMessage(err.message);
						uni.hideLoading();
					});
			},

			clear() {
				this.singCode == ""
				this.getDetail();
			},
			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},
			showScanMessage(message) {
				this.$refs.comMessage.showScanMessage(message);
			},

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

			closeCommitMessage() {
				navigateBack(1)
				uni.hideLoading();
			},

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

			closeScanMessage() {
				this.scanPopupGetFocus();
			},

			scanPopupGetFocus() {
				this.$refs.scanPopupForm.getfocus();
			},

			qtyChanged(value, item, index) {
				if (item.tempHandledToQty == 0) {
					this.$refs.comNumberBoxRef[0].setValue(0);
					this.showMessage('请先扫描单件码')
					return;
				}
				if (value == 0) {
					this.showMessage('发料数量必须大于0')
					item.tempHandledToQty = item.tempHandledFromQty
					this.$refs.comNumberBoxRef[0].setValue(item.tempHandledToQty);
					return;
				}
				item.tempHandledFromQty = value;
				this.$forceUpdate();

			},
		}
	}
</script>

<style scoped lang="scss">
	.scan_float_top {
		opacity: 0.4;
		width: 110rpx;
		height: 110rpx;
		color: #000;
		background-color: #5A7CF3;
		border-radius: 50%;
		text-align: center;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

	.scan_float_top image {
		width: 40rpx;
		height: 40rpx;
		margin-top: 10rpx;
	}

	.scan_float_top view {
		color: #fff;
		font-size: .725rem;
		margin-top: -8rpx;
	}
</style>