yudao-dev/src/views/cost/energyCostHis/index.vue

<template>
	<div class="app-container">
		<!-- 搜索工作栏 -->
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />

		<!-- 列表 -->
		<base-table
			v-loading="dataListLoading"
			:table-props="tableProps"
			:page="listQuery.pageNo"
			:limit="listQuery.pageSize"
      :max-height="tableH"
			:table-data="tableData"></base-table>
		<pagination
			:limit.sync="listQuery.pageSize"
			:page.sync="listQuery.pageNo"
			:total="listQuery.total"
			@pagination="getDataList" />
	</div>
</template>

<script>
import basicPage from '../mixins/basic-page';
import codeFilter from '../mixins/code-filter';
import {
	getCostEneryAutoReportPage,
	exportCostEneryAutoReportExcel,
} from '@/api/cost/costEneryAutoReport';
import { getEnergyTypeListAll } from '@/api/base/energyType';
import { publicFormatter } from '@/utils/dict';
import moment from 'moment';

const tableProps = [
	{
		prop: 'reportType',
		label: '维度',
		filter: codeFilter('reportType'),
	},
	{
		prop: 'reportName',
		label: '时间',
		minWidth: 150,
	},
	{
		prop: 'energyType',
		label: '能源类型',
	},
	{
		prop: 'objName',
		label: '监控对象',
		filter: (val) => (val != null ? val : '--'),
	},
	{
		prop: 'tableName',
		label: '水/气表名',
		filter: (val) => (val != null ? val : '--'),
		filter: publicFormatter('table_name'),
	},
	{
		prop: 'totalUsed',
		label: '累计使用量',
	},
	{
		prop: 'totalCost',
		label: '总价',
		align: 'right',
	},
];

export default {
	mixins: [basicPage],
	data() {
		return {
			urlOptions: {
				getDataListURL: getCostEneryAutoReportPage,
				exportURL: exportCostEneryAutoReportExcel,
			},
			tableData: [],
			tableProps,
      tableH: this.tableHeight(260),
			drawerVisible: false,
			formConfig: [
				{
					type: 'select',
					label: '维度',
					selectOptions: [
						{ id: 2, name: '日' },
						{ id: 3, name: '周' },
						{ id: 4, name: '月' },
						{ id: 5, name: '年' },
					],
					param: 'reportType',
					filterable: true,
					clearable: false,
				},
				{
					type: 'select',
					label: '能源类型',
					selectOptions: [],
					param: 'energyTypeId',
					filterable: true,
				},
				{
					type: 'datePicker',
					label: '时间范围',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'searchTime',
					defaultSelect: [],
				},
				{
					type: this.$auth.hasPermi('cost:energyCostHis:query')
						? 'button'
						: '',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: this.$auth.hasPermi('cost:energyCostHis:export')
						? 'button'
						: '',
					btnName: '导出',
					name: 'export',
					color: 'primary',
					plain: true,
				},
			],
		};
	},
	components: {},
	created() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
    })
		const end = new Date();
		const start = new Date();
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
		this.formConfig[2].defaultSelect = [start, end];
		this.listQuery.reportTime = [
			moment(start).startOf('day').format('x'),
			moment(end).endOf('day').format('x'),
		];
		getEnergyTypeListAll().then((response) => {
			this.formConfig[1].selectOptions = response.data;
		});
	},
	methods: {
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 20;
					this.listQuery.reportType = val.reportType;
					this.listQuery.energyTypeId = val.energyTypeId;
					this.listQuery.reportTime = val.searchTime
						? [
								moment(val.searchTime[0]).startOf('day').format('x'),
								moment(val.searchTime[1]).endOf('day').format('x'),
						  ]
						: null;
					this.getDataList();
					break;
				case 'export':
					const data = {
						reportType: val.reportType,
						energyTypeId: val.energyTypeId,
						reportTime: val.searchTime
							? [
									moment(val.searchTime[0]).startOf('day').format('x'),
									moment(val.searchTime[1]).endOf('day').format('x'),
							  ]
							: null,
					};
					this.handleExport(data);
					break;
				default:
					console.log(val);
			}
		},
	},
};
</script>
<style>
.app-container .el-table .el-table__cell {
	padding: 0;
	height: 35px;
}
</style>