jczxw-java/src/views/water/drinking-water/statistic/county/base.vue

<!--市级 检测数据报送表-->
<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)"
      >
      <template #footer>
        <div class="footer">
          饮用水源水质监测累积月份统计样品数：{{count}}个
        </div>
      </template>

        <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 {
  countyPageBsaeData
} 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/countySearch.vue";

export default {
  name: "DrinkingWaterBase",
  components: {
    Search,
  },
  props: {
    // 表格搜索条件
    searchForm: {
      typeof: Object,
      default: function () {
        return {};
      },
    },
    filterKeys: {
      typeof: Object,
      default: function () {
        return [];
      },
    },
    visiable:{
        typeof:Boolean
    }
  },
  data() {
    return {
      count:0, //样品数
      current:0,
      data: [],
      locale,
      bill: {},
      // 表格数据接口
      datasource: [],
      selection: [],
      columns: [...tableColumns],

      // 表格列配置
      regionLevelOptions: [],
      // 表格搜索条件
      where: {
        
      },
      // 表格选中数据
      selectionList: [],
      loading:false
    };
  },
  watch: {
    filterKeys(newKeys) {
      this.filterColumns(newKeys);
    },
  },
  mounted() {
    // this.loadOptionData();
  },
  methods: {

        // 获取列表数据
        getPageData(){
            this.loading = true;
            countyPageBsaeData(this.where).then(res=>{
                 this.loading = false;
                if(res.data.code){
                    this.$message.error(res.data.msg);
                    this.datasource = []
                    this.count = 0
                }else{
                    this.datasource = res.data.data
                    this.count = res.data.count
                }
            }).catch(()=>{
                 this.loading = false;
            })
        },

    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.getPageData()
      // 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">
.footer{
  text-align: right;
}
</style>