cbsl-app/pages/water/skWater/skWater.vue

168 lines
3.9 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"
>
</image>
</view>
<view class="content">
<Table :list="list" :height="height" />
</view>
<u-popup :show="popupOpen" mode="right" @close="popupOpen = false">
<view style="padding: 30px 20px; width: 250px">
<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; position: absolute; bottom: 20px; right: 20px"
>
<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: {
height: Number,
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:uni.getStorageSync('value').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() {
uni.showLoading({
title: "加载中...",
mask: true,
});
const adcd = uni.getStorageSync("value").adcd;
let newAdcd = adcd.endsWith("000000000") ? "" : adcd;
this.formData = { ...this.formData, adcd: newAdcd };
try {
const { data } = await uni.$http.post(
"/gunshiApp/xfflood/reservoir/water/list",
{ ...this.formData }
);
if (data.code == 200) {
uni.hideLoading();
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 {
width: 100%;
margin-top: 10px;
// max-height: 580px;
overflow-y: auto;
}
.bottom-btn1 {
width: 100px;
margin-left: 70px;
}
.bottom-btn2 {
width: 100px;
margin-right: -12px;
margin-left: 10px;
}
}
</style>