Xazn-app/pagesB/user/deviceGroup/devices.vue

<template>
	<page-meta>
		<navigation-bar :title="$tt('group.select')" title-align="center" background-color="#F1F3F9"
			front-color="#000000" />
	</page-meta>
	<view class="device-group-devices">
		<u-sticky zIndex="98" bgColor="#F1F3F9">
			<view class="nav-bar">
				<view v-if="!isSearch" style="margin-right: 20rpx;">
					<u-icon name="search" size="27" @click="isSearch = true"></u-icon>
				</view>
				<view v-else style="width: 100%;">
					<!-- #ifndef APP-NVUE -->
					<u-input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
						v-model="queryParams.deviceName" :placeholder="$tt('group.inputContent')" shape="circle"
						@clear="handleClearSearch" clearable>
					<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
							v-model="queryParams.deviceName" :placeholder="$tt('group.inputContent')" shape="circle"
							@clear="handleClearSearch" clearable>
						<!-- #endif -->
							<template slot="prefix">
								<u-icon name="search" color="rgb(192, 196, 204)" size="26"
									@click="isSearch = false"></u-icon>
							</template>
							<template slot="suffix">
								<view style="display: flex; flex-direction: row; align-items: center;">
									<span
										style="width: 0px; height: 14px; border: 1px solid #000000; opacity: 0.1;"></span>
									<span style="font-size: 14px; font-weight: 400; color: #3378FE; margin-left: 24rpx;"
										@click="handleSearch">{{$tt('common.search')}}</span>
								</view>
							</template>
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</view>
				<div class="right-wrap">
					<view @click="handleDeviceSelected()">{{$tt('common.save')}}</view>
				</div>
			</view>
		</u-sticky>

		<view class="group-wrap">
			<u--text lines="2" lineHeight="24" size="32rpx" :text="$tt('group.select')"
				margin="0 20rpx 20rpx"></u--text>
			<u-checkbox-group v-model="checkBoxValue" placement="column" iconPlacement="right" :borderBottom="false">
				<div class="item-wrap" v-for="(item, index) in dataList" :key="index">
					<u-checkbox :customStyle="{ margin: '40rpx 20rpx 60rpx' }" :label="item.deviceName"
						:name="item.deviceId" labelSize="28rpx" @change="checkboxChange($event, item)"></u-checkbox>
					<text class="des">
						{{item.serialNumber}}
					</text>
				</div>
			</u-checkbox-group>
		</view>
		<u-empty mode="list" :show="total == 0" marginTop="200"></u-empty>
		<u-loadmore :status="status" v-if="total > queryParams.pageSize" marginTop="10" />
	</view>
</template>

<script>
	import {
		getDeviceIds,
		updateDeviceGroups
	} from '@/apis/modules/group';
	import {
		listDeviceByGroup
	} from '@/apis/modules/device';

	export default {
		data() {
			return {
				isSearch: true,
				status: 'nomore', // 加载更多
				dataList: [], // 列表数据
				checkBoxValue: [], // 复选框值
				checkBoxValueOld: [],
				total: 0, // 总条数
				groupId: 0, // 分组ID
				queryParams: {
					pageNum: 1,
					pageSize: 20,
					deviceName: null,
				}
			};
		},
		onLoad(option) {
			this.groupId = option.groupId;
			this.queryParams.userId = option.groupUserId;
			this.getDeviceIdsByGroupId();
		},
		methods: {
			// 复选框改变事件
			checkboxChange(value, item) {
				let index = this.checkBoxValueOld.indexOf(item.deviceId);
				if (index == -1 && value) {
					this.checkBoxValueOld.push(item.deviceId); // 不存在且选中
				} else if (index != -1 && !value) {
					this.checkBoxValueOld.splice(index, 1); // 存在且取消选中
				}
			},
			// 更新分组下的设备
			handleDeviceSelected() {
				// 分组设备更新参数
				let deviceGroup = {
					groupId: this.groupId,
					deviceIds: this.checkBoxValueOld
				};
				updateDeviceGroups(deviceGroup).then(response => {
					uni.showToast({
						icon: 'success',
						title: this.$tt('group.update')
					});
					// 返回
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				});
			},
			// 获取分组下关联的设备ID数组
			getDeviceIdsByGroupId() {
				getDeviceIds(this.groupId).then(response => {
					this.checkBoxValue = response.data;
					this.checkBoxValueOld = response.data;
					this.getList();
				});
			},
			// 获取列表数据
			getList() {
				listDeviceByGroup(this.queryParams).then(response => {
					if (this.queryParams.pageNum == 1) {
						this.dataList = response.rows;
					} else {
						this.dataList = this.dataList.concat(response.rows);
					}
					this.total = response.total;
					uni.stopPullDownRefresh();
				});
			},
			// 搜索
			handleSearch(value) {
				this.dataList = [];
				this.queryParams.pageNum = 1;
				this.getList();
			},
			handleClearSearch() {
				this.handleSearch();
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.dataList = [];
				this.queryParams.pageNum = 1;
				this.getDeviceIdsByGroupId(); // Http获取列表
			},
			// 上拉加载
			onReachBottom() {
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize > this.total) {
					this.status = 'nomore';
				} else {
					this.getList();
					this.status = 'loading';
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}

	.device-group-devices {
		padding-bottom: 30rpx;

		.nav-bar {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 30rpx 28rpx;
			height: 84rpx;

			.right-wrap {
				margin-left: 30rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #3378FE;
				line-height: 18px;
				text-align: left;
				width: 70rpx;
			}
		}

		.group-wrap {
			padding: 10px;

			.item-wrap {
				position: relative;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				background-color: #fff;

				.des {
					position: absolute;
					top: 78rpx;
					left: 20rpx;
					font-size: 24rpx;
					line-height: 36rpx;
					color: #868686;
				}
			}
		}
	}
</style>