TC 기능 수정 / 디자인 수정 변경

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

@@ -6,38 +6,38 @@
         <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="" v-model="searchType1" @keyup.enter="search">
-                <option value="">전체</option>
-                <option value="01">승인대기</option>
-                <option value="02">처리완료</option>
-              </select>
-            </div>
-            <div class="input_box">
-              <label for="right" class="label">사업자번호</label>
-              <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText1" @keyup.enter="search"/>
-            </div>
-            <div class="select_box id">
-              <label for="right" class="label">명의자 구분</label>
-              <select name="" id="" v-model="searchType2" @keyup.enter="search">
-                <option value="">전체</option>
-                <option value="01">사업자</option>
-                <option value="02">타사업자</option>
-              </select>
-            </div>
-            <div class="input_box">
-              <label for="right" class="label">고객사명</label>
-              <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText2" @keyup.enter="search"/>
-            </div>
-            <button type="button" class="button grey" @click="search">조회</button>
+      <div class="search_wrap">
+        <div class="group">
+          <div class="select_box">
+            <label for="right" class="label">상태</label>
+            <select name="" id="" v-model="searchType1" @keyup.enter="search">
+              <option value="">전체</option>
+              <option value="01">승인대기</option>
+              <option value="02">처리완료</option>
+            </select>
           </div>
-
+          <div class="input_box">
+            <label for="right" class="label">사업자번호</label>
+            <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText1"
+                   @keypress="onlyNum" @input="onlyNum" maxlength="10" @keyup.enter="search"/>
+          </div>
+          <div class="select_box id">
+            <label for="right" class="label">명의자 구분</label>
+            <select name="" id="" v-model="searchType2" @keyup.enter="search">
+              <option value="">전체</option>
+              <option value="01">사업자</option>
+              <option value="02">타사업자</option>
+            </select>
+          </div>
+          <div class="input_box">
+            <label for="right" class="label">고객사명</label>
+            <input class="search-box" type="text" id="search" placeholder="검색어 입력"
+                   v-model.trim="grid.params.searchText2"
+                   @keyup.enter="search" maxlength="100"/>
+          </div>
+          <button type="button" class="button grey" @click="search">조회</button>
         </div>
-      </form>
+      </div>
       <div class="info">
         <div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
           <div class="select_box NumberSe">
@@ -65,7 +65,7 @@
         ></custom-grid>
       </div>
 
-      <appr-detail-pop ref="apprDetailPop" />
+      <appr-detail-pop ref="apprDetailPop"/>
 
     </div>
   </div>
@@ -74,26 +74,7 @@
 <script>
 import customGrid from '@/components/CustomGrid';
 import ApprDetailPop from "@/modules/sendNumMgt/components/ApprDetailPop";
-
-class customBRegNo {
-  constructor(props) {
-    this.props = props;
-    const el = document.createElement('td');
-    var bizrno = String(props.colValue);
-    el.innerText= bizrno;
-    if(bizrno.length == 10){
-      el.innerText= bizrno.substring(0,3)+'-'+bizrno.substring(3,5)+'-'+bizrno.substring(5,10)
-    }
-    this.el = el;
-  }
-
-  getElement() {
-    return this.el;
-  }
-
-  addEvent(selEl) {
-  }
-}
+import {utils_mixin, chkPattern2} from '../service/mixins';
 
 class CustomATagRenderer {
   constructor(props) {
@@ -101,7 +82,7 @@ class CustomATagRenderer {
     const el = document.createElement('a');
     el.href = 'javascript:void(0);';
     el.className = 'btn_text';
-    el.innerText= String(props.colValue)
+    el.innerText = String(props.colValue)
     this.el = el;
   }
 
@@ -111,7 +92,7 @@ class CustomATagRenderer {
 
   addEvent(selEl) {
     selEl.addEventListener("click", () => {
-      const { callback } = this.props["cgrido" + this.props.colName].options;
+      const {callback} = this.props["cgrido" + this.props.colName].options;
       callback(this.props);
     });
   }
@@ -119,6 +100,7 @@ class CustomATagRenderer {
 
 export default {
   name: 'apprList',
+  mixins: [utils_mixin, chkPattern2],
   data() {
     return {
       row: {},
@@ -128,8 +110,8 @@ export default {
       totalItems: 0,
       // 테이블 리스트 데이터
       perPageCnt: 50,
-      searchType1:'',
-      searchType2:'',
+      searchType1: '',
+      searchType2: '',
       grid: {
         url: '/api/v1/bo/sendNumMgt/apprList',
         perPage: 50,
@@ -138,26 +120,27 @@ export default {
         initialRequest: false,
         addCls: 'box_OFvis',
         columns: [
-          { name: 'no', header: 'NO', align: 'center', width: '5%' },
-          { name: 'regReqNo', hidden: true },
-          { name: 'regDt', header: '요청일', align: 'center', width: '12%' },
-          { name: 'adminId', header: '관리자ID', align: 'center', width: '10%'},
-          { name: 'bizrno', header: '사업자번호', align: 'center', width: '13%', renderer: {type: customBRegNo}},
-          { name: 'nmineeDivCd', header: '명의자 구분', align: 'center', width: '10%'},
-          { name: 'custNm', header: '고객사명', align: 'center', width: '10%'},
-          { name: 'reqCnt', header: '요청건수', align: 'center', width: '6%', renderer: {
+          {name: 'no', header: 'NO', align: 'center', width: '5%'},
+          {name: 'regReqNo', hidden: true},
+          {name: 'regDt', header: '요청일', align: 'center', width: '12%'},
+          {name: 'adminId', header: '관리자ID', align: 'center', width: '10%'},
+          {name: 'bizrno', header: '사업자번호', align: 'center', width: '13%'},
+          {name: 'nmineeDivCd', header: '명의자 구분', align: 'center', width: '10%'},
+          {name: 'custNm', header: '고객사명', align: 'center', width: '10%'},
+          {
+            name: 'reqCnt', header: '요청건수', align: 'center', width: '6%', renderer: {
               type: CustomATagRenderer
-              ,options: {
+              , options: {
                 callback: this.apprDetail,
               }
             }
           },
-          { name: 'apvCnt', header: '승인건수', align: 'center', width: '6%'},
-          { name: 'rejtCnt', header: '반려건수', align: 'center', width: '6%'},
-          { name: 'reqSttusCd', header: '상태', align: 'center', width: '10%'},
-          { name: 'cmpltDt', header: '완료일', width: '12%' }
+          {name: 'apvCnt', header: '승인건수', align: 'center', width: '6%'},
+          {name: 'rejtCnt', header: '반려건수', align: 'center', width: '6%'},
+          {name: 'reqSttusCd', header: '상태', align: 'center', width: '10%'},
+          {name: 'cmpltDt', header: '완료일', width: '12%'}
         ],
-        noDataStr: '검색 결과가 없습니다.',        
+        noDataStr: '검색 결과가 없습니다.',
         params: {
           searchType1: '',
           searchType2: '',
@@ -165,14 +148,14 @@ export default {
           searchText2: '',
         },
         excelHeader: []
-      }    
+      }
     };
-  },  
+  },
   components: {
     customGrid: customGrid,
     ApprDetailPop
   },
-  created(){
+  created() {
   },
   destroyed() {
     this.$store.commit('searchcondition/updateSearchCondition', {
@@ -191,7 +174,7 @@ export default {
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
 
     let isKeep = false;
-    if(getCondition) {
+    if (getCondition) {
       this.grid.pagePerRows = getCondition.perPage;
       this.grid.params = getCondition.params;
       page = getCondition.page;
@@ -200,7 +183,7 @@ export default {
     this.search(isKeep);
   },
   methods: {
-    search: function(isKeep) {
+    search: function (isKeep) {
       console.log(this.grid.params);
       this.grid.params.searchType1 = this.searchType1
       this.grid.params.searchType2 = this.searchType2
@@ -208,7 +191,7 @@ export default {
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
-    sendStoreData: function() {
+    sendStoreData: function () {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP);
       this.$store.commit('searchcondition/updateSearchCondition', {
@@ -224,7 +207,7 @@ export default {
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
       //console.log("getCondition : "+ getCondition.perPage);
     },
-    apprDetail(props){
+    apprDetail(props) {
       console.log(props)
       this.$refs.apprDetailPop.apprDetailPopOpen(props)
     }