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 } 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';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
const tableProps = [
	{
		prop: 'objName',
		label: '统计对象',
		showOverflowtooltip: true,
	},
	{
		prop: 'objCode',
		label: '对象编码',
		showOverflowtooltip: true,
	},
	{
		prop: 'energyTypeLabel',
		label: '能源类型',
		showOverflowtooltip: true,
	},
	{
		prop: 'startValue',
		label: '初始值',
	},
	{
		prop: 'endValue',
		label: '当前值',
	},
	{
		prop: 'diffValue',
		label: '差值',
	},
	{
		prop: 'amount',
		label: '金额',
	},
];
export default {
	name: 'EnergyQuantityRealtime',
	mixins: [tableHeightMixin],
	data() {
		return {
			formConfig: [
				{
					type: 'select',
					label: '能源类型',
					labelField: 'labelName',
					selectOptions: [],
					param: 'energyTypeId',
					filterable: true,
				},
				{
					type: 'datePicker',
					label: '时间',
					dateType: 'datetimerange',
					format: 'yyyy-MM-dd HH:mm:ss',
					valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'timeVal',
					defaultSelect: [],
					width: 350,
				},
				{
					type: this.$auth.hasPermi('base:energy-quantity-realtime:query')
						? '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,
			// 总条数
			total: 0,
			// 班次基础信息列表
			list: [],
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 20,
				energyTypeId: '',
				startTime: null,
				endTime: null,
			},
			energyTypeList: [],
			exportList: [],
		};
	},
	created() {
		if (location.href.indexOf('?') > 0) {
			let arr = location.href.split('?')[1].split('&');
			this.formConfig[1].defaultSelect = [
				arr[0].split('=')[1],
				arr[1].split('=')[1],
			];
		} else {
			this.formConfig[1].defaultSelect = [
				Date.now() - 7 * 24 * 3600000,
				Date.now(),
			];
		}
		this.queryParams.startTime = this.formConfig[1].defaultSelect[0];
		this.queryParams.endTime = this.formConfig[1].defaultSelect[1];
		this.getList();
		this.getTypeList();
	},
	watch: {
		$route: 'initData',
	},
	methods: {
		initData(to) {
			if (to.name === 'EnergyQuantityRealtime') {
				if (location.href.indexOf('?') > 0) {
					let arr = location.href.split('?')[1].split('&');
					this.formConfig[1].defaultSelect = [
						arr[0].split('=')[1],
						arr[1].split('=')[1],
					];
				} else {
					this.formConfig[1].defaultSelect = [
						Date.now() - 7 * 24 * 3600000,
						Date.now(),
					];
				}
				this.queryParams.startTime = this.formConfig[1].defaultSelect[0];
				this.queryParams.endTime = this.formConfig[1].defaultSelect[1];
				this.getList();
			}
		},
		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();
			}
		},
		/** 查询列表 */
		getList() {
			getEnergyQuantityRealtimePage(this.queryParams).then((response) => {
				let arr = response.data.list || [];
				arr &&
					arr.map((item) => {
						item.amount = item.amount
							? !isNaN(parseFloat(item.amount)) && isFinite(item.amount)
								? item.amount.toFixed(2)
								: ''
							: '';
						this.getDictDatas('energy_type').map((subItem) => {
							if (item.energyTypeName === subItem.value) {
								item.energyTypeLabel = subItem.label;
							}
						});
					});
				this.list = arr;
				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.objCode,
					x.energyTypeLabel,
					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>