SmartStorage/pages/rfidReceive/rfidReceive.vue

<template>
	<view>

		<!-- <div v-if="showPrompt" class="prompt">{{ promptMessage }}</div> -->
		<!-- 添加新的加载效果 -->
		<div v-if="showPrompt" class="custom-loading-overlay">
			<div class="custom-loading-content">
				<div class="custom-spinner"></div>
				<p>{{ promptMessage }}</p>
			</div>
		</div>

		<view class="btn-area">
			<view @click="startVeri">开始识别</view>
			<view @click="stopVeri">停止识别</view>
			<view @click="openPop">接收</view>
		</view>
		<view class="number">
			<h4>
				待出库数：{{ waitOutNum }}
			</h4>
			<h4 style="margin-left: 15rpx;">
				识别设备数：{{ veriDeviceNum }}
			</h4>
		</view>
		<view class="table-container" v-show="tableData.length != 0">
			<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-tr>
					<uni-th align="center">类型</uni-th>
					<uni-th align="center">规格</uni-th>
					<uni-th align="center">编码</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.typeName }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.typeCode }}</view>
					</uni-td>
					<uni-td align="center">{{ item.maCode }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<uni-popup ref="popup1" type="center" :mask-click="false">
			<view class="popup1">
				<view class="pop-top">
					<h4>接收类型</h4>
					<uni-icons style="color: #AAAAAA; font-weight: bold;" type="closeempty" size="20"
						@click="closePopup1">
					</uni-icons>
				</view>
				<h5 style="width: 85%; margin: 2vh auto; font-weight: normal; text-align: center;">请选择接收方式</h5>
				<view class="select-area">
					<!-- <view @click="scanCode">二维码</view>
					<view @click="codeOut">编码接收</view>
					<view @click="rfidOut">RFID接收</view> -->
					<uni-data-checkbox v-model="fixVal" :localdata="fixRange" @change="fixChange"></uni-data-checkbox>
				</view>
				<!-- <view class="ipt-area">
					<uni-easyinput v-model="codeVal" placeholder="请输入编码"></uni-easyinput>
				</view> -->
				<view class="btn" @click="confirmDevice">确定</view>
			</view>
		</uni-popup>
		<u-loading-page :loading="showLoading" color="#000" loading-text="获取设备中,请稍后..."></u-loading-page>
		<u-loading-page :loading="showSubLoading" color="#000" loading-text="提交中,请稍后..."></u-loading-page>
	</view>
</template>

<script>
	const rfidMod = uni.requireNativePlugin('BNS-RfidRed')
	export default {
		data() {
			return {
				waitOutNum: '',
				veriDeviceNum: 0,
				searchVal: '',
				tableData: [
					/* {
						type: '牵引机',
						model: '90KN',
						code: 'NSJJ432003524010010'
					},
					{
						type: '牵引机',
						model: '120KN',
						code: 'NSXX226003524010010'
					},
					{
						type: '牵引机',
						model: '150KN',
						code: 'NSRR432003524010010'
					} */
				],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				subList: [],
				sendTypeId: '',
				parentId: '',
				taskId: '',
				fixVal: '',
				fixRange: [{
						text: '合格',
						value: '1'
					},
					{
						text: '待修',
						value: '2'
					},
					{
						text: '待报废',
						value: '3'
					}
				],
				showLoading: false,
				showSubLoading: false,
				showPrompt: false, // 控制提示框的显示状态
				promptMessage: '' // 存储提示信息
			}
		},
		methods: {
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			selectionChange(e) {
				let that = this
				that.selectedIndexs = e.detail.index.sort((a, b) => {
					return a - b
				})
				console.log(that.selectedIndexs);
			},
			openPop() {
				if (this.selectedIndexs.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '未选中设备！'
					})
				} else {
					this.$refs.popup1.open()
				}
			},
			confirmDevice() {
				let that = this
				console.log(that.subList)
				console.log(that.sendTypeId)
				let ifAllRight = that.subList.some(item => {
					return item.typeId != that.sendTypeId
				})
				console.log(ifAllRight);
				if (that.fixVal == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择一种维修方式！'
					})
				} else if (ifAllRight == true) {
					uni.showToast({
						icon: 'none',
						title: '设备类型不完全匹配，请重新扫描！'
					})
				} else if (that.subList.length > that.waitOutNum) {
					uni.showToast({
						icon: 'none',
						title: '出库数量大于待出库数量！'
					})
				} else {
					that.showSubLoading = true
					console.log(that.subList);
					that.subList = that.subList.map(item => {
						return {
							parentId: that.parentId,
							typeId: that.sendTypeId,
							backNum: '1',
							backStatus: that.fixVal,
							manageType: item['manageType'],
							createBy: uni.getStorageSync('userInfo').userid,
							maId: item['maId']
						}
					})
					let param = {
						taskId: that.taskId,
						arr: that.subList
					}
					console.log(param);
					// 提交设备信息
					that.$api.backMaterialReceive.subRfid(param).then(res => {
						console.log(res);
						if (res.data.code == 200) {
							that.showSubLoading = false
							uni.showToast({
								icon: 'none',
								title: res.data.msg,
								success: () => {
									uni.navigateBack()
								}
							})
						} else {
							that.showSubLoading = false
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}).catch(err => {
						console.log(err);
					})
				}
			},
			fixChange(e) {
				let that = this
				that.subList = []
				for (let i = 0; i < that.selectedIndexs.length; i++) {
					that.subList.push(that.tableData[that.selectedIndexs[i]])
				}
			},
			/* outStore () {
				let that = this
				that.subList = []
				for (let i = 0; i < that.selectedIndexs.length; i++) {
					that.subList.push(that.tableData[that.selectedIndexs[i]])
				}
				that.subList = that.tableData.filter((item) => {
					return item.checked == true
				})
				that.tableData = that.tableData.filter((item) => {
					return item.checked != true
				})
				if (that.subList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择至少一台设备！'
					})
				} else {
					that.subList = that.subList.map(item => {
						return {
							parentId: that.parentId,
							typeId: that.sendTypeId,
							backNum: '1',
							
						}
					})
					console.log(that.subList);
				}
			}, */
			startVeri() {
				let that = this
				that.showPrompt = true;
				that.promptMessage = '识别中，请稍候...';
				// 延迟关闭提示，显示Toast
				setTimeout(() => {
					let b = rfidMod.initUHF()
					console.log(b);
					let goVeri = rfidMod.redTag()
					console.log(goVeri);
					if (goVeri.code == 1001) {
						that.showLoading = true
						that.showPrompt = false; // 关闭提示
						uni.showToast({
							icon: 'none',
							title: '识别成功',
							success: () => {
								// 调用编码获取设备信息
								that.$api.backMaterialReceive.searchRfid({
									rfidCode: goVeri.res
								}).then(res => {
									console.log(res);
									if (res.data.code == 200) {
										that.showLoading = false
										that.veriDeviceNum = that.veriDeviceNum + res.data.data
											.length
										if (res.data.data.length > 0) {
											for (let i = 0; i < res.data.data.length; i++) {
												that.tableData.push(res.data.data[i])
											}
										} else {
											uni.showToast({
												icon: 'none',
												title: "未找到相关信息"
											})
										}
									}
								}).catch(err => {
									console.log(err);
								})
							}
						})
					} else if (goVeri.code == 1000) {
						that.showPrompt = false; // 关闭提示
						that.showLoading = false
						uni.showToast({
							icon: 'none',
							title: '获取设备信息失败，请重新扫描！'
						})
					}
				}, 1000)
			},
			stopVeri() {
				let endVeri = rfidMod.closeRfid()
				console.log(endVeri);
				if (endVeri.code == 1001) {
					uni.showToast({
						icon: 'none',
						title: endVeri.res
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: endVeri.res
					})
				}
			},
			closePopup1() {
				this.fixVal = ''
				this.$refs.popup1.close()
			}
		},
		onLoad(params) {
			console.log(params);
			this.selectedIndexs = []
			this.waitOutNum = params.waitOut
			this.sendTypeId = params.typeId
			this.parentId = params.parentId
			this.taskId = params.taskId
			// 初始化rfid识别
			const obj = rfidMod.initUHF()
			console.log(obj);
		}
	}
</script>

<style lang="scss">
	.btn-area {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		view {
			width: 30%;
			box-sizing: border-box;
			padding: 15rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #169BD5;
			color: #fff;
			font-size: 14px;
		}

		view:last-child {
			background-color: #70B603;
		}
	}

	.number {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		align-items: center;

		h4 {
			font-weight: normal;
			font-size: 12px;
			display: flex;
			align-items: center;
		}
	}

	.table-container {
		width: 90%;
		margin: 20rpx auto;
	}

	.popup1 {
		width: 80vw;
		height: 30vh;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		background: linear-gradient(#D9E7FE, #fff, #fff, #fff);

		.pop-top {
			width: 100%;
			height: 5vh;
			box-sizing: border-box;
			padding: 0 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.select-area {
			width: 85%;
			margin: 40rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			/* view {
				box-sizing: border-box;
				font-size: 14px;
				padding: 10rpx 20rpx;
				border: 1px solid #D5D5D4;
				border-radius: 20rpx;
			} */
		}

		.ipt-area {
			width: 85%;
			margin: 40rpx auto;
		}

		.btn {
			width: 60%;
			margin: 2vh auto;
			box-sizing: border-box;
			padding: 15rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 15rpx;
			color: #fff;
			background-color: #169BD5;
		}
	}

	// 添加新的加载效果样式
	.custom-loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.custom-loading-content {
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.custom-spinner {
		width: 40px;
		height: 40px;
		border: 4px solid #f3f3f3;
		border-top: 4px solid #3498db;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 10px;
	}
</style>