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

<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="true" leftText="" @leftClick="" title="轮灌组列表"></custom-nav-bar>
	<view>
		<view class="text-intel">
			<view style="width: 30%;">
				<span class="text" v-if="groupItem.groupName">轮灌组：{{groupItem.groupName}}</span>
				<span class="text" v-else>轮灌组：新增组</span>
			</view>
			<view style="width: 30%;">
				<span v-if="groupItem.irrigateDuration">时长：{{groupItem.irrigateDuration}}</span>
			</view>
			<view style="width: 30%;">
				<span>已选：{{ Object.keys(select.newV).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>全选</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)">
											<uni-data-checkbox mode="tag" :multiple="true" :localdata="valve"
												:value="select.newV[child.id]" @change="itemChange($event,child)" />
										</view>
										<view class="check-box" v-if="[13].includes(child.deviceRelation.deviceTypeId)">
											<uni-data-checkbox mode="tag" :multiple="true" :localdata="fiveValve"
												:value="select.newV[child.id]" @change="itemChange($event,child)" />
										</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="open" />
		</view>
	</view>

	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="保存" v-model="groupItem.groupName" placeholder="请输入方案名称!"
			:before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script>
	import store from '@/store'
	const user = store.state.user.user;
	import {
		woSort
	} from "@/utils/woSort"
	import {
		getWaterOutletPermissionList
	} from "@/api/system/landWaterOutletPermission";
	import * as isApi from '@/api/irrigate/irrigateScenario.js'

	const angleKey = {
		"valve": {
			"1": "open1",
			"2": "open2",
			"3": "open",
			"4": "close",
		},
		"fiveValve": {
			"1": "open",
			"2": "open",
			"3": "open",
			"4": "open",
		}
	}

	export default {
		data() {
			return {
				landId: null,
				groupItem: {}, //当前组
				woData: [], //出水口列表
				select: {
					oldV: {}, //旧的选中
					newV: {}, //当前选中
				}, //选中的数据
				// 三通阀
				valve: [{
						text: '①开',
						value: 1,
					},
					{
						text: '②开',
						value: 2,
					},
					{
						text: '全开',
						value: 3,
					}
				],
				// 多通阀
				fiveValve: [{
						text: '①开',
						value: 1,
					},
					{
						text: '②开',
						value: 2,
					},
					{
						text: '③开',
						value: 3,
					},
					{
						text: '④开',
						value: 4,
					}
				],
			}
		},
		onLoad(par) {
			if (par.landId) {
				this.landId = par.landId;
			}
			if (par.id) {
				isApi.getBatchControlInfo(par.id).then(res => {
					this.groupItem = res.data;
					if (this.groupItem.wos && this.groupItem.wos.length) {
						this.groupItem.wos.forEach(item => {
							this.select.oldV[item.woId] = [item.valveNo];
							this.select.newV[item.woId] = [item.valveNo];
						})
					}
				});
			} else {
				this.groupItem = {
					id: undefined,
					title: "新增",
					landId: this.landId,
					userId: user.userId,
					shareUserIds: undefined,
					irrigateScenarioId: undefined,
					groupName: undefined,
					irrigateDuration: undefined,
					sort: 1,
					delFlag: "0",
					wos: []
				}
			}

		},
		mounted() {
			uni.showLoading();
			// 初始化出水口数据
			getWaterOutletPermissionList(this.landId).then(res => {
				uni.hideLoading()
				if (res.data) {
					this.woData = res.data;
				} else {
					this.woData = [];
				}
			});
		},
		methods: {
			// 选中数据
			itemChange(e, item) {
				const setToRemove = new Set(this.select.oldV[item.id] || []);
				const value = e.detail.value.filter(x => !setToRemove.has(x));
				this.select.oldV[item.id] = value;
				this.select.newV[item.id] = value;
			},
			open() {
				if (Object.keys(this.select.newV).length) {
					this.$refs.inputDialog.open()
				} else {
					this.$toast("请选择出水口")
				}
			},
			close() {
				this.$refs.inputDialog.close();
			},
			confirm() {
				if (!this.groupItem.groupName) {
					this.$nextTick(() => {
						this.$toast("请输入方案名称!")
					})
					return;
				}
				this.close();

				const that = this;
				let woArr = [];

				const object = this.woData.reduce((acc, {
					children
				}) => {
					if (children && children.length) {
						children.forEach(item => {
							acc[item.id] = item;
						});
					}
					return acc;
				}, {});
				for (var key in that.select.newV) {
					if (that.select.newV[key].length && object[key]) {
						const item = object[key];
						const valveNo = that.select.newV[key][0];

						let deviceTypeKey = undefined;
						switch (item.deviceRelation.deviceTypeId) {
							case 2:
							case 3:
								deviceTypeKey = "valve";
								break;
							case 13:
								deviceTypeKey = "fiveValve";
								break;
						}
						woArr.push({
							landId: that.groupItem.landId,
							irrigateScenarioId: that.groupItem.irrigateScenarioId,
							irrigateGroupId: that.groupItem.id,
							wogId: item.landGroupId || -1,
							wogName: `${item.landGroup || ''}${item.branchCanalCode || ''}`,
							woId: item.id,
							woName: item.showName,
							deviceTypeKey: deviceTypeKey,
							valveNo: valveNo,
							angleKey: angleKey[deviceTypeKey][valveNo],
							sort: 1,
						});
					}
				}
				if (woArr.length) {
					woArr = woArr.slice().sort((v1, v2) => woSort(v1, v2, "woName"));
					woArr.forEach((item, index) => {
						item.sort = (index + 1);
					})
					that.groupItem.wos = woArr;
					isApi.saveBatchControl(that.groupItem).then(res => {
						uni.navigateBack();
					});
				} else {
					that.$toast("请选择出水口")
				}
			},
		},

	};
</script>

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

	::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;
	}


	// 按钮列表
	::v-deep .uni-forms-item__content {

		.check-box {

			.uni-data-checklist {
				.checklist-group {
					justify-content: space-around;

					.checklist-box.is--tag.is-checked {
						background-color: #39ac4f;
						border-color: #39ac4f;
					}

				}
			}

		}
	}
</style>