sk_fems_ui/components/pages/comm/CommCdTab.vue

<template>
	<div class="pb-5 h100">
		<div class="d-flex align-center justify-space-between">
			<span class="grid-title">공통그룹코드</span>
			<div>
				<Buttons
					:parentPrgmId="parentPrgmId"
					:bindingData="gridName"
					:btnActionsFnc="btnActions"
				/>
			</div>
		</div>
		<div ref="gridParent" class="mt-6" style="height:calc(100% - 36px);">
			<div class="h100">
				<Grid
					:ref="gridName"
					:is="loadGrid ? 'Grid' : null"
					:gridName="gridName"
					:parentPrgmId="parentPrgmId"
					:editorGrid="true"
					:innerTabGridInfo="innerTabGridInfo"
					@getRowsData="getRowData"
				/>
			</div>
		</div>
	</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Buttons from '~/components/common/button/Buttons';
import Grid from '~/components/common/Grid';
export default {
	components: {
		Buttons,
		Grid,
	},
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		innerTabGridInfo: {
			type: Object,
			default: null,
		},
	},
	data() {
		return {
			loadGrid: false,
			gridName: 'rowDetailGrid',
			rowKey: null,
			edtingFinishFlag: 'Y',
		};
	},
	computed: {
		...mapState({
			pageData(state) {
				return state.pageData[this.parentPrgmId];
			},
		}),
		selectedCommCd() {
			return this.pageData[this.gridName].data;
		},
		myUseFgList() {
			return this.pageData.useFgList;
		},
		selectedCommGrpCd() {
			return this.pageData.rowGridSelectData.commGrpCd;
		},
	},
	mounted() {
		this.init();
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setGridData: 'setGridData',
			setGridColumn: 'setGridColumn',
			setGridOption: 'setGridOption',
		}),
		...mapActions({
			postApi: 'modules/list/postApi',
			postUpdateApi: 'modules/list/postUpdateApi',
			postApiReturn: 'modules/list/postApiReturn',
			setTree: 'modules/list/setTree',
			chkOpenTabList: 'chkOpenTabList',
		}),
		init() {
			this.gridInit();
		},
		gridInit() {
			const gridHeight = this.$refs.gridParent.offsetHeight - 36;
			const myOptions = {
				columnOptions: {
					resizable: true,
				},
				bodyHeight: gridHeight,
				minBodyHeight: gridHeight,
				selectionUnit: 'row',
				editingEvent: 'click',
				scrollX: false,
			};
			this.setGridOption({
				gridKey: this.gridName,
				value: myOptions,
			});
			setTimeout(() => {});

			const _this = this;
			let useFgSelectList = [];
			this.pageData.useFgList.forEach(item => {
				const it = { text: item.commCdNm, value: item.commCd };
				useFgSelectList.push(it);
			});
			const myColumns = [
				{ header: '그룹코드', name: 'commGrpCd', hidden: true },
				{ header: '코드', name: 'commCd', align: 'center', editor: 'text' },
				{ header: '코드명', name: 'commCdNm', editor: 'text' },
				{ header: '약어명', name: 'commCdAbbrnm', editor: 'text' },
				{
					header: '정렬순서',
					name: 'sortSeq',
					align: 'center',
					editor: 'text',
				},
				{
					header: '사용여부',
					name: 'useFg',
					align: 'left',
					formatter({ value }) {
						const newValue = _this.pageData.useFgList.filter(
							item => item.commCd == value,
						);
						return newValue[0].commCdNm;
					},
					editor: {
						type: 'select',
						options: {
							listItems: useFgSelectList,
						},
					},
				},
				{ header: '사용자정의값1', name: 'userDefVal1', editor: 'text' },
				{ header: '사용자정의값2', name: 'userDefVal2', editor: 'text' },
				{ header: '사용자정의값3', name: 'userDefVal3', editor: 'text' },
				{ header: '비고', name: 'rmrk', editor: 'text' },
			];

			this.setGridColumn({
				gridKey: this.gridName,
				value: myColumns,
			});

			this.loadGrid = true;
		},
		async btnActions(action) {
			let dataArr = [];
			switch (action) {
				case 'add':
					this.$refs[this.gridName].addRow();
					this.edtingFinishFlag = 'Y';
					break;

				case 'remove':
					await this.$refs[this.gridName].editingFinish({
						rowKey: this.rowKey,
					});
					this.$refs[this.gridName].removeRow();
					this.edtingFinishFlag = 'N';
					break;

				case 'save':
					if (this.edtingFinishFlag == 'Y') {
						await this.$refs[this.gridName].editingFinish({
							rowKey: this.rowKey,
						});
					}
					dataArr = this.$refs[this.gridName].save();
					//console.log(dataArr);
					this.setPageData({ isFind: true });
					if (dataArr.length > 0) {
						const sendParam = {
							datas: {
								dsCommCd: dataArr.map(item => ({
									...item,
									commGrpCd: this.selectedCommGrpCd,
								})),
							},
							params: {},
						};
						await this.postUpdateApi({
							apiKey: 'saveCommCd',
							sendParam: sendParam,
						});
						this.setPageData({ isFind: true });
						this.edtingFinishFlag = 'Y';
					} else {
						alert('저장할 내용이 없습니다.');
					}
					break;

				default:
					break;
			}
		},
		async getRowData(data) {
			this.rowKey = data.rowKey;
			this.edtingFinishFlag = 'Y';
		},
	},
};
</script>