ezhizao_dms_app/pages/equipmentList/index.vue

<template>
	<view class="container">
		<view class="title">已绑设备</view>
		<view class="prompt">长按设备解绑</view>
		<view class="equipmentList">
			<view class="entry uni-row" v-for="(item,index) in equipmentList">
				<view class="equipmentList-item" @longpress="handleShowUnbind(item)">{{item.equipmentCode}}</view>
				<view :class="{'unbind': true,'visible': showUnbind === item}" @click="handleUnbind(item)">解绑</view>
			</view>
		</view>
		<view>
			<button class="btn" @click="handleScanCode">扫码</button>
		</view>
	</view>
	<dialog-confirm ref="confirm" @submit="handleConfirmUnbind" @reflush="reflush"></dialog-confirm>
</template>

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

	const showUnbind = ref({}) // 解绑按钮显示于隐藏
	const equipmentList = ref([]) // 回显用
	const userEquipmentData = ref({}) // 保存用
	const curBindDetails = ref([]) // 分配给员工的设备信息
	const curBindEquipmentIds = ref([]) // 分配给当前员工的设备id列表
	const userInfo = ref({}) // 当前登录用信息
	const confirm = ref(null)
	onLoad(() => {
		init();
	})

	/**
	 * 页面初始化
	 */
	function init() {
		let data = {}
		getUserInfo().then(response => {
			userInfo.value = response.data;
			data.userId = response.data.userId;
			getUserequipmentList(data).then(res => {
				equipmentList.value = res.rows;
			})
			getEquipmentUserList(data).then(res => {
				curBindDetails.value = res.rows;
				for (var i = 0; i < curBindDetails.value.length; i++) {
					curBindEquipmentIds?.value.push(curBindDetails.value[i].equipmentDetailId)
				}
			})
		})
	}
	
	/**
	 * 刷新
	 */
	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 handleScanCode() {
		uni.scanCode({
			scanType: ['qrCode'], // 条形码扫描
			onlyFromCamera: true, // 只允许相机扫码
			success: function(res) {
				let equipment = JSON.parse(res.result);
				for (let i = 0; i < equipmentList.value.length; i++) {
					// 判断是否已经扫码
					if (equipmentList.value[i].equipmentId == equipment.equipmentId) {
						uni.showToast({
							icon: "error",
							title: "载具已存在"
						})
						return;
					}
				}
				// 设置绑定员工的信息
				userEquipmentData.value = {
					...JSON.parse(res.result), 
					userId: userInfo.value.userId,
					nickName: userInfo.value.nickName
				}
				// 判断该设备是否分配给改员工
				if (!curBindEquipmentIds.value.includes(equipment.equipmentId)) {
					let msg = '当前员工没有分配到该设备,确定继续绑定吗?';		 
					confirm.value.open(msg);
				}else{
					handleSaveInfo();
				}
			}  
		});
	}

	/**
	 * 绑定设备
	 */
	function handleSaveInfo() {
		// console.log(userEquipmentData.value)
		saveUserequipment(userEquipmentData.value).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;
		}

		.btn {
			background-color: rgba(0, 226, 166, 1);
			color: white;
			margin: 20rpx auto;
			width: 80%;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}

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

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