pms-app/pages/devide/multiple.vue

<template>
	<uni-popup class="device-popup" ref="deviceChoosePopRef" type="bottom" :is-mask-click="false"
		borderRadius="10px 10px 0 0">
		<z-paging class="page-nopadding z-page-popup" ref="paging" style="top: 100px;" v-model="dataList" @query="queryList">
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<template #top>
				<view class="page-top">
					<uni-row class="head-row">
						<uni-col :span="22" class="head-title justify-center">
							{{$t('device.selectDevice')}}
						</uni-col>
						<uni-col :span="2" class="head-cancel align-center justify-end" @click="oncancel">
							<uni-icons type="closeempty" color="#333"></uni-icons>
						</uni-col>
					</uni-row>
					<view class="choice-row flex-row flex-wrap align-center justify-start">
						<view class="choice-item align-center justify-center" v-for="item in chooseList"
							@click="onChooseDel(item)">
							{{item.deviceName}}
							<uni-icons class="choice-close-icon" type="closeempty" color="#fff"></uni-icons>
						</view>
					</view>
					<uni-row class="search-row flex-rowc justify-between">
						<uni-col :span="18">
							<uni-easyinput v-model="searchValue" :styles="inputStyles"
								:placeholderStyle="placeholderStyle"
								:placeholder="`${$t('operation.PleaseInput')}${$t('device.deviceName')}`">
							</uni-easyinput>
						</uni-col>
						<uni-col :span="6" class="flex-row justify-end">
							<button class="mini-btn" type="primary" size="mini" @click="searchList">
								{{ $t('operation.search')}}</button>
						</uni-col>
					</uni-row>
					<uni-row :gutter="2" class="table-header flex-row align-center justify-between">
						<uni-col :span="6" class="flex-row justify-center">
							{{ $t('device.deviceName')}}
						</uni-col>
						<uni-col :span="6" class="flex-row justify-center">
							{{ $t('device.assetCode')}}
						</uni-col>
						<uni-col :span="6" class="flex-row justify-center">
							{{ $t('device.department')}}
						</uni-col>
						<uni-col :span="6" class="flex-row justify-center">
							{{ $t('operation.createTime')}}
						</uni-col>

					</uni-row>
				</view>
			</template>
			<view class="page-table">
				<view class="table-content">
					<uni-row :gutter="2" class="item-row align-center" :class="{'choosed': chooseIds.includes(item.id)}"
						v-for="(item,index) in dataList" :key="index" @click="onChoose(item)">
						<uni-col :span="6" class="item-col flex-row justify-start">
							{{item.deviceName}}
						</uni-col>
						<uni-col :span="6" class="item-col flex-row justify-center">
							{{item.deviceCode}}
						</uni-col>
						<uni-col :span="6" class="item-col flex-row justify-center">
							{{item.deptName}}
						</uni-col>
						<uni-col :span="6" class="item-col flex-row justify-end">
							{{ item.createTime ? formatDate(item.createTime) : '' }}

						</uni-col>
					</uni-row>
				</view>
			</view>
			<template #bottom>
				<button style="border-radius: 0;" type="primary" @click="onSubmit">{{$t('operation.submit')}}</button>
			</template>
		</z-paging>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
	} from 'vue'
	import dayjs from 'dayjs'
	import {
		devicePage,
	} from '@/api/device';

	const searchValue = ref('')
	const placeholderStyle = ref('color:#797979;font-weight:500;font-size:16px')
	const inputStyles = reactive({
		backgroundColor: '#FFFFFF',
		color: '#797979',
	})
	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const dataList = ref([])

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		devicePage({
			pageNo,
			pageSize,
			commonParam: searchValue.value
		}).then(res => {
			// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
			paging.value.complete(res.data.list);
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}
	const searchList = () => {
		paging.value.reload()
	}
	const formatDate = (time) => {
		return dayjs(time).format('YYYY-MM-DD');
	}
	// ----------------------------------------------
	const deviceChoosePopRef = ref(null)
	const open = () => {
		deviceChoosePopRef.value.open()
	}
	const close = () => {
		deviceChoosePopRef.value.close()
	}
	// 提供外部方法
	const expose = {
		open,
	}
	defineExpose(expose)
	const emit = defineEmits(['multiple-devide-submit'])
	// ---------------------------------------------
	const chooseList = ref([])
	const chooseIds = computed(() => {
		// 返回chooseList的id组成新数组
		return chooseList.value.map(c => c.id)
	})
	const onChoose = (item) => {
		// 判断当前点击的设备是否存在于chooseList中，
		// 若存在，则从chooseList中删除，否则添加到chooseList中
		// 若不存在则添加
		const index = chooseList.value.findIndex((v) => v.id === item.id)
		if (index > -1) {
			// chooseList.value.splice(index, 1)
		} else {
			chooseList.value.push(item)
		}
	}
	const onChooseDel = (item) => {
		// 判断当前点击的设备是否存在于chooseList中，
		// 若存在，则从chooseList中删除，否则添加到chooseList中
		const index = chooseList.value.findIndex((v) => v.id === item.id)
		if (index > -1) {
			chooseList.value.splice(index, 1)
		}
	}
	const oncancel = () => {
		chooseList.value = []
		close()
	}
	const onSubmit = () => {
		emit('multiple-devide-submit', chooseList.value)
		chooseList.value = []
		close()
		// uni.$emit('multiple-devide-submit', chooseList.value)
		// uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	@import "@/style/choose-device.scss";
</style>