jczxw-java/src/views/water/drinking-water/statistic/villageAppraise.vue

<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form
        :model="where"
        :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
        :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
      >
        <a-row>
          <!-- <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="区域等级:">
              <a-select v-model:value="where.regionLevel" allowClear showSearch>
                <a-select-option
                  v-for="(item) in regionLevelOptions"
                  :key="item.value"
                  >{{ item.label }}</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.place" allowClear showSearch>
                <a-select-option
                  v-for="(item) in palceOptions"
                  :key="item.value"
                  >{{ item.label }}</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.road" allowClear showSearch>
                <a-select-option
                  v-for="(item) in roadOptions"
                  :key="item.value"
                  >{{ item.label }}</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.area" allowClear showSearch>
                <a-select-option
                  v-for="(item) in areaOptions"
                  :key="item.value"
                  >{{ item.label }}</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.waterSourceType"
                allowClear
                showSearch
              >
                <a-select-option :value="'地表水'">地表水</a-select-option>
                <a-select-option :value="'地下水'">地下水</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-form-item label="上报时间:">
            <a-range-picker separator="~" v-model:value="reportTimeScope" />
          </a-form-item>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
              <a-space>
                <a-button type="primary" @click="reload">查询3</a-button>
                <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
                <a-button @click="exportFile" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">导出Excel</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- 表格 -->
      <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 { pageRoadNoiseUrl, getColumnOptions } from "@/api/ecology/noise/road-sound";
import {
  pageDrinkingWaterVillageStatisticUrl,
  // getColumnOptions
} from "@/api/ecology/drinking-water-village";
// import pageDictUrl from "@/api/ecology/drinking-water-dict"
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import { tableColumns3 } from "./colums";
// import moment from "moment";
//   import utils from "./utils";
// const columns =tableColumns;
export default {
  name: "DrinkingWaterBase",
  components: {},

  data() {
    return {
      data: [],
      locale,
      bill: {},
      // 表格数据接口
      url: pageDrinkingWaterVillageStatisticUrl,
      selection: [],
      columns: [
        { title: "城市名称", dataIndex: "city" },
        { title: "水源地名称", dataIndex: "place" },
        { title: "取水量（万m3）", dataIndex: "waterWithdrawal" },
        { title: "超标水源地取水量", dataIndex: "" },
        { title: "超标项目", dataIndex: "" },
        { title: "水源地性质", dataIndex: "waterSourceProperty" },
      ],

      // 表格列配置

      // palceOptions: [],
      // areaOptions: [],
      // roadOptions: [],
      regionLevelOptions: [],

      reportTimeScope: [],
      // 表格搜索条件
      where: {
        checked: 1,
      },
      // 表格选中数据
      selectionList: [],
    };
  },
  mounted() {
    // this.loadOptionData();
  },
  methods: {
    JumpFieldClick(record, column) {
      console.log(column.dataIndex);
    },

    /**获取下来框数据 */
    // loadOptionData() {
    //   getColumnOptions("place").then((res) => {
    //     this.palceOptions = res.data.data.map((item) => {
    //       return {
    //         label: item,
    //         value: item,
    //       };
    //     });
    //   });
    //   getColumnOptions("area").then((res) => {
    //     this.areaOptions = res.data.data.map((item) => {
    //       return {
    //         label: item,
    //         value: item,
    //       };
    //     });
    //   });
    //   getColumnOptions("road").then((res) => {
    //     this.roadOptions = res.data.data.map((item) => {
    //       return {
    //         label: item,
    //         value: item,
    //       };
    //     });
    //   });
    //   getColumnOptions("region_level").then((res) => {
    //     this.regionLevelOptions = res.data.data.map((item) => {
    //       return {
    //         label: item,
    //         value: item,
    //       };
    //     });
    //   });
    // },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({
        where: this.where,
      });
    },
    /* 重置搜索 */
    reset() {
      this.where = {
        checked: 1,
      };
      this.reload();
    },
    exportFile() {
      const columns = [...tableColumns3];
      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>