리스크관리 / 유치채널현황 관리 / 채널관리 추가

frontend/src/components/modal/commonModal.vue

@@ -0,0 +1,128 @@
+<template>
+	<!-- <div class="wrap bg-wrap"> -->
+	<div>
+
+    <div class="dimmed modal01" @click="alertModalCancel();"></div>
+    <div class="popup-wrap modal01">
+      <!-- 로그인실패: 확인 -->
+      <div class="popup modal01">
+        <div class="pop-head">
+          <h3 class="pop-tit">{{title}}</h3>
+        </div>
+        <div class="pop-cont">
+          <p>{{ msg1 }}</p>
+          <p v-if="msg2 !== ''">{{ msg2 }}</p>
+          <p v-if="msg3 !== ''">{{ msg3 }}</p>
+          <p v-if="msg4 !== ''">{{ msg4 }}</p>
+        </div>
+        <div class="popup-btn1">
+          <button class="btn-pcolor" @click="alertModalClose();">확인</button>
+        </div>
+      </div>
+    </div>
+
+		<div class="dimmed confirm" @click="confirmModalCancel();"></div>
+		<div class="popup-wrap confirm">
+			<!-- 수정 확인 -->
+			<div class="popup confirm">
+				<div class="pop-head">
+					<h3 class="pop-tit">{{title}}</h3>
+				</div>
+				<div class="pop-cont">
+          <p>{{ msg1 }}</p>
+          <p v-if="msg2 !== ''">{{ msg2 }}</p>
+          <p v-if="msg3 !== ''">{{ msg3 }}</p>
+          <p v-if="msg4 !== ''">{{ msg4 }}</p>
+				</div>
+				<div class="pop-btn2">
+					<button class="btn-pcolor" @click="confirmModalClose();">확인</button>
+					<button class="btn-default" @click="confirmModalCancel();">취소</button>
+				</div>
+			</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+    name: "confirm",
+	data(){
+        return{
+		      row:{},
+          title:'',
+          msg1: '',
+          msg2: '',
+          msg3: '',
+          msg4: '',
+        }
+    },
+	methods :{
+    alertModalOpen(props){
+      console.log(props)
+      var dimmed = document.getElementsByClassName('modal01');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'block';
+      }
+      this.title = props.title;
+      this.msg1 = props.msg1;
+      this.msg2 = props.msg2;
+      this.msg3 = props.msg3;
+      this.msg4 = props.msg4;
+    },
+    alertModalClose(){
+      var dimmed = document.getElementsByClassName('modal01');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'none';
+      }
+    },
+    alertModalCancel(){
+      var dimmed = document.getElementsByClassName('modal01');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'none';
+      }
+    },
+        // 모달 오픈
+		confirmModalOpen(props){
+			var dimmed = document.getElementsByClassName('confirm');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'block';
+			}
+
+      this.title = props.title;
+      this.msg1 = props.msg1;
+      this.msg2 = props.msg2;
+      this.msg3 = props.msg3;
+      this.msg4 = props.msg4;
+		},
+		// 모달 끄기(ok)
+		confirmModalClose(){
+			var dimmed = document.getElementsByClassName('confirm');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';
+			}
+            
+      this.row.result = true;
+      // 부모 함수 호출.
+      this.$parent.confirmCalbackFnc(this.row);
+		},
+        // 모달 끄기(취소)
+		confirmModalCancel(){
+			var dimmed = document.getElementsByClassName('confirm');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';
+			}
+
+      this.row.result = false;
+      // 부모 함수 호출.
+      this.$parent.confirmCalbackFnc(this.row);
+		},		
+	}
+}
+</script>
+
+<style>
+    .popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
+    .popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
+    .popup-btn-wrap button:hover {background: #000; color: #fff;}
+</style>