TFT_WmsPda/TFT-PDA/pages/Outstore/outassembleOperate.vue

<template>
	<view style="padding-left: 2px;padding-right: 2px;">
		<view style="flex-direction: row;display: flex;margin-top: 5px;">
			<text style="align-self: center;font-size: 35rpx;color: darkslategray;">物料号：</text>
			<text style="align-self: center;font-size: 35rpx;word-wrap: break-word;width: 200px;font-weight: bold;">{{sapBomDtlMd.materialCode}}</text>
		</view>
		<view style="flex-direction: row;display: flex;">
			<text style="align-self: center;font-size: 35rpx;color: darkslategray;">物料名称：</text>
			<text style="align-self: center;font-size: 35rpx;word-wrap: break-word;width: 200px;font-weight: bold;">{{sapBomDtlMd.materialName}}</text>
		</view>
		<view style="flex-direction: row;display: flex;">
			<text style="align-self: center;font-size: 35rpx;color: darkslategray;">规格型号/图号：</text>
			<text style="align-self: center;font-size: 35rpx;word-wrap: break-word;width: 200px;font-weight: bold;">{{sapBomDtlMd.materialSpec}}</text>
		</view>
		<view style="flex-direction: row;flex-direction: row;display: flex;">
			<text style="align-self: center;font-size: 35rpx;color: darkslategray;width: 260rpx;">需求数量：</text>
			<text style="align-self: center;font-size: 50rpx;font-weight: bold;color: blue;">{{sapBomDtlMd.qty - sapBomDtlMd.assembleQty}}</text>
		</view>
		<view style="flex-direction: row;display: flex;padding: 1px;">
			<text style="align-self: center;font-size: 35rpx;color: #0000ff;font-weight: bold;width: 260rpx;">规格型号\图号：</text>
			<input class="uni-input" style="font-size: 40rpx;font-weight: bold;" v-model="scanMaterialCode" :focus="foucusIndex === 0" @confirm="foucusChange0" @focus="getFoucus(0)"/>
			<!-- <uni-easyinput style="background:#FFF;margin-right: 5px;font-size: 80rpx;" v-model="scanMaterialCode" :errorMessage="isMaterialCodeErr" :focus="foucusIndex === 0" @confirm="foucusChange0" @input="input"></uni-easyinput> -->
		</view>
		<view style="flex-direction: row;display: flex;padding: 1px;">
			<text style="align-self: center;font-size: 35rpx;color: #0000ff;font-weight: bold;width: 260rpx;">BN/SN码：</text>
			<input class="uni-input" style="font-size: 40rpx;font-weight: bold;" v-model="scanBnSnCode" :focus="foucusIndex === 1" @confirm="foucusChange1" @focus="getFoucus(1)"/>
		</view>
		<view style="flex-direction: row;display: flex;padding: 1px;">
			<text style="align-self: center;font-size: 35rpx;color: #0000ff;font-weight: bold;width: 260rpx;">装配数量：</text>
			<input class="uni-input" type="number" style="font-size: 40rpx;font-weight: bold;color: red;" v-model="assembleNum" :focus="foucusIndex === 2" @confirm="foucusChange2" @focus="getFoucus(2)"/>
		</view>
		<view style="flex-direction: row;display: flex;padding: 1px;">
			<text style="align-self: center;font-size: 35rpx;color: #0000ff;font-weight: bold;width: 260rpx;">实物图片：</text>
			<view class="demo">
				<block v-if="imageSrc">
					<image :src="imageSrc" class="image" mode="scaleToFill" @click="previewImage11()"></image>
				</block>
				<block v-else>
					<view class="uni-hello-addfile" @click="chooseImage">+ 选择图片</view>
				</block>
			</view>
		</view>
		<view class="my-tips-view">{{tipMsg}}</view>
		<button type="primary" style="margin-top: 5px;" @click="resetData">重置</button>
		<button type="primary" style="margin-top: 5px; margin-bottom: 10px;" @click="submitResult">装配结果提交</button>	
		<!-- 提示信息弹窗 -->
		<!-- <view>
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view> -->
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change" :mask-click="isMaskClick" @maskClick="maskClickFun">
				<view class="popup-content" style="flex-direction: column;display: flex;">
					<text class="text" style="color: red;font-weight: bold;">{{popTitleMsg}}</text>
					<text style="color: #333;font-size: 16px;margin-top: 15px;">{{popMsg}}</text>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sapBomDtlMd: {},
				scanMaterialCode: '',
				scanBnSnCode: '',
				assembleNum: 0,
				foucusIndex: 0,
				tipMsg: '等待扫码确认物料号......',
				popTitleMsg: '请重新扫码！！',
				popMsg: '',
				isMaskClick: true,
				imageSrc: '',
				previewImagePath: [],
				outTaskQty: 0
			}
		},
		onUnload() {
			
		},
		onLoad() {
			uni.$once('sendCheckedDeliverDtlData', (data) => {
				this.sapBomDtlMd = data
			})
			this.foucusIndex = 0
		},
		methods: {
			maskClickFun() {
				// if(this.foucusIndex === 0 && (this.scanMaterialCode !== this.sapBomDtlMd.materialCode)) {
				// 	this.scanMaterialCode = ''
				// }
				// else if(this.foucusIndex === 1 && (this.scanMaterialCode !== this.sapBomDtlMd.materialCode)) {
				// 	if(this.isEmptyStr(this.scanMaterialCode)) {
				// 		this.scanBnSnCode = ''
				// 		this.foucusIndex = 0
				// 	}
				// 	else if(this.isEmptyStr(this.scanBnSnCode)) {
				// 		this.foucusIndex = 1
				// 	}
				// 	else {
				// 		this.scanBnSnCode = ''
				// 		this.scanMaterialCode = ''
				// 		this.resetFoucus(0)
				// 	}
				// }
				// else if(this.foucusIndex === 2 && this.isEmptyStr(this.scanMaterialCode)) {
				// 	this.foucusIndex = 0
				// }
				// else if(this.foucusIndex === 2 && this.isEmptyStr(this.scanBnSnCode)&& !this.isEmptyStr(this.scanMaterialCode)) {
				// 	this.foucusIndex = 1
				// }
				// console.log(this.foucusIndex)
			},
			change(e) {
				if(e.show) {
					
				}
				else {
					this.resetFoucus(this.foucusIndex)
				}
			},
			input(e) {
				if(e !== this.sapBomDtlMd.materialCode) {
					this.isMaterialCodeErr = true;
				}
				else {
					this.isMaterialCodeErr = false;
				}
			},
			submitResult() {
				this.myVerify();
				if(this.isEmptyStr(this.imageSrc)) {
					this.popTitleMsg = '请重新扫码！！'
					this.popMsg = '图片不能为空'
					this.$refs.popup.open('center')
					this.foucusIndex = 3
					return
				}
				uni.showLoading({
					title: "正在提交数据...",
					mask: true,
				})
				let tmpMd = this.sapBomDtlMd;
				tmpMd.assembleNum = Number(this.assembleNum);
				tmpMd.BnSnCode = this.scanBnSnCode;
				// console.log(tmpMd)
				let userMsg = uni.getStorageSync('userInfo')
				let baseUrlStr = uni.getStorageSync('BasrUrl')
				uni.uploadFile({
					url: baseUrlStr + '/business/OutAssembleRecord/AddOutAssembleRecordForFile',
					filePath: this.imageSrc,
					fileType: 'image',
					header: { //自定义请求头信息
						Authorization: 'Bearer ' + userMsg.tokenStr + ''
					},
					formData: tmpMd,
					name: 'AssembleData',
					success: (res) => {
						let retMd = JSON.parse(res.data)
						if(retMd.code == 200) {
							uni.navigateBack({
								url: '/pages/Outstore/outassembleDtl',
								success: () => {
									uni.hideLoading()
									uni.$emit('addAssembleDtlData',tmpMd);
								}
							});
						}
						else {
							uni.hideLoading()
							console.log(retMd.msg)
							this.popTitleMsg = '请重新扫码！！'
							this.popMsg = `新增装配数据失败：【${retMd.msg}】`
							this.$refs.popup.open('center')
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
						this.popTitleMsg = '请重新扫码！！'
						this.popMsg = `新增装配数据发生异常：【${JSON.stringify(err)}】`
						this.$refs.popup.open('center')
					}
				});
			},
			isEmptyStr(s) {
				if (s == undefined || s === '') {
					return true
				}
				return false
			},
			foucusChange0(event) {
				if(this.isEmptyStr(this.scanMaterialCode)) {
					this.popTitleMsg = '请重新扫码！！'
					this.popMsg = '物料号不能为空'
					this.$refs.popup.open('center')
					this.foucusIndex = 0
					return;
				}
				if(this.scanMaterialCode !== this.sapBomDtlMd.materialSpec && this.scanMaterialCode !== this.sapBomDtlMd.materialCode) {
					this.popTitleMsg = '请重新扫码！！'
					let tmpMatCode = this.scanMaterialCode
					this.popMsg = `物料号:【${tmpMatCode}】扫码确认错误`
					this.$refs.popup.open('center')
					this.scanMaterialCode = ''
					this.foucusIndex = 0
					return
				}				
				this.tipMsg = "等待扫码 BN/SN码......"
				this.foucusIndex = 1
			},
			foucusChange1(event) {
				if(this.isEmptyStr(this.scanMaterialCode)) {
					this.popTitleMsg = '请重新扫码！！'
					this.popMsg = '物料号不能为空'
					this.$refs.popup.open('center')
					this.foucusIndex = 0
					return;
				}
				if(this.scanMaterialCode !== this.sapBomDtlMd.materialSpec && this.scanMaterialCode !== this.sapBomDtlMd.materialCode) {
					this.popTitleMsg = '请重新扫码！！'
					let tmpMatCode = this.scanMaterialCode
					this.popMsg = `物料号:【${tmpMatCode}】扫码确认错误`
					this.$refs.popup.open('center')
					this.scanMaterialCode = ''
					this.foucusIndex = 0
					return
				}
				if(this.isEmptyStr(this.scanBnSnCode)) {
					this.popTitleMsg = '请重新扫码！！'
					this.popMsg = 'BN/SN码不能为空'
					this.$refs.popup.open('center')
					this.foucusIndex = 1
					//this.resetFoucus(1)
					return
				}
				this.tipMsg = "正在查询已出库数据......"
				this.isMaskClick = false;
				this.popTitleMsg = '提示'
				let showMsg = '正在查询已出库数据......'
				this.popMsg = showMsg
				this.$refs.popup.open('center')
				
				let parm = {
					url : '/business/StkBalanceDtl/GetStkBalanceDtlList',
					data: {
						BomNo: this.sapBomDtlMd.bomNo,
						MaterialCode: this.scanMaterialCode,
						BnSnCode: this.scanBnSnCode,
						IsForAssemble: true,
					},
					method: 'GET',
					isHaveToken : true
				}
				getApp().RequestData(parm).then((res)=>{
					let retData = res;
					if(retData.isSuccess) {
						if(retData.data.code == 200) {
							if(retData.data.data.length === 0) {
								this.outTaskQty = 0
								setTimeout(() => {
									this.tipMsg = '已出库数量为：' + this.outTaskQty
									this.$refs.popup.close()
									this.isMaskClick = true
									this.scanBnSnCode = ''
									// this.foucusIndex = 2
									this.resetFoucus(1)
								}, 1000)
							}
							else {
								this.outTaskQty = retData.data.data
								if(this.outTaskQty > 0) {
									setTimeout(() => {
										this.tipMsg = '已出库数量为：' + this.outTaskQty
										this.$refs.popup.close()
										this.isMaskClick = true
										// this.foucusIndex = 2
										this.resetFoucus(2)
									}, 1000)
								}
								else {
									showMsg = '已出库数量为：' + this.outTaskQty									
									setTimeout(() => {
										this.popMsg = showMsg
									}, 1000)									
									setTimeout(() => {
										this.tipMsg = '已出库数量为：' + this.outTaskQty
										this.$refs.popup.close()
										this.isMaskClick = true
										this.scanBnSnCode = ''
										// this.foucusIndex = 2
										this.resetFoucus(1)
									}, 2000)
								}
							}
						}
						else {
							this.outTaskQty = 0
							this.tipMsg = '获取已出库数量发生错误！！'
							this.$refs.popup.close()
							this.isMaskClick = true;
							this.scanBnSnCode = ''
							// this.foucusIndex = 1
							this.resetFoucus(1)
						}
					}
					else {
						this.outTaskQty = 0
						this.tipMsg = '获取已出库数量发生错误！！'
						this.$refs.popup.close()
						this.isMaskClick = true;
						this.scanBnSnCode = ''
						// this.foucusIndex = 1
						this.resetFoucus(1)
					}
				});
			},
			foucusChange2(event) {
				this.myVerify()
				this.foucusIndex = 3
			},
			myVerify() {
				if(this.isEmptyStr(this.scanMaterialCode)) {
					this.popTitleMsg = '请重新扫码！！'
					this.popMsg = '物料号不能为空'
					this.$refs.popup.open('center')
					this.foucusIndex = 0
					return;
				}
				if(this.scanMaterialCode !== this.sapBomDtlMd.materialSpec && this.scanMaterialCode !== this.sapBomDtlMd.materialCode) {
					this.popTitleMsg = '请重新扫码！！'
					let tmpMatCode = this.scanMaterialCode
					this.popMsg = `物料号:【${tmpMatCode}】扫码确认错误`
					this.$refs.popup.open('center')
					this.scanMaterialCode = ''
					this.foucusIndex = 0
					return
				}
				if(this.isEmptyStr(this.scanBnSnCode)) {
					this.popTitleMsg = '请重新扫码！！'
					this.popMsg = 'BN/SN码不能为空'
					this.$refs.popup.open('center')
					this.foucusIndex = 1
					return
				}
				if(this.assembleNum <= 0) {
					this.popTitleMsg = '错误提示！！'
					this.popMsg = '输入的装配数量不能为0'
					this.$refs.popup.open('center')
					this.foucusIndex = 2
					return;
				}
				if(this.outTaskQty <= 0) {
					this.popTitleMsg = '错误提示!!'
					this.popMsg = '已出库数量为：0,无法进行装配'
					this.$refs.popup.open('center')
					return;
				}
				if((this.sapBomDtlMd.qty - this.sapBomDtlMd.outQty) < this.assembleNum) {
					this.popTitleMsg = '错误提示!!'
					this.popMsg = `输入的装配数量【${this.assembleNum}】大于需求数量【${this.sapBomDtlMd.qty - this.sapBomDtlMd.outQty}】,无法进行装配`
					this.$refs.popup.open('center')
					return;
				}
				if(this.outTaskQty < this.assembleNum) {
					this.popTitleMsg = '错误提示!!'
					this.popMsg = `输入的装配数量【${this.assembleNum}】大于已出库数量【${this.outTaskQty}】,无法进行装配`
					this.$refs.popup.open('center')
					return;
				}
			},
			resetData() {
				this.resetFoucus(0)
				this.scanBnSnCode = ''
				this.scanMaterialCode = ''
				this.assembleNum = 0
				this.outTaskQty = 0
				this.tipMsg = '等待扫码确认物料号......'
				this.imageSrc = ''
				this.previewImagePath = []
			},
			isEmptyStr(s) {
				if (s == undefined || s === '') {
					return true
				}
				return false
			},
			resetFoucus(index) {
				this.foucusIndex = 3
				setTimeout(() => {
				   this.foucusIndex = index;
				}, 5)
			},
			getFoucus(index) {
				this.foucusIndex = index
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success: (res) => {
						// console.log(res.tempFilePaths)
						// console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]
						this.previewImagePath = res.tempFilePaths
						this.imageSrc = imageSrc
						// console.log(` 11【${this.previewImagePath}】`)
						// console.log(` 22【${this.imageSrc}】`)
					},
					fail: (err) => {
						// console.log('chooseImage fail', err)
					}
				})
			},
			previewImage11() {
				// ToDo: 暂未实现 从后端获取图片并预览大图  孙亚龙 20230613
				// 预览图片
				uni.previewImage({
					urls: this.previewImagePath
				});
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.css';
	
	.my-tips-view {
		margin-top: 5px;
		text-align: center;
		color: #aa007f;
		font-size: 20px;
		font-weight: bold;
	}
	.popup-content {
		// @include flex;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		// height: 50px;
		background-color: #fff;
	}
	.text {
		font-size: 22px;
		color: #333;
	}
	.image {
		width: 100%;
		height: 100%;
	}
	
	.demo {
		// padding: 5rpx;
		margin-left: 8px;
		width: 245px;
		height: 210px;
		// border: 1px solid green;
		background-color: #fff;
	}
	.uni-hello-addfile:active {
		background-color: aliceblue;
	}
	.uni-hello-addfile {
		font-size: 45rpx;
		color: black;
		font-weight: bold;
	}
</style>