jsy-app/pages/batch-control/share.vue

<template>
	<z-paging ref="paging" @query="queryList" v-model="dataList" :auto-show-system-loading="true"
		empty-view-text="抱歉，暂时还没有相关数据！" :pull-refresh="false">
		<template #top>
			<!-- 顶部导航栏 -->
			<custom-nav-bar :left="true" @leftClick="" title="分享">
				<template v-slot:right>
					<view class="fixed" @click="selectAll">
						<view style=" font-size: 0.9rem;">全选</view>
					</view>
				</template>
			</custom-nav-bar>
		</template>
		<view class="card-zd">
			<u-checkbox-group v-model="scenarioCheck" placement="column" @change="">
				<uni-collapse>
					<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true"
						v-for="item in dataList">
						<template v-slot:title>
							<view class="cards-title">
								<view>
									<view><u-checkbox :name="item.id" /></view>
									<view class="text">{{ item.groupName }}</view>
									<view>已选：{{item.wos.length}}</view>
								</view>
							</view>
						</template>
						<view class="content">
							<view class="cards-content">
								<view class="greybar" v-for="wo in item.wos">
									<view>出水口：<span>{{ wo.woName }}</span></view>
									<view v-if="wo.deviceTypeKey == 'valve'">三通阀
										<span>{{valveKey[wo.deviceTypeKey][wo.valveNo]}}</span>
										<span v-if="wo.angle">
											({{`${valveKey[wo.deviceTypeKey][wo.angle.valveNo]}-${wo.angle.anglePercent}`}})
										</span>
									</view>
									<view v-if="wo.deviceTypeKey == 'fiveValve'">五通阀
										<span>{{valveKey[wo.deviceTypeKey][wo.valveNo]}}开</span>
										<span v-if="wo.angle">
											({{`${wo.angle.angleKey == 'open' ? '开':'关'}-${wo.angle.anglePercent}`}})
										</span>
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</u-checkbox-group>
		</view>
		<view class="form-btn">
			<u-button size="large" type="success" @click="showPopup" :disabled="!scenarioCheck.length">确认</u-button>
			<u-button size="large" @click="uni.navigateBack()">取消</u-button>
		</view>
	</z-paging>

	<!-- 左侧分组弹出层 -->
	<u-popup mode="bottom" :show="showPop" @close="closePopup" :closeOnClickOverlay="true">
		<view style="padding-bottom: 46px; background: #f3f3f3;padding: 10px;">
			<view style="text-align: center;font-weight: bold;margin-bottom: 10px;">
				<text>请选择分享用户</text>
			</view>
			<view v-if="landUsers.length" style="max-height: 50vh;overflow-y: auto; display:grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;">
				<u-checkbox-group v-model="userCheck" placement="column" @change="">
					<view v-for="(item, index) in landUsers">
						<u-checkbox v-if="item.userId != userId" :key="index" :label="item.userName"
							:name="item.userId">
						</u-checkbox>
					</view>
				</u-checkbox-group>
			</view>
			<view style="display: flex;margin-top: 10px;">
				<u-button type="success" size="large" text="确定" @click="confirm"
					 :disabled="!userCheck.length" />
				<u-button size="large" text="取消" @click="closePopup" />
			</view>
		</view>
	</u-popup>
</template>
<script>
	import store from '@/store'
	const user = store.state.user.user;
	import plugins from "@/plugins";
	import * as isApi from '@/api/irrigate/irrigateScenario.js'
	import {
		getLandUser
	} from '@/api/system/land.js'

	export default {
		data() {
			return {
				landId: null,
				dataList: [],
				valveKey: {
					"valve": {
						"1": "①开",
						"2": "②开",
						"3": "全开 ",
						"4": "全关",
					},
					"fiveValve": {
						"1": "①",
						"2": "②",
						"3": "③",
						"4": "④",
					}
				},
				userId: user.userId,
				showPop: false,
				landUsers: [],
				scenarioCheck: [],
				userCheck: [],
			}
		},
		onLoad(par) {
			this.landId = par.landId;
		},
		onShow() {},
		mounted() {},
		methods: {
			queryList() {
				isApi.getBatchControlList(this.landId).then(res => {
					if (res.data) {
						this.$refs.paging.completeByTotal(res.data.groups || []);
					} else {
						this.$refs.paging.completeByTotal([]);
					}
				});
			},
			selectAll() {
				let ids = [];
				this.dataList.forEach(item => {
					ids.push(item.id);
				})
				this.scenarioCheck = ids;
			},
			showPopup() {
				getLandUser({
					landId: this.landId,
					typeId: 2,
					enableControl: '0'
				}).then(res => {
					this.landUsers = res.rows;
				});

				this.showPop = true;
			},
			closePopup() {
				this.showPop = false;
			},
			confirm() {
				isApi.saveBatchControlShare({
					ids: this.scenarioCheck,
					shareUserIds: this.userCheck.join(',')
				}).then(res => {
					plugins.modal.msg("分享成功")
					this.cancel();
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	uni-app,
	uni-page,
	uni-page-wrapper,
	uni-page-body {
		padding-bottom: 38px !important;
	}

	.form-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		gap: 0px;
	}

	::v-deep .uni-forms {
		margin-right: 10px;
		padding: 0 !important;
	}

	::v-deep .uni-forms-item {
		margin-bottom: 0 !important;
	}

	::v-deep .uni-forms-item__label {
		min-width: 0 !important;
		width: auto !important;
		font-size: 0.8rem;
		height: inherit;
		padding: 0;
	}

	::v-deep .uni-easyinput__content-input {
		height: 20px;
		width: 50px;
		padding-left: 5px !important;
	}
</style>