296 lines
7.7 KiB
Vue
296 lines
7.7 KiB
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.count).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>
|
||
<view class="check-box" v-if="child.deviceRelation">
|
||
<uni-forms-item 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)" />
|
||
</uni-forms-item>
|
||
<uni-forms-item v-else-if="[13].includes(child.deviceRelation.deviceTypeId)">
|
||
<uni-data-checkbox mode="tag" :multiple="true" :localdata="fiveValve"
|
||
:value="select.newV[child.id]" @change="itemChange($event,child)" />
|
||
</uni-forms-item>
|
||
<view>
|
||
<uni-tag text="标签" type="primary" size="mini" />
|
||
<uni-tag text="标签" type="primary" size="mini" />
|
||
<uni-tag text="标签" type="primary" size="mini" />
|
||
<uni-tag text="标签" type="primary" size="mini" />
|
||
</view>
|
||
</view>
|
||
<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: 90vw;">
|
||
<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="iconfont icon-nongtian icon"></view>
|
||
<view class="text" style="color: #333;">
|
||
{{item.groupName}}
|
||
</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>1-1</span></view>
|
||
<view>三通<span>①开</span></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
</view>
|
||
<view class="bottom-btn">
|
||
<u-button type="success" size="large" :text="confirmLabel" @click="confirm" />
|
||
</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 {
|
||
groupPop: false,
|
||
formData: null,
|
||
gIndex: 0, //当前编辑的索引
|
||
woData: [], //出水口列表
|
||
// 三通阀
|
||
valve: [{
|
||
text: '①开',
|
||
value: 1,
|
||
key: "open1"
|
||
},
|
||
{
|
||
text: '②开',
|
||
value: 2,
|
||
key: "open2"
|
||
}
|
||
],
|
||
// 多通阀
|
||
fiveValve: [{
|
||
text: '①开',
|
||
value: 1
|
||
},
|
||
{
|
||
text: '②开',
|
||
value: 2
|
||
},
|
||
{
|
||
text: '③开',
|
||
value: 3
|
||
},
|
||
{
|
||
text: '④开',
|
||
value: 4
|
||
}
|
||
],
|
||
select: {
|
||
oldV: {},
|
||
newV: {},
|
||
count: {},
|
||
groupV: {},
|
||
},
|
||
};
|
||
},
|
||
onLoad(par) {
|
||
console.error(par);
|
||
this.formData = JSON.parse(par.item);
|
||
console.error("this.formData:", this.formData);
|
||
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(e, item) {
|
||
const setToRemove = new Set(this.select.oldV[item.id]?.newV || []);
|
||
const value = e.detail.value.filter(x => !setToRemove.has(x));
|
||
|
||
if (this.select.oldV[item.id]) {
|
||
this.select.oldV[item.id].value = value;
|
||
// this.select.oldV[item.id].selected = value;
|
||
} else {
|
||
this.select.oldV[item.id] = {
|
||
value: value, //当前选中的
|
||
newV: [], //所有选中的
|
||
selected: [], //固定选中的
|
||
};
|
||
}
|
||
const newV = value.concat(this.select.oldV[item.id].selected);
|
||
this.select.newV[item.id] = newV;
|
||
this.select.oldV[item.id].newV = newV;
|
||
|
||
this.select.count[item.id] = value;
|
||
|
||
console.error("select:", this.select);
|
||
},
|
||
// 下一组
|
||
nextGroup() {
|
||
// 存储当前组的数据
|
||
let groupV = {};
|
||
for (var key in this.select.oldV) {
|
||
const value = this.select.oldV[key].value;
|
||
if (value.length) {
|
||
let obj = {};
|
||
obj[value[0]] = this.gIndex;
|
||
groupV[key] = obj;
|
||
|
||
this.select.oldV[key].selected = value.concat(this.select.oldV[key].selected);
|
||
}
|
||
}
|
||
this.select.groupV = Object.assign(this.select.groupV, groupV);
|
||
this.select.count = {};
|
||
this.gIndex++;
|
||
},
|
||
// 保存
|
||
confirm() {
|
||
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
</style> |