yudao-dev/src/views/energy/base/energyQuantityRealtime/index.vue

<template>
  <div class="app-container">

    <!-- 搜索工作栏 -->
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <!-- 列表 -->
    <base-table
      :page="queryParams.pageNo"
      :limit="queryParams.pageSize"
      :table-props="tableProps"
      :table-data="list"
      :selectWidth="55"
      :max-height="tableH"
      @selection-change="selectChange"
    />
    <pagination
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getEnergyQuantityRealtimePage, exportEnergyQuantityRealtimeExcel } from "@/api/base/energyQuantityRealtime"
import { getEnergyTypeListAll } from "@/api/base/energyType"
// import { publicFormatter } from '@/utils/dict'
import FileSaver from "file-saver"
import * as XLSX from 'xlsx/xlsx.mjs'
const tableProps = [
  {
    prop: 'objName',
    label: '统计对象'
  },
  {
    prop: 'objRemark',
    label: '对象备注'
  },
  {
    prop: 'energyTypeName',
    label: '能源类型'
  },
  {
    prop: 'startValue',
    label: '初始值'
  },
  {
    prop: 'endValue',
    label: '当前值'
  },
  {
    prop: 'diffValue',
    label: '差值'
  },
  {
    prop: 'amount',
    label: '金额'
  }
]
export default {
  name: "EnergyPlc",
  data() {
    return {
      formConfig: [
        {
          type: 'select',
          label: '能源类型',
          selectOptions: [],
          param: 'energyTypeId'
        },
        {
          type: 'datePicker',
          label: '时间',
          dateType: 'datetimerange',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: "timestamp",
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          param: 'timeVal',
          defaultSelect: [],
          width: 350
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'separate'
        },
        {
          type: this.$auth.hasPermi('base:energy-quantity-realtime:export') ? 'button' : '',
          btnName: '导出',
          name: 'export',
          color: 'primary',
          plain: true
        }
      ],
      tableProps,
      tableH: this.tableHeight(260),
      // 总条数
      total: 0,
      // 班次基础信息列表
      list: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 20,
        energyTypeId: '',
        startTime: null,
        endTime: null
      },
      energyTypeList: [],
      exportList: []
    };
  },
  created() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
    })
    this.getList();
    this.getTypeList()
  },
  methods: {
    buttonClick(val) {
      this.queryParams.pageNo = 1;
      this.queryParams.energyTypeId = val.energyTypeId
      this.queryParams.startTime = val.timeVal ? val.timeVal[0] : null
      this.queryParams.endTime = val.timeVal ? val.timeVal[1] : null
      switch (val.btnName) {
        case 'search':
          this.getList()
          break
        default:
          this.exportTable()
          // this.$modal.confirm('是否确认导出').then(() => {
          //     return exportEnergyQuantityRealtimeExcel({...this.queryParams});
          //   }).then(response => {
          //     console.log(response)
          //     this.$download.excel(response, '能源抄表.xls');
          //   }).catch(() => {})
      }
    },
    /** 查询列表 */
    getList() {
      getEnergyQuantityRealtimePage(this.queryParams).then(response => {
        this.list = response.data.list || []
        this.total = response.data.total;
        this.exportList = []
      });
    },
    getTypeList() {
      getEnergyTypeListAll().then((res) => {
        this.formConfig[0].selectOptions = res.data || []
        this.energyTypeList = res.data || []
      })
    },
    selectChange(val) {
      console.log(val)
      this.exportList = val
    },
    // 勾选导出
    exportTable() {
      if (this.exportList.length > 0) {
        let body = this.exportList.map((x) => [
          x.objName,
          x.objRemark,
          x.energyTypeName,
          x.startValue,
          x.endValue,
          x.diffValue,
          x.amount
        ])
        let header = []
        this.tableProps.map((y) => {
          header.push(y.label)
        })
        body.unshift(header)
        console.log(body)
        const filename = '能源抄表.xlsx'
        const ws_name = 'Sheet1'
        const wb = XLSX.utils.book_new()
        const ws = XLSX.utils.aoa_to_sheet(body)
        XLSX.utils.book_append_sheet(wb, ws, ws_name)
        let wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: false,
          type: 'array'
        })
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          filename
        )
      } else {
        this.$modal.msgWarning('请勾选需要导出的数据')
      }
    }
  }
};
</script>