市级饮用水页面框架

src/views/water/drinking-water/statistic/city/waterQuality.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+        :visiable="visiable"
+        :loading="loading"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        v-model:selection="selectionList"
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="datasource"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+
+import {
+  waterQualityData
+} from "@/api/ecology/new-drinking-water";
+
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+
+import Search from "./../components/search.vue";
+
+export default {
+  name: "waterQuality",
+  components: {
+    Search
+  },
+  props:{
+      // 表格搜索条件
+      searchForm:{
+          typeof:Object,
+          default: function () {
+              return {}
+          },
+      },
+      filterKeys:{
+          typeof:Object,
+          default: function () {
+              return []
+          },
+      },
+    visiable:{
+        typeof:Boolean
+    }
+  },
+  
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      datasource:{},
+      selection: [],
+      columns:[
+        {title:"城市名称",dataIndex:"city",},
+        {title:"水源地名称",dataIndex:"place",},
+            {title:"期数",dataIndex:"sourceWaterName",},
+        {title:"水源地性质",dataIndex:"waterSourceProperty",},
+        {title:"断面水质",align: 'center',children: [
+              {title: "本月", dataIndex: ""},
+              {title: "上月", dataIndex: ""},
+              {title: "去年同期", dataIndex: ""},
+            ]
+        },
+        {title:"主要污染指标",dataIndex:"",},
+      ],
+        
+      
+      // 表格列配置
+      
+    
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+      loading:false
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    
+    // 获取列表数据
+    getPageData(){
+            this.loading = true;
+        waterQualityData(this.where).then(res=>{
+                this.loading = false;
+            if(res.data.code){
+                this.$message.error(res.data.msg);
+                this.datasource = []
+            }else{
+                this.datasource = res.data.data
+            }
+        }).catch(()=>{
+                this.loading = false;
+        })
+    },
+
+    JumpFieldClick(record, column) {
+        console.log(column.dataIndex)
+      },
+
+          // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      this.getPageData()
+      // this.$refs.table.reload({
+      //   where: this.where,
+      // });
+    },
+    /* 重置搜索 */
+    reset() {
+      this.where = {
+        checked: 1,
+      };
+      this.reload();
+    },
+    exportFile() {
+      const columns = [
+         ...this.columns,
+      ];
+      const arr = [];
+      const th = columns.map((item) => item.title);
+      arr.push(th);
+      this.data.forEach((d) => {
+        const td = columns.map((item) => d[item.dataIndex]);
+        arr.push(td);
+      });
+      let sheet = XLSX.utils.aoa_to_sheet(arr);
+      this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+</style>