sk_fems_ui/components/common/modal/EnrgCostCenterPop.vue

<template>
	<v-row class="search-box" align="center" no-gutters>
		<v-col v-if="item.label" :cols="item.cols == 12 ? 2 : 4">
			<label for="" class="search-box-label">
				{{ item.label }}
				<span v-if="item.essential">*</span>
			</label>
		</v-col>
		<v-col :cols="item.cols == 12 ? 9 : item.label ? 7 : ''">
			<v-row>
				<v-col cols="5" class="mr-2">
					<v-text-field
						readonly
						v-model="selectValue1"
						class="v-input__custom"
						disabled
					></v-text-field>
				</v-col>
				<v-col cols="5" class="mr-2">
					<v-text-field
						readonly
						v-model="selectValue2"
						class="v-input__custom"
						disabled
					></v-text-field>
				</v-col>
				<v-col cols="1">
					<v-btn icon class="v-btn-bg__blue" @click="dialog = !dialog">
						<v-icon>mdi-magnify</v-icon>
					</v-btn>
				</v-col>
			</v-row>
		</v-col>

		<v-dialog v-model="dialog" width="640px">
			<v-card>
				<v-card-title class="d-flex justify-space-between">
					<span>검침개소위치</span>
					<v-btn icon @click="dialog = false"><v-icon>mdi-close</v-icon></v-btn>
				</v-card-title>
				<v-card-actions class="flex-column">
					<v-row class="w100">
						<v-col cols="2">
							<label for="" class="search-box-label">
								검색
							</label>
						</v-col>
						<v-col cols="7">
							<v-text-field
								append-icon="mdi-magnify"
								class="v-input__custom"
							></v-text-field>
						</v-col>
					</v-row>
					<div id="gridParent" class="w100 popup-container my-3">
						<component
							:ref="gridName + parentPrgmId"
							:is="loadGrid && dialog ? 'Grid' : null"
							:gridName="gridName"
							:dataPath="searchParam.modalData.selectReadPlcPopList"
							:parentPrgmId="parentPrgmId"
							@getRowsData="getRowData"
							@dblClick="setUpdate()"
						/>
					</div>
					<div class="w100 text-right">
						<v-btn class="v-btn__round v-btn-bg__blue" @click="setUpdate()"
							>확인</v-btn
						>
					</div>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</v-row>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';

export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		item: {
			type: Object,
			require: true,
		},
	},
	components: {
		Grid,
	},
	data() {
		return {
			myModalKey: 'selectReadPlcPopList',
			gridName: 'rowGrid',
			loadGrid: false,
			changeData: {},

			dialog: false,
		};
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
			myBindingData() {
				return this.searchParam['rowGridSelectData'];
			},
		}),
		chkDialog() {
			// 모달 열기/닫기 값
			return this.dialog;
		},
		selectValue1() {
			// 선택된 값
			return this.myBindingData && this.myBindingData[this.item.valueNm.code]
				? this.myBindingData[this.item.valueNm.code]
				: null;
		},
		selectValue2() {
			// 선택된 값
			return this.myBindingData && this.myBindingData[this.item.valueNm.name]
				? this.myBindingData[this.item.valueNm.name]
				: null;
		},
	},
	watch: {
		async chkDialog(val) {
			if (val) {
				// 열릴 때
				const _this = this;
				setTimeout(() => {
					_this.init();
				}, 300);
				setTimeout(() => {
					_this.getData();
				}, 400);
			}
		},
	},

	beforeCreate() {
		this.$store.commit('setPageData', {
			modalData: { selectReadPlcPopList },
		});
	},

	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setModalGridData: 'setModalGridData',
			setModalGridColumn: 'setModalGridColumn',
			setModalGridOption: 'setModalGridOption',
		}),
		...mapActions({
			postApiReturn: 'modules/list/postApiReturn',
		}),
		init() {
			this.gridInit();
		},
		gridInit() {
			//console.log(document.getElementById("gridParent").offsetHeight);
			const gridHeight =
				document.getElementById('gridParent').offsetHeight - 30;

			const myOptions = {};
			this.setModalGridOption({
				modalKey: this.myModalKey,
				gridKey: this.gridName,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.setModalGridColumn({
				modalKey: this.myModalKey,
				gridKey: this.gridName,
				value: myColumns,
			});
		},
		async getData() {
			const res = await this.postApiReturn({
				apiKey: 'selectFtnPlcInfoList',
				resKey: 'ftnPlcInfoData',
				sendParam: {
					params: {
						comId: this.myBindingData.comId,
						blocId: this.myBindingData.blocId,
					},
					isMulti: false,
				},
			});

			this.setModalGridData({
				modalKey: this.myModalKey,
				gridKey: this.gridName,
				value: res,
			});
			this.loadGrid = true;
		},
		// sms 목록 그리드 클릭 이벤트
		async getRowData(data) {
			this.changeData = data;
			//console.log(data);
		},
		setUpdate() {
			this.dialog = false;
			// return false;
			this.$emit('gridEditingFinish', {
				columnName: this.item.valueNm.code,
				value: this.changeData[this.item.valueNm.targetCode],
			});
			this.$emit('gridEditingFinish', {
				columnName: this.item.valueNm.name,
				value: this.changeData[this.item.valueNm.targetName],
			});
		},
	},
};

const selectReadPlcPopList = {
	rowGrid: {
		data: [],
		column: [],
		option: {},
	},
	// isMulti: false
};

const myColumns = [
	{ header: '설비코드', name: 'plcCd', align: 'center' },
	{ header: '설비명', name: 'plcNm' },
	{ header: '설비명', name: 'plcCdNm', hidden: true },
];
</script>

<style scoped>
/* .v-input {
  font-size: 12px;
}
.v-label {
  font-size: 10px;
} */
</style>