jsy-app/pages/work/user/device.vue

<template>
	<view class="index-container">
		<z-paging class="paging" ref="paging" use-virtual-list bg-color="#F6F3F3" :loading-more-enabled="false">
			<template #top>
				<view class="search">
					<u-search placeholder="请输入出水口编号" @search="onSearchValue" @custom="onSearchValue"
						@clear="onSearchValue(null)" shape="square"></u-search>
				</view>
			</template>
			<view class="tips">
				<text style="color: red">注意：</text>
				<text>1.选中的开关为有控制权限;</text>
				<view style="float: right;margin-right: 15px;border: 1px solid;">
					<u-button style="height: 25px;" type="primary" size="small" :plain="true" :hairline="true"
						@click="handleChangeAllRow">
						{{ selectAll ? '反选':'全选' }}
					</u-button>
				</view>
			</view>
			<template #cell="{ item }">
				<view class="item-container">
					<view class="flex-text" style="padding: 10px;">
						<view class="flex-text-one">出水口：</view>
						<view>
							<text>{{ item.showName }}</text>
						</view>
						<view style="margin-left: 50px;height: 25px;">
							<u-checkbox-group class="checkBox" style="margin: 0;" iconPlacement="left" placement="row"
								@change="handleChangeRow($event, item)">
								<u-checkbox activeColor="#35842E" label="全选"
									v-if="item.landWaterOutletPermissionVo.deviceTypeKey == 'valve'"
									:checked="item.landWaterOutletPermissionVo.valveClose==0 && item.landWaterOutletPermissionVo.valveOpen==0 && item.landWaterOutletPermissionVo.valveOneOpen==0 && item.landWaterOutletPermissionVo.valveTwoOpen==0"
									:name="'all_'+item.id"></u-checkbox>
								<u-checkbox activeColor="#35842E" label="全选"
									v-if="item.landWaterOutletPermissionVo.deviceTypeKey == 'fiveValve'"
									:checked="item.landWaterOutletPermissionVo.valveOneOpen==0 && item.landWaterOutletPermissionVo.valveTwoOpen==0 && item.landWaterOutletPermissionVo.valveThreeOpen==0 && item.landWaterOutletPermissionVo.valveFourOpen==0"
									:name="'all_'+item.id"></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<u-gap height="1" bgColor="#D2D2D2"></u-gap>
					<view v-if="item.landWaterOutletPermissionVo.deviceTypeKey == 'valve'">
						<u-checkbox-group class="checkBox" iconPlacement="left" placement="row"
							@change="handleChange($event, item)">
							<u-checkbox activeColor="#35842E" label="全关"
								:checked="item.landWaterOutletPermissionVo.valveClose==0"
								name="valveClose"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="全开"
								:checked="item.landWaterOutletPermissionVo.valveOpen==0" name="valveOpen"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="①开 "
								:checked="item.landWaterOutletPermissionVo.valveOneOpen==0"
								name="valveOneOpen"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="②开"
								:checked="item.landWaterOutletPermissionVo.valveTwoOpen==0"
								name="valveTwoOpen"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view v-if="item.landWaterOutletPermissionVo.deviceTypeKey == 'fiveValve'">
						<u-checkbox-group class="checkBox" iconPlacement="left" placement="row"
							@change="handleChange($event, item)">
							<u-checkbox activeColor="#35842E" label="①开"
								:checked="item.landWaterOutletPermissionVo.valveOneOpen==0"
								name="valveOneOpen"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="②开"
								:checked="item.landWaterOutletPermissionVo.valveTwoOpen==0"
								name="valveTwoOpen"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="③开 "
								:checked="item.landWaterOutletPermissionVo.valveThreeOpen==0"
								name="valveThreeOpen"></u-checkbox>
							<u-checkbox activeColor="#35842E" label="④开"
								:checked="item.landWaterOutletPermissionVo.valveFourOpen==0"
								name="valveFourOpen"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</template>
			<template #bottom>
				<view class="button">
					<u-button style="width: 200px; height: 40px; border-radius: 4px" type="success" text="设 置"
						@click="submit" :disabled="disabled"></u-button>
				</view>
			</template>
		</z-paging>
	</view>
</template>
<script>
	import plugin from "@/plugins"
	import {
		getLandWaterOutletPermissionList,
		saveLandWaterOutletPermission
	} from "@/api/system/landWaterOutletPermission"
	export default {
		data() {
			return {
				landId: null,
				dataList: [],
				selectItem: {},
				tempValveData: {
					valveClose: true,
					valveOneOpen: true,
					valveOpen: true,
					valveTwoOpen: true,
					valveThreeOpen: true,
					valveFourOpen: true
				},
				selectAll: false,
				query: {
					landId: null,
					showName: null,
					userId: null
				},
				disabled: false
			}
		},
		onLoad(options) {
			this.landId = options.landId
			this.query.landId = options.landId
			this.query.userId = options.userId
			this.queryList();
		},
		methods: {
			queryList() {
				if (!this.query.landId) {
					return;
				}
				this.dataList = []
				getLandWaterOutletPermissionList(this.query)
					.then(res => {
						this.dataList = res.data;
						this.$refs.paging.complete(this.dataList)
					})
			},
			onSearchValue(e) {
				this.query.showName = e;
				this.queryList();
			},
			//提交
			submit() {
				let saveObj = {
					landWaterOutlets: this.dataList
				}
				plugin.modal.loading("设置中...")
				this.disabled = true;
				//获取该用户地块列表
				saveLandWaterOutletPermission(saveObj)
					.then(res => {
						plugin.modal.msgSuccess("设置成功!")
						//刷新列表
						this.queryList();
						this.disabled = false;
					})
			},
			//全选
			handleChangeAllRow() {
				this.selectAll = !this.selectAll;
				const selectAll = this.selectAll;
				const valveDefaults = {
					valveClose: 1,
					valveOpen: 1,
					valveOneOpen: 1,
					valveTwoOpen: 1,
					valveThreeOpen: 1,
					valveFourOpen: 1
				};
				const valveSettings = {
					valve: {
						true: {
							valveClose: 0,
							valveOpen: 0,
							valveOneOpen: 0,
							valveTwoOpen: 0,
							valveThreeOpen: 1,
							valveFourOpen: 1
						},
						false: {}
					},
					fiveValve: {
						true: {
							valveClose: 1,
							valveOpen: 1,
							valveOneOpen: 0,
							valveTwoOpen: 0,
							valveThreeOpen: 0,
							valveFourOpen: 0
						},
						false: {}
					}
				};
				this.dataList.forEach(item => {
					const deviceType = item.landWaterOutletPermissionVo.deviceTypeKey;
					const settings = valveSettings[deviceType][selectAll];
					Object.assign(item.landWaterOutletPermissionVo, valveDefaults, settings);
				});
			},
			//单行全选
			handleChangeRow(e, row) {
				const index = this.dataList.findIndex(x => x.id === row.id);
				if (index === -1) return; // 如果没有找到对应的行，直接返回
				const item = this.dataList[index];
				const permissions = item.landWaterOutletPermissionVo;
				const valveDefaults = {
					valveClose: 1,
					valveOpen: 1,
					valveOneOpen: 1,
					valveTwoOpen: 1,
					valveThreeOpen: 1,
					valveFourOpen: 1
				};
				const valveSettings = {
					valve: {
						valveClose: 0,
						valveOpen: 0,
						valveOneOpen: 0,
						valveTwoOpen: 0,
						valveThreeOpen: 1,
						valveFourOpen: 1
					},
					fiveValve: {
						valveClose: 1,
						valveOpen: 1,
						valveOneOpen: 0,
						valveTwoOpen: 0,
						valveThreeOpen: 0,
						valveFourOpen: 0
					}
				};
				const deviceType = item.landWaterOutletPermissionVo.deviceTypeKey;
				const settings = e && e.length ? valveSettings[deviceType] : {};
				Object.assign(permissions, valveDefaults, settings);
			},
			//当用户点击权限开关之后
			handleChange(e, obj) {
				let index = this.dataList.findIndex(x => x.id == obj.id);
				let item = this.dataList[index];
				this.judgeValue(e, item);
			},
			judgeValue(e, itemSample) {
				const valveProperties = [
					'valveClose',
					'valveOpen',
					'valveOneOpen',
					'valveTwoOpen',
					'valveThreeOpen',
					'valveFourOpen'
				];
				const permissions = itemSample.landWaterOutletPermissionVo;
				valveProperties.forEach(property => {
					permissions[property] = e.includes(property) ? 0 : 1;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-container {
		background-color: #f6f3f3;
		height: 100%;

		.search {
			background-color: white;
			padding: 10px;
		}

		.title {
			height: 50px;
			display: flex;
			padding: 15px 15px;
			background: white;
			align-items: center;

			text {
				font-size: 14px;
				margin-right: 10px;
			}
		}

		.list {
			height: calc(100vh - 150px - env(safe-area-inset-bottom));
			margin: 0px 10px;

			work-user-index-item {
				background-color: #f6f3f3;
			}
		}

		.button {
			padding: 10px 20px;
			display: flex;
			background: white;
		}

		.item-container {
			margin-top: 10px;
			background-color: white;
			padding-bottom: 10px;
		}

		.flex-text {
			display: flex;
			align-items: center;
			font-size: 16px;

			.flex-text-one {
				color: #939393;
				font-weight: bold;
			}
		}

		.checkBox {
			// margin: 20px 0px;
			margin: 10px 0px 0px 0px;
			display: flex;
			justify-content: space-around;
		}
	}

	.tips {
		padding: 10px;
		line-height: 20px;
		font-size: 14px;
		color: gray;
		// letter-spacing: 1px;
		background-color: #fff;
		border-top: 1px solid #eee;
	}

	::v-deep.zp-paging-container {
		background: #f3f3f3 !important;
	}
</style>