sk_fems_ui commit

components/common/button/BtnExcelDownload.vue

@@ -0,0 +1,136 @@
+<template>
+	<v-btn :ripple="false" @click="downloadExcelFile">액셀</v-btn>
+</template>
+
+<script>
+import Utility from '~/plugins/utility';
+import XLSX from 'xlsx';
+import { mapState } from 'vuex';
+
+export default {
+	name: 'btnExeclDownload',
+	props: {
+		parentPrgmId: {
+			type: String,
+			require: true,
+		},
+		gridName: {
+			type: String,
+			require: false,
+		},
+		dataPath: {
+			type: Object,
+			require: false,
+			default: null,
+		},
+		parentModalDataName: {
+			type: String,
+			require: false,
+			default: null,
+		},
+		myModalKey: {
+			type: String,
+			require: false,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			xlsData: [],
+			xlsHeader: [],
+		};
+	},
+	computed: {
+		...mapState({
+			menuNm: state => state.activeMenuInfo.menuNm,
+			pageData(state) {
+				if (this.parentModalDataName == null) {
+					return state.pageData[this.parentPrgmId];
+				}
+				return state.pageData[this.parentPrgmId][this.parentModalDataName][
+					this.myModalKey
+				];
+			},
+		}),
+		tableId() {
+			return this.pageData.xlsFileInfo.tableId;
+		},
+		newXlsData() {
+			return this.pageData.xlsFileInfo[this.gridName].rowData;
+		},
+	},
+	methods: {
+		setExcelData() {
+			const xlsRowData = this.newXlsData || this.pageData[this.gridName].data;
+			const xlsHeader = this.pageData[this.gridName].column;
+
+			let tmpData = [];
+			let tmpMap = {};
+			xlsRowData.map(item => {
+				xlsHeader.map(v => {
+					if (v.hidden == null || v.hidden == undefined) {
+						if (v.excelType == null || v.excelType == undefined) {
+							Object.assign(tmpMap, { [v.header]: item[v.name] || '' });
+						} else if (v.excelType == 'number') {
+							if (v.excelFormatter == null || v.excelFormatter == undefined) {
+								Object.assign(tmpMap, {
+									[v.header]: parseFloat(item[v.name].replace(',', '')) || 0,
+								});
+							} else {
+								//Object.assign(tmpMap, { [v.header]: Utility.setFormatIntDecimal(item[v.name], v.excelFormatter)) || Utility.setFormatIntDecimal(0, v.excelFormatter))});
+								Object.assign(tmpMap, {
+									[v.header]:
+										parseFloat(
+											Utility.setFormatIntDecimal(
+												item[v.name],
+												v.excelFormatter,
+											).replace(',', ''),
+										) ||
+										parseFloat(
+											Utility.setFormatIntDecimal(0, v.excelFormatter).replace(
+												',',
+												'',
+											),
+										),
+								});
+							}
+						}
+					}
+
+					return tmpMap;
+				});
+				tmpData = tmpData.concat(tmpMap);
+				tmpMap = {};
+			});
+			this.xlsData = tmpData;
+			tmpData = null;
+			tmpMap = null;
+			xlsHeader.map(v => {
+				if (v.hidden == null || v.hidden == undefined) {
+					// this.xlsHeader.push(v.header);
+					this.xlsHeader.push(String(v.header));
+				}
+			});
+		},
+		async downloadExcelFile() {
+			if (!this.tableId) await this.setExcelData(); // 들어온 JSON 데이타 가공
+			// console.log("this.setExcelData()", this.setExcelData());
+			const fileName = this.pageData.xlsFileInfo[this.gridName].fileName;
+			const workBook = XLSX.utils.book_new(); // 새 시트 생성
+			const excelData = this.tableId
+				? // 테이블 그대로 가져올때
+				  XLSX.utils.table_to_sheet(document.getElementById(this.tableId))
+				: // JSON 형식으로 가져올때
+				  XLSX.utils.json_to_sheet(this.xlsData, { header: this.xlsHeader });
+
+			const sheetName = this.pageData.xlsFileInfo[this.gridName].sheetName;
+			XLSX.utils.book_append_sheet(workBook, excelData, sheetName); // 시트 명명, 데이터 지정
+			XLSX.writeFile(
+				workBook,
+				`${fileName ? fileName : this.menuNm.replace(/(\s*)/g, '')}.xlsx`,
+			); // 엑셀파일 만듬
+			this.xlsHeader = [];
+		},
+	},
+};
+</script>