shanghaiganxiangtuzhuangworkshop_WMS_PDA/pages/inWarehouse/inWarehouse.vue

<template>
	<view class="content">
		<view class="title-box">
			<!-- <span class="title-text">入库</span> -->
			<view class="warehoseInfo-box">
				<view>仓库编号：{{ warehouseInfo.warehouse + ' ' + warehouseInfo.location }}</view>
				<view class="row">
					<view class="col">层号：{{ warehouseInfo.layer }}</view>
					<view class="col">货架：{{ warehouseInfo.shelf }}</view>
				</view>
				<view>当前录入总货物数：{{ quantityTotal }}</view>
				<view>
					<view v-if="searchType === 1" 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>
			<view class="scroll-view-last" v-if="newMaterialList.length > 1">上次批次号：{{ newMaterialList[newMaterialList.length - 2].patchCode }}</view>
			<view class="scroll-view-last" v-if="newMaterialList.length === 1">上次批次号：</view>
			<packageCard v-if="newMaterialList.length > 0" :packageInfo="newMaterialList[newMaterialList.length - 1]"></packageCard>
			<!-- <scroll-view class="scroll-view-box" :scroll-y="true">
				<view v-for="(item, index) in oldMaterialList">
					<materialItem style="background-color: darkgray" :materialInfo="item"></materialItem>
				</view>
				<view v-for="(item, index) in newMaterialList">
					<materialItem style="background-color: whitesmoke" :materialInfo="item" @click.native="handleDeleteItem(item, index)"></materialItem>
				</view>
			</scroll-view> -->
		</view>
		<!-- 底部按钮 -->
		<view class="button-box">
			<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: {},
			// 仓库信息
			warehouseInfo: {
				id: '',
				warehouse: '',
				warehouse_num: '',
				location: '',
				shelf: '',
				layer: '',
				number: 0
			},
			// 货物信息
			lastPackageInfo: {
				// 工单号
				workoderID: '',
				// 批次号(工单号+箱号+班组)
				patchCode: '',
				// 零件号
				partNumner: '',
				// 描述
				productionDescribe: '',
				// 出厂日期/生产日期
				productionTime: '',
				// 此箱数量
				quantity: 0
			},
			// 库位历史信息
			oldMaterialList: [],
			// 库位新录入货物信息
			newMaterialList: [],
			// 1-仓库扫码 2-货物扫码
			searchType: 1
		};
	},
	watch: {},
	created() {
		this.init();
	},
	computed: {
		quantityTotal() {
			let num = 0;
			for (let index = 0; index < this.newMaterialList.length; index++) {
				num += this.newMaterialList[index].quantity * 1;
			}
			return num;
		}
	},
	methods: {
		init() {
			// 需要展示的参数：【零件号[物料号](35233201041) 描述(鲨鱼鳍)  箱号+班组(BNW240312023_18B1) 数量 时间 】
			// 初始化，并且清空数据
			this.clearData.warehouseInfo = JSON.parse(JSON.stringify(this.warehouseInfo));
			// this.clearData.packageInfo = JSON.parse(JSON.stringify(this.packageInfo));
			this.clearData.oldMaterialList = JSON.parse(JSON.stringify(this.oldMaterialList));
			this.clearData.newMaterialList = JSON.parse(JSON.stringify(this.newMaterialList));
			this.searchType = 1;

			// for (let i = 1; i <= 10; i++) {
			// 	this.oldMaterialList.push({
			// 		packageCode: 'BNW240312023_18B1  35233201041  鲨鱼鳍  ' + i + '个',
			// 		entryWarehouseTime: '2024/3/13'
			// 	});
			// }
			// for (let i = 1; i <= 10; i++) {
			// 	this.newMaterialList.push({
			// 		// 工单号
			// 		workoderID: '240305021',
			// 		// 批次号(工单号+箱号+班组)
			// 		patchCode: 'BNW240312023_' + i + 'B1',
			// 		// 零件号
			// 		partNumner: '0215.000.801-6SU',
			// 		// 描述
			// 		describe: 'D365支架-幻影黒-后右',
			// 		// 出厂日期/生产日期
			// 		productionTime: '20240315',
			// 		// 此箱数量
			// 		quantity: 10
			// 	});
			// }
		},
		clear() {
			this.warehouseInfo = JSON.parse(JSON.stringify(this.clearData.warehouseInfo));
			// this.packageInfo = JSON.parse(JSON.stringify(this.clearData.packageInfo));
			this.oldMaterialList = JSON.parse(JSON.stringify(this.clearData.oldMaterialList));
			this.newMaterialList = JSON.parse(JSON.stringify(this.clearData.newMaterialList));
			this.searchType = 1;
		},
		handleGetInfo(data, type) {
			console.log(data);
			if (type === 1) {
				// 仓库扫完后是箱号
				this.searchType = 2;
				this.warehouseInfo = data?.warehoseInfo;
				this.newMaterialList = [];
			} else if (type === 2) {
				const checkData = {
					originalCode: data.originalCode
				};
				const checkIs = WarehoseApi.isExistedWarehouse(checkData).then((res) => {
					if (res.code !== 200 || res.data) {
						uni.showModal({
							title: '提示',
							content: '货物录入异常，已在其他库录入！',
							showCancel: false,
							confirmText: '确定'
						});
						return;
					}
					// 此时扫描的是箱号
					// 当前录入的箱号是否在同一批次录入过
					if (this.newMaterialList.length > 0 && this.newMaterialList[this.newMaterialList.length - 1].patchCode === data.patchCode) {
						uni.showModal({
							title: '提示',
							content: '当前批次下，货物已录入',
							showCancel: false,
							confirmText: '确定'
						});
						return;
					}
					this.newMaterialList.push(data);
				});
			}
		},

		// 长按弹出删除
		handleDeleteItem(item, index) {
			// 双击判定
			this.touchNum++;
			setTimeout(() => {
				if (this.touchNum >= 2) {
					uni.showModal({
						title: '删除提示',
						content: '是否从列表中删除此货物?',
						showCancel: true,
						cancelText: '取消',
						confirmText: '删除',
						success: (res) => {
							if (res.confirm) {
								this.newMaterialList.splice(index, 1);
							}
						}
					});
				}
				this.touchNum = 0;
			}, 250);
		},
		// 入库提交
		handlerSubmit() {
			uni.showModal({
				title: '入库操作',
				content: '是否确认入库?',
				showCancel: true,
				cancelText: '取消',
				confirmText: '确认入库',
				success: (res) => {
					if (res.confirm) {
						let list = [];
						for (let item of this.newMaterialList) {
							console.log(item);
							list.push(item.originalCode);
						}
						const data = {
							location: this.warehouseInfo.location,
							packagelist: list
						};
						console.log(data);
						WarehoseApi.handlerIntoProductWarehouse(data).then((res) => {
							if (res.code === 200) {
								if (!res.data) {
									uni.showModal({
										title: '提示',
										content: res.msg,
										showCancel: false,
										confirmText: '确定'
									});
									return;
								}
								uni.showToast({
									icon: 'success',
									title: '入库成功！'
								});
								this.clear();
							} else {
								uni.showToast({
									icon: 'error',
									title: '入库失败！'
								});
							}
						});
					}
				}
			});
		}
	}
};
</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: brown;
}
.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: 20px;
	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;
}
</style>