ezhizao_dms_app/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>
</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/equipmentGroup.js.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)
	onLoad(() => {
		init();
	})

	/**
	 * 页面初始化
	 */
	function init() {
		getUserequipmentList(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);
	}

	function handleScanCode() {
		// 引入原生插件
		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: "error",
						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
				} 
			}
		);
	}

	function handleSubmit() {
		handleSaveInfo(userEquipmentData.value);
	}

	/**
	 * 绑定设备
	 */
	function handleSaveInfo(data) {
		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>