shanghaiganxiangtuzhuangworkshop_WMS_PDA/pages/consolidation/consolidation.vue

<template>
	<view class="content">
		<view class="title-box">
			<!-- <span class="title-text">拼箱</span> -->
			<view class="warehoseInfo-box">
				<view class="row">
					<span class="col">已扫零件数：{{ quantityTotal }}</span>
					<span class="col">已扫箱数：{{ newMaterialList.length }}</span>
				</view>
				<view>
					<view v-if="searchType === 2" class="color2 aciton-box">请扫外箱标签</view>
					<!-- 扫描操作 -->
					<view class="pda-search-box">
						<PdaScanInput @getInfo="handleGetInfo" :type="searchType" :hasFocus="false"></PdaScanInput>
					</view>
				</view>
			</view>
		</view>
		<!-- 货物列表 -->
		<view class="scroll-view-box">
			<view class="scroll-view-title">拼箱清单</view>
			<scroll-view :scroll-y="true" class="scroll-view-height">
				<view v-for="(item, index) in newMaterialList" :key="index">
					<materialItem style="background-color: whitesmoke" :index="index" :materialInfo="item"
						@click.native="handleDeleteItem(item, index)"></materialItem>
				</view>
			</scroll-view>
			<!-- <packageCard v-if="newMaterialList.length > 0" :packageInfo="newMaterialList[newMaterialList.length - 1]"></packageCard> -->
		</view>
		<!-- 底部按钮 -->
		<view class="button-box">
			<u-button style="width: 40%" type="error" @click="clear" :disabled="loading"
				:loading="loading">清空</u-button>
			<u-button style="width: 40%" type="primary" @click="handlerSubmit" :disabled="loading"
				:loading="loading">拼箱</u-button>
		</view>
		<!-- 数量选择 -->
		<u-modal :show="modalShow" showCancelButton title="主箱需求数" @confirm="modalConfirm" @cancel="modalCancel">
			<view class="slot-content">
				<!-- 				<view>
					<u--text bold size="36" :text="'拼箱后主箱零件数:' + mainPackageQuantity"></u--text>
				</view> -->
				<!-- 				<view>
					<u--input placeholder="请输入拼入数量" type="number" border="surround" v-model="secondNum" @input="numInput"></u--input>
				</view> -->
				<view>
					<u--text bold size="36" :text="'已扫箱数:' + newMaterialList.length"></u--text>
					<u--text bold size="36" :text="'已扫零件数:' + quantityTotal"></u--text>
					<u--text bold size="36" :text="'待拼箱主箱零件数:' + mainPackageQuantity"></u--text>
				</view>
				<view>
					<u--text bold type="primary" size="36" text="请填写拼箱后主箱总零件数:"></u--text>
					<u--input placeholder="请输入拼箱后主箱总零件数" type="number" border="surround"
						v-model="mainPackageActionNum"></u--input>
						<!-- @input="numInput2" -->
					<u--text size="24" type="error" text="如需要拼箱后零件号结果为48个,则填写数字48."></u--text>
					<u--text size="24" type="error" text="结果需要大于主箱零件数,小于已扫零件数"></u--text>
				</view>
			</view>
		</u-modal>
	</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';
	import * as GoodsActionApi from '@/api/warehouse/wmGoodsAction.js';
	// 拼箱
	export default {
		components: {
			materialItem,
			packageCard
		},
		data() {
			return {
				loading: false,
				// 双击判定
				touchNum: 0,
				clearData: {},
				// 货物信息
				packageInfo: {
					// id
					id: '',
					// 工单号
					workoderID: '',
					// 批次号(工单号+箱号+班组)
					patchCode: '',
					// 零件号
					partNumner: '',
					// 标签数量
					goodsNumLogic: 0,
					// 盘点数量（实际）
					goodsNumAction: 0,
					// 描述
					productionDescribe: '',
					// 出厂日期/生产日期
					productionTime: '',
					// 此箱数量
					quantity: 0
				},
				// 新录入货物信息
				newMaterialList: [],
				// 1-仓库扫码 2-货物扫码 3-出货单扫码
				searchType: 2,
				modalShow: false,
				secondNum: 0,
				// 主箱需求数
				mainPackageActionNum: 0
			};
		},
		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;
			},
			//主箱零件数
			mainPackageQuantity() {
				try {
					if (this.newMaterialList.length > 0) {
						return this.newMaterialList[0].quantity * 1;
					} else {
						return 0;
					}
				} catch (e) {
					return 0;
				}
			}
		},
		methods: {
			init() {
				// 需要展示的参数：【零件号[物料号](35233201041) 描述(鲨鱼鳍)  箱号+班组(BNW240312023_18B1) 数量 时间 】
				// 初始化，并且清空数据
				this.clearData.packageInfo = JSON.parse(JSON.stringify(this.packageInfo));
				this.clearData.newMaterialList = JSON.parse(JSON.stringify(this.newMaterialList));
				this.searchType = 2;
				this.secondNum = 0;
			},
			clear() {
				this.packageInfo = JSON.parse(JSON.stringify(this.clearData.packageInfo));
				this.newMaterialList = JSON.parse(JSON.stringify(this.clearData.newMaterialList));
				this.secondNum = 0;
				this.searchType = 2;
			},
			// 长按弹出删除
			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);
			},
			// 扫码信息录入
			handleGetInfo(data, type) {
				if (type === 2) {
					// 此时扫描的是箱号
					if (this.newMaterialList.length > 0) {
						for (let item of this.newMaterialList) {
							if (data.patchCode === item.patchCode) {
								uni.showModal({
									title: '提示',
									content: '已扫过此箱！',
									showCancel: false,
									confirmText: '确定'
								});
								return;
							}
						}
					}
					// if (this.newMaterialList.length > 2) {
					// 	uni.showModal({
					// 		title: '提示',
					// 		content: '只可录入两箱！',
					// 		showCancel: false,
					// 		confirmText: '确定'
					// 	});
					// 	return;
					// }
					const checkData = {
						originalCode: data.originalCode
					};
					// 是否在库
					WarehoseApi.isExistedWarehouse(checkData).then((res) => {
						if (res.code !== 200 || !res.data) {
							uni.showModal({
								title: '提示',
								content: '货物异常或未入库！',
								showCancel: false,
								confirmText: '确定'
							});
							return;
						}
						this.newMaterialList.push(data);
						const searchInfoData = {
							patchCode: data.patchCode
						};
						// 获取解析结果
						WarehoseApi.getInfoByPatchCode(searchInfoData).then((res) => {
							if (res.code === 200) {
								this.packageInfo = res.data;
							} else {
								uni.showModal({
									title: '提示',
									content: '货物数据异常',
									showCancel: false,
									confirmText: '确定'
								});
								return;
							}
						});
					});
				}
			},
			modalConfirm() {
				if (!this.checkInput()) {
					return;
				}
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
				}, 30000)
				// let data = {
				// 	packageList: this.newMaterialList,
				// 	createBy: 'admin',
				// 	secondNum: this.secondNum || 0
				// };
				let data = {
					packageList: this.newMaterialList,
					createBy: 'pda',
					mainPackageActionNum: this.mainPackageActionNum
				};
				uni.$u.throttle(() => {
					GoodsActionApi.doConsolidationGoods2(data).then((res) => {
						if (res.code === 200) {
							uni.showModal({
								title: '提示',
								content: '拼箱成功！' + res.data.description,
								showCancel: false,
								confirmText: '确认'
							});
							this.modalShow = false;
							this.loading = false;
							this.clear();
						} else {
							uni.showToast({
								icon: 'error',
								title: res.message
							});
							this.modalShow = false;
							this.loading = false;
						}
					});
				}, 5000)
			},
			modalCancel() {
				this.modalShow = false;
				this.secondNum = 0;
			},
			numInput(value) {
				let maxQuantity = this.newMaterialList[1]?.quantity;
				if (!maxQuantity) {
					this.secondNum = 0;
					return;
				}
				if (!(value * 1 < maxQuantity * 1)) {
					this.secondNum = maxQuantity;
					return;
				}
			},
			// 检查输入的数值
			checkInput() {
				const num = this.mainPackageActionNum * 1;
				const packageList = this.newMaterialList;
				const minQuantity = packageList[0]?.quantity * 1;
				const maxQuantity = this.quantityTotal * 1;
				if (packageList.length < 1) {
					uni.showModal({
						title: '输入错误提示',
						content: '需要至少两箱才能拼箱！',
						showCancel: false,
						confirmText: '确认'
					});
					return false;
				}
				if (num < minQuantity) {
					this.$nextTick(() => {
						uni.showModal({
							title: '输入错误提示',
							content: '输入值小于主箱零件数！请增加数字！',
							showCancel: false,
							confirmText: '确认'
						});
					})
					return false;
				}
				if (num > maxQuantity) {
					this.$nextTick(() => {
						uni.showModal({
							title: '输入错误提示',
							content: '输入值大于总零件数！请减小数字！',
							showCancel: false,
							confirmText: '确认'
						});
					})
					return false;
				}
				return true;
			},
			numInput2(value) {
				const num = value * 1;
				const packageList = this.newMaterialList;
				if (packageList.length < 1) {
					this.mainPackageActionNum = 0;
					return;
				}
				let minQuantity = packageList[0]?.quantity * 1;
				let maxQuantity = this.quantityTotal * 1;
				if (num < minQuantity) {
					this.$nextTick(() => {
						this.mainPackageActionNum = minQuantity;
					})
					return;
				}
				if (num > maxQuantity) {
					this.$nextTick(() => {
						this.mainPackageActionNum = maxQuantity;
					})
					return;
				}
			},
			// 点击拼箱
			handlerSubmit() {
				if (this.newMaterialList.length < 2) {
					uni.showModal({
						title: '提示',
						content: '需要至少两箱才能拼箱！',
						showCancel: false,
						confirmText: '确认'
					});
					return;
				}
				// this.secondNum = this.newMaterialList[1].quantity * 1;
				this.mainPackageActionNum = this.quantityTotal * 1;
				this.modalShow = true;
			}
		}
	};
</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(179, 179, 179, 0.7);
		border-radius: 5px;
	}

	.scroll-view-height {
		height: 300px;
	}

	.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;
	}

	.changeInput {
		font-size: 20px;
		background-color: gainsboro;
		border: 1px solid grey;
	}
</style>