xytSk-App/pages/water/skWater/skWater.vue

152 lines
4.1 KiB
Vue

<template>
<view class="zbyq-box">
<view class="search-bar">
<u-search
shape="square"
:clearabled="true"
:showAction="false"
placeholder="请输入站点"
height="40px"
@change="inputChange"
v-model="formData.args"
></u-search>
<image
src="../../../static/images/filter.png"
style="width: 20px; height: 20px; margin-left: 20px;"
@click="popupOpen = true"
v-show="!popupOpen"
>
</image>
</view>
<view class="content">
<Table :list="list" />
</view>
<u-popup :show="popupOpen" mode="right" @close="popupOpen=false" >
<view style="padding: 30px 20px;">
<text style="font-weight: bold;">按类型</text>
<view style="margin-bottom: 10px; margin-left: -5px;">
<u-checkbox-group
v-model="formData.sources"
@change="checkboxChange"
>
<u-checkbox
:customStyle="{margin: '7px'}"
v-for="(item, index) in checkboxList1"
:key="index"
:label="item.name"
:name="item.value"
>
</u-checkbox>
</u-checkbox-group>
</view>
<view style="display: flex; margin-top: 195%;">
<u-button text="重置" class="bottom-btn1"
@click="formData = {...formData,sources}"></u-button>
<u-button text="确认" color="#d9001b" class="bottom-btn2" @click="popConfirm"></u-button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import Table from "./table.vue"
import {disType} from "../../utils/dicType.js"
const adcd = uni.getStorageSync('value').adcd
const type = disType(adcd)
export default {
props:{
stcd:String,
default:''
},
components:{
Table
},
data() {
return {
popupOpen:false,
sources:["SW","SK"],
checkboxList1: [
{
name: '水文',
value: "SW"
},
{
name: '水库',
value: "SK"
},
],
formData:{
args:'',
sources:["SW","SK"],
adcd:type == 1 ? undefined :adcd,
},
list:[], //搜索结果
saveList:[] //保存搜索结果
}
},
methods: {
inputChange(e){
console.log("e",e);
if(!e) this.list = this.saveList;
this.formData={...this.formData,value:e}
let filterData = this.list.filter(item => item.stnm.indexOf(e) > -1);
this.list = filterData;
},
checkboxChange(n) {
console.log('change', n);
this.formData = {...this.formData,sources:n};
},
popConfirm(){
this.popupOpen = false
this.getList()
},
async getList(){
try{
const {data} = await uni.$http.post(
"/gunshiApp/xfflood/reservoir/water/list",{...this.formData}
)
console.log("data",data);
if(data.code == 200){
this.list = [...data.data]
this.saveList = [...data.data]
}
}catch(e){
uni.$showMsg()
}
}
},
mounted() {
this.getList()
}
}
</script>
<style lang="scss" scoped>
.zbyq-box{
.search-bar{
display: flex;
align-items: center;
margin-top: 20px;
padding: 0 20px;
}
.content{
margin-top: 10px;
max-height: 580px;
overflow-y: auto;
}
.bottom-btn1{
width: 100px;
margin-left: 130px;
}
.bottom-btn2{
width: 100px;
margin-right: -12px;
margin-left: 10px;
}
}
</style>