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

<template>
	<!-- <div class="wrap bg-wrap"> -->
	<div>
		<div class="dimmed" @click="numberDetailPopClose"></div>
    <!-- 발신번호 상세 (타사업자)-->
    <div class="popup modal53 popup_form register">
      <div class="pop-head">
        <h3 class="pop-tit">발신번호 상세</h3>
      </div>
      <form autocomplete="off">
        <table>
          <tbody>
          <tr>
            <th>관리자 ID</th>
            <td><input type="text" disabled v-model="adminId"></td>
          </tr>
          <tr>
            <th>고객사명</th>
            <td><input type="text" disabled v-model="custNm"></td>
          </tr>
          <tr>
            <th>등록자 ID</th>
            <td><input type="text" disabled v-model="register"></td>
          </tr>
          <tr>
            <th>사업자번호</th>
            <td><input type="text" disabled v-model="bRegNo"></td>
          </tr>
          <tr>
            <th>명의자 구분</th>
            <td><input type="text" disabled v-model="nmineeDivCd"></td>
          </tr>
          <tr>
            <th>인입채널</th>
            <td><input type="text" disabled v-model="inchDivCd"></td>
          </tr>
          <tr>
            <th>발신번호</th>
            <td>
              <div class="input_add">
                <div>
                  <input type="text" disabled v-model="sndrnoNm">
                  <input type="text" disabled v-model="sndrno">
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <th>승인상태</th>
            <td class="red">{{ sttusCd }}</td>
          </tr>
          <tr>
            <th>등록일자</th>
            <td><input type="text" disabled v-model="regDt"></td>
          </tr>
          <tr>
            <th>제출서류</th>
            <td>
              <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
              <div 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>
              </div>
            </td>
          </tr>
          <tr>
            <th>사업자등록증</th>
            <td>
              <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
              <div 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>
              </div>
            </td>
          </tr>
          <tr>
            <th>본인 확인</th>
            <td>
              <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
              <div 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>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </form>
      <div class="popup-btn2">
        <button class="btn-default" @click="numberDetailPopClose">닫기</button>
      </div>
    </div>

	</div>
</template>

<script>
import sendNumMgtApi from "@/modules/sendNumMgt/service/sendNumMgtApi";

export default {
  name: "numberRegPop",
  // mixins: [utils_mixin, chkPattern2],
  watch:{
    nmineeDivCd(){
      // console.log('watch : ', this.nmineeDivCd)
    }
  },
  data(){
    return{
			row: {},
      adminId:'',
      custNm:'',
      register:'',
      bRegNo:'',
      nmineeDivCd:'',
      inchDivCd:'',
      sndrnoNm:'',
      sndrno:'',
      sttusCd:'',
      regDt:'',
      docList: [],
      regRegNo:'',
      
    }
  },
	components: {
  },
	model: {
		prop: 'sendData',
		event: 'event-data'
	},
	props: ['sendData'],
	created(){
		// this.formReset();
  },
  destroyed() {
    
  },
	methods :{

    download(filePath, fileName, docTitle){
      this.row = {}
      this.row.docTitle = docTitle
      this.row.filePath = filePath
      this.row.fileNm = fileName
      sendNumMgtApi.fileDownload(this.row);
    },

		// 모달 띄우기
    numberDetailPopOpen(props){

			// this.formReset();
			var dimmed = document.getElementsByClassName('dimmed');
			dimmed[0].style.display = 'block';
			var wrap = document.getElementsByClassName('popup-wrap');
			wrap[0].style.display = 'block';
			var obj = document.getElementsByClassName('modal53');
			obj[0].style.display = 'block';

      this.numberDetail(props);

		},
    async numberDetail(props){
      try {
        this.row.regReqNo = props.regReqNo
        this.row.sndrno = props.sndrno
        this.row.seqNo = props.seqNo
        const response = await sendNumMgtApi.numberDetail(this.row);
        const result = response.data;
        if (result != null && result.retCode == "0000") {

          this.adminId = result.data.adminId
          this.custNm = result.data.custNm
          this.register = result.data.register
          this.bRegNo = result.data.bregNo
          this.nmineeDivCd = result.data.nmineeDivCd
          this.inchDivCd = result.data.inchDivCd
          this.sndrnoNm = result.data.sndrnoNm
          this.sndrno = result.data.sndrno
          this.sttusCd = result.data.sttusCd
          this.regDt = result.data.regDt
          // result.data.list.forEach()
          this.docList = result.data.list
          this.regRegNo = result.data.regRegNo
        }
      } catch (error) {
        // this.row.title = '청약고객관리';
        // this.row.msg1 = '실패 하였습니다.';
        // this.$refs.commmonModal.alertModalOpen(this.row);
        alert(error);
      }
    },
		// 모달 끄기
    numberDetailPopClose(){
			var dimmed = document.getElementsByClassName('dimmed');
			dimmed[0].style.display = 'none';
			var wrap = document.getElementsByClassName('popup-wrap');
			wrap[0].style.display = 'none';
			var popup = document.getElementsByClassName('modal53');
			popup[0].style.display = 'none';

      this.formReset();
			
		},
		formReset(){
			Object.assign(this.$data, this.$options.data());
		},
	}
}
</script>