sk_fems_ui/components/common/modal/EnrgReadPlacePop2Page.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.label ? 7 : ''">
			<v-row>
				<v-col cols="3">
					<v-text-field
						readonly
						v-model="selectValue1"
						class="v-input__custom"
						style="width:100%"
						disabled
					></v-text-field>
				</v-col>
				<v-col cols="3">
					<v-text-field
						readonly
						v-model="selectValue2"
						class="v-input__custom"
						style="width:100%"
						disabled
					></v-text-field>
				</v-col>
				<v-col cols="1">
					<v-btn
						class="v-btn__round v-btn-bg__blue mr-2"
						@click="dialog = !dialog"
					>
						<v-icon>mdi-magnify</v-icon>
					</v-btn>
				</v-col>
				<v-spacer></v-spacer>
			</v-row>
		</v-col>

		<v-dialog v-model="dialog" scrollable width="640px">
			<v-card style="height: 100%">
				<v-card-title>
					<span class="custom-title-4">검침개소위치</span>
				</v-card-title>
				<v-card-actions>
					<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-card-actions>
				<v-divider></v-divider>
				<v-card-text>
					<div ref="rowGridParent" style="height: 300px">
						<component
							:ref="gridName + parentPrgmId"
							:is="loadGrid && dialog ? 'Grid' : null"
							:gridName="gridName"
							:dataPath="searchParam.modalData.selectReadPlcPopList"
							:parentPrgmId="parentPrgmId"
							@getRowsData="getRowData"
							@dblClick="setUpdate()"
						/>
					</div>
				</v-card-text>
				<v-divider></v-divider>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="primary" dark @click="setUpdate()">확인</v-btn>
					<v-btn color="primary" dark @click="dialog = false">닫기</v-btn>
				</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.cede]
				? this.myBindingData[this.item.valueNm.cede]
				: null;
		},
		selectValue2() {
			// 선택된 값
			return this.myBindingData && this.myBindingData[this.item.valueNm.name]
				? this.myBindingData[this.item.valueNm.name]
				: null;
		},
	},
	watch: {
		async chkDialog(val) {
			if (val) {
				// 열릴 때
				await this.getData();
			}
		},
	},

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

	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setModalGridData: 'setModalGridData',
			setModalGridColumn: 'setModalGridColumn',
			setModalGridOption: 'setModalGridOption',
		}),
		...mapActions({
			postApiReturn: 'modules/list/postApiReturn',
		}),
		init() {
			this.gridInit();
		},
		gridInit() {
			const gridHeight = 490; // this.$refs.rowGridParent.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: 'selectReadPlcPopList',
				resKey: 'readPlcData',
				sendParam: {
					params: { blocId: this.searchParam.blocCodeLists },
					isMulti: false,
				},
			});

			this.setModalGridData({
				modalKey: this.myModalKey,
				gridKey: this.gridName,
				value: res,
			});
			// setTimeout(
			// this.$nextTick(() => {
			//   if (res.length > 0) {
			//     // console.log(this.$refs[this.gridName + this.parentPrgmId]);
			//     this.$refs[this.gridName + this.parentPrgmId].focus({
			//       rowKey: 0,
			//       setScroll: true
			//     });
			//   }
			// });
			//   2000
			// );
			this.loadGrid = true;
		},
		// sms 목록 그리드 클릭 이벤트
		async getRowData(data) {
			this.changeData = data;
		},
		setUpdate() {
			this.dialog = false;
			this.$emit('gridEditingFinish', {
				columnName: this.item.valueNm.cede,
				value: this.changeData[this.item.valueNm.cede],
			});
			this.$emit('gridEditingFinish', {
				columnName: this.item.valueNm.name,
				value: this.changeData[this.item.valueNm.name],
			});
		},
	},
};

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

const myColumns = [
	{ header: '검침개소코드', name: 'readPlc', align: 'center' },
	{ header: '검침개소명', name: 'readPlcNm' },
	{ header: '검침개소종류명', name: 'plcKindNm', align: 'center' },
];
</script>

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