饮用水基础框架页面

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

@@ -0,0 +1,176 @@
+<!--市级 检测数据报送表-->
+<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)"
+      >
+        <template #waterCode="{ text, record }">
+          <span>
+            {{
+              record.reportTime == null
+                ? (text = "")
+                : record.reportTime.substr(5, 2) == "01" ||
+                  record.reportTime.substr(5, 2) == "02" ||
+                  record.reportTime.substr(5, 2) == "03" ||
+                  record.reportTime.substr(5, 2) == "12"
+                ? (text = "K")
+                : record.reportTime.substr(5, 2) == "04" ||
+                  record.reportTime.substr(5, 2) == "05" ||
+                  record.reportTime.substr(5, 2) == "10" ||
+                  record.reportTime.substr(5, 2) == "11"
+                ? (text = "P")
+                : record.reportTime.substr(5, 2) == "06" ||
+                  record.reportTime.substr(5, 2) == "07" ||
+                  record.reportTime.substr(5, 2) == "08" ||
+                  record.reportTime.substr(5, 2) == "09"
+                ? (text = "F")
+                : (text = "无采样时间")
+            }}
+          </span>
+        </template>
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+import XLSX from "xlsx";
+import {
+  pageBsaeListUrl
+} from "@/api/ecology/new-drinking-water";
+import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+import { tableColumns } from "./../colums/base";
+import Search from "./../components/search.vue";
+
+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: pageBsaeListUrl,
+      selection: [],
+      columns: [...tableColumns],
+
+      // 表格列配置
+      regionLevelOptions: [],
+      // 表格搜索条件
+      where: {
+        checked: 1,
+      },
+      // 表格选中数据
+      selectionList: [],
+    };
+  },
+  watch: {
+    filterKeys(newKeys) {
+      this.filterColumns(newKeys);
+    },
+  },
+  mounted() {
+    // this.loadOptionData();
+  },
+  methods: {
+    JumpFieldClick(record, column) {
+      console.log(column.dataIndex);
+    },
+    // 传上父级
+    changeFilter(data) {
+      this.$emit("changeFilter", data);
+    },
+    //动态修改表头
+    filterColumns(keys) {
+      if (!Array.isArray(keys)) {
+        return;
+      }
+
+      let newCloumns = [...tableColumns];
+
+      let filterIndex = [];
+      newCloumns.forEach((item, index) => {
+        if (keys.indexOf(item.dataIndex) > -1) {
+          filterIndex.push(index);
+        }
+      });
+
+      const newList = newCloumns.filter((item, index) => {
+        return filterIndex.indexOf(index) == -1;
+      });
+      this.columns = newList;
+    },
+
+    // 执行搜索
+    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 = [...tableColumns];
+      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>