yudao-dev/src/views/report/Product/monthly.vue

<!--
 * @Author: Do not edit
 * @Date: 2024-04-22 15:49:56
 * @LastEditTime: 2024-04-25 08:39:13
 * @LastEditors: DY
 * @Description: 
-->
<template>
	<div class="weekly">
		<el-form
			:inline="true"
			:model="listQuery"
			class="blueTip">
			<el-form-item
				label="月"
				prop="reportTime">
				<el-date-picker
					v-model="listQuery.time"
					value-format="yyyy-MM-dd HH:mm:ss"
					type="month"
					size="small"
					placeholder="选择月"></el-date-picker>
			</el-form-item>
			<el-button
				v-if="this.$auth.hasPermi('base:report-auto-production:query')"
				type="primary"
				size="small"
				@click="getList">
				查询
			</el-button>
			<el-button
				v-if="
					this.$auth.hasPermiAnd([
						'base:report-auto-original-glass:export',
						'base:report-auto-production:export',
					])
				"
				type="primary"
				size="small"
				plain
				@click="handleExport">
				导出
			</el-button>
		</el-form>
		<base-table
			:table-props="tableProps"
			:table-data="tableData"
			:span-method="objectSpanMethod1"
			@emitFun="handleEmitFun"
			:max-height="tableH" />
		<!-- <monthWeek v-if="glassWeekShow" ref="monthWeek" :product="false" :params="listQuery" />
    <proMonth v-if="proWeekShow" ref="proMonth" :product="false" :params="listQuery" /> -->
	</div>
</template>

<script>
// import monthWeek from '../glass/month.vue'
// import proMonth from '../productionMonthReport/index.vue'
import { productionMonthY } from '@/api/report/glass';
import { parseTime } from '../../core/mixins/code-filter';
import FileSaver from 'file-saver';
import * as XLSX from 'xlsx/xlsx.mjs';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';

export default {
	// components: { monthWeek, proMonth },
	mixins: [tableHeightMixin],
	data() {
		return {
			heightNum: 240,
			listQuery: {
				time: parseTime(new Date()),
			},
			// startTimeStamp: '',
			// endTimeStamp: '',
			// reportTime: '',
			// glassWeekShow: false,
			// proWeekShow: false,
			tableData: [],
			tableProps: [
				{
					prop: 'lineName',
					label: '',
				},
				{
					prop: 'paramsName',
					label: '',
				},
			],
			resData: [],
			span1: [], //表格1的合并规则
		};
	},
	created() {
		// this.getCurrentMonthFirst()
		// this.glassWeekShow = true
		// this.proWeekShow = true
	},
	mounted() {
		this.getList();
	},
	methods: {
		async getList() {
			this.tableData = [];
			this.tableProps = [
				{
					prop: 'lineName',
					label: '',
					fixed: true,
				},
				{
					prop: 'paramsName',
					label: '',
					fixed: true,
				},
			];
			await productionMonthY(this.listQuery).then((res) => {
				this.resData = res.data;
				// 设置表头
				Object.keys(this.resData).forEach((item) => {
					this.tableProps.push({
						prop: item,
						label: item,
						'show-overflow-tooltip': true,
					});
				});
				this.buildTableData(this.resData);
			});
		},
		// 设置表格数据
		buildTableData(data) {
			let keys = Object.keys(data);
			let tempData = [];
			let subKeys = Object.keys(data[keys[0]]);
			let sub2Keys = Object.keys(data[keys[0]][subKeys[0]]);
			for (let i = 0; i < keys.length; i++) {
				if (i === 0) {
					for (let j = 0; j < subKeys.length; j++) {
						for (let k = 0; k < sub2Keys.length; k++) {
							let obj = {};
							obj.lineName = subKeys[j];
							obj.paramsName = sub2Keys[k];
							obj[keys[0]] = data[keys[0]][subKeys[j]][sub2Keys[k]];
							tempData.push(obj);
						}
					}
				} else {
					for (let j = 0; j < subKeys.length; j++) {
						for (let k = 0; k < sub2Keys.length; k++) {
							for (let v = 0; v < tempData.length; v++) {
								if (
									tempData[v].lineName === subKeys[j] &&
									tempData[v].paramsName === sub2Keys[k]
								) {
									tempData[v][keys[i]] = data[keys[i]][subKeys[j]][sub2Keys[k]];
								}
							}
						}
					}
				}
			}
			this.tableData = tempData;
			this.getSpanArr(this.tableData);
		},
		// 获取合并行
		getSpanArr(data) {
			this.span1 = [];
			for (var i = 0; i < data.length; i++) {
				if (i === 0) {
					this.span1.push(1);
					this.index = 0;
				} else {
					if (data[i].lineName === data[i - 1].lineName) {
						this.span1[this.index] += 1;
						this.span1.push(0);
					} else {
						this.span1.push(1);
						this.index = i;
					}
				}
			}
		},
		objectSpanMethod1({ rowIndex, columnIndex }) {
			if (columnIndex === 0) {
				const _row = this.span1[rowIndex];
				return {
					rowspan: _row,
					colspan: 1,
				};
			}
		},
		handleExport() {
			const xlsxParam = { raw: true };
			let workbook = XLSX.utils.book_new();
			var ws = XLSX.utils.table_to_sheet(
				document.querySelector('#exportTable'),
				xlsxParam
			);
			XLSX.utils.book_append_sheet(workbook, ws, '许昌安彩月原片生产汇总');
			var prows = XLSX.utils.table_to_sheet(
				document.querySelector('#exportproductionTable'),
				xlsxParam
			);
			XLSX.utils.book_append_sheet(workbook, prows, '许昌安彩月成品生产汇总');
			let fileName = '生产数据汇总表-月报.xlsx';
			var wbout = XLSX.write(workbook, {
				bookType: 'xlsx',
				bookSST: true,
				type: 'array',
			});
			try {
				FileSaver.saveAs(
					new Blob([wbout], { type: 'application/octet-stream' }),
					fileName
				);
				this.$message.success('导出成功');
			} catch (e) {
				if (typeof console !== 'undefined') console.log(e, wbout);
			}
			return wbout;
		},
		handleEmitFun(payload) {
			console.log('payload', payload);
		},
	},
};
</script>

<style scoped>
.weekly {
	padding: 16px;
}
.blueTip::before {
	display: inline-block;
	content: '';
	width: 4px;
	height: 18px;
	background: #0b58ff;
	border-radius: 1px;
	margin-right: 8px;
	margin-top: 8px;
	margin-left: 16px;
}
</style>