<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: 'objCode', 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>