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

<template>
	<view>
		<view class="uni-form-item uni-column">
			<view class="uni-flex uni-row">
				<view class="title" style="width: 190rpx;">出库任务单号:</view>
				<input class="uni-input" style="font-size: 40rpx;font-weight: bold;color: black;" disabled="true" v-model="outTaskNo"/>
			</view>
			<view class="uni-flex uni-row" style="margin-top: 3px;margin-bottom: 3px;">
				<view class="title" style="width: 190rpx;">规格型号\图号:</view>
				<input class="uni-input" style="margin-right: 5px;" :focus="foucusIndex === 0" v-model="materialSpecCode" placeholder="请输入规格型号\图号" @confirm="confirmFun"/>
			</view>
			<view class="uni-flex uni-row">
				<button type="primary" style="-webkit-flex: 1;flex: 1;margin-left: 5px;" @click="queryClick">查    询</button>
				<button type="primary" style="-webkit-flex: 1;flex: 1;margin-left: 5px;margin-right: 5px;" @click="resetCondition">重    置</button>
			</view>
		</view>
		<uni-section title="SAP出库任务单数据：" type="line" style="margin-bottom: 3px;padding: 3px;">
			<view class="my-tips-view" v-if="isShowTips">没有查询到SAP出库任务单数据......</view>
			<uni-pagination :total="total" :current="current" :pageSize="pageSize" @change="pageChange" title="标题文字" v-if="!isShowTips" style="margin: 4px;"/>
			<view v-if="!isShowTips" style="text-align: center;">
				<text class="example-info">数据总量：{{ total }}条，每页数据：{{ pageSize }}</text>
			</view>
			<view v-for="(newsitem,key) in sapOutTaskList" :key="key">
				<view class="myDeliverDetail" @click="myDeliverDetailClick(newsitem)">
					<view style="flex-direction: row;flex-direction: row;height: 25px;display: flex;padding: 2px;border-radius: 5px 5px;">
						<text style="align-self: center;">物料编号：</text>
						<text style="align-self: center;font-size: 30rpx;font-weight: bold;">{{newsitem.materialCode}}</text>
						<text :class="newsitem.keyFlag ? 'keyFlagRed' : 'keyFlagGray'" style="align-self: center;margin-left: 20px;">{{newsitem.keyFlag ? '★' : '■'}}</text>
					</view>
					<view class="line-h"></view>
					<view style="flex-direction: row;flex-direction: row;display: flex;-webkit-justify-content: space-between;justify-content: space-between;">
						<view>
							<view style="flex-direction: row;flex-direction: row;display: flex;padding: 2px;">
								<text style="align-self: center;color: #555;font-size: 25rpx;">物料名称：</text>
								<text style="align-self: center;font-size: 25rpx;word-wrap: break-word;width: 200px;">{{newsitem.materialName}}</text>
							</view>
							<view style="flex-direction: row;flex-direction: row;display: flex;padding: 2px;">
								<text style="align-self: center;color: #555;font-size: 25rpx;">规格型号/图号：</text>
								<text style="align-self: center;font-size: 35rpx;font-weight: bold;color: blue;word-wrap: break-word;width: 200px;">{{newsitem.materialSpec}}</text>
							</view>
							<view style="flex-direction: row;flex-direction: row;display: flex;padding: 2px;">
								<text style="align-self: center;color: #555;font-size: 25rpx;">生产令号：</text>
								<text style="align-self: center;font-size: 35rpx;font-weight: bold;color: blue;word-wrap: break-word;width: 200px;">{{newsitem.bomNo}}</text>
							</view>
							<!-- <view style="flex-direction: row;flex-direction: row;display: flex;padding: 2px;">
								<text style="align-self: center;color: #555;font-size: 25rpx;">BN/SN：</text>
								<text style="align-self: center;font-size: 30rpx;font-weight: bold;word-wrap: break-word;width: 200px;">{{newsitem.bnSnCode}}</text>
							</view> -->
							<view style="flex-direction: row;flex-direction: row;display: flex;padding: 2px;">
								<text style="align-self: center;color: #555;font-size: 25rpx;">出库需求数量：</text>
								<text style="align-self: center;font-size: 30rpx;font-weight: bold;">{{newsitem.qty}}</text>
							</view>
							<view style="flex-direction: row;flex-direction: row;display: flex;padding: 2px;">
								<text style="align-self: center;color: #555;font-size: 25rpx;">已出库数量：</text>
								<text style="align-self: center;font-size: 35rpx;font-weight: bold;color: red;">{{newsitem.outQty}}</text>
							</view>
							<view style="flex-direction: row;flex-direction: row;display: flex;padding: 2px;">
								<text style="align-self: center;color: #555;font-size: 25rpx;">创建人：</text>
								<text style="align-self: center;font-size: 30rpx;">{{newsitem.createBy}}</text>
							</view>
							<view style="flex-direction: row;flex-direction: row;display: flex;padding: 2px;">
								<text style="align-self: center;color: #555;font-size: 25rpx;">创建时间：</text>
								<text style="align-self: center;font-size: 30rpx;">{{newsitem.createTime}}</text>
							</view>
						</view>
						<view v-if="newsitem.outQty < newsitem.qty" style="border-radius: 35px;width: 35px; background-color: lime;height: 35px;align-self: center;margin-right: 5px;"></view>
						<view v-else style="border-radius: 35px;width: 35px; background-color: lightgray;height: 35px;align-self: center;margin-right: 5px;"></view>
					</view>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				outTaskNo: '',
				foucusIndex: 0,
				materialSpecCode: '',
				isShowTips: true,
				sapOutTaskList:[],
				current: 1,
				total: 0,
				pageSize: 10
			}
		},
        onLoad(option) {
			this.outTaskNo = option.outTaskNo;
			uni.$on('addOutstoreData', this.addOutstoreData);
			this.queryUnFinishedFun(option.outTaskNo);
        },
		onUnload() {
			uni.$off('addOutstoreData', this.addOutstoreData)
		},
		methods: {
			async queryClick() {
				if(!this.isEmptyStr(this.materialSpecCode)) {
					await this.queryFun()
				}
				else {
					await this.queryUnFinishedFun(this.outTaskNo)
				}
			},
			async queryFun() {
				if(this.isEmptyStr(this.materialSpecCode)) {
					uni.showToast({
						title: '物料信息 不能为空！',
						icon: 'none',
						duration: 1500,
						mask:true,
					})
					this.foucusIndex = 1
					setTimeout(() => {
						this.foucusIndex = 0;
					}, 150)
					return
				}
				
				uni.showLoading({
					title: "正在查询...",
					mask: true,
				})
				this.sapOutTaskList = []
				let parm = {
					url : '/SapInterface/QuerySapOutTaskListForMaterialSpec?outTaskNo=' + this.outTaskNo + '&materialSpecCode=' + this.materialSpecCode,
					data: {
					},
					method: 'POST',
					isHaveToken : true
				}
				let retData = await getApp().RequestData(parm)
				// console.log(retData)
				if(retData.isSuccess) {
					if(retData.data.code == 200) {
						let len = retData.data.data.length
						this.sapOutTaskList = retData.data.data
						if(len > 0) {
							this.isShowTips = false
						}
						else {
							this.isShowTips = true;
						}
					}
					else {
						this.isShowTips = true
					}
				}
				else {
					this.isShowTips = true
				}
				uni.hideLoading()
			},
			resetCondition() {
				this.materialSpecCode = ''
				// this.sapOutTaskList = []
				this.isShowTips = true
				// this.foucusIndex = 1
				// setTimeout(() => {
				// 	this.foucusIndex = 0;
				// }, 150)
				this.queryUnFinishedFun(this.outTaskNo)
			},
			ResetFoucus() {
				this.foucusIndex = 1
				setTimeout(() => {
					this.foucusIndex = 0;
				}, 150)
			},
			isEmptyStr(s) {
				if (s == undefined || s === '') {
					return true
				}
				return false
			},
			myDeliverDetailClick(model) {
				model.outTaskNo = this.outTaskNo;
				if(model.outQty >= model.qty) {
					uni.showToast({
						title: '已全部出库',
						icon: 'error',
						mask: true,
						duration: 1500
					})
				} else {
					uni.navigateTo({
						url: '/pages/Outstore/outstoreOperate',
						success() {
							uni.$emit('sendCheckedDeliverDtlData',model)
							// console.log(model)
						}
					});
				}
			},
			addOutstoreData(data) {
				// console.log(data)
				// this.sapOutTaskList.forEach((item) => {
				// 	if(item.id === data.id) {
				// 		item.outQty += Number(data.OutNum);
				// 	}
				// })
				// let isFinish = this.sapOutTaskList.some(x => x.outQty < x.qty)
				// if(!isFinish) {
				// 	// console.log(111)
				// 	this.resetCondition()
				// }
				// else {
				// 	this.queryFun()
				// }
				this.queryUnFinishedFun(this.outTaskNo);
			},
			confirmFun() {
				this.queryFun()
			},
			pageChange(e) {
				this.current = e.current
				this.queryUnFinishedFun(this.outTaskNo)
			},
			async queryUnFinishedFun(outTaskNoStr) {
				this.sapOutTaskList = []
				let parm = {
					url : '/SapInterface/QuerySapOutTaskListUnfinished',
					data: {
						OutTaskNo: outTaskNoStr,
						PageNum: this.current,
						PageSize: this.pageSize
					},
					method: 'POST',
					isHaveToken : true
				}
				uni.showLoading({
					title: "正在查询...",
					mask: true,
				})
				let retData = await getApp().RequestData(parm)
				if(retData.isSuccess) {
					if(retData.data.code == 200) {
						// let len = retData.data.data.length
						// this.sapOutTaskList = retData.data.data
						let len = retData.data.data.result.length
						this.total = retData.data.data.totalNum
						if(len > 0) {
							this.isShowTips = false
						}
						else {
							this.isShowTips = true
						}
						this.sapOutTaskList = retData.data.data.result
					}
					else {
						this.isShowTips = true
					}
				}
				else {
					this.isShowTips = true
				}
				this.ResetFoucus()
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	.my-tips-view {
		/* margin-top: 50px; */
		text-align: center;
		color: #999999;
		font-size: 20px;
		font-weight: normal;
	}
	.myDeliverDetail {
		border: 1px solid #cccccc;
		border-radius: 5px;
		margin-top: 1px;
	}
	.myDeliverDetail:active {
		background-color: aliceblue;
	}
	.line-h {
	    height: 1rpx;
	    background-color: #cccccc;
	}
	.keyFlagRed {
		color: red;
	}
	.keyFlagGray {
		color: lightgray;
	}
</style>