sk_fems_ui/components/common/Grid2.vue

<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>