bonus-material-app/src/pages/dateUpdate/index.vue

<template>
	<uni-nav-bar fixed :border="false" background-color="#dcf4ff" color="black" status-bar title="日期更新"><template
			v-slot:left>
			<view style="display: flex; align-items: center" @click="back">
				<!-- 图标 -->
				<uni-icons type="left" size="20" color="black"></uni-icons>
			</view>
		</template>
		<template v-slot:right>
			<view style="display: flex; align-items: center" @click="onQrCode">
				<!-- 文本 -->
				<text>二维码</text>
			</view>
		</template>
	</uni-nav-bar>
	<div class="content">
		<div class="search">
			<uni-easyinput v-model="keyWord" placeholder="请输入设备编码"></uni-easyinput>
			<button type="primary" size="mini" @click="handleSearch"
				style="margin-left: 10px; background-color: #18bc37">
				查询
			</button>
		</div>

		<div v-if="typeList.length > 1" class="popup" @click="handlePopup">{{ typeName || '请选择对应机具' }}</div>

		<div class="search-item" v-if="typeList.length > 0">
			<div>设备类型：{{ formData.maType }}</div>
			<div>规格型号：{{ formData.typeName }}</div>
			<div>设备编码：{{ formData.code }}</div>
			<div>本次检修人员：{{ formData.repairer }}</div>
			<div>本次检修时间：{{ formData.repairTime }}</div>
			<div>下次检修时间：{{ formData.nextRepairTime }}</div>
		</div>
		<button v-if="typeList.length > 0" type="primary" size="mini" @click="handleSubmit"
			style="margin-top: 30px; background-color: #18bc37; width: 100%">
			确认修改
		</button>
	</div>

	<uni-popup ref="popup" border-radius="5px 5px 5px 5px" background-color="#fff">
		<div v-for="(item, index) in typeList" :key="index" class="popup-item" @click.stop="handleCheck(item)">
			<div>{{ item.name }}</div>
			<uni-data-checkbox v-model="item.isChecked" :localdata="range"
				@change="handleCheck(item, $event)"></uni-data-checkbox>
		</div>
	</uni-popup>
	<ScanQrCode ref="scanQrCodeRef" @scanSuccess="handleScanSuccess" @scanError="handleScanError" />
</template>

<script setup>
	import {
		getWsMaInfoList,
		updateCheckTime
	} from '@/services/wsMaInfo/wsMaInfo.js'
	import { onLoad } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue'
	import ScanQrCode from '@/pages/devicesSearch/ScanQrCode'

	const keyWord = ref('')
	const formData = reactive({
		id: '',
		maType: '', // 设备类型
		typeName: '', // 规格型号
		code: '', // 设备编码
		repairer: '', // 维修人
		repairTime: '', // 维修时间
		nextRepairTime: '', // 下次维修时间
	})
	const scanQrCodeRef = ref()
	const popup = ref()
	const typeName = ref('')
	const typeList = ref([])
	const range = ref([{ value: 0, text: '' }])

	onLoad(() => {
		console.log('onLoad')
	})

	const back = () => {
		uni.navigateBack({
			delta: 1,
		})
	}

	const onQrCode = () => {
		console.log('🚀 ~ onQrCode ~ 二维码:')
		if (scanQrCodeRef.value) scanQrCodeRef.value.scanQrCode()
	}

	const handleSearch = () => {
		console.log('🚀 ~ handleSearch ~ 查询:', keyWord.value)
		// typeList.value =[];
		reset()
		getWsMaInfoList({ maCode: keyWord.value }).then(res => {
			if (res.code === 200 && res.data && res.data.length > 0) {
				typeList.value = res.data.map(option => {
					return {
						id: option.id,
						name: option.maName + '-' + option.maModel + '-' + option.maCode,
						isChecked: 1,
						item: option

					}
				});
				if (res.data.length === 1) {
					console.log('🚀 ~ getWsMaInfoList ~ res.data.length:', res.data.length)
					formData.id = res.data[0].id
					formData.code = res.data[0].maCode
					formData.maType = res.data[0].maName
					formData.nextRepairTime = res.data[0].nextCheckTime
					formData.repairTime = res.data[0].thisCheckTime
					formData.typeName = res.data[0].maModel
					formData.repairer = res.data[0].repairMan
					console.log('🚀 ~ getWsMaInfoList ~ formData:', formData)
				}
			}
		}).catch(error => {
			console.log(error)
		})
	}

	const handlePopup = () => {
		console.log('🚀 ~ handlePopup ~ 弹窗:')
		popup.value.open()
	}

	const handleCheck = (item) => {
		console.log('🚀 ~ handleCheck ~ 单选:', item)
		// 循环 typeList 将当前点击的 item.isChecked 设置为 0 其他设置 1
		typeList.value.forEach((i) => {
			i.isChecked = i.id === item.id ? 0 : 1
		})

		formData.id = item.item.id
		formData.code = item.item.maCode
		formData.maType = item.item.maName
		formData.nextRepairTime = item.item.nextCheckTime
		formData.repairTime = item.item.thisCheckTime
		formData.typeName = item.item.maModel
		formData.repairer = item.item.repairMan
		typeName.value = item.name

		popup.value.close()
	}

	// 处理扫描成功事件
	const handleScanSuccess = (result) => {
		keyWord.value = result?.data?.split('?qrcode=')[1] || result?.data
		if (keyWord.value === '') {
			uni.showToast({ title: '扫码识别失败', icon: 'none' })
		} else {
			handleSearch()
		}
	}

	// 处理扫描失败事件
	const handleScanError = (error) => {
		console.error('扫描出错:', error.message)
		uni.showToast({ title: error.message, icon: 'none' })
	}
	// 清空表单
	const reset = () => {
		Object.keys(formData).forEach(key => {
			formData[key] = ''
		})
		typeName.value = ''
		typeList.value = []
	}

	// 提交
	const handleSubmit = () => {
		updateCheckTime(formData.id).then(res => {
			if(res.code === 200){
				uni.showToast({
					title: res.msg,
					icon: 'none',
				})

				handleSearch()
			}
		}).catch(error => {
			console.log(error)
		})
		
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 10px;

		.search {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30px;
		}

		.popup {
			background: #fff;
			margin: 0 0 30px;
			padding: 5px 10px;
		}

		.search-item {
			line-height: 1.9;
		}
	}

	.popup-item {
		padding: 10px;
		border-bottom: 1px solid #c7c9ce;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	::v-deep .uni-popup__wrapper {
		width: calc(100% - 20px);
		max-height: 80vh;
		overflow: auto;
	}

	::v-deep .uni-data-checklist {
		// 去掉 flex: 1
		flex: none;
	}
</style>