hubez-admin/frontend/src/modules/sendNumMgt/components/ApprDetailPop.vue

<template>
  <!-- <div class="wrap bg-wrap"> -->
  <div>
    <div class="dimmed modal55" @click="apprDetailPopClose"></div>
    <div class="popup-wrap modal55">
      <!-- 발신번호 상세 (타사업자)-->
      <div class="popup modal55 popup_form">
        <div class="pop-head">
          <h3 class="pop-tit">발신번호 승인 요청 내역</h3>
        </div>
        <table>
          <tbody>
            <tr>
              <th>요청일</th>
              <td>{{ regDt }}</td>
            </tr>
            <tr v-show="cmpltDt !== '' && cmpltDt !== null">
              <th>완료일</th>
              <td>{{ cmpltDt }}</td>
            </tr>
            <tr>
              <th>관리자 ID</th>
              <td>{{ adminId }}</td>
            </tr>
            <tr>
              <th>고객사명</th>
              <td>{{ custNm }}</td>
            </tr>
            <tr>
              <th>사업자번호</th>
              <td>{{ bizrno }}</td>
            </tr>
            <tr>
              <th>명의자 구분</th>
              <td>{{ nmineeDivCd }}</td>
            </tr>
            <tr>
              <th class="two-tit">본인인증 휴대폰번호</th>
              <td>{{ slfAuthHp }}</td>
            </tr>
            <tr>
              <th>발신번호</th>
              <td class="sender">
                <div class="sender-head">
                  <div class="count">
                    총<span>{{ numList.length }}</span
                    >건
                  </div>
                  <div class="radio_group">
                    <input
                      type="radio"
                      name="state"
                      ref="apprRadio"
                      value="02"
                      id="popup_radio13"
                      @change="allApprSttus($event)"
                    />
                    <label for="popup_radio13">전체승인</label>
                    <input
                      type="radio"
                      name="state"
                      ref="rejRadio"
                      value="03"
                      id="popup_radio14"
                      @change="allApprSttus($event)"
                    />
                    <label for="popup_radio14">전체반려</label>
                  </div>
                </div>
                <ul>
                  <li v-for="(item, idx) in numList">
                    {{ idx + 1 }}. {{ item.sndrno }}
                    <div class="select-btn">
                      <button
                        :class="{
                          'btn-pcolor': item.sttusCd === '02',
                          'btn-default': item.sttusCd === '01' || item.sttusCd === '03',
                        }"
                        @click="change(idx, '02')"
                      >
                        승인
                      </button>
                      <button
                        :class="{
                          'btn-pcolor': item.sttusCd === '03',
                          'btn-default': item.sttusCd === '01' || item.sttusCd === '02',
                        }"
                        @click="change(idx, '03')"
                      >
                        반려
                      </button>
                    </div>
                  </li>
                </ul>
              </td>
            </tr>
            <tr>
              <th>제출서류</th>
              <td class="sender">
                <a
                  href="javascript:void(0);"
                  @click="download(item.filePath, item.fileNm, item.docTitle)"
                  v-for="(item, idx) in docList"
                  v-if="
                    item.docTpCd !== '06' && item.docTpCd !== '07' && item.docTpCd !== '13' && item.docTpCd !== '14'
                  "
                  >{{ item.docTitle }} <br
                /></a>
              </td>
            </tr>
            <tr>
              <th>사업자등록증</th>
              <td class="sender">
                <a
                  href="javascript:void(0);"
                  @click="download(item.filePath, item.fileNm, item.docTitle)"
                  v-for="(item, idx) in docList"
                  v-if="item.docTpCd === '06'"
                  >{{ item.docTitle }}<br
                /></a>
                <a
                  href="javascript:void(0);"
                  @click="download(item.filePath, item.fileNm, item.docTitle)"
                  v-for="(item, idx) in docList"
                  v-if="item.docTpCd === '07'"
                  >{{ item.docTitle }}<br
                /></a>
              </td>
            </tr>
            <tr>
              <th>본인확인</th>
              <td class="sender">
                <a
                  href="javascript:void(0);"
                  @click="download(item.filePath, item.fileNm, item.docTitle)"
                  v-for="(item, idx) in docList"
                  v-if="item.docTpCd === '13'"
                  >{{ item.docTitle }}<br
                /></a>
                <a
                  href="javascript:void(0);"
                  @click="download(item.filePath, item.fileNm, item.docTitle)"
                  v-for="(item, idx) in docList"
                  v-if="item.docTpCd === '14'"
                  >{{ item.docTitle }}<br
                /></a>
              </td>
            </tr>
            <tr>
              <th>메모</th>
              <td class="sender">
                <textarea class="memo_text" v-model="memo">{{ memo }}</textarea>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="popup-btn2">
          <button class="btn-pcolor" @click="updateSttus">저장</button>
          <button class="btn-default" @click="apprDetailPopClose">취소</button>
        </div>
      </div>

      <common-modal ref="commmonModal"></common-modal>
    </div>
  </div>
</template>

<script>
import sendNumMgtApi from '@/modules/sendNumMgt/service/sendNumMgtApi';
import commonModal from '@/components/modal/commonModal';

export default {
  name: 'numberRegPop',
  watch: {
    nmineeDivCd() {},
  },
  data() {
    return {
      row: {},
      regReqNo: '',
      docNo: '',
      reqNo: '',
      seqNo: '',
      cmpltDt: '',
      adminId: '',
      custNm: '',
      bizrno: '',
      nmineeDivCd: '',
      slfAuthHp: '',
      regDt: '',
      memo: '',
      docList: [],
      numList: [],
    };
  },
  components: {
    commonModal,
  },
  model: {
    prop: 'sendData',
    event: 'event-data',
  },
  props: ['sendData'],
  created() {
    this.formReset();
  },
  methods: {
    //파일 다운로드
    download(filePath, fileName, docTitle) {
      this.row = {};
      this.row.docTitle = docTitle;
      this.row.filePath = filePath;
      this.row.fileNm = fileName;
      sendNumMgtApi.fileDownload(this.row);
    },
    // 모달 띄우기
    apprDetailPopOpen(props) {
      var dimmed = document.getElementsByClassName('modal55');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
      this.apprDetail(props);
    },
    async apprDetail(props) {
      try {
        this.row.regReqNo = props.regReqNo;
        this.row.docNo = props.docNo;
        const response = await sendNumMgtApi.apprDetail(this.row);
        const result = response.data;
        if (result != null && result.retCode == '0000') {
          this.regReqNo = result.data.regReqNo;
          this.docNo = result.data.docNo;
          this.docTitle = result.data.docTitle;
          this.regDt = result.data.regDt;
          this.custNm = this.fromHtmlEntities(result.data.custNm);
          this.adminId = result.data.adminId;
          this.chgDt = result.data.chgDt;
          this.bizrno =
            result.data.bizrno.substring(0, 3) +
            '-' +
            result.data.bizrno.substring(3, 5) +
            '-' +
            result.data.bizrno.substring(5, 10);
          this.nmineeDivCd = result.data.nmineeDivCd;
          this.slfAuthHp = result.data.slfAuthHp;
          this.docList = result.data.docList;
          this.numList = result.data.numList;
          this.memo = result.data.memo;
          this.cmpltDt = result.data.cmpltDt;

          var apprCnt = 0;
          var rejtCnt = 0;
          this.numList.forEach(function (value, index) {
            // value.sttusCd = data
            if (value.sttusCd == '01' || value.sttusCd == '02') {
              apprCnt = apprCnt + 1;
            } else if (value.sttusCd == '03') {
              rejtCnt = rejtCnt + 1;
            }
          });
          if (apprCnt == this.numList.length) {
            this.$refs.apprRadio.checked = true;
          } else if (rejtCnt == this.numList.length) {
            this.$refs.rejRadio.checked = true;
          }
        }
      } catch (error) {
        this.row.title = '발신번호승인';
        this.row.msg1 = '실패 하였습니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
      }
    },
    // 모달 끄기
    apprDetailPopClose() {
      var dimmed = document.getElementsByClassName('modal55');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
    },
    allApprSttus(event) {
      var data = event.target.value;
      this.numList.forEach(function (value, index) {
        value.sttusCd = data;
      });
    },
    change(idx, val) {
      this.numList[idx].sttusCd = val;
      this.$refs.apprRadio.checked = false;
      this.$refs.rejRadio.checked = false;
      // radio_group 클래스 하위 라디오 박스 체크 유무 변경 필요.
      var apprCnt = 0;
      var rejtCnt = 0;
      this.numList.forEach(function (value, index) {
        if (value.sttusCd == '01' || value.sttusCd == '02') {
          apprCnt = apprCnt + 1;
        } else if (value.sttusCd == '03') {
          rejtCnt = rejtCnt + 1;
        }
      });
      if (apprCnt == this.numList.length) {
        this.$refs.apprRadio.checked = true;
      } else if (rejtCnt == this.numList.length) {
        this.$refs.rejRadio.checked = true;
      }
    },
    updateSttus() {
      this.doSave();
    },
    async doSave() {
      this.row.memo = this.memo;
      this.row.regReqNo = this.regReqNo;
      this.row.adminId = this.adminId;
      this.row.list = this.numList;

      try {
        const response = await sendNumMgtApi.updateAppr(this.row);
        const result = response.data;
        if (result != null && result.retCode == '0000') {
          this.apprDetailPopClose();
          this.$parent.search();
        }
      } catch (error) {
        this.row.title = '발신번호 승인';
        this.row.msg1 = '실패 하였습니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
      }
    },
    formReset() {
      Object.assign(this.$data, this.$options.data());
    },
    fromHtmlEntities(str) {
      return (str + '').replace(/&#\d+;/gm, function (s) {
        return String.fromCharCode(s.match(/\d+/gm)[0]);
      });
    },
  },
};
</script>