hubez-admin/frontend/src/modules/custMgt/components/commonModal.vue

<template>
  <!-- <div class="wrap bg-wrap"> -->
  <div>

    <div class="dimmed alertModal" @click="alertModalCancel();"></div>
    <div class="popup-wrap alertModal">
      <!-- 로그인실패: 확인 -->
      <div class="popup alertModal">
        <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="popup-btn2">
          <button class="btn-pcolor" @click="confirmModalClose();">확인</button>
          <button class="btn-default" @click="confirmModalCancel();">취소</button>
        </div>
      </div>
    </div>

    <div class="dimmed confirm2" @click="confirmModalCancel2();"></div>
    <div class="popup-wrap confirm2">
      <!-- 수정 확인 -->
      <div class="popup confirm2">
        <div class="pop-head">
          <h3 class="popup-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-btn2">
          <button class="btn-pcolor" @click="confirmModalClose2();">확인</button>
          <button class="btn-default" @click="confirmModalCancel2();">취소</button>
        </div>
      </div>
    </div>

    <div class="dimmed confirmMemo" @click="confirmModalCancelMemo();"></div>
    <div class="popup-wrap confirmMemo">
      <!-- 수정 확인 -->
      <div class="popup confirmMemo">
        <div class="pop-head">
          <h3 class="popup-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-btn2">
          <button class="btn-pcolor" @click="confirmModalCloseMemo();">확인</button>
          <button class="btn-default" @click="confirmModalCancelMemo();">취소</button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: "confirm",
  data() {
    return {
      row: {},
      title: '',
      msg1: '',
      msg2: '',
      msg3: '',
      msg4: '',
      targetFocus: '',
    }
  },
  methods: {
    alertModalOpen(props) {
      console.log(props.msg1);
      this.title = props.title;
      this.msg1 = props.msg1;
      this.msg2 = props.msg2;
      this.msg3 = props.msg3;
      this.msg4 = props.msg4;
      console.log(props)
      var dimmed = document.getElementsByClassName('alertModal');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }

    },
    alertModalClose() {
      var dimmed = document.getElementsByClassName('alertModal');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      this.$parent.checkFocus();
    },
    alertModalCancel() {
      var dimmed = document.getElementsByClassName('alertModal');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      this.$parent.checkFocus();
    },
    // 모달 오픈
    confirmModalOpen(props) {
      console.log(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;
    },
    confirmModalOpen2(props) {
      var dimmed = document.getElementsByClassName('confirm2');
      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;
    },
    confirmModalOpenMemo(props) {
      var dimmed = document.getElementsByClassName('confirmMemo');
      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);
    },
    // 모달 끄기(ok)
    confirmModalClose2() {
      var dimmed = document.getElementsByClassName('confirm2');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }

      this.row.result = true;
      // 부모 함수 호출.
      this.$parent.confirmCalbackFnc(this.row);
    },
    // 모달 끄기(ok)
    confirmModalCloseMemo() {
      var dimmed = document.getElementsByClassName('confirmMemo');
      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);
    },
    // 모달 끄기(취소)
    confirmModalCancel2() {
      var dimmed = document.getElementsByClassName('confirm2');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }

      this.row.result = false;
      // 부모 함수 호출.
      this.$parent.confirmCalbackFnc(this.row);
    },
    // 모달 끄기(취소)
    confirmModalCancelMemo() {
      var dimmed = document.getElementsByClassName('confirmMemo');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }

      this.row.result = false;
      // 부모 함수 호출.
      this.$parent.memberDeleteConfirmCalbackFnc(this.row);
    },

  }
}
</script>