饮用水基础框架页面

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

@@ -0,0 +1,138 @@
+<!--超标评价-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+        <search
+        :searchForm="searchForm"
+        :filterKeys="filterKeys"
+        @search="searchData"
+        @exportFile="exportFile"
+        @filterColumns="changeFilter"
+      />
+      <!-- 表格 -->
+      <ele-pro-table
+        v-model:selection="selectionList"
+        ref="table"
+        row-key="drinkingWaterId"
+        :datasource="url"
+        :columns="columns"
+        :where="where"
+        :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)"
+      >
+       
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+// import _ from "lodash";
+import XLSX from "xlsx";
+import Search from "./../components/search.vue";
+import {
+  pageDrinkingWaterStatisticUrl,
+  // getColumnOptions
+} from "@/api/ecology/drinking-water";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+// import { tableColumns } from "./colums";
+
+export default {
+  name: "DrinkingWaterBase",
+  components: {
+      Search
+  },
+    props:{
+        // 表格搜索条件
+        searchForm:{
+            typeof:Object,
+            default: function () {
+                return {}
+            },
+        },
+        filterKeys:{
+            typeof:Object,
+            default: function () {
+                return []
+            },
+        }
+    },
+  data() {
+    return {
+      data: [],
+      locale,
+      bill: {},
+      // 表格数据接口
+      url: pageDrinkingWaterStatisticUrl,
+      selection: [],
+      columns: [
+       {title: "城市名称",dataIndex: "sourceWaterName",sorter: true,},
+       {title: "水源地名称",dataIndex: "waterWithdrawal",sorter: true,},
+       {title: "取水量（万m3）",dataIndex: "waterWithdrawal",sorter: true,},
+       {title: "超标水源取水量",dataIndex: "waterWithdrawal",sorter: true,},
+       {title: "超标项目",dataIndex: "waterWithdrawal",sorter: true,},
+       {title: "水源性质",dataIndex: "waterWithdrawal",sorter: true,},
+      ],
+
+      // 表格列配置
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+    };
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+
+        // 传上父级
+    changeFilter(data){
+        this.$emit('changeFilter',data)
+    },
+    // 执行搜索
+    searchData(data){
+        this.where = data;
+        this.$emit("search", this.where);
+        this.reload();
+    },
+
+    /* 刷新表格 */
+    reload() {
+      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>