sk_fems_ui commit

components/common/Grid2.vue

@@ -0,0 +1,245 @@
+<template>
+	<tui-grid
+		:ref="['tuigrid' + gridName]"
+		:data="chkGridData"
+		:columns="chkGridColumns"
+		:options="chkGridOptions"
+		@focusChange="focusChangeEvt"
+		@click="startEditing"
+		@editingFinish="editingFinish"
+	/>
+</template>
+<script>
+import { mapState, mapMutations, mapActions } from 'vuex';
+export default {
+	props: {
+		parentPrgmId: {
+			type: String,
+			require: true,
+		},
+		gridName: {
+			type: String,
+			require: true,
+		},
+		dataPath: {
+			type: Object,
+			require: false,
+			default: null,
+		},
+		editorGrid: {
+			type: Boolean,
+			default: false,
+			require: false,
+		},
+	},
+	data() {
+		return {
+			gridInstance: null,
+			gridHeight: null,
+			selecrRowKey: null,
+		};
+	},
+	computed: {
+		...mapState({
+			// pageData: state => state.pageData
+			pageData(state) {
+				return this.dataPath
+					? this.dataPath[this.gridName]
+					: state.pageData[this.parentPrgmId][this.gridName];
+			},
+		}),
+		chkGridData() {
+			return this.pageData.data;
+		},
+		chkGridColumns() {
+			return this.pageData.column;
+		},
+		chkGridOptions() {
+			return this.pageData.option;
+		},
+		defaultRow() {
+			return this.pageData.defaultRow;
+		},
+	},
+	watch: {
+		chkGridData(val) {
+			this.$refs['tuigrid' + this.gridName].invoke('resetData', val);
+		},
+	},
+	created() {},
+	async mounted() {
+		// console.log(this.dataPath);
+		if (this.gridName) {
+			this.gridInstance = this.$refs['tuigrid' + this.gridName];
+		}
+	},
+	methods: {
+		...mapMutations({
+			setPageData: 'setPageData',
+			setGridData: 'setGridData',
+		}),
+		getCheckedRowsEvt() {
+			const checkedRowDataList = this.gridInstance.invoke('getCheckedRows');
+			return checkedRowDataList;
+		},
+		uncheckEvt(rowData, instance) {
+			this.gridInstance.invoke('uncheck', rowData.rowKey, instance);
+		},
+		checkEvt(rowData, instance) {
+			this.gridInstance.invoke('check', rowData.rowKey, instance);
+		},
+		focusChangeEvt(e) {
+			// cell 선택시 row 선택 method
+			if (!this.editorGrid) {
+				this.$emit('getRowsData', this.gridInstance.invoke('getRow', e.rowKey));
+				this.selecrRowKey = e.rowKey;
+				const rowIndxKey = this.gridInstance.invoke('getIndexOfRow', e.rowKey);
+				this.gridInstance.invoke('setSelectionRange', {
+					start: [rowIndxKey, 0],
+					end: [rowIndxKey, this.gridInstance.columns.length],
+				});
+			}
+		},
+		startEditing(e) {
+			if (this.editorGrid) {
+				this.gridInstance.invoke('startEditing', e.rowKey, e.columnName);
+				const rowIndxKey = this.gridInstance.invoke('getIndexOfRow', e.rowKey);
+				this.gridInstance.invoke('setSelectionRange', {
+					start: [rowIndxKey, 0],
+					end: [rowIndxKey, this.gridInstance.columns.length],
+				});
+			}
+		},
+		editingFinish(e) {
+			// console.log("editingFinish::e", e);
+			const rowIdxKey = e.rowKey;
+			const columnName = e.columnName;
+			const value = e.value;
+			const isAddRow = this.isBaseDataRow(rowIdxKey);
+
+			this.gridInstance.invoke('setValue', rowIdxKey, columnName, value);
+			if (isAddRow != -1) {
+				const isSameData = this.compareData(e);
+				if (!isSameData) {
+					this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-modify');
+					this.updateData('modify', rowIdxKey);
+				}
+			}
+		},
+		async addRow() {
+			// 열 앞에 데이터 추가
+			this.gridInstance.invoke('prependRow', this.defaultRow, {
+				focus: true,
+			});
+
+			// const aa = this.gridInstance.invoke("getModifiedRows");
+			// console.log("this.gridInstance", this.gridInstance, aa);
+			this.$nextTick(() => {
+				const addRowKey = this.gridInstance.invoke('getFocusedCell').rowKey;
+				// console.log("addRowKey :: ", addRowKey);
+				this.gridInstance.invoke('addRowClassName', addRowKey, 'row-insert');
+				this.updateData('insert', addRowKey);
+			});
+		},
+		removeRow() {
+			const rowIdxKey = this.gridInstance.invoke('getFocusedCell').rowKey;
+			this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-removed');
+			this.gridInstance.invoke('disableRow', rowIdxKey);
+
+			this.updateData('delete', rowIdxKey);
+		},
+		externalDataEdit(obj) {
+			const rowIdxKey = this.gridInstance.invoke('getFocusedCell').rowKey;
+			const columnName = obj.name;
+			const value = obj.value;
+			const isAddRow = this.isBaseDataRow(rowIdxKey);
+
+			this.gridInstance.invoke('setValue', rowIdxKey, columnName, value);
+			if (isAddRow != -1) {
+				this.gridInstance.invoke('addRowClassName', rowIdxKey, 'row-modify');
+				this.updateData('modify', rowIdxKey);
+			}
+		},
+		isBaseDataRow(rowKey) {
+			// 기존데이터 여부 확인 (추가된 데이터 X)
+			return this.chkGridData.map(item => item.rowKey).indexOf(rowKey);
+		},
+		compareData(data) {
+			const rowData = this.chkGridData.filter(item => {
+				return item.rowKey == data.rowKey;
+			})[0];
+			// console.log(rowData);
+			return rowData[data.columnName] == data.value;
+		},
+		updateData(updateType, rowIdxKey) {
+			let type = '';
+			switch (updateType) {
+				case 'insert':
+					type = 'I';
+					break;
+				case 'modify':
+					type = 'U';
+					break;
+				case 'delete':
+					type = 'D';
+					break;
+			}
+			this.gridInstance.invoke('setValue', rowIdxKey, 'rowStat', type);
+		},
+		// 지정 로우 선택상태
+		focus(rowInfo) {
+			this.gridInstance.invoke(
+				'focus',
+				rowInfo.rowKey,
+				rowInfo.columnName,
+				rowInfo.setScroll,
+			);
+		},
+		// 트리 전체 접기
+		expandAll() {
+			this.gridInstance.invoke('expandAll');
+		},
+		// 트리 전체 펼치기
+		collapseAll() {
+			this.gridInstance.invoke('collapseAll');
+		},
+		save() {
+			const saveTargetRows = this.gridInstance.invoke('getModifiedRows');
+			// createdRows | deletedRows | updatedRows
+			const createdRows = saveTargetRows.createdRows.map(item => {
+				delete item.rowKey;
+				return item;
+			});
+			const deletedRows = saveTargetRows.deletedRows.map(item => {
+				delete item.rowKey;
+				return item;
+			});
+			const updatedRows = saveTargetRows.updatedRows.map(item => {
+				delete item.rowKey;
+				return item;
+			});
+			const dataArr = createdRows.concat(deletedRows).concat(updatedRows);
+			return dataArr;
+			// this.$emit("saveGrid", saveTargetRows);
+		},
+		// resetData() {
+		//   // console.log("resetData = ", this.tuigridProps.data);
+		//   this.$refs.tuigrid.invoke("resetData", this.tuigridProps.data);
+		// }
+	},
+};
+</script>
+<style scoped lang="scss">
+::v-deep .tui-grid-cell {
+	&.row-insert {
+		background-color: #13636c !important;
+		color: #fff !important;
+	}
+	&.row-modify {
+		background-color: #13636c;
+	}
+	&.row-removed {
+		background-color: red;
+	}
+}
+</style>