sk_fems_ui commit

components/common/button/BtnExcelUpload.vue

@@ -0,0 +1,87 @@
+<template>
+	<div id="btnExeclUpload">
+		<v-btn class="v-btn__round v-btn__excel" @click="uploadExcelFile">
+			<v-icon>mdi-file-excel</v-icon>
+			엑셀 로드
+		</v-btn>
+	</div>
+</template>
+
+<script>
+import XLSX from 'xlsx';
+import { mapState } from 'vuex';
+
+export default {
+	name: 'btnExeclUpload',
+	props: {
+		parentPrgmId: {
+			type: String,
+			require: true,
+		},
+		gridName: {
+			type: String,
+			require: false,
+		},
+		dataPath: {
+			type: Object,
+			require: false,
+			default: null,
+		},
+
+		tableId: {
+			// 성성된 테이블 그대로 쓸 경우 그리드 컴포넌트에 id 지정 후 바인딩
+			type: String,
+			require: false,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			xlsData: [],
+		};
+	},
+	computed: {
+		...mapState({
+			menuNm: state => state.activeMenuInfo.menuNm,
+			pageData(state) {
+				return state.pageData[this.parentPrgmId];
+			},
+		}),
+	},
+	methods: {
+		setExcelData() {
+			const xlsRowData = this.pageData[this.gridName].data;
+			const xlsHeader = this.pageData[this.gridName].column;
+			let tmpData = [];
+			let tmpMap = {};
+			xlsRowData.map(item => {
+				xlsHeader.map(v => {
+					return Object.assign(tmpMap, { [v.header]: item[v.name] || '' });
+				});
+				tmpData = tmpData.concat(tmpMap);
+				tmpMap = {};
+			});
+			this.xlsData = tmpData;
+			tmpData = null;
+			tmpMap = null;
+		},
+		async downloadExcelFile() {
+			if (!this.tableId) await this.setExcelData(); // 들어온 JSON 데이타 가공
+
+			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);
+			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`,
+			); // 엑셀파일 만듬
+		},
+	},
+};
+</script>