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

frontend/src/modules/sendNumMgt/components/NumberRegPop.vue

@@ -0,0 +1,359 @@
+<template>
+	<!-- <div class="wrap bg-wrap"> -->
+	<div>
+		<div class="dimmed" @click="numberRegPopClose();"></div>
+    <!-- 발신번호 등록 (타사업자)-->
+    <div class="popup modal52 popup_form register w700">
+      <div class="pop-head">
+        <h3 class="pop-tit">발신번호 등록</h3>
+      </div>
+        <table>
+          <tbody>
+          <tr>
+            <th>관리자 ID</th>
+            <td>
+              <div class="input_search">
+                <input class="search-box" type="text" placeholder="아이디 입력" disabled v-model="adminId">
+                <button type="button" class="button btn-p2color" @click="searchIdPop">조회</button>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <th>고객사명</th>
+            <td><input type="text" disabled v-model="custNm"></td>
+          </tr>
+          <tr>
+            <th>사업자번호</th>
+            <td><input type="text" disabled v-model="bRegNo"></td>
+          </tr>
+          <tr>
+            <th>명의자 구분</th>
+            <td>
+              <input type="radio" name="nmineeDiv" value="01" id="popup_radio5" v-model="nmineeDivCd" @change="changeNmineDiv($event)">
+              <label for="popup_radio5">사업자</label>
+              <input type="radio" name="nmineeDiv" value="02" id="popup_radio6" v-model="nmineeDivCd" @change="changeNmineDiv($event)">
+              <label for="popup_radio6">타사업자</label>
+            </td>
+          </tr>
+          <tr>
+            <th>발신번호</th>
+            <td>
+              <div class="input_add">
+                <div>
+                  <input type="text" placeholder="발신번호명">
+                  <input type="text" placeholder="발신번호(숫자만입력)">
+                  <button class="button white add" @click="addNumberInput"></button>
+                </div>
+                <div v-for="(numberInput, index) in numberInputs">
+                  <input type="text" placeholder="발신번호명" v-model="numberInput.sendNm">
+                  <input type="text" placeholder="발신번호(숫자만입력)" v-model="numberInput.sendNum">
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <th>제출서류</th>
+            <td>
+              <div class="attach" v-show="fileType === 2">
+                <p class="essential list"><span>*</span>위임-수임관계 확인 서류</p>
+                <input type="file" ref="trustFile" style="display: none" @change="readTrustFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.trustFile.click()">파일업로드</button>
+                <p class="file" id="trustNm"></p>
+              </div>
+              <div class="attach" v-show="fileType === 2">
+                <p class="essential list"><span>*</span>위임장</p>
+                <input type="file" ref="warrantFile" style="display: none" @change="readWarrantFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.warrantFile.click()">파일업로드</button>
+                <p class="file" id="warrantNm"></p>
+              </div>
+              <div class="attach" v-show="fileType === 2">
+                <p class="essential list"><span>*</span>대리인 신분증 사본 인증</p>
+                <input type="file" ref="deputyFile" style="display: none" @change="readDeputyFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.deputyFile.click()">파일업로드</button>
+                <p class="file" id="deputyNm"></p>
+              </div>
+              <div class="attach">
+                <p class="essential list"><span>*</span>재직증명서</p>
+                <input type="file" ref="tenureFile" style="display: none" @change="readTenureFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.tenureFile.click()">파일업로드</button>
+                <p class="file" id="tenureNm"></p>
+              </div>
+              <div class="attach" v-show="fileType === 1">
+                <p class="essential list"><span>*</span>통신서비스 이용증명원</p>
+                <input type="file" ref="communicationFile" style="display: none" @change="readCommunicationFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.communicationFile.click()">파일업로드</button>
+                <p class="file" id="communicationNm"></p>
+              </div>
+              <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
+            </td>
+          </tr>
+          <tr>
+            <th>사업자 등록증</th>
+            <td>
+              <div class="attach">
+                <p class="essential list"><span>*</span>사업자등록증</p>
+                <input type="file" ref="businessFile" style="display: none" @change="readBusinessFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.businessFile.click()">파일업로드</button>
+                <p class="file" id="businessNm"></p>
+              </div>
+              <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      <div class="popup-btn2">
+        <button class="btn-pcolor">저장</button>
+        <button class="btn-default" @click="numberRegPopClose();">취소</button>
+      </div>
+
+      <admin-list-pop ref="admnListPop" />
+
+    </div>
+	</div>
+</template>
+
+<script>
+import AdminListPop from "@/modules/sendNumMgt/components/AdminListPop";
+
+export default {
+  name: "numberRegPop",
+  // mixins: [utils_mixin, chkPattern2],
+  watch:{
+    nmineeDivCd(){
+      console.log('watch : ', this.nmineeDivCd)
+    }
+  },
+  data(){
+    return{
+			row: {},
+      adminId:'',
+      custNm:'',
+      bRegNo:'',
+      nmineeDivCd:'01',
+      numberInputs: [],
+      fileType:1,
+      trustFile: null,
+      warrantFile: null,
+      deputyFile: null,
+      tenureFile: null,
+      businessFile: null,
+      communicationFile: null,
+    }
+  },
+	components: {
+    AdminListPop,
+  },
+	model: {
+		prop: 'sendData',
+		event: 'event-data'
+	},
+	props: ['sendData'],
+	created(){
+		this.formReset();
+  },
+	methods :{
+		searchIdPop(){
+      this.$refs.admnListPop.adminNmPopOpen();
+		},
+    addNumberInput(){
+      this.numberInputs.push({
+        sendNm: '',
+        sendNum: ''
+      })
+    },
+    delNumberInput(index){
+      this.numberInputs.splice(index,1)
+    },
+    changeNmineDiv(event){
+      var data = event.target.value;
+      console.log(data)
+      if(data === '01'){
+        this.fileType = 1
+      }
+      if(data === '02'){
+        this.fileType = 2
+      }
+    },
+		// 모달 띄우기
+    numberRegPopopen(insertType){
+			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('modal52');
+			obj[0].style.display = 'block';
+		},
+		// 모달 끄기
+    numberRegPopClose(){
+			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('modal52');
+			popup[0].style.display = 'none';
+			
+		},
+		formReset(){
+			Object.assign(this.$data, this.$options.data());
+		},
+    // 위임-수임
+    readTrustFile(event){
+      const file = event.target.files[0];
+      console.log(file.name);
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delTrustFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('trustNm');
+      root.appendChild(text);
+      root.appendChild(button);
+      this.trustFile = file;
+    },
+    delTrustFile(event){
+      const file = event.target.files[0];
+      this.$refs.trustFile.value=null;
+      let element = document.getElementById("trustNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.trustFile = null;
+    },
+    // 위임장
+    readWarrantFile(event){
+      const file = event.target.files[0];
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delWarrantFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('warrantNm');
+      root.appendChild(text);
+      root.appendChild(button);
+      this.warrantFile = file;
+    },
+    delWarrantFile(event){
+      const file = event.target.files[0];
+      this.$refs.warrantFile.value=null;
+      let element = document.getElementById("warrantNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.warrantFile = null;
+    },
+    // 대리인
+    readDeputyFile(event){
+      const file = event.target.files[0];
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delDeputyFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('deputyNm');
+      root.appendChild(text);
+      root.appendChild(button);
+
+      this.deputyFile = file
+
+    },
+    delDeputyFile(event){
+      const file = event.target.files[0];
+      this.$refs.deputyFile.value=null;
+      let element = document.getElementById("deputyNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.deputyFile = null;
+    },
+    // 재직
+    readTenureFile(event){
+      const file = event.target.files[0];
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delTenureFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('tenureNm');
+      root.appendChild(text);
+      root.appendChild(button);
+      this.tenureFile = file;
+    },
+    delTenureFile(event){
+      const file = event.target.files[0];
+      this.$refs.tenureFile.value=null;
+      let element = document.getElementById("tenureNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.tenureFile = null;
+    },
+    readBusinessFile(event){
+      const file = event.target.files[0];
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delBusinessFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('businessNm');
+      root.appendChild(text);
+      root.appendChild(button);
+      this.businessFile = file;
+    },
+    delBusinessFile(event){
+      const file = event.target.files[0];
+      this.$refs.businessFile.value=null;
+      let element = document.getElementById("businessNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.businessFile = null;
+    },
+    readCommunicationFile(event){
+      const file = event.target.files[0];
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delCommunicationFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('communicationNm');
+      root.appendChild(text);
+      root.appendChild(button);
+      this.communicationFile = file;
+    },
+    delCommunicationFile(event){
+      const file = event.target.files[0];
+      this.$refs.communicationFile.value=null;
+      let element = document.getElementById("communicationNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.communicationFile = null;
+    },
+	}
+}
+</script>