2025-03-JS-SDK-PDA/pages/checkplan/Palletizing/Palletizing.vue

<template>
	<view>
		<u-navbar back-text="返回" title="组托拆托" :background="background"></u-navbar>
		<u-form>
			<radio-group @change="SplitOrMerge">
				<label class="radio" style="margin-left: 50rpx;">
					<radio value="zb">{{'组盘'}}</radio>
				</label>
				<label class="radio"  style="margin-left: 30rpx;">
					<radio value="cb">{{'拆盘'}}</radio>
				</label>
			</radio-group>
			<u-form-item>
				<p>扫描条码：</p>
				<u-input class="uni-input" v-model="MaterialPackingcode" :focus="focusBarCode" placeholder="请扫描条码"
					:border="true" @confirm="submit" />
			</u-form-item>
		</u-form>
			<view class="container" style="margin-bottom: 80px;">
				<view class="list-item" v-for="(item, index) in BoxListInfo" :key="item.id">
					<view class="list-content">
						<!-- <div>
							<text class="card-description"> 序号: {{BoxListInfo.length -  index}}</text>
						</div> -->
						<div>
							<text class="card-description"> 托盘号: {{ item.PALLETNO }}</text>
						</div>
						<div>
							<text class="card-description"> 标签: {{ item.MATERIALPACKINGNAME }}</text>
						</div>
						<div>
							<text class="card-description"> 批次: {{ item.CHARGE }}</text>
						</div>
						<div>
							<text class="card-description"> 解绑标记: <text v-if="item.UNBINDFLAG == 'Y'">已解绑</text><text v-else-if="item.UNBINDFLAG == 'N'">已绑定</text><text v-else></text></text>
						</div>
						<div v-if="SPLIT" class="button-group" style = "margin: 5rpx; padding-bottom: 10rpx; align: center;">
							<u-button type="primary" @click="deleteItem(item, index)">删除</u-button>
						</div>
					</view>
				</view>
			</view>
		<br />
		<view class="tabbar_bottom"  v-if="!SPLIT">
			<!-- <uni-datetime-picker style="align-items: center;" type="date" :clear-icon="false" v-model="commitDate"
				@maskClick="maskClick" /> -->
			<u-button class="btn-bottom" @click="FGStockIn" type="primary" :loading="loading">确定入库</u-button>
		</view>
		<br />
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commitDate: '',
				SPLIT: false,
				MERGE: false,
				loading: false,
				userId: "",
				SettobarCode: "", //托盘编号
				MaterialPackingcode: '', //标签编号
				BoxListInfo: [], //后端传回来的绑定表格的数据
				focusKw: false, //库位输入框焦点
				focusBarCode: true, //默认聚焦到条码框	
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				useId: ""
			};
		},
		mounted() {
			// let Things = 20
			// for (var i = 0; i < Things; i++) {
			// 	this.BoxListInfo.push({aa:"1"}) 
			// }	
			const site = uni.getStorageSync('sitename')
			// this.siteName = site
			this.siteName = 'SDK'
			const iduser = uni.getStorageSync('userid')
			this.userId = iduser
			this.getTimeData();
		},

		methods: {
			deleteItem(row, index) {
				console.log(index, row)
				var url = "//Palletizing/delPalletizing"
				this.$MyRequest(url, {
					materialPackingName: row.MATERIALPACKINGNAME,
					palletNo: row.PALLETNO,
					unbindUserId: this.userId,
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						try {
							Vue.prototype.$playSuccess()
						} catch (e) {}
						this.BoxListInfo.splice(index, 1)
					} else {
						this.$showMessage(res.data.message)
						this.BoxListInfo.splice(index, 1)
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
					}
				}).catch(err => {
					this.$showMessage(err)
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$nextTick(() => {
						this.MaterialPackingcode = ""
						this.focusBarCode = true
					})
				});
			},
			getTimeData() {
				var year = new Date().getFullYear(); //年
				if (year < 1900) year = year + 1900;
				var month = new Date().getMonth() + 1; //月
				if (month < 10) month = '0' + month;
				var day = new Date().getDate(); //日
				if (day < 10) day = '0' + day;
				const calendar1 = year + '-' + month + '-' + day
				this.commitDate = calendar1
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			//设置选中状态
			changeischecked() {
				this.ischecked = !this.ischecked //设置选中状态
			},
			SplitOrMerge(e) {
				this.BoxListInfo = []
				const selectedValue = e.detail.value; 
				if (selectedValue == 'cb') {
					this.SPLIT = true
					this.MERGE = false
				} else if (selectedValue == 'zb') {
					this.SPLIT = false
					this.MERGE = true
				}
			},
			submit() {
				if (this.BoxListInfo.some(box => box.MATERIALPACKINGNAME === this.MaterialPackingcode)) {
					this.$showMessage("该标签已扫描，请不要重复扫描！");
					this.$nextTick(() => {
						this.MaterialPackingcode = ""
						this.focusBarCode = true
					})
					this.$playFail()
					return;
				}
				this.focusBarCode = false;
				if (!this.MERGE && !this.SPLIT) {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$showMessage("请选择拆盘或组盘")
					this.$nextTick(() => {
						this.MaterialPackingcode = ""
						this.focusBarCode = true
						console.log(this.focusBarCode)
					})
					return
				}
				var url = "/api/Palletizing/scanCode"
				console.log(this.BoxListInfo[0])
				this.$MyRequest(url, {
					materialPackingName: this.MaterialPackingcode,
					palletNo:this.BoxListInfo[0]?.PALLETNO || ""
				}).then(res => {
					if (res.data.success) {
						let arrList = res.data.resultObj;
						try {
							Vue.prototype.$playSuccess()
						} catch (e) {}
						if(this.BoxListInfo.some(val => val.PALLETNO != (arrList[0]?.PALLETNO || ''))) {
							this.$showMessage("扫描的当前标签托盘号与之前不一致")
						}else {
							arrList.map(item => this.BoxListInfo.push(item))
						}
					} else {
						this.$showMessage(res.data.message)
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
					}
					this.$nextTick(() => {
						this.MaterialPackingcode = ""
						this.focusBarCode = true
					})
				}).catch(err => {
					this.$showMessage(err)
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$nextTick(() => {
						this.MaterialPackingcode = ""
						this.focusBarCode = true
					})
				});
			},
			FGStockIn() {
				console.log(this.commitDate)
				if (this.BoxListInfo.length > 0) {
					this.loading = true;
					this.$MyRequest('/api/Palletizing/addPalletizing', {
						userId: this.userId,
						boxList: this.BoxListInfo
					}).then(res => {
						console.log('res',res)
						if (res.data.success) {
							this.loading = false;
							this.$showMessage(res.data.message)
							this.BoxListInfo = [];
						} else {
							this.loading = false;
							this.$showMessage(res.data.message)
							this.BoxListInfo = [];
						}
					}).catch(err => {
						this.loading = false;
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						this.$showMessage(err)
					});
				} else {
					this.$showMessage("请扫描！")
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
				}
			}

		}
	}
</script>
<style>
	.btn-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
	}
</style>
<style lang="scss">
	.list-item {
		
		margin: 30rpx 20rpx 0 20rpx;
		padding: 10rpx;
		/* 卡片之间的间距 */
		// padding: 12px;
		/* 卡片内部的内边距 */
		background-color: #aaaa7f;
		/* 卡片背景色 */
		border-radius: 8px;
		/* 卡片边框圆角 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 卡片阴影效果 */
	}
	.card-description {
		overflow-wrap: break-word; 
		word-break: break-all;
	}
</style>