ezhizao_dms_h5/pages/equipmentList/index.vue

<template>
	<view class="container">
		<view class="title">已绑设备</view>
		<view class="prompt">长按设备解绑</view>
		<view class="equipmentList">
			<view style="height: calc(100% - 400rpx);">
				<view class="entry uni-row" v-for="(item,index) in equipmentList">
					<view class="equipmentList-item" @longpress="handleShowUnbind(item)">{{item.equipmentDetailCode}}
					</view>
					<view :class="{'unbind': true,'visible': showUnbind === item}" @click="handleUnbind(item)">解绑</view>
				</view>
			</view>
			<view v-if="curScanEquipment.length > 0" class="scanEquiementList uni-row">
				<view class="equipmentNo uni-row" v-for="(item,index) in curScanEquipment">
					<text>{{item.equipmentDetailCode}}</text>
					<text @click="handleDelEquipmentNo(item,index)">×</text>
				</view>
			</view>
		</view>
		<view class="bottom uni-row">
			<button class="btn" @click="handleScanCode">扫码</button>
			<button class="btn" style="background-color: #1684fc;" @click="handleSubmit">提交</button>
		</view>
	</view>
	<dialog-confirm ref="confirm" @submit="handleConfirmUnbind" @reflush="reflush"></dialog-confirm>
	<QrScanner v-if="showQrCodeReader" @decode="onDecodeHandler" @close="qrReaderClose" />
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getUserInfo
	} from '@/api/login/index.js'
	import QrScanner from '../vueQrCode/index.vue'
	import {
		saveUserequipment,
		getUserequipmentList,
		unbindQuipment
	} from '@/api/business/userEquipment/equipmentGroup.js'
	import {
		getEquipmentUserList
	} from '@/api/business/equipmentUser.js'
	import {
		store
	} from '@/store/index.js'

	const showUnbind = ref({}) // 解绑按钮显示于隐藏
	const equipmentList = ref([]) // 回显用
	const userEquipmentData = ref({}) // 保存用
	const curScanEquipment = ref([])
	const confirm = ref(null)
	const showQrCodeReader = ref(false);
	onLoad(() => {
		init(); 
	})

	/**
	 * 页面初始化
	 */
	function init() {
		equipmentList.value = [];
		getUserequipmentList({
			userId: store.userInfo.userId
		}).then(res => {
			if (res.code == 200) {
				equipmentList.value = [...res.rows];
			}
		})
	}

	/**
	 * 刷新
	 */
	function reflush() {
		init();
	}

	function handleConfirmUnbind() {
		handleSaveInfo();
	}

	/**
	 *  长按显示解绑按钮
	 * @param {Object} item
	 */
	function handleShowUnbind(item) {
		if (showUnbind.value === item) {
			showUnbind.value = {};
		} else {
			showUnbind.value = item;
		}
	}

	/** 
	 * 解绑
	 * @param {Object} item  当前选择要解绑的对象 
	 */
	function handleUnbind(item) {
		unbindQuipment(item.id).then(res => {
			init();
		})
	}

	function handleDelEquipmentNo(item, index) {
		curScanEquipment.value.splice(index, 1);
	}
	//H5扫码器回调
	function onDecodeHandler(data) {
		showQrCodeReader.value = false;
	let equipment = JSON.parse(data);
	// 判断二维码对不对
	if (!equipment.equipmentDetailId || equipment.equipmentDetailId == "") {
		uni.showToast({
			icon: "none",
			title: "请扫设备码"
		})
		return;
	}
	for (let i = 0; i < curScanEquipment.value.length; i++) {
		if (curScanEquipment.value[i].equipmentDetailId === equipment.equipmentDetailId) {
			uni.showToast({
				icon: "none",
				title: "请勿重复扫码"
			})
			return;
		}
	}
	curScanEquipment.value.push(equipment)
	
	// 设置绑定员工的信息
	userEquipmentData.value = {
		userId: store.userInfo.userId,
		nickName: store.userInfo.nickName,
		deptId: store.curDeptDetails.deptId,
		userEquipmentList: curScanEquipment.value
	} 
	}
	
	
	//H5扫码器关闭
	function qrReaderClose() {
		showQrCodeReader.value = false;
	}
	function handleScanCode() {
		showQrCodeReader.value = true;
		// 引入原生插件
		// const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
		// // 调用插件的 mpaasScan 方法
		// mpaasScanModule.mpaasScan({
		// 		// 扫码识别类型，参数可多选，qrCode、barCode，
		// 		// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
		// 		scanType: ["qrCode", "barCode"],
		// 		// 是否隐藏相册，默认false不隐藏
		// 		hideAlbum: false,
		// 	},
		// 	(ret) => {
		// 		let equipment = JSON.parse(ret.resp_result);
		// 		// 判断二维码对不对
		// 		if (!equipment.equipmentDetailId || equipment.equipmentDetailId == "") {
		// 			uni.showToast({
		// 				icon: "none",
		// 				title: "请扫设备码"
		// 			})
		// 			return;
		// 		}
		// 		for (let i = 0; i < curScanEquipment.value.length; i++) {
		// 			if (curScanEquipment.value[i].equipmentDetailId === equipment.equipmentDetailId) {
		// 				uni.showToast({
		// 					icon: "none",
		// 					title: "请勿重复扫码"
		// 				})
		// 				return;
		// 			}
		// 		}
		// 		curScanEquipment.value.push(equipment)

		// 		// 设置绑定员工的信息
		// 		userEquipmentData.value = {
		// 			userId: store.userInfo.userId,
		// 			nickName: store.userInfo.nickName,
		// 			deptId: store.curDeptDetails.deptId,
		// 			userEquipmentList: curScanEquipment.value
		// 		} 
		// 	}
		// );
	}
	console.log(store)
	function handleSubmit() {
		handleSaveInfo(userEquipmentData.value);
	}

	/**
	 * 绑定设备
	 */
	function handleSaveInfo(data) {
		if(data.length != 0){
			saveUserequipment(data).then(res => {
				if (res.code === 200) {
					init();
					uni.showToast({
						icon: "success",
						title: "设备绑定成功"
					})
				}
			})
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100%;
		background-color: rgba(245, 245, 245, 1);

		.title {
			width: 100%;
			font-size: 42rpx;
			font-weight: bold;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}

		.prompt {
			width: 100%;
			text-align: center;
			color: lightgrey;
		}

		.bottom {
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;

			.btn {
				background-color: rgba(0, 226, 166, 1);
				color: white;
				margin: 20rpx auto;
				width: 44%;

			}
		}

		.equipmentList {
			width: 94%;
			height: calc(90% - 144rpx);
			background-color: rgba(255, 255, 255, 1);
			margin: 10rpx auto;
			padding: 20rpx 0 0 0;
			border-radius: 18rpx;
			overflow: auto;

			.scanEquiementList {
				height: 380rpx;
				width: 94%;
				border-top: 1rpx solid #999;
				margin: 0 auto;
				justify-content: flex-start;
				align-content: flex-start;
				flex-wrap: wrap;
				overflow: auto;

				.equipmentNo {
					padding: 0 10rpx;
					margin: 10rpx 24rpx;
					justify-content: space-between;
					align-items: center;
					width: 260rpx;
					height: 60rpx;
					border: 1px solid rgba(213, 213, 213, 1);
					border-radius: 6rpx;
				}
			}

			.entry {
				justify-content: center;
				margin: 10rpx 0;
				position: relative;

				.equipmentList-item {
					position: relative;
					width: 75%;
					height: 80rpx;
					color: rgba(255, 255, 255, 1);
					background-color: rgba(22, 132, 252, 1);
					border-radius: 12rpx;
					text-align: center;
					line-height: 80rpx;
				}

				.unbind {
					position: relative;
					z-index: 2;
					margin-left: -15%;
					width: 15%;
					height: 80rpx;
					color: rgba(255, 255, 255, 1);
					background-color: red;
					border-radius: 0 12rpx 12rpx 0;
					text-align: center;
					line-height: 80rpx;
					visibility: hidden;
				}

				.visible {
					visibility: visible;
				}
			}
		}

	}
</style>