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

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>