shanghaiganxiangtuzhuangworkshop_WMS_PDA/pages/outWarehouse/outWarehouse.vue

<template>
	<view class="content">
		<view class="title-box">
			<!-- <span class="title-text">出库</span> -->
			<view class="warehoseInfo-box">
				<view>出库单号：{{ outInfo.shipmentNum }}</view>
				<view class="row">
					<view>备注：{{ outInfo.remarks }}</view>
				</view>
				<view class="row">
					<span class="col">已扫货物数：{{ quantityTotal }}</span>
					<span class="col">已扫箱数：{{ newMaterialList.length }}</span>
				</view>
				<view>
					<view v-if="searchType === 3" class="color1 aciton-box">操作指示-请扫出货单</view>
					<view v-if="searchType === 2" class="color2 aciton-box">操作指示-请扫货物码</view>
					<!-- 扫描操作 -->
					<view class="pda-search-box">
						<PdaScanInput @getInfo="handleGetInfo" :type="searchType"></PdaScanInput>
					</view>
				</view>
			</view>
		</view>
		<!-- 货物列表 -->
		<view class="scroll-view-box">
			<view class="scroll-view-title">出库清单</view>
			<packageCard v-if="newMaterialList.length > 0" :packageInfo="newMaterialList[newMaterialList.length - 1]"></packageCard>
		</view>
		<!-- 底部按钮 -->
		<view class="button-box">
			<button type="default" @click="handlerDoOut">货物出库</button>
			<button type="default" @click="handlerSubmit">出库单完成</button>
		</view>
	</view>
</template>

<script>
import materialItem from '@/components/material-item/material-item.vue';
import packageCard from '@/components/package-card/package-card.vue';
import * as WarehoseApi from '@/api/warehouse/warehose.js';
// 入库
export default {
	components: {
		materialItem,
		packageCard
	},
	data() {
		return {
			loading: false,
			// 双击判定
			touchNum: 0,
			clearData: {},
			// 出货单信息
			outInfo: {
				id: '',
				// 出库单号
				shipmentNum: '',
				// 备注
				remarks: '',
				materialList: []
			},
			// 货物信息
			lastPackageInfo: {
				// 工单号
				workoderID: '',
				// 批次号(工单号+箱号+班组)
				patchCode: '',
				// 零件号
				partNumner: '',
				// 描述
				productionDescribe: '',
				// 出厂日期/生产日期
				productionTime: '',
				// 此箱数量
				quantity: 0
			},
			// 新录入货物信息
			newMaterialList: [],
			
			//工单计划
			outOrderPlan:[],
			// 1-仓库扫码 2-货物扫码 3-出货单扫码
			searchType: 3
		};
	},
	watch: {},
	created() {
		this.init();
	},
	computed: {
		quantityTotal() {
			let num = 0;
			for (let index = 0; index < this.newMaterialList.length; index++) {
				let _num = parseInt(this.newMaterialList[index].quantity);
				_num = _num || 0;
				num += _num * 1;
			}
			return num;
		}
	},
	methods: {
		init() {
			// 需要展示的参数：【零件号[物料号](35233201041) 描述(鲨鱼鳍)  箱号+班组(BNW240312023_18B1) 数量 时间 】
			// 初始化，并且清空数据
			this.clearData.outInfo = JSON.parse(JSON.stringify(this.outInfo));
			this.clearData.newMaterialList = JSON.parse(JSON.stringify(this.newMaterialList));
			this.clearData.outOrderPlan = JSON.parse(JSON.stringify(this.outOrderPlan));
			this.searchType = 3;
		},
		clear() {
			this.outInfo = JSON.parse(JSON.stringify(this.clearData.outInfo));
			this.newMaterialList = JSON.parse(JSON.stringify(this.clearData.newMaterialList));
			this.outOrderPlan = JSON.parse(JSON.stringify(this.clearData.outOrderPlan));
			this.searchType = 3;
		},
		// 扫码信息录入
		handleGetInfo(data, type) {
			if (type === 3) {
				// 出货单扫完后是扫箱号
				this.searchType = 2;
				this.outInfo = data;
				this.newMaterialList = [];
			} else if (type === 2) {
				if (this.newMaterialList.length > 0) {
					uni.showModal({
						title: '提示',
						content: '当前货物未确认出库，请先点击下方出库按钮，出库当前货物！',
						showCancel: false,
						confirmText: '确定'
					});
					return;
				}

				// 此时扫描的是箱号
				// TODO 检查扫描的箱号零件号是否在此工单下
				// let flag = false;
				// let list = JSON.parse(JSON.stringify(this.outOrderPlan));
				// for(let item of list){
				// 	// 扫描箱的工单号与计划中的批次号对比，数字是否在其中
				// 	if(!item.Patchcode){
				// 		continue;
				// 	}
				// 	if(item.Patchcode.includes(data.workoderID)){
				// 		flag = true;
				// 		break;
				// 	}
				// }
				// if(!flag){
				// 	// 此箱号不在计划内
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '当前货物不在出库单计划内，请扫其他货物！',
				// 		showCancel: false,
				// 		confirmText: '确定'
				// 	});
				// 	return;
				// }
				// TODO 箱出库，并关联到此出库单下
				this.newMaterialList.push(data);
			}
		},
		// 货物出库
		handlerDoOut() {
			if (this.searchType === 3) {
				uni.showModal({
					title: '提示',
					content: '请先扫出库单！',
					showCancel: false,
					confirmText: '确定'
				});
				return;
			}
			if (this.newMaterialList.length === 0) {
				uni.showModal({
					title: '提示',
					content: '当前未扫描货物！',
					showCancel: false,
					confirmText: '确定'
				});
				return;
			}
			uni.showModal({
				title: '操作',
				content: '是否确认执行出库操作?',
				showCancel: true,
				cancelText: '取消',
				confirmText: '确认出库',
				success: (res) => {
					if (res.confirm) {
						const data = {
							shipmentNum: this.outInfo.shipmentNum,
							patchCode: [this.newMaterialList[0].patchCode]
						};
						WarehoseApi.doMaterialOut(data).then(res=>{
							if(res.code !== 200){
								uni.showModal({
									title: '提示',
									content: '出库异常',
									showCancel: false,
									confirmText: '确认'
								});
								return;
							}
							uni.showModal({
								title: '提示',
								content: '出库成功',
								showCancel: false,
								confirmText: '确认'
							});
							this.newMaterialList = [];
						})
						
					}
				}
			});
		},
		// 出库单完成
		handlerSubmit() {
			uni.showModal({
				title: '操作',
				content: '是否确认执行出库单完成操作?完成后将不可继续出库！',
				showCancel: true,
				cancelText: '取消',
				confirmText: '确认出库单完成',
				success: (res) => {
					if (res.confirm) {
						//TODO 变更出库单状态
						const data = {
							shipmentNum: this.outInfo.shipmentNum
						};
						WarehoseApi.doOverOutorderplan(data).then(res=>{
							if(res.code === 200){
								uni.showModal({
									title: '提示',
									content: '此出库单已完成',
									showCancel: false,
									confirmText: '确认'
								});
								this.clear();
							}else{
								uni.showModal({
									title: '提示',
									content: '出库单完成异常！',
									showCancel: false,
									confirmText: '确认'
								});
							}
						})
						
					}
				}
			});
		}
	}
};
</script>

<style scoped>
.title-box {
	margin-top: 54px;
	margin-bottom: 20px;
	height: 60px;
	font-size: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.warehoseInfo-box {
	font-size: 20px;
	width: 94%;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	background-color: aliceblue;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
}
.warehoseInfo-box .row {
	display: flex;
	flex-direction: row;
}
.warehoseInfo-box .row .col {
	width: 50%;
}
.aciton-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.color1 {
	color: yellowgreen;
}
.color2 {
	color: orange;
}
.pda-search-box {
	margin-bottom: 5px;
}
.list-box {
	width: 100%;
}
.scroll-view-title {
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.scroll-view-box {
	width: 94%;
	margin: 0 auto;
	margin-top: 50px;
	height: 360px;
	padding: 10px;
	background-color: rgba(20, 9, 69, 0.2);
	border-radius: 5px;
}
.scroll-view-last {
	width: 100%;
	height: 60px;
	font-size: 20px;
	color: rgba(0, 9, 0, 0.7);
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 10px;
	background-color: white;
}
.button-box {
	width: 80%;
	margin: 10px auto;
	display: flex;
	flex-direction: row;
}
</style>