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

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

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <!-- 관리자ID 조회 -->
+    <div class="popup popup_form modal44">
+      <div class="pop-head">
+        <h3 class="pop-tit">관리자ID 조회</h3>
+      </div>
+      <div class="pop-cont-detail input_box">
+        <label>ID</label>
+        <div class="input_search">
+          <input class="search-box" type="text" value="" v-model="grid.params.searchText1">
+          <button type="button" class="button btn-p2color" @click="search">조회</button>
+        </div>
+      </div>
+        <table class="table-c">
+          <custom-grid
+              ref="table"
+              :totalItems="'totalItems'"
+              :url="grid.url"
+              :pagePerRows="grid.pagePerRows"
+              :initialRequest="grid.initialRequest"
+              :pagination="grid.pagination"
+              :isCheckbox="grid.isCheckbox"
+              :columns="grid.columns"
+              :noDataStr="grid.noDataStr"
+              :addCls="grid.addCls"
+              :header="grid.headder"
+          ></custom-grid>
+        </table>
+      <div class="popup-btn2">
+        <button class="btn-default" @click="adminNmPopClose();">닫기</button>
+      </div>
+    </div>
+
+  <common-modal ref="commmonModal"></common-modal>
+
+  </div>
+</template>
+<script>
+import customGrid from "@/components/CustomGrid";
+import commonModal from "@/components/modal/commonModal";
+
+class CustomATagRendererAdminList {
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText= String(props.colValue)
+    this.el = el;
+  }
+
+  getElement() {
+    return this.el;
+  }
+
+  addEvent(selEl) {
+    selEl.addEventListener("click", () => {
+      const { callback } = this.props["cgrido" + this.props.colName].options;
+      console.log(callback)
+
+      callback(this.props);
+    });
+  }
+}
+
+class CustomATagRenderer {
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText= String(props.colValue)
+    this.el = el;
+  }
+
+  getElement() {
+    return this.el;
+  }
+
+  addEvent(selEl) {
+    selEl.addEventListener("click", () => {
+      const { callback } = this.props["cgrido" + this.props.colName].options;
+      callback(this.props);
+    });
+  }
+}
+
+export default {
+  name: "adminNmPop",
+  data(){
+      return {
+        row: {},
+        resultData: false,
+
+        perPageCnt: 10,
+        userId: '',
+        grid: {
+          url: '/api/v1/bo/sendNumMgt/adminList',
+          pagePerRows: 10,
+          pagination: true,
+          isCheckbox: false,        // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
+          initialRequest: false,
+          addCls: 'box_OFvis',
+
+          columns: [
+            { name: 'adminId', header: 'ID', align: 'center', cls:'memo'
+            },
+            { name: 'bregNo', header: '사업자번호', align: 'center', renderer: {
+                type: CustomATagRenderer
+                , options: {
+                  callback: this.setAdminInfo,
+                }
+              }
+            },
+            { name: 'custNm', header: '고객사명', align: 'center', hidden: true}
+          ],
+          noDataStr: '검색 결과가 없습니다.',
+          params: {
+            searchText1: '',
+          }
+        },
+      }
+  },
+  components: {
+    customGrid,
+    commonModal,
+  },
+  created(){
+  },
+  mounted() {
+    let pageMemo = 1;
+    // 페이지 정보 및 검색 조건
+    const getCondition_adminList = this.$store.getters['searchcondition/getSearchCondition'];
+    console.log('getCondition_adminList : '+getCondition_adminList);
+
+    // store에 저장된 페이지 정보 및 검색 조건을 불러오기
+    let isKeepMemo = false;
+    if (getCondition_adminList) {
+      this.grid.pagePerRows = getCondition_adminList.perPage;
+      this.grid.params = getCondition_adminList.params;
+      pageMemo = getCondition_adminList.page;
+      isKeepMemo = true;
+    }
+  },
+  methods : {
+    search: function(isKeep) {
+      console.log('this.perPageCnt:'+this.perPageCnt);
+      console.log(this.grid.params);
+      this.$refs.table.search(this.grid.params, isKeep);
+      this.sendStoreData();
+    },
+    sendStoreData: function() {
+      const getP_memo = this.$refs.table.getPagination();
+      this.$store.commit('searchcondition/updateSearchCondition', {
+        page: getP_memo._currentPage,
+        perPage: this.perPageCnt,
+        params: {
+          userId : this.userId,
+        }
+      });
+
+      const getCondition_memo = this.$store.getters['searchcondition/getSearchCondition'];
+      console.log("getCondition_memo : "+ getCondition_memo.perPage);
+    },
+    setAdminInfo: function(props){
+      console.log(props);
+      // var param = {};
+      // param.seqNo = props.seqNo;
+      // param.userId = this.userId;
+      // this.deleteMemoConfirm(param);
+    },
+    // 모달 띄우기
+    adminNmPopOpen(){
+      this.formReset();
+      var dimmed = document.getElementsByClassName('modal44');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'block';
+      }
+      this.$refs.table.cleanData();
+    },
+    // 모달 끄기
+    adminNmPopClose(){
+      console.log('adminNm modal close');
+      var dimmed = document.getElementsByClassName('modal44');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'none';
+      }
+    },
+    formReset(){
+      Object.assign(this.$data, this.$options.data());
+    },
+  }
+}
+</script>

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

@@ -0,0 +1,175 @@
+<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 value="uplus01"></td>
+          </tr>
+          <tr>
+            <th>고객사명</th>
+            <td><input type="text" disabled value="유플러스"></td>
+          </tr>
+          <tr>
+            <th>등록자 ID</th>
+            <td><input type="text" disabled value="uplus01"></td>
+          </tr>
+          <tr>
+            <th>사업자번호</th>
+            <td><input type="text" disabled value="229-81-39938"></td>
+          </tr>
+          <tr>
+            <th>명의자 구분</th>
+            <td><input type="text" disabled value="타사업자"></td>
+          </tr>
+          <tr>
+            <th>인입채널</th>
+            <td><input type="text" disabled value="홈페이지"></td>
+          </tr>
+          <tr>
+            <th>발신번호</th>
+            <td>
+              <div class="input_add">
+                <div>
+                  <input type="text" disabled value="테스트">
+                  <input type="text" disabled value="02-555-5555">
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <th>승인상태</th>
+            <td class="red">승인 완료</td>
+          </tr>
+          <tr>
+            <th>등록일자</th>
+            <td><input type="text" disabled value="2022-03-10"></td>
+          </tr>
+          <tr>
+            <th>제출서류</th>
+            <td>
+              <div class="sender">
+                <p>위임장.jpg (00KB)</p>
+                <p>위임-수임관계 확인서류.jpg (00KB)</p>
+                <p>대리인 신분증 사본.jpg (00KB)</p>
+                <p>재직증명서.jpg (00KB)</p>
+                <p>통신서비스 이용증명원.jpg (00KB)</p>
+                <p>사업자등록증.jpg (00KB)</p>
+              </div>
+              <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
+            </td>
+          </tr>
+          <tr>
+            <th>사업자등록증</th>
+            <td>
+              <div class="sender">
+                <p>사업자등록증.jpg (00KB)</p>
+              </div>
+              <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </form>
+      <div class="popup-btn2">
+        <button class="btn-default" @click="numberDetailPopClose">닫기</button>
+      </div>
+    </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,
+    }
+  },
+	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
+      }
+    },
+		// 모달 띄우기
+    numberDetailPopOpen(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('modal53');
+			obj[0].style.display = 'block';
+
+
+
+
+		},
+		// 모달 끄기
+    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';
+			
+		},
+		formReset(){
+			Object.assign(this.$data, this.$options.data());
+		},
+	}
+}
+</script>

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>

frontend/src/modules/sendNumMgt/service/sendNumMgtApi.js

@@ -0,0 +1,56 @@
+import httpClient from '@/common/http-client';
+
+// 공통 코드.
+const getCommCode = (params) => {
+    return httpClient.post('/api/v1/bo/comm/getCode', params, { withCredentials: false });
+}
+
+// 사업자가 등록 요청.
+const insertNumber1 = (tenureFile, businessFile, communicationFile, adminId, custNm, bRegNo, nmineeDivCd, numberInputs) => {
+    let formData = new FormData();
+    formData.append("tenureFile", tenureFile);
+    formData.append("businessFile", businessFile);
+     formData.append("communicationFile", communicationFile);
+    formData.append("adminId", adminId);
+    formData.append("custNm", custNm);
+    formData.append("bRegNo", bRegNo);
+    formData.append("nmineeDivCd", nmineeDivCd);
+    formData.append("numberInputs", numberInputs);
+
+    let url = "/api/v1/bo/sendNumMgt/insertNumber";
+    return httpClient.post(url, formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+            "Show-Layer": "Yes"
+        }
+    });
+};
+
+// 타사업자가 등록 요청.
+const insertNumber2 = (trustFile, warrantFile, deputyFile, tenureFile, businessFile, adminId, custNm, bRegNo, nmineeDivCd, numberInputs) => {
+    let formData = new FormData();
+    formData.append("trustFile", trustFile);
+    formData.append("warrantFile", warrantFile);
+    formData.append("deputyFile", deputyFile);
+    formData.append("tenureFile", tenureFile);
+    formData.append("businessFile", businessFile);
+    formData.append("adminId", adminId);
+    formData.append("custNm", custNm);
+    formData.append("bRegNo", bRegNo);
+    formData.append("nmineeDivCd", nmineeDivCd);
+    formData.append("numberInputs", numberInputs);
+
+    let url = "/api/v1/bo/sendNumMgt/insertNumber";
+    return httpClient.post(url, formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+            "Show-Layer": "Yes"
+        }
+    });
+};
+
+export default {
+    getCommCode,
+    insertNumber1,
+    insertNumber2,
+}

frontend/src/modules/sendNumMgt/views/ApprList.vue

@@ -1,100 +1,238 @@
 <template>
- 
-		<div class="contents">
-			<div class="contents_wrap">
-				<div class="top_wrap">
-					<h3 class="title">발신번호 승인 목록 조회</h3>
-					<p class="breadcrumb">시스템관리 &gt; 관리자/유치채널 관리</p>
-				</div>
-				<form autocomplete="off" class="search_form">
-					<div class="search_wrap">
-						<div class="select_box">
-							<label for="right" class="label">권한</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="대리점">대리점</option>
-								<option value="운영자">운영자</option>
-							</select>
-						</div>
-						<div class="select_box">
-							<label for="right" class="label">상태</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="사용">사용</option>
-								<option value="중지">중지</option>
-							</select>
-						</div>
-						<div class="input_box id">
-							<label for="id1" class="label">ID</label>
-                            <input type="text" id="id1" placeholder="검색어 입력"/>
-						</div>
-						<div class="input_box">
-							<label for="name" class="label">이름(대리점명)</label>
-                            <input type="text" id="name" placeholder="검색어 입력"/>
-						</div>
-						<button type="button" class="button grey">조회</button>
-					</div>
-				</form>
-				<div class="info">
-					<div class="count">총 <span>100</span>건</div>
-					<div class="button_group">
-						<button type="button" class="button blue admin">관리자 등록</button>
-						<button type="button" class="button blue channel">유지채널 등록</button>
-						<button type="button" class="button white delete">삭제</button>
-					</div>
-				</div>
-				<!-- <div class="table">
-					<table>
-						<colgroup>
-                            <col width="5%"/>
-                            <col width="15%"/>
-                            <col width="15%"/>
-                            <col width="20%"/>
-                            <col width="20%"/>
-                            <col width="5%"/>
-                            <col width="20%"/>
-                        </colgroup>
-						<thead>
-							<tr>
-								<th><input type="checkbox" id="admin_check1"><label for="admin_check1"></label></th>
-								<th>NO</th>
-								<th>권한</th>
-								<th>이름(대리점명)</th>
-								<th>ID</th>
-								<th>상태</th>
-								<th>등록일</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td><input type="checkbox" checked id="admin_check2"><label for="admin_check2"></label></td>
-								<td>10</td>
-								<td>대리점</td>
-								<td>유플러스</td>
-								<td><a href="javascript:void(0)">uplus1</a></td>
-								<td>사용</td>
-								<td>2022-03-10</td>
-							</tr>							
-						</tbody>
-					</table>
-				</div> -->
-            <div class="table">    
-                    <custom-grid
-                        ref="table"
-                        :totalItems="'totalItems'"
-                        :url="testList.url"
-                        :perPage="testList.perPage"
-                        :initialRequest="testList.initialRequest"
-                        :pagination="testList.pagination"
-                        :isCheckbox="testList.isCheckbox"
-                        :columns="testList.columns"
-                        :noDataStr="testList.noDataStr"
-                        :addCls="testList.addCls"
-                        :header="testList.header"        
-                    ></custom-grid>
+
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">발신번호 승인</h3>
+        <p class="breadcrumb">발신번호관리 &gt; 발신번호 승인</p>
+      </div>
+      <form autocomplete="off" class="search_form">
+        <div class="search_wrap">
+          <div class="group">
+            <div class="select_box">
+              <label for="right" class="label">상태</label>
+              <select name="" id="">
+                <option value="전체">전체</option>
+                <option value="승인대기">승인대기</option>
+                <option value="처리완료">처리완료</option>
+              </select>
             </div>
-			</div>
-		</div>
+            <div class="input_box">
+              <label for="right" class="label">사업자번호</label>
+              <input class="search-box" type="text" id="search" placeholder="검색어 입력"/>
+            </div>
+            <div class="select_box id">
+              <label for="right" class="label">명의자 구분</label>
+              <select name="" id="">
+                <option value="전체">전체</option>
+                <option value="사업자">사업자</option>
+                <option value="타사업자">타사업자</option>
+              </select>
+            </div>
+            <div class="input_box">
+              <label for="right" class="label">고객사명</label>
+              <input class="search-box" type="text" id="search" placeholder="검색어 입력"/>
+            </div>
+            <button type="button" class="button grey">조회</button>
+          </div>
+
+        </div>
+      </form>
+      <div class="info">
+        <div class="count">총 <span>100</span>건
+          <div class="select_box NumberSe">
+            <select name="" id="">
+              <option value="20">20</option>
+              <option value="50" selected>50</option>
+              <option value="100">100</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="table">
+        <table>
+          <colgroup>
+            <col width="5%"/>
+            <col width="12%"/>
+            <col width="10%"/>
+            <col width="13%"/>
+            <col width="10%"/>
+            <col width="10%"/>
+            <col width="6%"/>
+            <col width="6%"/>
+            <col width="6%"/>
+            <col width="10%"/>
+            <col width="12%"/>
+          </colgroup>
+          <thead>
+          <tr>
+            <th>NO</th>
+            <th>요청일</th>
+            <th>관리자ID</th>
+            <th>사업자번호</th>
+            <th>명의자 구분</th>
+            <th>고객사명</th>
+            <th>요청건수</th>
+            <th>승인건수</th>
+            <th>반려건수</th>
+            <th>상태</th>
+            <th>완료일</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td>10</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>0</td>
+            <td>0</td>
+            <td>승인대기</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>9</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>2</td>
+            <td>1</td>
+            <td>처리완료</td>
+            <td>2022-03-10</td>
+          </tr>
+          <tr>
+            <td>8</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>2</td>
+            <td>1</td>
+            <td>처리완료</td>
+            <td>2022-03-10</td>
+          </tr>
+          <tr>
+            <td>7</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>2</td>
+            <td>1</td>
+            <td>처리완료</td>
+            <td>2022-03-10</td>
+          </tr>
+          <tr>
+            <td>6</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>타사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>2</td>
+            <td>1</td>
+            <td>처리완료</td>
+            <td>2022-03-10</td>
+          </tr>
+          <tr>
+            <td>5</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>2</td>
+            <td>1</td>
+            <td>처리완료</td>
+            <td>2022-03-10</td>
+          </tr>
+          <tr>
+            <td>4</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>타사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>0</td>
+            <td>0</td>
+            <td>승인대기</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>타사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>0</td>
+            <td>0</td>
+            <td>승인대기</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>타사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>0</td>
+            <td>0</td>
+            <td>승인대기</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>타사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>0</td>
+            <td>0</td>
+            <td>승인대기</td>
+            <td>-</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="pagination">
+        <div class="arrow-btn">
+          <button class="btn-first" onClick=""></button>
+          <button class="btn-prev" onClick=""></button>
+        </div>
+        <ul>
+          <li class="active"><a href="javascript:void(0)">1</a></li>
+          <li><a href="javascript:void(0)">2</a></li>
+          <li><a href="javascript:void(0)">3</a></li>
+          <li><a href="javascript:void(0)">4</a></li>
+          <li><a href="javascript:void(0)">5</a></li>
+          <li><a href="javascript:void(0)">999</a></li>
+        </ul>
+        <div class="arrow-btn">
+          <button class="btn-next" onClick=""></button>
+          <button class="btn-last" onClick=""></button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>

frontend/src/modules/sendNumMgt/views/NumberList.vue

@@ -9,6 +9,14 @@
 				<form autocomplete="off" class="search_form">
 					<div class="search_wrap">
 						<div class="group">
+              <div class="select_box">
+                <label for="right" class="label">등록방법</label>
+                <select name="" id="sttusCd" v-model="grid.params.searchType5" @keyup.enter="search">
+                  <option value="">전체</option>
+                  <option value="01">서류심사</option>
+                  <option value="02">본인인증</option>
+                </select>
+              </div>
               <div class="select_box">
                 <label for="right" class="label">승인상태</label>
                 <select name="" id="sttusCd" v-model="grid.params.searchType1" @keyup.enter="search">
@@ -78,15 +86,44 @@
               :addCls="grid.addCls"
               :header="grid.headder"        
             ></custom-grid>
-            </div>
-            <!-- <number-reg-pop ref="numberRegPop"> </number-reg-pop> -->
-			  </div>
+          </div>
+
+          <number-reg-pop ref="numberRegPop"> </number-reg-pop>
+          <number-detail-pop ref="numberDetailPop"/>
+          <common-modal ref="commmonModal"></common-modal>
+
+      </div>
 		</div>
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
-// import NumberRegPop from '../components/NumberRegPop';
+import commonModal from "@/components/modal/commonModal";
+import NumberRegPop from '../components/NumberRegPop';
+import NumberDetailPop from "@/modules/sendNumMgt/components/NumberDetailPop";
+
+class CustomATagRenderer {
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText= String(props.colValue)
+    this.el = el;
+  }
+
+  getElement() {
+    return this.el;
+  }
+
+  addEvent(selEl) {
+    selEl.addEventListener("click", () => {
+      const { callback } = this.props["cgrido" + this.props.colName].options;
+      callback(this.props);
+    });
+  }
+}
+
 export default {
   name: 'numberList',
   data() {
@@ -97,7 +134,7 @@ export default {
       cate2Code: "",
       totalItems: 0,
       // 테이블 리스트 데이터
-      perPageCnt: 20,
+      perPageCnt: 50,
       grid: {
         url: '/api/v1/bo/sendNumMgt/numberList',
         perPage: 20,
@@ -121,16 +158,22 @@ export default {
         ],
 
         columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: 50 },
-          { name: 'custNm', header: '고객사명', align: 'left', width: 50 },
-          { name: 'adminId', header: '관리자ID', align: 'left', width: 100 },
-          { name: 'register', header: '등록자ID', align: 'left', width: 100 },
-          { name: 'bRegNo', header: '사업자번호', align: 'center', width: 100},
-          { name: 'nmineeDivCd', header: '명의자 구분', align: 'center', width: 100},
-          { name: 'inchDivCd', header: '인입채널', align: 'center', width: 100},
-          { name: 'regNo', header: '발신번호', align: 'center', width: 100},
-          { name: 'sttusCd', header: '승인상태', align: 'center', width: 100},
-          { name: 'regDt', header: '등록일자', width: 100, cls: 'td_line' }
+          { name: 'no', header: 'NO', align: 'center', width: '5%' },
+          { name: 'custNm', header: '고객사명', align: 'center', width: '5%' },
+          { name: 'adminId', header: '관리자ID', align: 'center', width: '10%' },
+          { name: 'register', header: '등록자ID', align: 'center', width: '10%' },
+          { name: 'bregNo', header: '사업자번호', align: 'center', width: '10%'},
+          { name: 'nmineeDivCd', header: '명의자 구분', align: 'center', width: '10%'},
+          { name: 'inchDivCd', header: '인입채널', align: 'center', width: '10%'},
+          { name: 'sndrno', header: '발신번호', align: 'center', width: '10%', renderer: {
+              type: CustomATagRenderer
+              ,options: {
+                callback: this.numberDetail,
+              }
+            }
+          },
+          { name: 'sttusCd', header: '승인상태', align: 'center', width: '10%'},
+          { name: 'regDt', header: '등록일자', width: '10%', cls: 'td_line' }
         ],
         noDataStr: '검색 결과가 없습니다.',        
          params: {
@@ -138,6 +181,7 @@ export default {
            searchType2: '',
            searchType3: '',
            searchType4: '',
+           searchType5: '',
            searchText1: '',
            pagePerRows: '',
            page: ''
@@ -148,7 +192,9 @@ export default {
   },  
   components: {
     customGrid: customGrid,
-    // NumberRegPop
+    NumberRegPop,
+    NumberDetailPop,
+    commonModal,
   },
   created(){            
     this.$store.commit("login/isLogin", true);
@@ -210,20 +256,24 @@ export default {
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
     },
     numberRegPopOpen: function(){
-      this.$refs.numberRegPop.ModalOpen();
+      this.$refs.numberRegPop.numberRegPopopen();
+    },
+    numberDetail(props){
+      console.log(props)
+      this.$refs.numberDetailPop.numberDetailPopOpen(props);
     },
   },
-  beforeRouteLeave(to, from, next) {
-	
-	const getP = this.$refs.table.getPagination();
-	console.log("==========getP : " + getP._currentPage);
-	this.$store.commit('searchcondition/updateSearchCondition', {
-	  page: getP._currentPage,        
-	  perPage: this.perPageCnt,        
-	  params: this.grid.params
-	});  
-	// 라우트 하기전 실행 
-	next();
-  }
+  // beforeRouteLeave(to, from, next) {
+  //
+	// const getP = this.$refs.table.getPagination();
+	// console.log("==========getP : " + getP._currentPage);
+	// this.$store.commit('searchcondition/updateSearchCondition', {
+	//   page: getP._currentPage,
+	//   perPage: this.perPageCnt,
+	//   params: this.grid.params
+	// });
+	// // 라우트 하기전 실행
+	// next();
+  // }
 };
 </script>

frontend/src/modules/sendNumMgt/views/ProfileList.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="wrap main_wrap">
+
 		<div class="contents">
 			<div class="contents_wrap">
 				<div class="top_wrap">
@@ -61,7 +61,6 @@
 				</div>
         </div>
 	</div>
-  </div>
 </template>
 
 <script>