jsy-app/pages/irrigation/scenario/scenarioGroup.vue

<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="true" leftText="" @leftClick="" :title="formData.scenarioName">
		<template v-slot:right>
			<view class="fixed">
				<view align="right" class="iconfont icon-liebiao icon" @click="groupPop = true"></view>
			</view>
		</template>
	</custom-nav-bar>
	<view class="text-intel" v-if="formData">
		<view>
			<span class="text">
				{{formData.groups[gIndex].groupName}}
			</span>
		</view>
		<view>
			<span>
				时长：{{formData.groups[gIndex].irrigateDuration}}h
			</span>
		</view>
		<view>
			<!-- <span>已选：{{formData.groups[gIndex].wos.length}}</span> -->
			<span>已选：{{Object.keys(select).length}}</span>
		</view>
	</view>

	<view class="card">
		<uni-collapse>
			<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true"
				v-for="item in woData">
				<template v-slot:title>
					<view class="cards-title">
						<view>
							<view class="iconfont icon-nongtian icon"></view>
							<view class="text" style="color: #333;">
								{{ item.landGroup }}{{ item.branchCanalCode }}
							</view>
						</view>
					</view>
				</template>
				<view class="content" v-if="item.children">
					<uni-forms ref="baseForm">
						<view class="cards-content">
							<view class="greybar-box" v-for="child in item.children">
								<view class="title">
									<view>出水口：<span>{{child.showName}}</span></view>
									<view v-if="child.deviceRelation">阀门：
										<span v-if="[2,3].includes(child.deviceRelation.deviceTypeId)">
											三通阀
										</span>
										<span v-if="[13].includes(child.deviceRelation.deviceTypeId)">
											五通阀
										</span>
									</view>
								</view>
								<uni-forms-item v-if="child.deviceRelation">
									<view class="check-box" v-if="[2,3].includes(child.deviceRelation.deviceTypeId)"
										v-for="vItem in valve">
										<u-button size="small" :text="vItem.text" @click="itemChange(child,vItem)"
											:type="(select[child.id]?.valveNo == vItem.valveNo || selected[`${child.id}_${vItem.valveNo}`]) ? 'success':'info'" />
										<uni-tag circle="true" type="warning"
											v-if="selected[`${child.id}_${vItem.valveNo}`]"
											:text="selected[`${child.id}_${vItem.valveNo}`].text" />
									</view>
									<view class="check-box" v-else-if="[13].includes(child.deviceRelation.deviceTypeId)"
										v-for="vItem in fiveValve">
										<u-button size="small" :text="vItem.text" @click="itemChange(child,vItem)"
											:type="(select[child.id]?.valveNo == vItem.valveNo || selected[`${child.id}_${vItem.valveNo}`]) ? 'success':'info'" />
										<uni-tag circle="true" type="warning"
											v-if="selected[`${child.id}_${vItem.valveNo}`]"
											:text="selected[`${child.id}_${vItem.valveNo}`].text" />
									</view>
								</uni-forms-item>
								<view class="no-data" v-else>
									<view class="iconfont icon-wbd"></view>未绑定阀门
								</view>
							</view>
						</view>
					</uni-forms>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
	<view class="bottom-btn">
		<u-button type="success" size="large" text="下一组" @click="nextGroup"
			v-if="formData.groups.length > (gIndex+1)" />
		<u-button type="success" size="large" text="保存" @click="confirm" v-else />
	</view>

	<!-- 左侧分组弹出层 -->
	<u-popup mode="left" :show="groupPop" @close="groupPop = false">
		<view style="width: 95vw;padding-bottom: 46px;">
			<view class="text-intel">
				<view>
					<span>轮灌组：</span>
					<span class="font-green">{{formData.groups.length}}</span>
				</view>
				<view>
					<span>总时长：</span>
					<span class="font-green">{{`${formData.irrigateTotalDuration} h`}}</span>
				</view>
			</view>
			<view class="card">
				<uni-collapse>
					<uni-collapse-item title-border="none" :border="false" :show-arrow="false"
						v-for="item in formData.groups">
						<template v-slot:title>
							<view class="cards-title">
								<view>
									<view class="text">{{item.groupName}}</view>
									<view style="margin-left: 10px;" >
										<span>时长：</span>
										<span class="font-orange" style="text-decoration: underline;">{{`${formData.irrigateTotalDuration} h`}}</span>
									</view>
									<view style="margin-left: 20px;">已选：{{item.wos.length}}</view>
								</view>
								<view class="title-r">
									<view @click.stop="groupEdit">
										<u-button type="success" size="mini" text="编辑" />
									</view>
									<view>
										<u-button class="bg-red" type="success" size="mini" text="删除" />
									</view>
								</view>
							</view>
						</template>
						<view class="content">
							<view class="cards-content" v-if="item.wos.length">
								<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>
									</view>
									<view v-else-if="wo.deviceTypeKey == 'fiveValve'">五通阀
										<span>{{valveKey[wo.deviceTypeKey][wo.valveNo]}}</span>
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<u-button type="success" size="normal" style="width: 30%;margin-top: 20px;" @click="confirm" text="新增轮灌组" />
			<view style="position: absolute;bottom: 0; width: 100%;">
				<u-button type="success" size="large" text="关闭" />
			</view>
		</view>
	</u-popup>
</template>

<script>
	import store from '@/store'
	const user = store.state.user.user;
	import {
		getWaterOutletPermissionList
	} from "@/api/system/landWaterOutletPermission";

	export default {
		data() {
			return {
				formData: null,
				gIndex: 0, //当前编辑的索引
				woData: [], //出水口列表
				// 三通阀
				valve: [{
						text: '①开',
						valveNo: 1,
						angleKey: "open1",
						deviceTypeKey: "valve",
					},
					{
						text: '②开',
						valveNo: 2,
						angleKey: "open2",
						deviceTypeKey: "valve",
					}
				],
				// 多通阀
				fiveValve: [{
						text: '①开',
						valveNo: 1,
						angleKey: "open",
						deviceTypeKey: "fiveValve",
					},
					{
						text: '②开',
						valveNo: 2,
						angleKey: "open",
						deviceTypeKey: "fiveValve",
					},
					{
						text: '③开',
						valveNo: 3,
						angleKey: "open",
						deviceTypeKey: "fiveValve",
					},
					{
						text: '④开',
						valveNo: 4,
						angleKey: "open",
						deviceTypeKey: "fiveValve",
					}
				],
				valveKey: {
					"valve": {
						"1": "①开",
						"2": "②开",
						"3": "全开 ",
						"4": "全关",
					},
					"fiveValve": {
						"1": "①开",
						"2": "②开",
						"3": "③开",
						"4": "④开",
					}
				},
				select: {}, //当前选择
				selected: {}, //往期选择
				groupPop: false, //组弹窗
				groupEditPop: false, //组编辑
			};
		},
		onLoad(par) {
			this.formData = JSON.parse(par.item);
			if (this.formData.id) {

			} else {
				let groupArr = [];
				const irrigateDuration = (this.formData.irrigateTotalDuration / this.formData.groupNum).toFixed(1);
				for (var i = 1; i <= this.formData.groupNum; i++) {
					groupArr.push({
						id: undefined,
						title: "新增",
						landId: this.formData.landId,
						userId: user.userId,
						shareUserIds: undefined,
						irrigateScenarioId: this.formData.id,
						groupName: `轮灌组${i}`,
						irrigateDuration: irrigateDuration,
						sort: i,
						delFlag: "0",
						wos: []
					});
				}
				this.formData.groups = groupArr;
			}
			console.error("this.formData:", this.formData);
		},
		onShow() {},
		mounted() {
			uni.showLoading();
			// 初始化出水口数据
			getWaterOutletPermissionList(this.formData.landId).then(res => {
				uni.hideLoading()
				if (res.data) {
					this.woData = res.data;
				} else {
					this.woData = [];
				}
			});
		},
		methods: {
			// 选中数据
			itemChange(wo, vItem) {
				if (this.selected[`${wo.id}_${vItem.valveNo}`]) {
					this.$showConfirm("更换到当前轮灌组?").then(res => {
						if (res.confirm) {
							//删除之前存储的组中的数据
							this.removeWo(this.selected[`${wo.id}_${vItem.valveNo}`].gIndex, wo.id, vItem.valveNo);
							delete this.selected[`${wo.id}_${vItem.valveNo}`];

							//添加新选中的
							this.setSelect(wo, vItem);
						}
					})
					return;
				}
				//添加新选中的
				this.setSelect(wo, vItem);
			},
			//添加选中数据
			setSelect(wo, vItem) {
				vItem["item"] = wo;
				if (this.select[wo.id]) {
					this.removeWo(this.gIndex, wo.id, this.select[wo.id].valveNo);
					if (this.select[wo.id].valveNo == vItem.valveNo) {
						this.select[wo.id] = null;
						return;
					}
				}
				this.addWo(this.gIndex, vItem, wo)
				this.select[wo.id] = vItem;
			},
			//新增出水口
			addWo(index, vItem, wo) {
				const group = this.formData.groups[index];
				this.formData.groups[index].wos.push({
					landId: group.landId,
					irrigateScenarioId: group.irrigateScenarioId,
					irrigateGroupId: group.id,
					wogId: wo.landGroupId || -1,
					wogName: `${wo.landGroup || ''}${wo.branchCanalCode || ''}`,
					woId: wo.id,
					woName: wo.showName,
					deviceTypeKey: vItem.deviceTypeKey,
					valveNo: vItem.valveNo,
					angleKey: vItem.angleKey,
					sort: 1,
				});
			},
			//删除出水口
			removeWo(index, woId, valveNo) {
				if (!this.formData.groups[index].wos.length) {
					return;
				}
				const _index = this.formData.groups[index].wos.findIndex(u => u.woId == woId && u.valveNo == valveNo);
				if (_index != -1) {
					this.formData.groups[index].wos.splice(_index, 1);
				}
			},
			// 下一组
			nextGroup() {
				this.savaSelectData();
				this.select = {};
				this.gIndex++;
			},
			savaSelectData() {
				let selected = {};
				for (var key in this.select) {
					if (this.select[key]) {
						const group = this.formData.groups[this.gIndex];
						selected[`${key}_${this.select[key].valveNo}`] = {
							text: group.groupName, //页面显示
							gIndex: this.gIndex, //轮灌组索引
						};
					}
				}
				this.selected = Object.assign({}, this.selected, selected)
			},
			groupEdit() {
				this.groupPop = false;
				this.groupEditPop = true;
			},
			// 保存
			confirm() {
				console.error("this.selected:", this.formData)
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-app,
	uni-page,
	uni-page-wrapper,
	uni-page-body {
		padding-bottom: 38px !important;
	}
::v-deep.u-popup__content{background-color: #f3f3f3 !important;}
.greybar>uni-view:first-child{color:#303133 ;}
.greybar view>span{font-weight: normal;}
	// 按钮列表
	::v-deep .uni-forms-item__content {
		display: flex;
		flex: none;
		width: 100%;

		.check-box {
			padding: 10px 0;
			flex: 1;
			display: flex;
			align-items: center;
			flex-direction: column;

			.uni-tag {
				margin-top: 5px;
			}

			.u-button--small {
				width: 50px;
				height: 26px;

				.u-button__text {
					font-size: 14px !important;
				}
			}

			.u-button--info {
				border: 1px #DCDFE6 solid;
				background-color: #f5f5f5;
			}

		}
	}

	// 表单
	::v-deep .uni-forms {
		padding: 0 !important;
	}

	::v-deep .uni-forms-item__label {
		min-width: 0px !important;
	}

	.uni-forms-item {
		margin-bottom: 0;
	}

	::v-deep .uni-data-checklist .checklist-group {
		padding: 10px;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box {
		flex: 1;
		margin-right: 0px;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
		color: #39ac4f;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner {
		border-color: #39ac4f;
		background-color: #39ac4f;
	}
</style>