sk_fems_ui commit

components/common/button/ActionButtons.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="d-flex flex-column justify-center align-center">
+		<v-btn icon tile :ripple="false" @click="btnActionsFnc('addLeftToRight')">
+			<v-icon>mdi-chevron-right</v-icon>
+		</v-btn>
+		<v-btn
+			icon
+			tile
+			:ripple="false"
+			class="mt-2"
+			@click="btnActionsFnc('removeRightToLeft')"
+		>
+			<v-icon>mdi-chevron-left</v-icon>
+		</v-btn>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		parentPrgmId: {
+			type: String,
+			require: true,
+		},
+		leftGridName: {
+			type: String,
+			require: true,
+		},
+		rightGridName: {
+			type: String,
+			required: true,
+		},
+		btnActionsFnc: {
+			type: Function,
+			required: true,
+		},
+	},
+	computed: {},
+	data() {
+		return {};
+	},
+};
+</script>

components/common/button/BtnAddRow.vue

@@ -0,0 +1,16 @@
+<template>
+	<v-btn :ripple="false" @click="btnActionsFnc('add')">추가</v-btn>
+</template>
+<script>
+export default {
+	props: {
+		myGrid: {
+			require: true,
+		},
+		btnActionsFnc: {
+			type: Function,
+			required: true,
+		},
+	},
+};
+</script>

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>

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>

components/common/button/BtnRemoveRow.vue

@@ -0,0 +1,16 @@
+<template>
+	<v-btn :ripple="false" @click="btnActionsFnc('remove')">삭제</v-btn>
+</template>
+<script>
+export default {
+	props: {
+		myGrid: {
+			require: true,
+		},
+		btnActionsFnc: {
+			type: Function,
+			required: true,
+		},
+	},
+};
+</script>

components/common/button/BtnSave.vue

@@ -0,0 +1,16 @@
+<template>
+	<v-btn :ripple="false" @click="btnActionsFnc('save')">저장</v-btn>
+</template>
+<script>
+export default {
+	props: {
+		myGrid: {
+			require: true,
+		},
+		btnActionsFnc: {
+			type: Function,
+			required: true,
+		},
+	},
+};
+</script>

components/common/button/BtnSearch.vue

@@ -0,0 +1,17 @@
+<template>
+	<v-btn :ripple="false" @click="getSearch('prev')">조회</v-btn>
+</template>
+<script>
+import { mapMutations } from 'vuex';
+
+export default {
+	methods: {
+		...mapMutations({ setPageData: 'setPageData' }),
+		getSearch() {
+			this.setPageData({ isFind: true });
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss" scoped></style>

components/common/button/BtnTotal.vue

@@ -0,0 +1,27 @@
+<template>
+	<v-btn :ripple="false" @click="setTotal()">전체</v-btn>
+</template>
+<script>
+import { mapMutations } from 'vuex';
+
+export default {
+	props: {
+		parentPrgmId: {
+			type: String,
+			require: true,
+		},
+	},
+
+	methods: {
+		...mapMutations({ setPageData: 'setPageData' }),
+		setTotal() {
+			var facInfoText = { path: '전체' };
+			this.setPageData({ facInfo: facInfoText });
+			localStorage.setItem(
+				this.parentPrgmId + 'CheckedRow',
+				JSON.stringify(facInfoText),
+			);
+		},
+	},
+};
+</script>

components/common/button/Buttons.vue

@@ -0,0 +1,67 @@
+<template>
+	<div>
+		<component
+			:is="buttonAuth.add ? 'BtnAddRow' : null"
+			:btnActionsFnc="btnActionsFnc"
+		/>
+		<component
+			:is="buttonAuth.remove ? 'BtnRemoveRow' : null"
+			:btnActionsFnc="btnActionsFnc"
+		/>
+		<component
+			:is="buttonAuth.save ? 'BtnSave' : null"
+			:btnActionsFnc="btnActionsFnc"
+		/>
+		<component
+			:is="buttonAuth.excel ? 'BtnExcelDownload' : null"
+			:parentPrgmId="parentPrgmId"
+			:gridName="bindingData"
+		/>
+	</div>
+</template>
+<script>
+import { mapState, mapMutations } from 'vuex';
+import BtnAddRow from './BtnAddRow';
+import BtnRemoveRow from './BtnRemoveRow';
+import BtnSave from './BtnSave';
+import BtnExcelDownload from './BtnExcelDownload';
+
+export default {
+	props: {
+		parentPrgmId: {
+			type: String,
+			require: true,
+		},
+		bindingData: {
+			type: String,
+			require: true,
+		},
+		btnActionsFnc: {
+			type: Function,
+			required: true,
+		},
+	},
+	components: {
+		BtnAddRow,
+		BtnRemoveRow,
+		BtnSave,
+		BtnExcelDownload,
+	},
+	computed: {
+		...mapState({
+			buttonAuth(state) {
+				return state.pageData[this.parentPrgmId][this.bindingData].buttonAuth;
+			},
+		}),
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		...mapMutations({ setPageData: 'setPageData' }),
+		getSearch() {
+			this.setPageData({ isFind: true });
+		},
+	},
+};
+</script>