饮用水框架页面
This commit is contained in:
庞东林
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<a-form
|
||||
:model="where"
|
||||
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="水源类型:">
|
||||
<a-select v-model:value="where.drinkingWaterCountyAnalyse.waterSourceType" allowClear showSearch>
|
||||
<a-select-option :value="'1'">地表水</a-select-option>
|
||||
<a-select-option :value="'2'">地下水</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="水源状态:">
|
||||
<a-select v-model:value="where.drinkingWaterCountyAnalyse.drinkingWaterType" allowClear showSearch>
|
||||
<a-select-option :value="'1'">在用</a-select-option>
|
||||
<a-select-option :value="'2'">备用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="起始时间:" name="monitorStartTime" >
|
||||
<a-month-picker
|
||||
v-model:value="where.monitorStartTime"
|
||||
valueFormat="YYYY-MM"
|
||||
:locale="locale"
|
||||
placeholder="请输入起始时间"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="结束时间:" name="monitorEndTime">
|
||||
<a-month-picker
|
||||
v-model:value="where.monitorEndTime"
|
||||
valueFormat="YYYY-MM"
|
||||
:locale="locale"
|
||||
placeholder="请输入结束时间"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="断面名称:">
|
||||
<a-select v-model:value="where.drinkingWaterCountyAnalyse.sectionNames" mode="multiple" allowClear showSearch>
|
||||
<a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item label="监测指标:">
|
||||
<div class="input-item" @click="showModal">
|
||||
<a-checkbox
|
||||
:checked="checkAll"
|
||||
:indeterminate="indeterminate"
|
||||
>
|
||||
全选
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
||||
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="searchData">查询</a-button>
|
||||
<a-button @click="reset">重置</a-button>
|
||||
<a-button @click="exportFile">导出Excel</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-modal v-model:visible="visible" width="760px" title="监测指标" @ok="handleOk" @cancel="handleCancel">
|
||||
<div :style="{ borderBottom: '1px solid #E9E9E9', marginBottom: '5px', paddingBottom: '5px' }">
|
||||
<a-checkbox
|
||||
v-model:checked="checkAll"
|
||||
:indeterminate="indeterminate"
|
||||
@change="onCheckAllChange"
|
||||
>
|
||||
全选
|
||||
</a-checkbox>
|
||||
</div>
|
||||
|
||||
<a-checkbox-group
|
||||
style="width: 100%"
|
||||
@change="handleChange"
|
||||
v-model:value="filter"
|
||||
>
|
||||
<a-row>
|
||||
<a-col
|
||||
:span="8"
|
||||
v-for="item in filterColumns"
|
||||
:key="item.dataIndex"
|
||||
>
|
||||
<a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
|
||||
</a-modal>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
|
||||
import { filterColumns } from "./../colums/base";
|
||||
import { listInfo } from "@/api/ecology/water/river-plcae";
|
||||
export default {
|
||||
name: "city-search",
|
||||
props: {
|
||||
// 表格搜索条件
|
||||
searchForm: {
|
||||
typeof: Object,
|
||||
default: function () {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
filterKeys:{
|
||||
typeof: Object,
|
||||
default: function () {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
visiable:{
|
||||
typeof:Boolean
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indeterminate:false,
|
||||
checkAll: true,
|
||||
where: {
|
||||
drinkingWaterCountyAnalyse:{}
|
||||
},
|
||||
filter:[],
|
||||
columnsKey:[],
|
||||
locale,
|
||||
visible: false,
|
||||
filterColumns: filterColumns,
|
||||
newCloumns:[],
|
||||
oldCloumns:[],
|
||||
filterItem:[],
|
||||
sectionInfo:[]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
searchForm(newV) {
|
||||
this.where = newV;
|
||||
},
|
||||
filterKeys(newKeys){
|
||||
this.initFilter(newKeys)
|
||||
},
|
||||
// 监控修改全选框图标状态
|
||||
filter(newV){
|
||||
if(newV.length !== this.filterColumns.length){
|
||||
this.checkAll = false
|
||||
this.indeterminate = false
|
||||
if(newV.length){
|
||||
this.indeterminate = true
|
||||
}
|
||||
}else{
|
||||
this.checkAll = true
|
||||
this.indeterminate = false
|
||||
}
|
||||
},
|
||||
// 监听组件显示
|
||||
visiable(val){
|
||||
console.log('change',val)
|
||||
this.emitData(val)
|
||||
}
|
||||
},
|
||||
|
||||
created(){
|
||||
listInfo().then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
this.visibleWater = true;
|
||||
this.sectionInfo = res.data.data
|
||||
} else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.where = this.searchForm;
|
||||
this.filter = filterColumns.map((item) => item.dataIndex);
|
||||
this.columnsKey = [...this.filter]
|
||||
// 生成复选框
|
||||
this.newCloumns = [...filterColumns];
|
||||
// 缓存复选框
|
||||
this.oldCloumns = [...filterColumns];
|
||||
// this.$emit("buildColumns", filterColumns);
|
||||
// 根据父级传回来需要去掉勾的值映射到复选框
|
||||
this.initFilter(this.filterKeys);
|
||||
// 将父级回传的搜索条件上传父级进行页面搜索
|
||||
this.emitData(true)
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
emitData(val){
|
||||
// if(val && this.where.startTime && this.where.endTime){
|
||||
if(val){
|
||||
this.searchData();
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化选择
|
||||
initFilter(newKeys){
|
||||
let filterIndex =this.filterColumns.map(item=>(item.dataIndex))
|
||||
const newList = filterIndex.filter((item) => {
|
||||
return newKeys.indexOf(item) == -1
|
||||
})
|
||||
this.filter = newList;
|
||||
},
|
||||
|
||||
onCheckAllChange (e) {
|
||||
this.filter = e.target.checked ? filterColumns.map((item) => item.dataIndex) : []
|
||||
|
||||
},
|
||||
|
||||
handleChange(e) {
|
||||
let newCloumns = [];
|
||||
filterColumns.forEach((item) => {
|
||||
const index = e.indexOf(item.dataIndex);
|
||||
if (index > -1) {
|
||||
newCloumns.push(item);
|
||||
}
|
||||
});
|
||||
this.newCloumns = newCloumns;
|
||||
},
|
||||
reset() {
|
||||
this.where = {
|
||||
checked: 1,
|
||||
limit: 10,
|
||||
page: 1,
|
||||
drinkingWaterCountyAnalyse:{
|
||||
regionLevel: this.where.drinkingWaterCountyAnalyse.regionLevel
|
||||
}
|
||||
}
|
||||
this.searchData();
|
||||
},
|
||||
searchData() {
|
||||
this.where.filter = [...this.filter]
|
||||
this.$emit("search", this.where);
|
||||
},
|
||||
exportFile() {
|
||||
this.$emit("exportFile");
|
||||
},
|
||||
showModal() {
|
||||
this.visible = true;
|
||||
},
|
||||
handleCancel(){
|
||||
this.visible = false;
|
||||
// 如果是取消，则还原上次勾选项
|
||||
this.filter = this.oldCloumns.map(item=>item.dataIndex)
|
||||
},
|
||||
handleOk() {
|
||||
this.visible = false;
|
||||
this.oldCloumns = [...this.newCloumns];
|
||||
// 选中的所有项
|
||||
// console.log(this.columnsKey)
|
||||
|
||||
// 得到没有选中的项，然后在表头将没选中项去除
|
||||
let filterKey = []
|
||||
this.columnsKey.forEach(key=>{
|
||||
if(this.filter.indexOf(key) == -1){
|
||||
filterKey.push(key)
|
||||
}
|
||||
})
|
||||
|
||||
this.$emit("filterColumns", filterKey);
|
||||
|
||||
// this.$emit("selectKeys", this.columnsKey);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-calendar-picker {
|
||||
width: 100%;
|
||||
}
|
||||
.input-item {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-variant: tabular-nums;
|
||||
list-style: none;
|
||||
font-feature-settings: "tnum";
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 4px 11px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user