江河联动

src/views/water/river/statistic/avg-standard.vue

@@ -1,11 +1,11 @@
 <!-- 江河水查看数据页面-->
 <template>
   <div class="ele-body">
-    <a-card :bordered="false">
       <!-- 搜索表单 -->
       <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
         :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
         <a-row>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="断面名称">
             <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
               <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
@@ -13,18 +13,24 @@
               </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.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
               <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
               </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.importWaterBody" placeholder="请选择水系名称" allowClear showSearch>
               <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
               </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 allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
               <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
@@ -32,13 +38,17 @@
               </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-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime" :disabled-date="disabledDate" />
           </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
           <a-form-item label="结束时间:">
             <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime" :disabled-date="disabledDate" />
           </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>
@@ -56,7 +66,6 @@
           :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
         </ele-pro-table>
       </a-spin>
-    </a-card>
   </div>
   <!-- 编辑弹窗 -->
 </template>
@@ -74,6 +83,18 @@
   export default {
     name: "RiverCollectWater",
     components: {},
+    props:{
+    // 表格搜索条件
+    searchForm:{
+      typeof:Object,
+      default: function () {
+          return {}
+      },
+    },
+    visiable:{
+        typeof:Boolean
+      }
+    },
     data() {
       return {
         data: [],
@@ -133,7 +154,25 @@
         targetInfoList:[],
       };
     },
+    watch: {
+      searchForm(newV) {
+        this.where = newV;
+      },
+      // 监听组件显示
+      visiable(val){
+        console.log('change',val)
+        if(val && this.where.startTime && this.where.endTime){
+          this.reload()
+        }
+      }
+    },
     created() {
+      // 回显并搜素
+      this.where = this.searchForm;
+      if(this.where.startTime && this.where.endTime){
+        this.reload()
+      }
+
       listInfo().then((res) => {
         if (res.data.code == 0) {
           console.log(res.data.data)
@@ -164,6 +203,9 @@
     methods: {
       /* 刷新表格 */
       reload() {
+        // 上传搜索条件给父级
+         this.$emit("search", this.where);
+
         this.loading = true;
         listAvgWaterQualitySandard(this.where).then((res) => {
           console.log(res.data.data);
@@ -208,4 +250,7 @@
 </script>
 
 <style scoped lang="less">
+.ant-calendar-picker{
+  width: 100%;
+}
 </style>