sk_fems_ui/components/common/modal/GridClickPop.vue

<template>
	<div>
		<!-- <v-btn :ripple="false" @click="dialog = !dialog">경고창</v-btn> -->
		<v-dialog
			v-model="dialog"
			width="900"
			overlay-color="#000"
			overlay-opacity="0.8"
		>
			<v-card>
				<v-toolbar
					:color="isDarkMode ? '#2d3355' : '#3f4d7d'"
					class="py-4 pr-3 pl-5"
					height="auto"
				>
					<v-toolbar-title>{{ label }}</v-toolbar-title>
					<v-btn
						icon
						tile
						small
						:ripple="false"
						@click="dialog = !dialog"
						:style="{ backgroundColor: isDarkMode ? '#2d3355' : '#3f4d7d' }"
					>
						<v-icon>mdi-close</v-icon>
					</v-btn>
				</v-toolbar>
				<!-- <template v-for="(item, index) in detailList"> -->
				<template>
					<div style="padding : 20px">
						<div v-for="n in detailList.length" :key="n">
							<v-row v-if="n % 2 == 1" align="center" no-gutters>
								<!-- {{detailList[n-1]}} {{detailList[n-1].type}} -->
								<v-col
									:cols="detailList[n - 1].cols"
									:class="detailList[n - 1].class"
								>
									<component
										:is="detailList[n - 1].type"
										:item="detailList[n - 1]"
										:parentPrgmId="parentPrgmId"
										:bindingData="bindingData"
									/>
								</v-col>
								<v-col
									v-if="detailList[n] != undefined"
									:cols="detailList[n].cols"
									:class="detailList[n].class"
								>
									<component
										:is="detailList[n].type"
										:item="detailList[n]"
										:parentPrgmId="parentPrgmId"
										:bindingData="bindingData"
									/>
								</v-col>
							</v-row>
						</div>
					</div>
				</template>
				<v-card-actions class="justify-end">
					<v-btn :ripple="false" @click="clickOk()">확인</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import InputText from '~/components/common/form/InputText';
import InputNumber from '~/components/common/form/InputNumber';
import TextArea from '~/components/common/form/TextArea';
import SelectBox from '~/components/common/form/SelectBox';
import SelectBoxes from '~/components/common/form/SelectBoxes';
import CheckBox from '~/components/common/form/CheckBox';
import ChangeUserPswdPopPage from '~/components/common/modal/ChangeUserPswdPopPage';
import EnrgReadPlacePop2Page from '~/components/common/modal/EnrgReadPlacePop2Page';
import EnrgCostCenterPop from '~/components/common/modal/EnrgCostCenterPop';
import ReadPlcPop from '~/components/common/modal/ReadPlcPop';
import EvtObjPop from '~/components/common/modal/EvtObjPop';
import FtnPlcFormPop from '~/components/common/modal/FtnPlcMultiPop2';
import Label from '~/components/common/form/Label';
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		detailList: {
			type: Array,
			require: false,
			default: () => {
				return [];
			},
		},
		label: {
			type: String,
			require: true,
		},
		bindingData: {
			type: String,
			require: false,
		},
		myGrid: {
			require: true,
		},
	},
	components: {
		InputText,
		InputNumber,
		TextArea,
		SelectBox,
		SelectBoxes,
		CheckBox,
		ChangeUserPswdPopPage,
		EnrgReadPlacePop2Page,
		EnrgCostCenterPop,
		ReadPlcPop,
		EvtObjPop,
		Label,
		FtnPlcFormPop,
	},
	data() {
		return {
			dialog: false,
		};
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
			isDarkMode: 'isDarkMode',
		}),
		chkDialog() {
			return this.dialog;
		},
	},
	watch: {
		async chkDialog(val) {
			if (val) {
			}
		},
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
		}),
		clickOk() {
			if (this.parentPrgmId) {
				// this.$emit('yesNo',true);
				this.setPageData({ rowGridSelectData: null });
			}
			this.dialog = !this.dialog;
		},
	},
};
</script>

<style scoped lang="scss">
::v-deep {
	.v-toolbar__content {
		justify-content: space-between;
		padding: 0;

		.v-btn {
			margin-right: 0 !important;
		}
	}

	.v-card__actions {
		padding-bottom: 30px !important;
	}
}
</style>