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

<template>
  <!-- <div class="wrap bg-wrap"> -->
  <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>{{ msg }}</p>
        </div>
        <div class="pop-btn2">
          <button class="btn-pcolor" @click="confirmModalClose();">확인</button>
          <button class="btn-default" @click="confirmModalCancel();">취소</button>
        </div>
      </div>
    </div>

    <!-- 사용자 등록 - 이메일 형식 체크 -->
    <div class="dimmed validation-email" @click="validationEmailClose();"></div>
    <div class="popup-wrap validation-email">
      <div class="popup validation-email">
        <div class="pop-head">
          <h3 class="pop-tit">사용자 등록</h3>
        </div>
        <div class="pop-cont">
          <p>E-mail 형식에 맞지 않습니다.</p>
          <p>확인하여 다시 등록 부탁 드립니다.</p>
        </div>
        <div class="pop-btn1">
          <button class="btn-pcolor" @click="validationEmailClose();">확인</button>
        </div>
      </div>
    </div>

    <!-- 사용자 등록 - 아이디 중복 체크 -->
    <div class="dimmed validation-id-duplicate" @click="validationIdDuplicateClose();"></div>
    <div class="popup-wrap validation-id-duplicate">
      <div class="popup validation-id-duplicate">
        <div class="pop-head">
          <h3 class="pop-tit">사용자 등록</h3>
        </div>
        <div class="pop-cont">
          <p>중복된 아이디가 있습니다.</p>
          <p>아이디를 다시 확인하여 등록 부탁드립니다.</p>
        </div>
        <div class="pop-btn1">
          <button class="btn-pcolor" @click="validationIdDuplicateClose();">확인</button>
        </div>
      </div>
    </div>

    <!-- 사용자 등록 - 최대 등록 제한 -->
    <div class="dimmed validation-maxlimit" @click="validationMaxlimitClose();"></div>
    <div class="popup-wrap validation-maxlimit">
      <div class="popup validation-maxlimit">
        <div class="pop-head">
          <h3 class="pop-tit">사용자 등록</h3>
        </div>
        <div class="pop-cont">
          <p>사용자는 최대 100개까지 등록 가능합니다.</p>
        </div>
        <div class="popup-btn1">
          <button class="btn-pcolor" @click="validationMaxlimitClose();">확인</button>
        </div>
      </div>
    </div>

    <!-- 사용자 등록 - 휴대폰번호 형식 체크 -->
    <div class="dimmed valication-phonenumber" @click="validationPhonenumberClose();"></div>
    <div class="popup-wrap valication-phonenumber">
      <div class="popup valication-phonenumber">
        <div class="pop-head">
          <h3 class="pop-tit">사용자 등록</h3>
        </div>
        <div class="pop-cont">
          <p>휴대폰번호를 확인해 주세요.</p>
        </div>
        <div class="pop-btn1">
          <button class="btn-pcolor" @click="validationPhonenumberClose();">확인</button>
        </div>
      </div>
    </div>

    <!-- 사용자 삭제 -->
    <div class="dimmed confirm-delete" @click="confirmDeleteClose();"></div>
    <div class="popup-wrap confirm-delete">
      <div class="popup confirm-delete">
        <div class="pop-head">
          <h3 class="pop-tit">사용자 삭제</h3>
        </div>
        <div class="pop-cont">
          <p>선택한 사용자를 삭제하시겠습니까?</p>
        </div>
        <div class="pop-btn2">
          <button class="btn-pcolor" @click="confirmDelete();">확인</button>
          <button class="btn-default" @click="confirmDeleteClose();">취소</button>
        </div>
      </div>
    </div>


    <!-- 사용자 수정(청약고객:sub) 확인 -->
    <div class="dimmed confirm-update-sub" @click="confirmUpdateSubClose();"></div>
    <div class="popup-wrap confirm-update-sub">
      <div class="popup confirm-update-sub">
        <div class="pop-head">
          <h3 class="pop-tit">사용자(청약고객) 수정 확인</h3>
        </div>
        <div class="pop-cont">
          <p>변경된 내용을 저장하시겠습니까?</p>
        </div>
        <div class="popup-btn2">
          <button class="btn-pcolor" @click="confirmUpdateSub();">확인</button>
          <button class="btn-default" @click="confirmUpdateSubClose();">취소</button>
        </div>
      </div>
    </div>

    <!-- 사용자 ID 생성 파일 업로드 - 성공 -->
    <div class="dimmed success-fileupload" @click="successFileuploadClose();"></div>
    <div class="popup-wrap success-fileupload">
      <div class="popup success-fileupload">
        <div class="pop-head">
          <h3 class="pop-tit">사용자 ID 생성 파일 업로드</h3>
        </div>
        <div class="pop-cont">
          <p>정상 업로드 되었습니다.</p>
        </div>
        <div class="popup-btn1">
          <button class="btn-pcolor" @click="successFileuploadClose();">확인</button>
        </div>
      </div>
    </div>

    <div class="dimmed fail-fileupload" @click="failFileuploadClose();"></div>
    <div class="popup-wrap fail-fileupload">
      <!-- 사용자 ID 생성 파일 업로드 -->
      <div class="popup fail-fileupload">
        <div class="pop-head">
          <h3 class="pop-tit">사용자 ID 생성 파일 업로드</h3>
        </div>
        <div class="pop-cont">
          <p>파일 업로드 중 오류가 발생하여 정상건만</p>
          <p>업로드 완료하였습니다.</p>
        </div>
        <ul class="pop-cont-detail">
          <li>총 <span class="number">{{ totalCnt }}</span>건 ( 정상 <span class="number blue">{{ successCnt }}</span>건 오류
            <span class="number red">{{ failCnt }}</span>건 )
          </li>
        </ul>
        <div class="pop-cont bottom">
          <p>오류 건은 확인 후 재등록 부탁 드립니다.</p>
        </div>
        <div class="popup-btn2">
          <button class="btn-pcolor" @click="failFileuploadOk();">확인</button>
          <!--            <button class="btn-default" @click="failFileuploadClose();">취소</button>-->
        </div>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: "validationConfirmPop",
  data() {
    return {
      row: {},
      title: '',
      msg: '',
      failCnt: 0,
      successCnt: 0,
      totalCnt: 0,
    }
  },
  methods: {
    //사용자등록 - 최초등록 Open
    confirmInsertOpen() {
      var dimmed = document.getElementsByClassName('confirm-insert');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
    },
    //사용자등록 - 최초등록
    confirmInsert() {
      var dimmed = document.getElementsByClassName('confirm-insert');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      this.$parent.doMemberInsert();
    },
    //사용자등록 - 최초등록 Close
    confirmInsertClose() {
      var dimmed = document.getElementsByClassName('confirm-insert');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
    },
    // 사용자 삭제 Open
    confirmDeleteOpen() {
      var dimmed = document.getElementsByClassName('confirm-delete');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
    },
    //사용자 삭제
    confirmDelete() {
      var dimmed = document.getElementsByClassName('confirm-delete');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
    },
    //사용자 삭제 Close
    confirmDeleteClose() {
      var dimmed = document.getElementsByClassName('confirm-delete');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
    },
    //사용자 수정 확인 Open
    confirmUpdateOpen() {
      var dimmed = document.getElementsByClassName('confirm-update');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
    },
    //사용자 수정 확인
    confirmUpdate() {
      var dimmed = document.getElementsByClassName('confirm-update');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      this.$parent.memberUpdate();
    },
    // 사용자 수정 Close
    confirmUpdateClose() {
      var dimmed = document.getElementsByClassName('confirm-update');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
    },
    //사용자 수정(청약고객-sub) 확인 Open
    confirmUpdateSubOpen() {
      var dimmed = document.getElementsByClassName('confirm-update-sub');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
    },
    //사용자 수정(청약고객-sub) 확인
    confirmUpdateSub() {
      var dimmed = document.getElementsByClassName('confirm-update-sub');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      this.$parent.updateAdminInfo();
    },
    // 사용자 수정(청약고객-sub) Close
    confirmUpdateSubClose() {
      var dimmed = document.getElementsByClassName('confirm-update-sub');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
    },
    // 이메일 형식 체크 Open
    validationEmailOpen() {
      var dimmed = document.getElementsByClassName('validation-email');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
    },
    // 이메일 형식 체크 Close
    validationEmailClose() {
      var dimmed = document.getElementsByClassName('validation-email');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      this.$parent.checkEmailFocus();
    },
    // 아이디 중복 체크 Open
    validationIdDuplicateOpen() {
      var dimmed = document.getElementsByClassName('validation-id-duplicate');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
    },
    // 아이디 중복 체크 Close
    validationIdDuplicateClose() {
      var dimmed = document.getElementsByClassName('validation-id-duplicate');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      this.$parent.checkIdDupFocus();
    },
    // 최대 등록 제한 Open
    validationMaxlimitOpen() {
      var dimmed = document.getElementsByClassName('validation-maxlimit');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
    },
    // 최대 등록 제한 Close
    validationMaxlimitClose() {
      var dimmed = document.getElementsByClassName('validation-maxlimit');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
    },
    // 휴대폰번호 형식 체크 Open
    validationPhonenumberOpen() {
      var dimmed = document.getElementsByClassName('valication-phonenumber');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
    },
    // 휴대폰번호 형식 체크 Close
    validationPhonenumberClose() {
      var dimmed = document.getElementsByClassName('valication-phonenumber');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      this.$parent.checkPhoneFocus();
    },
    // 사용자 ID 생성 파일 업로드 - 성공 Open
    successFileuploadOpen() {
      var dimmed = document.getElementsByClassName('success-fileupload');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
    },
    // 사용자 ID 생성 파일 업로드 - 성공 Close
    successFileuploadClose() {
      var dimmed = document.getElementsByClassName('success-fileupload');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      // 목록페이지 이동
      this.$parent.toComplete();
    },
    // 정상완료 후 목록페이지 이동
    toComplete() {
      this.row.searchType1 = '';
      this.row.searchType2 = '';
      this.row.searchType3 = '';
      this.row.searchText1 = '';
      this.row.startDt = '';
      this.row.endDt = '';
      this.row.page = 1;
      this.$router.push({name: 'subsList', params: this.row});
    },
    // 사용자 ID 생성 파일 업로드 - 성공 Open
    failFileuploadOpen(props) {
      var dimmed = document.getElementsByClassName('fail-fileupload');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
      this.totalCnt = props.totalCnt
      this.successCnt = props.successCnt
      this.failCnt = props.failCnt
    },
    failFileuploadOk() {
      var dimmed = document.getElementsByClassName('fail-fileupload');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      this.row.result = true;
      // 부모 함수 호출.
      this.$parent.failFileuploadOk(this.row);
    },
    // 사용자 ID 생성 파일 업로드 - 성공 Close
    failFileuploadClose() {
      var dimmed = document.getElementsByClassName('fail-fileupload');
      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.msg = props.msg;
    },
    // 모달 끄기(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>