유치채널관리 수정 / 정산관리 추가,수정 / 채널관리 수정 / 고객관리 수정 / 모니터링 추가 / 리스크관리 수정 / 발신번호관리

추가,수정 / 서비스관리 수정 / 발송통계 수정

frontend/src/assets/css/style.css

@@ -562,7 +562,7 @@ header .user_wrap .user_info .logout {
 
 .contents .input_box.cal input {
     display: inline-block;
-    width: 90%;
+    width: 70%;
     float: left;
 	background: #fff url(../images/icon-calender.png) no-repeat right 6% center;
 }
@@ -1373,6 +1373,12 @@ header .user_wrap .user_info .logout {
 
 .popup.price table th{
 	width:20%;
+	padding:0;
+	text-align: center;
+}
+.popup.price table td{
+    padding: 0;
+	text-align: center;
 }
 
 .popup label{

frontend/src/modules/attractMgt/service/channelMgtApi.js

@@ -1,6 +1,6 @@
 import httpClient from '@/common/http-client';
 import channelExcelHeader from "@/modules/attractMgt/service/mock/channelExcelHeader.json";
-
+import channelDetailExcelHeader from "@/modules/attractMgt/service/mock/channelDetailExcelHeader.json";
 
 // 공통 코드.
 const getCommCode = (params) => {
@@ -17,6 +17,11 @@ const channelDetail = (params) => {
     return httpClient.post('/api/v1/bo/attractMgt/channelDetail', params, { withCredentials: false});
 }
 
+// 발송건수 엑셀 다운로드
+const sendNumberListExcel = (params) => {
+    return httpClient.post('/api/v1/bo/attractMgt/sendNumberListExcel', params, { withCredentials: false});
+}
+
 const getExcelHeader = category => {
     // 엑셀에 출력할 Header 정보를 Mockup 데이터로 관리한다.
     return new Promise(function(resolve, reject) {
@@ -25,6 +30,9 @@ const getExcelHeader = category => {
             case 'CHANNEL':
                 header = channelExcelHeader.header;
                 break;
+            case 'CHANNELDETAIL':
+                header = channelDetailExcelHeader.header;
+                break;
             default:
                 header = '';
                 break;
@@ -38,4 +46,5 @@ export default {
     getExcelHeader,
     channelListExcel,
     channelDetail,
+    sendNumberListExcel,
 }

frontend/src/modules/attractMgt/service/mock/channelDetailExcelHeader.json

@@ -0,0 +1,37 @@
+{
+    "header": [
+      [ 
+        {
+          "key": "sumYm",
+          "name": "날짜",
+          "rowspan": 2
+        },
+        {
+          "name": "채널별 발송건수",
+          "colspan": 5
+        }  
+       
+      ],
+      [{
+        "key": "sndCnt",
+        "name": "전체"
+      },
+      {
+        "key": "sndCntS",
+        "name": "SMS"
+      },
+      {
+        "key": "sndCntL",
+        "name": "LMS"
+      },
+      {
+        "key": "sndCntM",
+        "name": "MMS"
+      },
+      {
+        "key": "sndCntA",
+        "name": "알림톡"
+      }]
+    ]
+  }
+  

frontend/src/modules/attractMgt/views/ChannelDetail.vue

@@ -22,36 +22,36 @@
             <tbody>
             <tr class="tr_input w75">
               <th>가입일</th>
-              <td colspan="2"><input type="text" disabled value="2022-03-05"></td>
+              <td colspan="2"><input type="text" disabled v-model="subsDt"></td>
               <th>상태</th>
-              <td colspan="2"><input type="text" disabled value="사용"></td>
+              <td colspan="2"><input type="text" disabled v-model="subsSttusCd"></td>
             </tr>
             <tr class="tr_input w75">
               <th>고객사</th>
-              <td colspan="2"><input type="text" disabled value="홍길동"></td>
+              <td colspan="2"><input type="text" disabled v-model="custNm"></td>
               <th>요금제</th>
-              <td colspan="2"><input type="text" disabled value="요금제1"></td>
+              <td colspan="2"><input type="text" disabled v-model="plan"></td>
             </tr>
             <tr class="tr_input w75">
               <th>대표자</th>
-              <td colspan="2"><input type="text" disabled value="홍길동"></td>
+              <td colspan="2"><input type="text" disabled v-model="reprNm"></td>
               <th>사용자 구분</th>
-              <td colspan="2"><input type="text" disabled value="법인사업자"></td>
+              <td colspan="2"><input type="text" disabled v-model="custTyCd"></td>
             </tr>
             <tr class="tr_input">
               <th>사업자등록번호</th>
               <td colspan="2">
                 <div class="input-bnumber">
-                  <input type="text" disabled="" value="110">
-                  <input type="text" disabled="" value="16">
-                  <input type="text" disabled="" value="123456">
+                  <input type="text" disabled v-model="bizrno1">
+                  <input type="text" disabled v-model="bizrno2">
+                  <input type="text" disabled v-model="bizrno3">
                 </div>
               </td>
               <th>법인등록번호</th>
               <td colspan="2">
                 <div class="input-double">
-                  <input type="text" disabled="" value="123456">
-                  <input type="text" disabled="" value="1234567">
+                  <input type="text" disabled v-model="cprRegNo1">
+                  <input type="text" disabled v-model="cprRegNo2">
                 </div>
               </td>
             </tr>
@@ -59,9 +59,9 @@
               <th>사업장 주소</th>
               <td colspan="5">
                 <div class="input-address">
-                  <input type="text" disabled="" value="12345">
-                  <input type="text" disabled="" value="서울 마포구 월드컵북로 416">
-                  <input type="text" disabled="" value="유플러스 상암사옥">
+                  <input type="text" disabled v-model="adr1">
+                  <input type="text" disabled v-model="adr2">
+                  <input type="text" disabled v-model="adr3">
                 </div>
               </td>
             </tr>
@@ -69,16 +69,16 @@
               <th>유치자명</th>
               <td colspan="2">
                 <div class="input-double">
-                  <input type="text" disabled value="Uplus02">
-                  <input type="text" disabled value="김철수">
+                  <input type="text" disabled v-model="channelId">
+                  <input type="text" disabled v-model="channelNm">
                 </div>
               </td>
               <th>관리자명</th>
               <td colspan="2">
                 <div class="input-double">
-                  <input type="text" disabled value="Uplus02">
-                  <input type="text" disabled value="김철수">
-                  <button type="button" class="button grey btn-a">변경</button>
+                  <input type="text" disabled v-model="adminId">
+                  <input type="text" disabled v-model="adminNm">
+                  <button type="button" class="button grey btn-a" @click="searchIDPopOpen">변경</button>
                 </div>
               </td>
             </tr>
@@ -91,12 +91,13 @@
           <p>( 최근 3년 사용 전월까지 확인 가능하며, 청구금액은 유큐브에서 확인 가능합니다. )</p>
         </div>
         <div class="button_group">
-          <button type="button" class="button blue download">엑셀 다운로드</button>
+          <button type="button" class="button blue download" @click="excelDown()">엑셀 다운로드</button>
         </div>
 
       </div>
       <div class="table calculate">
-        <table>
+       <form autocomplete="off">
+        <table class="table-r">
           <colgroup>
             <col width="16%">
             <col width="16%">
@@ -121,49 +122,240 @@
           <tbody>
           <tr>
             <td>합계</td>
-            <td>360,000</td>
-            <td>360,000</td>
-            <td>360,000</td>
-            <td>360,000</td>
-            <td>1,440,000</td>
+            <td>{{sndCntTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}</td>
+            <td>{{sndCntSTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}</td>
+            <td>{{sndCntLTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}</td>
+            <td>{{sndCntMTotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}</td>
+            <td>{{sndCntATotal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}</td>
+          </tr>
+          <tr v-for="(option, i) in list" v-bind:key="i">
+            <td>{{option.sumYm}}</td>
+            <td>{{option.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}</td>
+            <td>{{option.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}</td>
+            <td>{{option.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}</td>
+            <td>{{option.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}</td>
+            <td>{{option.sndCntA.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}</td>
           </tr>
           </tbody>
         </table>
+       </form>
       </div>
 
       <div class="pop-btn2">
-        <button class="btn-pcolor" type="button">저장</button>
-        <button class="btn-default" type="button">취소</button>
+        <button class="btn-pcolor" type="button" @click="goChannelList()">확인</button>
+        <button class="btn-default" type="button" @click="goChannelList()">취소</button>
       </div>
     </div>
+    <admin-nm-pop ref="adminNmPop"></admin-nm-pop>
   </div>
 </template>
 
 <script>
 import api from '@/service/api';
-
+import channelMgtApi from '../service/channelMgtApi';
+import moment from 'moment';
+import xlsx from '@/common/excel';
+import AdminNmPop from '../../custMgt/components/AdminNmPop';
 export default {
-	name: "subsDetail",
+	name: "channelDetail",
 	data(){
         return{
-			row: {},
-
-			props: {},
+			    row: {},
+          subsDt: '',
+          norgNm: '',
+          userSeq: '',
+          loginId: '',
+          custNm: '',
+          bizrno: '',
+          bizrno1: '',
+			    bizrno2: '',
+			    bizrno3: '',	
+          userNm: '',
+          subsSttusCd: '',
+          custTyCd: '',
+          sndCnt: '',
+          adr1: '',
+			    adr2: '',	
+			    adr3: '',
+          cprRegNo: '',
+          cprRegNo1: '',
+          cprRegNo2: '',
+          adminId: '',
+			    adminNm: '',
+          channelId: '',	
+			    channelNm: '',
+          reprNm: '',
+          plan: '',
+          sumYm: '',
+          sndCntS: '',
+          sndCntL: '',
+          sndCntM: '',
+          sndCntA: '',
+          succCnt: '',
+          succCntS: '',
+          succCntL: '',
+          succCntM: '',
+          succCntA: '',
+          sndCntTotal: 0,
+          sndCntSTotal: 0,
+          sndCntLTotal: 0,
+          sndCntMTotal: 0,
+          sndCntATotal: 0,
+          list:[],
+          totalCnt: '',
+		    	props: {},
+          excelHeader: [],
+          pageType:'CHANNELDETAIL',
+          serviceId:'',
         }
     },
 	props: {
-		// serviceId: {
-		// 	type: String,
-		// 	default: "",
-		// },
+		userSeq: {
+			type: String,
+			default: "",
+		},
 	},
 	components: {
+    channelMgtApi,
+    AdminNmPop,
 	},
 	created(){
 		this.$store.commit("login/isLogin", true);
     	this.$store.commit("login/isAuthChk", true);
+      console.log(this.$route.params.userSeq);
+      this.loginId = this.$route.params.loginId;
+      this.getExcelHeader();
+      this.channelDetail(this.$route.params.userSeq);
     }, 
 	methods :{
+    async channelDetail(userSeq){
+      this.row.userSeq = userSeq;
+      try {
+        const response = await channelMgtApi.channelDetail(this.row);
+        const result = response.data;
+        console.log(result);
+        var sndCntTotal=0;
+        var sndCntSTotal=0;
+        var sndCntLTotal=0;
+        var sndCntMTotal=0;
+        var sndCntATotal=0;
+        if(result != null && result.retCode == "0000") {
+          //데이터값이 널이면 오류처리
+
+          for(var i = 0; i < result.data.list.length; i++ ){
+            console.log('[succCnt]:'+result.data.list[i].succCnt);
+            sndCntTotal = sndCntTotal + Number(result.data.list[i].sndCnt);
+            sndCntSTotal = sndCntSTotal + Number(result.data.list[i].sndCntS)
+            sndCntLTotal = sndCntLTotal + Number(result.data.list[i].sndCntL)
+            sndCntMTotal = sndCntMTotal + Number(result.data.list[i].sndCntM)
+            sndCntATotal = sndCntATotal + Number(result.data.list[i].sndCntA)
+          }
+          this.sndCntTotal = sndCntTotal;
+          this.sndCntSTotal = sndCntSTotal;
+          this.sndCntLTotal = sndCntLTotal;
+          this.sndCntMTotal = sndCntMTotal;
+          this.sndCntATotal = sndCntATotal;
+          this.list = result.data.list;
+          this.sndCntS = result.data.sndCntS
+          this.sndCntL = result.data.sndCntL
+          this.sndCntM = result.data.sndCntM
+          this.sndCntA = result.data.sndCntA;
+          this.loginId = result.data.loginId;
+          this.custNm = result.data.custNm;
+          this.subsDt = result.data.subsDt;
+          this.subsSttusCd = result.data.subsSttusCd;
+          this.reprNm = result.data.reprNm;
+          this.bizrno = result.data.bizrno;
+          this.channelId = result.data.channelId;
+					this.channelNm = result.data.channelNm;
+          this.adminId = result.data.adminId;
+					this.adminNm = result.data.adminNm;
+          this.cprRegNo = result.data.cprRegNo;
+          this.adr1 = result.data.adr1;
+					this.adr2 = result.data.adr2;
+					this.adr3 = result.data.adr3;
+          this.custTyCd = result.data.custTyCd;
+          this.plan = result.data.plan;
+          if(this.bizrno != '' && this.bizrno != null){
+						this.bizrno1 = this.bizrno.substr(0, 3);
+						this.bizrno2 = this.bizrno.substr(3, 2);
+						this.bizrno3 = this.bizrno.substr(5);
+					}
+					if(this.cprRegNo != '' && this.cprRegNo != null){
+						this.cprRegNo1 = this.cprRegNo.substr(0, 6);
+						this.cprRegNo2 = this.cprRegNo.substr(6);
+					}
+          this.serviceId = result.data.userId;
+
+        }
+        
+      } catch (error) {
+        
+      }
+    },
+
+    getExcelHeader() {
+      // 헤더를 mockup으로 관리한다.
+      channelMgtApi.getExcelHeader(this.pageType).then(res => {
+        this.excelHeader = res;
+      });
+    },  
+
+    async excelDown() {
+      if (this.list.length <= 0) {
+        // this.row.title = '유치채널현황';
+        // this.row.msg1 = '조회된 데이터가 없습니다.';
+        // this.$refs.commonModal.alertModalOpen(this.row);
+        return false;
+      }
+      let today = moment().format('YYYYMMDDHHmmss');
+      const saveFileName = `유치고객발송건수_${today}.xlsx`;
+      const data = await this.getExcelDataDown();
+      let options = {
+
+        header: this.excelHeader,
+        dataOrder: 'header'
+      };
+      // console.log(data);
+      xlsx.export(data.list, saveFileName, options).then(() => {});
+    },
+    
+    async getExcelDataDown() {
+      try {
+        let response;
+        const params = {
+          // sndCntS: this.sndCntS,
+          // sndCntL: this.sndCntL,
+          // sndCntM: this.sndCntM,
+          // sndCntA: this.sndCntA,
+          userSeq: this.userSeq
+ 
+        };
+
+        response = await channelMgtApi.sendNumberListExcel(params);
+
+        const result = response.data;
+        if (result != null && result.retCode == "0000") {
+          return result.data;
+        }else{
+          return false;
+        }
+      } catch (err) {
+        return false;
+      }
+    }, // end of getExcelDataDown
+    goChannelList() {
+      this.$router.push({ name: 'channelList'});
+    },
+    searchIDPopOpen: function(){
+      console.log('>>> serviceId:'+this.serviceId);
+      var params = {
+        "serviceId": this.serviceId,
+				"serviceSeq": this.row.userSeq,
+				"parentDiv": 'channelDetail'
+      }
+			this.$refs.adminNmPop.ModalOpen(params);			
+		},
 
 	}
 }

frontend/src/modules/attractMgt/views/ChannelList.vue

@@ -35,7 +35,7 @@
             </div>
             <div class="select_box id">
               <label for="subsSttusCd" class="label">상태</label>
-              <select name="subsSttusCd" id="subsSttusCd" v-model="grid.params.subsSttusCd">
+              <select name="subsSttusCd" id="subsSttusCd" v-model="grid.params.subsSttusCd" @keyup.enter="search">
                 <option value="" selected>전체</option>
                 <option v-for="(option, i) in subsSttusCdList" v-bind:value="option.code" v-bind:key="i">
                   {{ option.codeNm }}
@@ -44,7 +44,7 @@
             </div>
             <div class="select_box">
               <label for="custTyCd" class="label">구분</label>
-              <select name="custTyCd" id="custTyCd" v-model="grid.params.custTyCd">
+              <select name="custTyCd" id="custTyCd" v-model="grid.params.custTyCd" @keyup.enter="search">
                 <option value="" selected>전체</option>
                 <option v-for="(option, i) in custTyCdList" v-bind:value="option.code" v-bind:key="i">
                   {{ option.codeNm }}
@@ -63,8 +63,8 @@
           <div class="group">
             <div class="select_box">
               <label for="right" class="label">상세검색</label>
-              <select name="" id="" v-model="grid.params.searchType">
-                <option value="01">고객사명</option>
+              <select name="" id="" v-model="grid.params.searchType" @keyup.enter="search">
+                <option value="01" selected>고객사명</option>
                 <option value="02">이름</option>
                 <option value="03">사업자등록번호(생년월일)</option>
               </select>
@@ -77,7 +77,7 @@
         </div>
       </form>
       <div class="info">
-        <div class="count">총 <span>{{ totalItems }}</span>건
+        <div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
           <div class="select_box NumberSe">
             <select name="" id="" v-model="perPageCnt" @change="changePerPage()">
               <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>
@@ -106,7 +106,7 @@
         ></custom-grid>
       </div>
 
-      <common-modal ref="commmonModal"></common-modal>
+      <common-modal ref="commonModal"></common-modal>
 
     </div>
 
@@ -182,6 +182,7 @@ export default {
           { name: 'no', header: 'No', align: 'center', width: '6%'},
           { name: 'subsDt', header: '가입일', align: 'center', width: '11%'},
           { name: 'norgNm', header: '유치업체', align: 'center', width: '10%'},
+          { name: 'userSeq', header: '사용자일련번호', align: 'center', width: '10%', hidden:true},
           { name: 'loginId', header: '마당ID(이름)', align: 'center', width: '10%', renderer: {
               type: CustomATagRenderer
               , options: {
@@ -190,21 +191,34 @@ export default {
             }
           },
           { name: 'custNm', header: '고객사명', align: 'center', width: '10%'},
-          { name: 'bizrno', header: '사업자등록번호(생년월일)', align: 'center', width: '12%'},
+          { name: 'bizrno', header: '사업자번호', align: 'center', width: '12%'
+            ,formatter: props => {
+              let result = props.bizrno.substring(0,3)+'-'+ props.bizrno.substring(3,5)+'-'+ props.bizrno.substring(5,10)
+              return result;
+            }
+          },
           { name: 'userNm', header: '이름', align: 'center', width: '10%'},
           { name: 'subsSttusCd', header: '상태', align: 'center', width: '10%'},
           { name: 'custTyCd', header: '구분', align: 'center', width: '10%'},
-          { name: 'sndCnt', header: '전체발송건수', align: 'center', width: '11%'}
+          { name: 'sndCnt', header: '전체발송건수', align: 'center', width: '11%',
+            formatter: props =>{
+              let result = props.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          }
         ],
         noDataStr: '검색 결과가 없습니다.',
         params: {
           searchType: '',
-          searchText: '',
+          searchType1: '',
+          searchText: '', 
           subsStDt: '',
           subsEdDt: '',
           subsSttusCd: '',
           loginId: '',
-          norgNm: ''
+          norgNm: '',
+          sndCnt: '',
+          custTyCd: '',
         },
         excelHeader: []
       }
@@ -272,6 +286,7 @@ export default {
           subsStDt: this.grid.params.subsStDt,
           subsEdDt: this.grid.params.subsEdDt,
           searchType1: this.grid.params.searchType,
+          searchType2: this.grid.params.searchType1,
           searchText1: this.grid.params.searchText,
           loginId: this.grid.params.loginId,
           norgNm: this.grid.params.norgNm
@@ -292,9 +307,9 @@ export default {
     async excelDown() {
 
       if (this.$refs.table.getData().length <= 0) {
-        this.row.title = '유치채녈현황';
+        this.row.title = '유치채널현황';
         this.row.msg1 = '조회된 데이터가 없습니다.';
-        this.$refs.commmonModal.alertModalOpen(this.row);
+        this.$refs.commonModal.alertModalOpen(this.row);
         return false;
       }
 
@@ -302,6 +317,8 @@ export default {
       const saveFileName = `유치채널현황_${today}.xlsx`;
 
       const data = await this.getExcelDataDown();
+        console.log('-------------------------');
+      console.log(data);
       let options = {
         header: this.excelHeader,
         dataOrder: 'header'
@@ -316,7 +333,10 @@ export default {
       });
     },
     channelDetail(props){
+      console.log(props);
       //TODO 전달값 셋팅 필요.
+      this.row.userId = props.loginId;
+      this.row.userSeq = props.userSeq;
       this.$router.push({ name: 'channelDetail', params: this.row });
     },
     setCodeData() {

frontend/src/modules/calculate/service/mixins.js

@@ -0,0 +1,353 @@
+import lodash from "lodash";
+
+const utils_mixin = {
+      methods:{
+      /** * 이메일 형식 체크 * * @param 데이터 */
+      emailCheck(email,rtnArrYn) {
+          if(this.isNull(rtnArrYn)){
+            rtnArrYn='N';
+          }
+          // var regExp = /(^[A-Za-z0-9_\.\-]+)@([A-Za-z0-9\-]+\.[A-Za-z0-9\-]+)/;
+          var regExp = /^([0-9a-zA-Z_\.\-]([-_.]?[0-9a-zA-Z_\.\-])*)@([0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$)/i;//이메일 정규식
+  
+          if(regExp.test(email) == false) {
+            // 이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
+            if(rtnArrYn == 'Y'){
+                return email;
+              }
+            return false;
+          }else{
+              var myArray = regExp.exec(email);
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return true;
+          }
+  
+        },
+        /** * 전화번호 포맷으로 변환 * * @param 데이터 */
+        formatPhone(phoneNum,fmt,rtnArrYn) {
+          if(this.isNull(fmt)){
+            fmt='';
+          }
+          if(this.isNull(rtnArrYn)){
+            fmt='N';
+          }
+          if(this.isPhone(phoneNum)) {
+            var rtnNum;
+            var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+            if(regExp.test(phoneNum)){
+              myArray = regExp.exec(phoneNum);
+              rtnNum = myArray[1]+fmt + myArray[2]+fmt+myArray[3];
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return rtnNum;
+            } else {
+              regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+              if(regExp.test(phoneNum)){
+                myArray = regExp.exec(phoneNum);
+                rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
+                if(rtnArrYn == 'Y'){
+                  return myArray;
+                }
+                return rtnNum;
+              } else {
+                return phoneNum;
+              }
+            }
+          } else {
+            return phoneNum;
+          }
+        },
+        /** * 핸드폰번호 포맷으로 변환 * * @param 데이터 */
+        formatMobile(phoneNum,fmt,rtnArrYn) {
+  
+          if(this.isNull(fmt)){
+            fmt='';
+          }
+          if(this.isNull(rtnArrYn)){
+            fmt='N';
+          }
+          if(this.isMobile(phoneNum)) {
+  
+            var rtnNum;
+            var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+  
+            if(regExp.test(phoneNum)){
+  
+              myArray = regExp.exec(phoneNum);
+              rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return rtnNum;
+            } else {
+              return phoneNum;
+            }
+          } else {
+            return phoneNum;
+          }
+        },
+  
+        /** * 전화번호 형식 체크 * * @param 데이터 */
+        isPhone(phoneNum) {
+          var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
+          if(regExp.test(phoneNum)){
+            return true;
+            } else {
+              regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+              if(regExp.test(phoneNum)){
+                return true;
+              } else {
+                return false;
+              }
+          }
+        },
+  
+        /** * 핸드폰번호 형식 체크 * * @param 데이터 */
+        isMobile(phoneNum) {
+          var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
+          var myArray;
+          if(regExp.test(phoneNum)){
+            myArray = regExp.exec(phoneNum);
+            return true;
+          } else {
+            return false;
+          }
+        },
+        isMobile2(phoneNum) {
+          var regExp =/(1[016789])([0-9]{3,4})([0-9]{4})$/;
+          var myArray;
+          if(regExp.test(phoneNum)){
+            myArray = regExp.exec(phoneNum);
+            return true;
+          } else {
+            return false;
+          }
+        },
+  
+        isNull(obj){
+          if(lodash.isNil(obj) || lodash.trim(obj) == ''){
+            return true;
+          }
+          return false;
+        },
+        getParent(name){
+          let p = this.$parent;
+          while(typeof p !== 'undefined'){
+              if(p.$options.name == name) {
+              return p;
+              }else {
+              p = p.$parent;
+              }
+          }
+          return false;
+        },
+        getJsonObj(str){
+          return JSON.parse(JSON.stringify(str));
+        },
+      }
+  };
+  
+  var chkPattern2 = {
+      data: function () {
+          return {      
+          }
+      },
+      methods: {
+      selSesStorage(keyLike){
+        if(this.isNull(keyLike)){
+          return null;
+        }
+        if(sessionStorage.length > 0){
+          let keyList = [];
+          for(let i=0;i<sessionStorage.length;i++){
+            const keyNm = sessionStorage.key(i);
+            if(keyNm.indexOf(keyLike) > -1){
+              keyList.push({name : keyNm, value : sessionStorage.getItem(keyNm)});
+            }
+          }
+          if(keyList.length > 0){
+            return keyList;
+          }
+          return null;
+        }
+        return null;
+      },
+  
+      delSesStorage(keyList){
+        if(this.isNull(keyList)){
+          return null;
+        }
+        if(keyList.length > 0){
+          keyList.map((o) => (sessionStorage.removeItem(o.name)));
+          return true;
+        }
+      },
+  
+      setGridMouseDownActive(){
+          const ele = document.querySelector(`div.tui-grid-container.tui-grid-show-lside-area`);
+          if(window.getEventListeners(ele).mousedown){
+            ele.removeEventListener('mousedown',window.getEventListeners(ele).mousedown[0].listener);
+          }
+      },
+          restrictChars : function($event,regExp,hanYn){
+  
+        if(this.isNull(hanYn)){
+          hanYn='N';
+        }
+        if(hanYn === 'N' && $event.type === 'keydown'){
+          if($event.keyCode === 229){
+            $event.preventDefault();
+            return false;
+          }
+        }
+  
+        if($event.type === 'keypress'){
+          //한글 처리 불가
+          if(regExp.test(String.fromCharCode($event.charCode))) {
+            return true;
+          }else{
+            $event.preventDefault();
+            return false;
+          }
+        }
+  
+        if(hanYn === 'N' && ( $event.type === 'keyup' || $event.type === 'input' || $event.type === 'change' || $event.type === 'blur')){
+          $event.target.value = $event.target.value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g,'');
+          $event.preventDefault();
+          return false;
+        }
+        return true;
+      },
+          setLenth: function (e, len) {
+              this.cut(e, len);
+      },
+      onlyCustom: function (e,strRegExp,hanYn) {
+        var regExp_g = new RegExp(strRegExp,'g');
+        this.cut(e);
+              return this.restrictChars(e,regExp_g,hanYn);
+      },
+      onlyCommon: function(strRegExp, e, len, isEventCall, hanYn) {
+        var regExp_g = new RegExp(strRegExp,'g');         
+        if(isEventCall === 'N'){
+          if(!this.cut(e, len, isEventCall)){
+            return false;
+          }
+          if(!regExp_g.test(e.value)){
+            return false;
+          }
+          return true;
+        }
+        this.cut(e, len);
+              return this.restrictChars(e,regExp_g,hanYn);
+      },
+          onlyNum: function (e, len, isEventCall) {
+        var strRegExp = '^[0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyEng: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },
+      onlyLowerEng: function (e, len, isEventCall) {
+        var strRegExp = '^[a-z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },
+      onlyUpperEng: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyEmail: function (e, len, isEventCall) {
+        var strRegExp = '^[a-zA-Z0-9_\.\-@._-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyName: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyTitle: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyText: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9_-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyPassword: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z0-9!@#$%^&*]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyId: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z0-9_\.\-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyIp: function (e, len, isEventCall) {
+        var strRegExp = '^[0-9,.*]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyRoleNm_Space: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyRoleId_UnderBar: function (e, len, isEventCall) {
+        var strRegExp = '^[a-zA-Z0-9_]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },    
+          cut: function (ele, len, isValidChk) {
+        let e=ele;
+        if (typeof ele.target != "undefined") {
+          e=ele.target;
+        }
+        let max = this.isNull(len) ? e.attributes.maxlength.value : len;      
+        let str = e.value;
+  
+        if (this.bytes(str) > max) {
+          if(this.isNull(isValidChk)){
+            e.value = this.cutBytes(str, max);
+          }
+          return false;
+        }			
+        return true;
+          },
+          cutBytes: function (str, len) {
+        while(1 === 1){
+          if(this.bytes(str) <= len){
+            return str;
+          }
+          str = str.slice(0,-1);
+        }
+          },
+          bytes: function (str) {
+              var length = ((s,b,i,c) => {
+            // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);  // 한글 3바이트
+            // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?2:c>>7?1:1);     //한글 2바이트
+          b=0,i=0;
+          while(1 === 1){          
+            c = s.charCodeAt(i++);
+            if (isNaN(c)) {
+              break;
+            }
+            b += c >> 11 ? 2 : c >> 7 ? 1 : 1;
+          }
+          return b
+        })(str);
+              return length;
+          },
+          checkPhone: function(str) {
+              str = str.replace(/[-\s]+/g, '');
+              if (str.charAt(0)!="0"){
+                  str = "0"+str;
+              }
+              if (str.length<10||str.length>12){return "";}
+              if (isNaN(str)){return "";	}
+              if (str.substr(0,2)!="01" && str.substr(0,3)!="070"  && str.substr(0,4)!="0505" && str.substr(0,4)!="0503"){return "";	}
+              return str;
+  
+          },
+      }
+  };
+  export { utils_mixin, chkPattern2 };

frontend/src/modules/calculate/views/CalcList.vue

@@ -44,26 +44,24 @@
           <div class="group">
             <div class="input_box">
               <label for="right" class="label">고객사명</label>
-              <input class="search-box" type="text" id="" placeholder="검색어 입력"/>
+              <input class="search-box" type="text" id="" placeholder="검색어 입력" v-model="grid.params.custNm"/>
             </div>
             <div class="input_box">
-              <label for="right" class="label">사업자번호 (생년월일)</label>
-              <input class="search-box" type="text" id="" placeholder="검색어 입력"/>
+              <label for="right" class="label">사업자번호</label>
+              <input class="search-box" type="text" id="" placeholder="검색어 입력" v-model="grid.params.bizrno"/>
             </div>
-            <button type="button" class="button grey">조회</button>
+            <button type="button" class="button grey" @click="search">조회</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 class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
+						<div class="select_box NumberSe">
+							<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
+								<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>								
+							</select>
+					  </div>					
+					</div>
         <div class="button_group">
           <button type="button" class="button blue download">엑셀 다운로드</button>
         </div>
@@ -71,261 +69,263 @@
       </div>
       <div class="table calculate scroll">
         <table>
-          <thead>
-          <tr>
-            <th rowspan="2">날짜</th>
-            <th rowspan="2">고객사명<br>(이름)</th>
-            <th rowspan="2">사업자번호<br>(생년월일)</th>
-            <th rowspan="2">요금제</th>
-            <th rowspan="2">시작금액</th>
-            <th rowspan="2">사용금액</th>
-            <th rowspan="2">이월금액</th>
-            <th rowspan="2">종량금액</th>
-            <th rowspan="2">소멸금액</th>
-            <th rowspan="2">청구금액</th>
-            <th colspan="5">채널별 발송 건수</th>
-          </tr>
-          <tr class="total">
-            <th>전체</th>
-            <th>SMS</th>
-            <th>LMS</th>
-            <th>MMS</th>
-            <th>알림톡</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr>
-            <td>2022-02</td>
-            <td>유플러스01</td>
-            <td>229-81-39938</td>
-            <td>요금제1<br>(50,000)</td>
-            <td class="price">50,000</td>
-            <td class="price">50,000</td>
-            <td>-</td>
-            <td>-</td>
-            <td>-</td>
-            <td class="price">100,000</td>
-            <td>84,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-          </tr>
-          <tr>
-            <td>2022-02</td>
-            <td>홍길동</td>
-            <td>850505</td>
-            <td>요금제1<br>(50,000)</td>
-            <td class="price">100,000</td>
-            <td class="price">150,000</td>
-            <td>-</td>
-            <td class="price">50,000</td>
-            <td>-</td>
-            <td class="price">150,000</td>
-            <td>84,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-          </tr>
-          <tr>
-            <td>2022-02</td>
-            <td>유플러스01</td>
-            <td>229-81-39938</td>
-            <td>요금제1<br>(50,000)</td>
-            <td class="price">50,000</td>
-            <td class="price">50,000</td>
-            <td>-</td>
-            <td>-</td>
-            <td>-</td>
-            <td class="price">100,000</td>
-            <td>84,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-          </tr>
-          <tr>
-            <td>2022-02</td>
-            <td>유플러스01</td>
-            <td>229-81-39938</td>
-            <td>요금제1<br>(50,000)</td>
-            <td class="price">50,000</td>
-            <td class="price">50,000</td>
-            <td>-</td>
-            <td>-</td>
-            <td>-</td>
-            <td class="price">100,000</td>
-            <td>84,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-          </tr>
-          <tr>
-            <td>2022-02</td>
-            <td>유플러스01</td>
-            <td>229-81-39938</td>
-            <td>요금제1<br>(50,000)</td>
-            <td class="price">50,000</td>
-            <td class="price">50,000</td>
-            <td>-</td>
-            <td>-</td>
-            <td>-</td>
-            <td class="price">100,000</td>
-            <td>84,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-          </tr>
-          <tr>
-            <td>2022-02</td>
-            <td>홍길동</td>
-            <td>850505</td>
-            <td>요금제1<br>(50,000)</td>
-            <td class="price">100,000</td>
-            <td class="price">150,000</td>
-            <td>-</td>
-            <td class="price">50,000</td>
-            <td>-</td>
-            <td class="price">150,000</td>
-            <td>84,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-          </tr>
-          <tr>
-            <td>2022-02</td>
-            <td>홍길동</td>
-            <td>850505</td>
-            <td>요금제1<br>(50,000)</td>
-            <td class="price">100,000</td>
-            <td class="price">150,000</td>
-            <td>-</td>
-            <td class="price">50,000</td>
-            <td>-</td>
-            <td class="price">150,000</td>
-            <td>84,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-          </tr>
-          <tr>
-            <td>2022-02</td>
-            <td>홍길동</td>
-            <td>850505</td>
-            <td>요금제1<br>(50,000)</td>
-            <td class="price">100,000</td>
-            <td class="price">150,000</td>
-            <td>-</td>
-            <td class="price">50,000</td>
-            <td>-</td>
-            <td class="price">150,000</td>
-            <td>84,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-          </tr>
-          <tr>
-            <td>2022-02</td>
-            <td>홍길동</td>
-            <td>850505</td>
-            <td>요금제1<br>(50,000)</td>
-            <td class="price">100,000</td>
-            <td class="price">150,000</td>
-            <td>-</td>
-            <td class="price">50,000</td>
-            <td>-</td>
-            <td class="price">150,000</td>
-            <td>84,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-          </tr>
-          <tr>
-            <td>2022-02</td>
-            <td>홍길동</td>
-            <td>850505</td>
-            <td>요금제1<br>(50,000)</td>
-            <td class="price">100,000</td>
-            <td class="price">150,000</td>
-            <td>-</td>
-            <td class="price">50,000</td>
-            <td>-</td>
-            <td class="price">150,000</td>
-            <td>84,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-            <td>21,000,000</td>
-          </tr>
-          </tbody>
+          <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.header" 
+					></custom-grid>
         </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>
+
+      <common-modal ref="commmonModal"></common-modal>
+      
     </div>
   </div>
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
+//import { utils_mixin, chkPattern2 } from '../service/mixins';
 import moment from "moment";
+import xlsx from '@/common/excel';
 import lodash from 'lodash';
-//import api from '../service/api';
+import commonModal from "@/components/modal/commonModal";
+
 export default {
   name: 'calcList',
+  //mixins: [utils_mixin, chkPattern2],
   data() {
     return {
+      // 달력 데이터
       ko: vdp_translation_ko.js,
       periodDay: 7,
       sDateDiv: 'month',
       startDate: new Date(),
       endDate: new Date(),
-    }
+
+      startDt:'',
+    	endDt:'',		
+		  startYear:'',
+		  startMonth:'',
+		  endYear:'',
+		  endMonth:'',
+		  row: {},
+    	list:[],
+    	totalCnt: '',
+
+      pageType: 'SUBS',
+
+      // 테이블 리스트 데이터
+      perPageCnt: 50,
+      options: [
+        { text: '20', value: 20},
+        { text: '50', value: 50},
+        { text: '100', value: 100}
+      ],
+      totalItems: 0,
+
+      grid: {
+        url: '/api/v1/bo/calculate/calcList',
+        pagePerRows: 20,
+        pagination: true,           
+        isCheckbox: false,        // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
+        initialRequest: false,
+        addCls: 'box_OFvis',
+
+        header:[
+          [
+            { header: '날짜', childNames: [] },
+            { header: '고객사명', childNames: [] },
+            { header: '사업자번호', childNames: [] },
+            { header: '요금제', childNames: [] },
+            { header: '시작금액', childNames: [] },
+            { header: '사용금액', childNames: [] },
+            { header: '이월금액', childNames: [] },
+            { header: '종량금액', childNames: [] },
+            { header: '소멸금액', childNames: [] },
+            { header: '청구금액', childNames: [] },
+            { header: '채널별 발송 건수', childNames: ['totalSndCnt','smsSndCnt','lmsSndCnt','mmsSndCnt','atlkSndCnt'] },
+          ]
+        ],
+
+        columns: [          
+          { name: 'useYm', header: '날짜', align: 'center'},
+          { name: 'custNm', header: '고객사명', align: 'center', width: '130px'},
+          { name: 'bizrno', header: '사업자번호', align: 'center', width: '120px'   
+            ,formatter: props => {
+              let result = props.bizrno.substring(0,3)+'-'+ props.bizrno.substring(3,5)+'-'+ props.bizrno.substring(5,10)
+              return result;
+            }
+          },
+          { name: 'prodNm', header: '요금제', align: 'center', width: '160px'
+            ,formatter: props => {
+              let result = "<p>"+ props.prodNm+"</p>\n<p>("+props.prodAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')+")</p>";
+              return result;
+            }            
+          },
+          { name: 'startAmt', header: '시작금액', align: 'center'
+            ,formatter: props =>{
+              let result = props.startAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          },
+          { name: 'useAmt', header: '사용금액', align: 'center'
+            ,formatter: props =>{
+              let result = props.useAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          },
+          { name: 'cfwdAmt', header: '이월금액', align: 'center'
+            ,formatter: props =>{
+              let result = props.cfwdAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          },
+          { name: 'mrtUseAmt', header: '종량금액', align: 'center'
+            ,formatter: props =>{
+              let result = props.mrtUseAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          },
+          { name: 'extncAmt', header: '소멸금액', align: 'center'
+            ,formatter: props =>{
+              let result = props.extncAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          },
+          { name: 'billingAmt', header: '청구금액', align: 'center'
+            ,formatter: props =>{
+              let result = props.billingAmt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          },
+          { name: 'totalSndCnt', header: '전체', align: 'center', cls: 'td_line'
+            ,formatter: props =>{
+              let result = props.totalSndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          },
+          { name: 'smsSndCnt', header: 'SMS', align: 'center', cls: 'td_line' 
+            ,formatter: props =>{
+              let result = props.smsSndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          },
+          { name: 'lmsSndCnt', header: 'LMS', align: 'center',  cls: 'td_line'
+            ,formatter: props =>{
+              let result = props.lmsSndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          },
+          { name: 'mmsSndCnt', header: 'MMS', align: 'center',  cls: 'td_line'
+            ,formatter: props =>{
+              let result = props.mmsSndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          },
+          { name: 'atlkSndCnt', header: '알림톡', align: 'center', cls: 'td_line' 
+            ,formatter: props =>{
+              let result = props.atlkSndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+              return result;
+            }
+          },
+        ],
+        noDataStr: '검색 결과가 없습니다.',        
+        params: {       
+          startMonth: '',
+          endMonth: '',
+        },
+        excelHeader: []
+      }
+
+    };
   },  
   components: {
     customGrid: customGrid,
+    commonModal,
     vuejsDatepicker,
   },
   created(){
     this.$store.commit("login/isLogin", true);
     this.$store.commit("login/isAuthChk", true);
     this.setPeriodDay(0);
+    this.gridParamSet();
   },
   destroyed() {
       
   },
   mounted() {
+    let page = 1;
+    // 페이지 정보 및 검색 조건
+    const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+    console.log('getCondition : '+getCondition);
+
+    // store에 저장된 페이지 정보 및 검색 조건을 불러오기
     let isKeep = false;
-    isKeep = true;
+    if (getCondition) {
+      this.grid.pagePerRows = getCondition.perPage;
+      this.grid.params = getCondition.params;      
+      page = getCondition.page;
+      isKeep = true;
+    }
     this.search(isKeep);
   },
+  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();
+  },
   methods: {
     search: function(isKeep) {
-      console.log(this.testList.params);
-      this.$refs.table.search(this.testList.params, isKeep);
+      console.log('>>>>>>> search Start >>>>>>');
+      this.$refs.table.search(this.grid.params, isKeep);
+      this.grid.params = {
+        startMonth: moment(this.startDate).format('YYYYMM'),
+        endMonth: moment(this.endDate).format('YYYYMM'),
+        custNm: this.grid.params.custNm,
+        bizrno: this.grid.params.bizrno
+      };
+      console.log('this.perPageCnt'+this.perPageCnt);
+      console.log(this.grid.params);
+/*
+      var currentDate = new Date();
+      var currentMonth = moment(currentDate).format('YYYYMM');
+      console.log('[currentMonth]:'+currentMonth);      
+
+      if(moment(this.grid.params.startMonth).isBefore(moment(currentMonth).subtract(0, 'months').format('YYYYMM')) ||
+          moment(this.grid.params.endMonth).isBefore(moment(currentMonth).subtract(0, 'months').format('YYYYMM'))){
+        this.row.title = '발송통계';
+        this.row.msg1 = '검색 기간은 전월만 선택 가능 합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+			  return false
+      }
+*/
+      if (moment(this.grid.params.startMonth).isBefore(moment(this.grid.params.endMonth).subtract(2, 'months').format('YYYYMM'))) {
+			  //alert('검색 기간은 전월 최대 3개월까지 선택 가능 합니다.');
+			  this.row.title = '발송통계';
+        this.row.msg1 = '검색 기간은 전월 최대 3개월까지 선택 가능 합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+			  return false
+		  }
+
+      this.$refs.table.search(this.grid.params, isKeep);
+      this.sendStoreData();
+
     },
     setPeriodDay(day) {
       this.periodDay = day;
@@ -374,6 +374,32 @@ export default {
         return moment(date).format('YYYY-MM-DD');
       }
     },
+    changePerPage: function(){ 	// 페이지당 조회할 개수
+      this.grid.pagePerRows = this.perPageCnt;
+      this.search(true);
+    },
+    sendStoreData: function() {
+      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
+      });
+
+      const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+      console.log("getCondition : "+ getCondition.perPage);
+    },
+    gridParamSet() {
+      this.grid.params = {
+        startMonth: moment(this.startDate).format('YYYYMM'),
+        endMonth: moment(this.endDate).format('YYYYMM'),
+        custNm: this.grid.params.custNm,
+        bizrno: this.grid.params.bizrno
+      }
+
+      console.log("gridParamSet()-startMonth : "+ this.grid.params.startMonth);
+    }
   }
 };
 </script>

frontend/src/modules/channelMgt/views/TmpltList.vue

@@ -212,7 +212,7 @@ export default {
         noDataStr: '검색 결과가 없습니다.',        
         params: {
           searchType1: '',
-          searchType2: '',
+          searchType2: 'custNm',
           searchText1: ''
 		    },
         excelHeader: []
@@ -236,7 +236,7 @@ export default {
 		    perPage: 50,
         params: {
           searchType1: '',
-          searchType2: '',
+          searchType2: 'custNm',
           searchText1: ''}
       });
       
@@ -271,7 +271,7 @@ export default {
 		    perPage: this.perPageCnt,        
         params: {
           searchType1: '',
-          searchType2: '',
+          searchType2: 'custNm',
           searchText1: ''
 		    }
       });

frontend/src/modules/custMgt/components/AdminNmPop.vue

@@ -54,6 +54,9 @@ export default {
             agencyNm:"",
 			idCheck: false,
 			props: {}, 
+			serviceId: '',
+			parentDiv: '',
+			serviceSeq:'',
         }
     },
     components: {
@@ -141,6 +144,44 @@ export default {
 			this.formReset();	
 			this.$refs.madangId.focus();
 		},
+		async adminIdNmChangeOk(){
+			// 관리자명 수정 api 호출
+			var params = {
+        		"adminId": this.madangId,
+				"adminNm": this.userNm,
+				"serviceId": this.serviceId
+        	}
+			console.log(params);
+			try {
+				const response = await custMgtApi.updateAdminInfo(params);
+				const result = response.data;
+				console.log(result);
+				if (result != null && result.retCode == "0000") {	
+					console.log('adminNm modal close');
+					//alert('관리자정보 수정에 성공하였습니다.');
+					// adminNm modal close
+					var dimmed = document.getElementsByClassName('modal26');
+					for(var i = 0; i < dimmed.length; i++){
+						dimmed[i].style.display = 'none';
+					}
+
+					if(this.parentDiv === 'subsDetail'){
+						this.$parent.subsDetail(this.serviceId);
+					} else if(this.parentDiv === 'channelDetail'){
+						this.$parent.channelDetail(this.serviceSeq);
+					}
+					
+				}else {
+					//alert('관리자정보 수정에 실패하였습니다.');
+					this.formReset();	
+					this.$refs.madangId.focus();
+				}
+			} catch(err) {
+				//alert("실패 하였습니다.");
+				this.formReset();	
+				this.$refs.madangId.focus();
+			}			
+		},
         setAuthData() {
 			// 권한 옵션.
 			api.commAuth().then(response => {
@@ -151,12 +192,16 @@ export default {
 			Object.assign(this.$data, this.$options.data());
 		},
         // 모달 띄우기
-		ModalOpen(){
+		ModalOpen(target){	
+			console.log(target);	
 			this.formReset();
 			var dimmed = document.getElementsByClassName('modal26');
 			for(var i = 0; i < dimmed.length; i++){
 				dimmed[i].style.display = 'block';
 			}
+			this.serviceId = target.serviceId;
+			this.serviceSeq = target.serviceSeq;
+			this.parentDiv = target.parentDiv;
 		},
 		// 모달 끄기
 		ModalClose(){

frontend/src/modules/custMgt/components/CarryOverListPop.vue

@@ -26,12 +26,15 @@
 						</thead>
 						<tbody>
 							<tr v-for="(option, i) in list" v-bind:key="i">
-								<td>{{ option.date }}</td>
+								<td>{{ option.lmtYm }}</td>
 								<td>{{ option.startAmount }}</td>
 								<td>{{ option.useAmount }}</td>
 								<td>{{ option.krrrAmount }}</td>
 								<td>{{ option.extshAmount }}</td>
 							</tr>
+							<tr v-if="list.length === 0">
+							    <td colspan="5">검색 결과가 없습니다.</td>
+							</tr>
 						</tbody>
 					</table>
 				</form>
@@ -82,7 +85,7 @@ export default {
 				console.log(result);
 				if (result != null && result.retCode == "0000") {
 					this.list = result.data.list;
-                    this.totalCnt = result.data.totalCnt;
+                    this.totalCnt = result.data.list.length;
 				}
 			} catch(err) {
         this.row.title = '청약고객관리';

frontend/src/modules/custMgt/components/SearchIdPopup.vue

@@ -85,6 +85,8 @@ export default {
 			for(var i = 0; i < dimmed.length; i++){
 				dimmed[i].style.display = 'none';
 			}
+			
+			this.$parent.adminIdNmChangeOk();
 		},
 		// 성공 모달 끄기(cancel)
 		searchIdModalCancelClose(){

frontend/src/modules/custMgt/views/MemberList.vue

@@ -78,7 +78,7 @@
 				</div>
 				
 				<div class="info">
-					<div class="count">총 <span>{{ totalItems }}</span>건
+					<div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
 						<div class="select_box NumberSe">
 							<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
 								<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>								

frontend/src/modules/custMgt/views/SubsDetail.vue

@@ -94,8 +94,8 @@
 									<th>관리자명</th>
 									<td colspan="2">
 										<div class="input-double">
-										 <input type="text" v-model="adminId">
-										 <input type="text" v-model="adminNm">
+										 <input type="text" disabled v-model="adminId">
+										 <input type="text" disabled v-model="adminNm">
 										 <button type="button" class="button grey btn-a" @click="searchIDPopOpen">변경</button>
 										</div>
 									</td>
@@ -292,6 +292,7 @@ export default {
 				const result = response.data;
 				console.log(result);
 				if (result != null && result.retCode == "0000") {
+					//데이터값이 널이면 오류처리
 					this.custNm = result.data.custNm;
 					this.reprNm = result.data.reprNm;
 					this.custType = result.data.custType;
@@ -333,6 +334,7 @@ export default {
 			}
 
 		},
+
 		// updateAdminInfo 청약고객-사용정보-관리자ID,관리자명 수정
 		async updateAdminInfo() {
 			this.row.serviceId = this.$route.params.serviceId;
@@ -381,7 +383,12 @@ export default {
 			}
 		},
 		searchIDPopOpen: function(){
-			this.$refs.adminNmPop.ModalOpen();			
+			var params = {
+        		"serviceId": this.row.serviceId,
+				"serviceSeq": '',
+				"parentDiv": 'subsDetail'
+      		}	
+			this.$refs.adminNmPop.ModalOpen(params);			
 		},
     goMemberDetail: function(props){
 			console.log(this.row);

frontend/src/modules/custMgt/views/SubsList.vue

@@ -42,7 +42,7 @@
 						</div>
 						<div class="select_box id">
 							<label for="right" class="label">상태</label>
-							<select name="" id="" v-model="grid.params.searchType1">
+							<select name="" id="" v-model="grid.params.searchType1" @keyup.enter="search">
 								<option value="" selected>전체</option>
                 <option value="" >사용</option>
                 <option value="" >미납중지</option>
@@ -55,7 +55,7 @@
 						</div>
 						<div class="select_box">
 							<label for="right" class="label">유치채널</label>
-							<select name="" id="" v-model="grid.params.searchType2">
+							<select name="" id="" v-model="grid.params.searchType2" @keyup.enter="search">
                 <option value="" selected>전체</option>
                 <option value="" >고객셀프가입</option>
                 <option value="" >대리점</option>
@@ -70,7 +70,7 @@
 						<div class="group">
 						<div class="select_box">
 							<label for="right" class="label">상세검색</label>
-							<select name="" id="" v-model="grid.params.searchType3">
+							<select name="" id="" v-model="grid.params.searchType3" @keyup.enter="search">
                 <option value="">전체</option>
 								<option value="01">고객사명</option>
 								<option value="02">가입번호</option>
@@ -86,7 +86,7 @@
 				</div>
 				
 				<div class="info">
-					<div class="count">총 <span>{{ totalItems }}</span>건
+					<div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
 						<div class="select_box NumberSe">
 							<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
 								<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>								
@@ -269,6 +269,7 @@ export default {
       this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
     },
     custDetail(props){
+      console.log(props);
       this.row.serviceId = props.serviceId;
       this.$router.push({ name: 'subsDetail', params: this.row });
     },

frontend/src/modules/login/views/LoginAuth.vue

@@ -179,8 +179,24 @@ export default {
       async ajaxAuth(){
         var vm = this;
         let userId =  vm.$route.params.userId;
-        if (!vm.formCheck()){
-          alert(vm.errors[0]);
+
+        if(!this.mdn){
+          this.row.title = '휴대폰번호 확인';
+          this.row.msg1 = '휴대폰번호를 확인해 주세요.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+          return false;
+        }
+        if(!this.isAuthNum){
+          this.row.title = '인증번호 입력';
+          this.row.msg1 = '인증요청을 먼저 해주세요.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+          return false;
+        }
+
+        if(!this.confirmNum){
+          this.row.title = '인증번호 입력';
+          this.row.msg1 = '인증번호를 입력하세요.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
           return false;
         }
 

frontend/src/modules/mntrng/router/index.js

@@ -1,19 +1,19 @@
-import SendList from '../views/SendList'
-import LiveSendSttus from '../views/LiveSendSttus'
-
-export default [
-  {
-    path: '/mntrng/sendList',    
-    component: SendList,    
-    name: 'sendList',     
-    meta: { public: true }
-  },
-  {
-    path: '/mntrng/liveSendSttus',    
-    component: LiveSendSttus,    
-    name: 'liveSendSttus',     
-    meta: { public: true }
-  },
-  
-]
-
+import SendList from '../views/SendList'
+import LiveSendSttus from '../views/LiveSendSttus'
+
+export default [
+  {
+    path: '/mntrng/sendList',    
+    component: SendList,    
+    name: 'sendList',     
+    meta: { public: true }
+  },
+  {
+    path: '/mntrng/liveSendSttus',    
+    component: LiveSendSttus,    
+    name: 'liveSendSttus',     
+    meta: { public: true }
+  },
+  
+]
+

frontend/src/modules/mntrng/service/mixins.js

@@ -0,0 +1,353 @@
+import lodash from "lodash";
+
+const utils_mixin = {
+      methods:{
+      /** * 이메일 형식 체크 * * @param 데이터 */
+      emailCheck(email,rtnArrYn) {
+          if(this.isNull(rtnArrYn)){
+            rtnArrYn='N';
+          }
+          // var regExp = /(^[A-Za-z0-9_\.\-]+)@([A-Za-z0-9\-]+\.[A-Za-z0-9\-]+)/;
+          var regExp = /^([0-9a-zA-Z_\.\-]([-_.]?[0-9a-zA-Z_\.\-])*)@([0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$)/i;//이메일 정규식
+  
+          if(regExp.test(email) == false) {
+            // 이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
+            if(rtnArrYn == 'Y'){
+                return email;
+              }
+            return false;
+          }else{
+              var myArray = regExp.exec(email);
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return true;
+          }
+  
+        },
+        /** * 전화번호 포맷으로 변환 * * @param 데이터 */
+        formatPhone(phoneNum,fmt,rtnArrYn) {
+          if(this.isNull(fmt)){
+            fmt='';
+          }
+          if(this.isNull(rtnArrYn)){
+            fmt='N';
+          }
+          if(this.isPhone(phoneNum)) {
+            var rtnNum;
+            var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+            if(regExp.test(phoneNum)){
+              myArray = regExp.exec(phoneNum);
+              rtnNum = myArray[1]+fmt + myArray[2]+fmt+myArray[3];
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return rtnNum;
+            } else {
+              regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+              if(regExp.test(phoneNum)){
+                myArray = regExp.exec(phoneNum);
+                rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
+                if(rtnArrYn == 'Y'){
+                  return myArray;
+                }
+                return rtnNum;
+              } else {
+                return phoneNum;
+              }
+            }
+          } else {
+            return phoneNum;
+          }
+        },
+        /** * 핸드폰번호 포맷으로 변환 * * @param 데이터 */
+        formatMobile(phoneNum,fmt,rtnArrYn) {
+  
+          if(this.isNull(fmt)){
+            fmt='';
+          }
+          if(this.isNull(rtnArrYn)){
+            fmt='N';
+          }
+          if(this.isMobile(phoneNum)) {
+  
+            var rtnNum;
+            var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+  
+            if(regExp.test(phoneNum)){
+  
+              myArray = regExp.exec(phoneNum);
+              rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return rtnNum;
+            } else {
+              return phoneNum;
+            }
+          } else {
+            return phoneNum;
+          }
+        },
+  
+        /** * 전화번호 형식 체크 * * @param 데이터 */
+        isPhone(phoneNum) {
+          var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
+          if(regExp.test(phoneNum)){
+            return true;
+            } else {
+              regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+              if(regExp.test(phoneNum)){
+                return true;
+              } else {
+                return false;
+              }
+          }
+        },
+  
+        /** * 핸드폰번호 형식 체크 * * @param 데이터 */
+        isMobile(phoneNum) {
+          var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
+          var myArray;
+          if(regExp.test(phoneNum)){
+            myArray = regExp.exec(phoneNum);
+            return true;
+          } else {
+            return false;
+          }
+        },
+        isMobile2(phoneNum) {
+          var regExp =/(1[016789])([0-9]{3,4})([0-9]{4})$/;
+          var myArray;
+          if(regExp.test(phoneNum)){
+            myArray = regExp.exec(phoneNum);
+            return true;
+          } else {
+            return false;
+          }
+        },
+  
+        isNull(obj){
+          if(lodash.isNil(obj) || lodash.trim(obj) == ''){
+            return true;
+          }
+          return false;
+        },
+        getParent(name){
+          let p = this.$parent;
+          while(typeof p !== 'undefined'){
+              if(p.$options.name == name) {
+              return p;
+              }else {
+              p = p.$parent;
+              }
+          }
+          return false;
+        },
+        getJsonObj(str){
+          return JSON.parse(JSON.stringify(str));
+        },
+      }
+  };
+  
+  var chkPattern2 = {
+      data: function () {
+          return {      
+          }
+      },
+      methods: {
+      selSesStorage(keyLike){
+        if(this.isNull(keyLike)){
+          return null;
+        }
+        if(sessionStorage.length > 0){
+          let keyList = [];
+          for(let i=0;i<sessionStorage.length;i++){
+            const keyNm = sessionStorage.key(i);
+            if(keyNm.indexOf(keyLike) > -1){
+              keyList.push({name : keyNm, value : sessionStorage.getItem(keyNm)});
+            }
+          }
+          if(keyList.length > 0){
+            return keyList;
+          }
+          return null;
+        }
+        return null;
+      },
+  
+      delSesStorage(keyList){
+        if(this.isNull(keyList)){
+          return null;
+        }
+        if(keyList.length > 0){
+          keyList.map((o) => (sessionStorage.removeItem(o.name)));
+          return true;
+        }
+      },
+  
+      setGridMouseDownActive(){
+          const ele = document.querySelector(`div.tui-grid-container.tui-grid-show-lside-area`);
+          if(window.getEventListeners(ele).mousedown){
+            ele.removeEventListener('mousedown',window.getEventListeners(ele).mousedown[0].listener);
+          }
+      },
+          restrictChars : function($event,regExp,hanYn){
+  
+        if(this.isNull(hanYn)){
+          hanYn='N';
+        }
+        if(hanYn === 'N' && $event.type === 'keydown'){
+          if($event.keyCode === 229){
+            $event.preventDefault();
+            return false;
+          }
+        }
+  
+        if($event.type === 'keypress'){
+          //한글 처리 불가
+          if(regExp.test(String.fromCharCode($event.charCode))) {
+            return true;
+          }else{
+            $event.preventDefault();
+            return false;
+          }
+        }
+  
+        if(hanYn === 'N' && ( $event.type === 'keyup' || $event.type === 'input' || $event.type === 'change' || $event.type === 'blur')){
+          $event.target.value = $event.target.value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g,'');
+          $event.preventDefault();
+          return false;
+        }
+        return true;
+      },
+          setLenth: function (e, len) {
+              this.cut(e, len);
+      },
+      onlyCustom: function (e,strRegExp,hanYn) {
+        var regExp_g = new RegExp(strRegExp,'g');
+        this.cut(e);
+              return this.restrictChars(e,regExp_g,hanYn);
+      },
+      onlyCommon: function(strRegExp, e, len, isEventCall, hanYn) {
+        var regExp_g = new RegExp(strRegExp,'g');         
+        if(isEventCall === 'N'){
+          if(!this.cut(e, len, isEventCall)){
+            return false;
+          }
+          if(!regExp_g.test(e.value)){
+            return false;
+          }
+          return true;
+        }
+        this.cut(e, len);
+              return this.restrictChars(e,regExp_g,hanYn);
+      },
+          onlyNum: function (e, len, isEventCall) {
+        var strRegExp = '^[0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyEng: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },
+      onlyLowerEng: function (e, len, isEventCall) {
+        var strRegExp = '^[a-z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },
+      onlyUpperEng: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyEmail: function (e, len, isEventCall) {
+        var strRegExp = '^[a-zA-Z0-9_\.\-@._-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyName: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyTitle: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyText: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9_-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyPassword: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z0-9!@#$%^&*]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyId: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z0-9_\.\-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyIp: function (e, len, isEventCall) {
+        var strRegExp = '^[0-9,.*]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyRoleNm_Space: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyRoleId_UnderBar: function (e, len, isEventCall) {
+        var strRegExp = '^[a-zA-Z0-9_]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },    
+          cut: function (ele, len, isValidChk) {
+        let e=ele;
+        if (typeof ele.target != "undefined") {
+          e=ele.target;
+        }
+        let max = this.isNull(len) ? e.attributes.maxlength.value : len;      
+        let str = e.value;
+  
+        if (this.bytes(str) > max) {
+          if(this.isNull(isValidChk)){
+            e.value = this.cutBytes(str, max);
+          }
+          return false;
+        }			
+        return true;
+          },
+          cutBytes: function (str, len) {
+        while(1 === 1){
+          if(this.bytes(str) <= len){
+            return str;
+          }
+          str = str.slice(0,-1);
+        }
+          },
+          bytes: function (str) {
+              var length = ((s,b,i,c) => {
+            // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);  // 한글 3바이트
+            // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?2:c>>7?1:1);     //한글 2바이트
+          b=0,i=0;
+          while(1 === 1){          
+            c = s.charCodeAt(i++);
+            if (isNaN(c)) {
+              break;
+            }
+            b += c >> 11 ? 2 : c >> 7 ? 1 : 1;
+          }
+          return b
+        })(str);
+              return length;
+          },
+          checkPhone: function(str) {
+              str = str.replace(/[-\s]+/g, '');
+              if (str.charAt(0)!="0"){
+                  str = "0"+str;
+              }
+              if (str.length<10||str.length>12){return "";}
+              if (isNaN(str)){return "";	}
+              if (str.substr(0,2)!="01" && str.substr(0,3)!="070"  && str.substr(0,4)!="0505" && str.substr(0,4)!="0503"){return "";	}
+              return str;
+  
+          },
+      }
+  };
+  export { utils_mixin, chkPattern2 };

frontend/src/modules/mntrng/service/mntrngApi.js

@@ -0,0 +1,16 @@
+import httpClient from '@/common/http-client';
+
+// HUBEZ_BO_API - 일별 통계 목록 조회.
+const sendList = (params) => {
+    return httpClient.post('/api/v1/bo/mntrng/sendList', params, { withCredentials: false });
+}
+
+// HUBEZ_BO_API - 월별 통계 목록 조회.
+const liveSendSttus = (params) => {
+    return httpClient.post('/api/v1/bo/mntrng/liveSendSttus', params, { withCredentials: false });
+}
+
+export default {
+    sendList,
+    liveSendSttus,    
+}

frontend/src/modules/mntrng/views/LiveSendSttus.vue

@@ -1,165 +1,322 @@
-<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>
-			</div>
-		</div>
-</template>
-
-<script>
-import customGrid from '@/components/CustomGrid';
-//import api from '../service/api';
-export default {
-  name: 'sendList',
-  data() {
-    return {
-      testList: {
-        url: '/api/v1/bo/sysMgt/adminList',
-        perPage: 20,
-        pagination: true,
-        isCheckbox: true,
-        initialRequest: false,
-        addCls: 'box_OFvis',
-
-
-        header: [
-          [
-            { header: 'NO', childNames: [] },
-            { header: '권한', childNames: [] },
-            { header: '이름(대리점명)', childNames: [] },
-            { header: 'ID', childNames: [] },
-            { header: '상태', childNames: [] },
-            { header: '등록일', childNames: [] }
-          ]
-        ],
-
-        columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: 60 },
-          { name: 'auth', header: '권한', align: 'left', width: 160 },
-          { name: 'name', header: '이름(대리점명)', align: 'center', width: 130},
-          { name: 'adminId', header: 'ID', align: 'center', width: 130},
-          { name: 'adminStat', header: '상태', align: 'center', width: 130},      
-          { name: 'regDt', header: '등록일', width: 90, cls: 'td_line' }
-        ],
-        noDataStr: '검색 결과가 없습니다.',        
-        // params: {
-        //   apprResult: '',
-        //   searchType: '',
-        //   searchText: '',
-        //   startDate: '',
-        //   endDate: ''
-        // },
-        excelHeader: []
-      }    
-    };
-  },  
-  components: {
-    customGrid: customGrid
-  },
-  destroyed() {
-      
-  },
-  mounted() {
-    let isKeep = false;
-    isKeep = true;
-    this.search(isKeep);
-  },
-  methods: {
-    search: function(isKeep) {
-      console.log(this.testList.params);
-      this.$refs.table.search(this.testList.params, isKeep);
-    },
-  }
-};
+<template>
+
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">실시간발송현황</h3>
+        <p class="breadcrumb">모니터링 &gt; 실시간발송현황</p>
+      </div>
+      <div class="title_wrap">
+        <h3>발송집계</h3>
+        <div class="select_box NumberSe">
+          <p>자동갱신시간</p>
+          <select name="" id="" @change="switchSelect($event)" v-model="selectedKey">
+            <option value="10">10분</option>
+            <option value="20">20분</option>
+            <option value="30">30분</option>
+          </select>
+        </div>
+      </div>
+      <div class="info">
+        <div class="count">최근 10분 발송 현황
+          <p>{{startTimeM}} ~ {{endTimeM}}</p></div>
+      </div>
+      <div class="table">
+        <table>
+          <colgroup>
+            <col width="25%"/>
+            <col width="25%"/>
+            <col width="25%"/>
+            <col width="25%"/>
+          </colgroup>
+          <thead>
+          <tr>
+            <th>채널</th>
+            <th>발송건수</th>
+            <th>성공건수</th>
+            <th>성공율</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td>SMS</td>
+            <td>{{ sendingCntSmsM }}</td>
+            <td>{{ succesCntSmsM }}</td>
+            <td>{{ succesRtSmsM }}%</td>
+          </tr>
+          <tr>
+            <td>LMS</td>
+            <td>{{ sendingCntLmsM }}</td>
+            <td>{{ succesCntLmsM }}</td>
+            <td>{{ succesRtLmsM }}%</td>
+          </tr>
+          <tr>
+            <td>MMS</td>
+            <td>{{ sendingCntMmsM }}</td>
+            <td>{{ succesCntMmsM }}</td>
+            <td>{{ succesRtMmsM }}%</td>
+          </tr>
+          <tr>
+            <td>알림톡</td>
+            <td>{{ sendingCntAlmtM }}</td>
+            <td>{{ succesCntAlmtM }}</td>
+            <td>{{ succesRtAlmtM }}%</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="info">
+        <div class="count">최근 1시간 발송 현황
+          <p>{{startTimeH}} ~ {{endTimeH}}</p></div>
+      </div>
+      <div class="table">
+        <table>
+          <colgroup>
+            <col width="25%"/>
+            <col width="25%"/>
+            <col width="25%"/>
+            <col width="25%"/>
+          </colgroup>
+          <thead>
+          <tr>
+            <th>채널</th>
+            <th>발송건수</th>
+            <th>성공건수</th>
+            <th>성공율</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td>SMS</td>
+            <td>{{ sendingCntSmsH }}</td>
+            <td>{{ succesCntSmsH }}</td>
+            <td>{{ succesRtSmsH }}%</td>
+          </tr>
+          <tr>
+            <td>LMS</td>
+            <td>{{ sendingCntLmsH }}</td>
+            <td>{{ succesCntLmsH }}</td>
+            <td>{{ succesRtLmsH }}%</td>
+          </tr>
+          <tr>
+            <td>MMS</td>
+            <td>{{ sendingCntMmsH }}</td>
+            <td>{{ succesCntMmsH }}</td>
+            <td>{{ succesRtMmsH }}%</td>
+          </tr>
+          <tr>
+            <td>알림톡</td>
+            <td>{{ sendingCntAlmtH }}</td>
+            <td>{{ succesCntAlmtH }}</td>
+            <td>{{ succesRtAlmtH }}%</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="info">
+        <div class="count">당일 발송 현황
+          <p>{{startTimeD}} ~ {{endTimeD}}</p></div>
+      </div>
+      <div class="table">
+        <table>
+          <colgroup>
+            <col width="25%"/>
+            <col width="25%"/>
+            <col width="25%"/>
+            <col width="25%"/>
+          </colgroup>
+          <thead>
+          <tr>
+            <th>채널</th>
+            <th>발송건수</th>
+            <th>성공건수</th>
+            <th>성공율</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td>SMS</td>
+            <td>{{ sendingCntSmsD }}</td>
+            <td>{{ succesCntSmsD }}</td>
+            <td>{{ succesRtSmsD }}%</td>
+          </tr>
+          <tr>
+            <td>LMS</td>
+            <td>{{ sendingCntLmsD }}</td>
+            <td>{{ succesCntLmsD }}</td>
+            <td>{{ succesRtLmsD }}%</td>
+          </tr>
+          <tr>
+            <td>MMS</td>
+            <td>{{ sendingCntMmsD }}</td>
+            <td>{{ succesCntMmsD }}</td>
+            <td>{{ succesRtMmsD }}%</td>
+          </tr>
+          <tr>
+            <td>알림톡</td>
+            <td>{{ sendingCntAlmtD }}</td>
+            <td>{{ succesCntAlmtD }}</td>
+            <td>{{ succesRtAlmtD }}%</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import customGrid from '@/components/CustomGrid';
+import mntrngApi from "../service/mntrngApi.js";
+//import api from '../service/api';
+export default {
+  name: 'liveSendSttus',
+  data() {
+    return {
+      selectedKey:10,
+      timer: '',
+
+      startTimeM: '',
+      endTimeM: '',
+      sendingCntSmsM: '0',
+      succesCntSmsM: '0',
+      succesRtSmsM: '0',
+      sendingCntMmsM: '0',
+      succesCntMmsM: '0',
+      succesRtMmsM: '0',
+      sendingCntLmsM: '0',
+      succesCntLmsM: '0',
+      succesRtLmsM: '0',
+      sendingCntAlmtM: '0',
+      succesCntAlmtM: '0',
+      succesRtAlmtM: '0',
+      
+      startTimeH: '',
+      endTimeH: '',
+      sendingCntSmsH: '0',
+      succesCntSmsH: '0',
+      succesRtSmsH: '0',
+      sendingCntMmsH: '0',
+      succesCntMmsH: '0',
+      succesRtMmsH: '0',
+      sendingCntLmsH: '0',
+      succesCntLmsH: '0',
+      succesRtLmsH: '0',
+      sendingCntAlmtH: '0',
+      succesCntAlmtH: '0',
+      succesRtAlmtH: '0',
+
+      startTimeD: '',
+      endTimeD: '',
+      sendingCntSmsD: '0',
+      succesCntSmsD: '0',
+      succesRtSmsD: '0',
+      sendingCntMmsD: '0',
+      succesCntMmsD: '0',
+      succesRtMmsD: '0',
+      sendingCntLmsD: '0',
+      succesCntLmsD: '0',
+      succesRtLmsD: '0',
+      sendingCntAlmtD: '0',
+      succesCntAlmtD: '0',
+      succesRtAlmtD: '0',
+
+    };
+  },  
+  components: {
+    customGrid: customGrid
+  },
+  created(){
+	  this.$store.commit("login/isLogin", true);
+    this.$store.commit("login/isAuthChk", true);
+	  this.getLiveSendSttus();
+    this.timer = setInterval(this.getLiveSendSttus, this.selectedKey * 1000 * 60)
+
+  },
+  beforeDestroy (){
+      clearInterval(this.timer)
+  },
+  destroyed() {
+      
+  },
+  mounted() {
+
+  },
+  methods: {
+    async getLiveSendSttus(){
+      console.log('getLiveSendSttus Start');	  
+		  try {
+			  const response = await mntrngApi.liveSendSttus();
+			  const result = response.data;
+			  console.log(result);
+			  if (result != null && result.retCode == "0000") {				 
+          
+          this.startTimeM = result.data.startTimeM;
+          this.endTimeM = result.data.endTimeM;
+          this.sendingCntSmsM = result.data.sendingCntSmsM;
+          this.succesCntSmsM = result.data.succesCntSmsM;
+          this.succesRtSmsM = result.data.succesRtSmsM;
+          this.sendingCntMmsM = result.data.sendingCntMmsM;
+          this.succesCntMmsM = result.data.succesCntMmsM;
+          this.succesRtMmsM = result.data.succesRtMmsM;
+          this.sendingCntLmsM = result.data.sendingCntLmsM;
+          this.succesCntLmsM = result.data.succesCntLmsM;
+          this.succesRtLmsM = result.data.succesRtLmsM;
+          this.sendingCntAlmtM = result.data.sendingCntAlmtM;
+          this.succesCntAlmtM = result.data.succesCntAlmtM;
+          this.succesRtAlmtM = result.data.succesRtAlmtM;
+
+          this.startTimeH = result.data.startTimeH;
+          this.endTimeH = result.data.endTimeH;
+          this.sendingCntSmsH = result.data.sendingCntSmsH;
+          this.succesCntSmsH = result.data.succesCntSmsH;
+          this.succesRtSmsH = result.data.succesRtSmsH;
+          this.sendingCntMmsH = result.data.sendingCntMmsH;
+          this.succesCntMmsH = result.data.succesCntMmsH;
+          this.succesRtMmsH = result.data.succesRtMmsH;
+          this.sendingCntLmsH = result.data.sendingCntLmsH;
+          this.succesCntLmsH = result.data.succesCntLmsH;
+          this.succesRtLmsH = result.data.succesRtLmsH;
+          this.sendingCntAlmtH = result.data.sendingCntAlmtH;
+          this.succesCntAlmtH = result.data.succesCntAlmtH;
+          this.succesRtAlmtH = result.data.succesRtAlmtH;
+
+          this.startTimeD = result.data.startTimeD;
+          this.endTimeD = result.data.endTimeD;
+          this.sendingCntSmsD = result.data.sendingCntSmsD;
+          this.succesCntSmsD = result.data.succesCntSmsD;
+          this.succesRtSmsD = result.data.succesRtSmsD;
+          this.sendingCntMmsD = result.data.sendingCntMmsD;
+          this.succesCntMmsD = result.data.succesCntMmsD;
+          this.succesRtMmsD = result.data.succesRtMmsD;
+          this.sendingCntLmsD = result.data.sendingCntLmsD;
+          this.succesCntLmsD = result.data.succesCntLmsD;
+          this.succesRtLmsD = result.data.succesRtLmsD;
+          this.sendingCntAlmtD = result.data.sendingCntAlmtD;
+          this.succesCntAlmtD = result.data.succesCntAlmtD;
+          this.succesRtAlmtD = result.data.succesRtAlmtD;
+			} else {
+				alert("조회정보가 없습니다.");
+			}
+		} catch(err) {
+			alert("실패 하였습니다.");
+		}
+	},
+  switchSelect: function(event) {
+      this.selectedKey = event.target.value;
+      console.log('>>>>>>>>>>>> [selectedKey]:'+this.selectedKey)
+      this.changeAutoUpdate();
+  },
+  cancelAutoUpdate () {
+      clearInterval(this.timer)
+  },
+  changeAutoUpdate () {
+      clearInterval(this.timer)
+      this.timer = setInterval(this.getLiveSendSttus, this.selectedKey * 1000 * 60)
+      console.log('>>>>>>>>>>>> [changeAutoUpdate()_selectTime]:'+this.selectedKey * 1000 * 60)
+  }
+
+  },
+  
+};
 </script>

frontend/src/modules/mntrng/views/SendList.vue

@@ -1,165 +1,321 @@
-<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>
-			</div>
-		</div>
-</template>
-
-<script>
-import customGrid from '@/components/CustomGrid';
-//import api from '../service/api';
-export default {
-  name: 'sendList',
-  data() {
-    return {
-      testList: {
-        url: '/api/v1/bo/sysMgt/adminList',
-        perPage: 20,
-        pagination: true,
-        isCheckbox: true,
-        initialRequest: false,
-        addCls: 'box_OFvis',
-
-
-        header: [
-          [
-            { header: 'NO', childNames: [] },
-            { header: '권한', childNames: [] },
-            { header: '이름(대리점명)', childNames: [] },
-            { header: 'ID', childNames: [] },
-            { header: '상태', childNames: [] },
-            { header: '등록일', childNames: [] }
-          ]
-        ],
-
-        columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: 60 },
-          { name: 'auth', header: '권한', align: 'left', width: 160 },
-          { name: 'name', header: '이름(대리점명)', align: 'center', width: 130},
-          { name: 'adminId', header: 'ID', align: 'center', width: 130},
-          { name: 'adminStat', header: '상태', align: 'center', width: 130},      
-          { name: 'regDt', header: '등록일', width: 90, cls: 'td_line' }
-        ],
-        noDataStr: '검색 결과가 없습니다.',        
-        // params: {
-        //   apprResult: '',
-        //   searchType: '',
-        //   searchText: '',
-        //   startDate: '',
-        //   endDate: ''
-        // },
-        excelHeader: []
-      }    
-    };
-  },  
-  components: {
-    customGrid: customGrid
-  },
-  destroyed() {
-      
-  },
-  mounted() {
-    let isKeep = false;
-    isKeep = true;
-    this.search(isKeep);
-  },
-  methods: {
-    search: function(isKeep) {
-      console.log(this.testList.params);
-      this.$refs.table.search(this.testList.params, isKeep);
-    },
-  }
-};
+<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="group">
+            <div class="input_box cal one essential">
+              <label for="right" class="label"><span>*</span>발송일</label>
+              <!-- <input class="" type="text" id="" placeholder="2022-10-12"> -->
+              <div class="term">
+                <span class="custom_input icon_date">
+               	  <vuejs-datepicker
+                      					:language="ko"
+                      					:format="customFormatter"
+                      					:disabled-dates="disabledSDate"
+                      					v-model="startDate"
+                      					@selected="selectedStartDate(0)"
+                      					@closed="closeDate('start')"
+              	  ></vuejs-datepicker>
+                </span>
+              </div>
+            </div>
+            <div class="select_box id">
+              <label for="right" class="label">요청채널</label>
+              <select name="" id="" v-model="grid.params.searchType1" @keyup.enter="search">
+                <option value="ALL" selected>전체</option>
+                <option value="SMS">SMS</option>
+                <option value="LMS">LMS</option>
+                <option value="MMS">MMS</option>
+                <option value="ALIMTALK">알림톡</option>
+              </select>
+            </div>
+          </div>
+          <div class="group">
+            <div class="input_box essential">
+              <label for="right" class="label"><span>*</span>수신번호</label>
+              <input class="search-box" type="number" id="search" placeholder="- 자 제외 숫자만 입력" v-model="grid.params.searchText1" v-on:keyup="onlyNum" @input="onlyNum" minlength="10" maxlength="11">
+            </div>
+            <div class="input_box essential">
+              <label for="right" class="label"><span>*</span>발신번호</label>
+              <input class="search-box" type="number" id="search" placeholder="- 자 제외 숫자만 입력" v-model="grid.params.searchText2" v-on:keyup="onlyNum" @input="onlyNum" minlength="10" maxlength="11">
+            </div>
+            <div class="input_box">
+              <label for="right" class="label">고객사명</label>
+              <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText3" >
+            </div>
+            <button type="button" class="button grey" @click="search">조회</button>
+          </div>
+        </div>
+      </form>
+      <div class="info">
+        <div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
+						<div class="select_box NumberSe">
+							<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
+								<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>								
+							</select>
+					    </div>					
+					</div>
+      </div>
+      <div class="table">
+        <table>
+          <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>
+    
+      <common-modal ref="commmonModal"></common-modal>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import customGrid from '@/components/CustomGrid';
+import { utils_mixin, chkPattern2 } from '../service/mixins';
+import moment from 'moment';
+import xlsx from '@/common/excel';
+import commonModal from "@/components/modal/commonModal";
+
+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: 'sendList',
+  mixins: [utils_mixin, chkPattern2],
+  data() {
+    return {
+      // 달력 데이터      
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
+      sDateDiv: 'day',
+      startDate: new Date(),
+      endDate: new Date(),
+
+      statType: [],
+      userType: [],
+      row:{},
+      
+      pageType: 'SUBS',
+
+      // 테이블 리스트 데이터
+      perPageCnt: 50,
+      options: [
+        { text: '20', value: 20},
+        { text: '50', value: 50},
+        { text: '100', value: 100}
+      ],
+      totalItems: 0,
+      grid: {
+        url: '/api/v1/bo/mntrng/sendList',
+        perPage: 20,
+        pagination: true,
+        isCheckbox: false,
+        initialRequest: false,
+        addCls: 'box_OFvis',
+
+        header: [
+          [
+            { header: 'NO', childNames: [] },
+            { header: '발송일자', childNames: [] },
+            { header: '고객사명', childNames: [] },
+            { header: '발송아이디(사용자ID)', childNames: [] },
+            { header: '수신번호', childNames: [] },
+            { header: '발신번호', childNames: [] },
+            { header: '요청채널', childNames: [] },
+            { header: '최종채널', childNames: [] },
+            { header: '이통사', childNames: [] },
+            { header: '결과(코드)', childNames: [] },
+            { header: '요청일시', childNames: [] },
+            { header: '완료일시', childNames: [] },
+          ]
+        ],
+
+        columns: [          
+          { name: 'no', header: 'NO', align: 'center', width: '5%' },
+          { name: '', header: '발송일자', align: 'left', width: '11%' },
+          { name: '', header: '고객사명', align: 'left', width: '9%' },
+          { name: '', header: '발송아이디(사용자ID)', align: 'center', width: '9%'},
+          { name: '', header: '수신번호', align: 'center', width: '11%'},
+          { name: '', header: '발신번호', align: 'center', width: '11%'},
+          { name: '', header: '요청채널', align: 'center', width: '5%'},  
+          { name: '', header: '최종채널', align: 'center', width: '5%'},  
+          { name: '', header: '이통사', align: 'center', width: '5%'},  
+          { name: '', header: '결과(코드)', align: 'center', width: '9%'},  
+          { name: '', header: '요청일시', align: 'center', width: '10%'},  
+          { name: '', header: '완료일시', align: 'center', width: '10%'},        
+          
+        ],
+        noDataStr: '검색 결과가 없습니다.',        
+        params: {
+          searchType1: 'ALL',
+          searchText1: '',   
+          searchText2: '',
+          searchText3: '',       
+          sentDate: '',
+        },
+        excelHeader: []
+      }    
+    };
+  },  
+  components: {
+    customGrid: customGrid,
+    commonModal,
+    vuejsDatepicker,
+  },
+  created(){            
+    this.$store.commit("login/isLogin", true);
+    this.$store.commit("login/isAuthChk", true);
+    // this.setCodeData();
+    // this.getExcelHeader();
+    this.setPeriodDay(0);
+    this.grid.params.searchType1 = 'ALL';
+  },
+  destroyed() {
+      
+  },
+  mounted() {
+    let page = 1;
+    // 페이지 정보 및 검색 조건
+    const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+    console.log('getCondition : '+getCondition);
+
+    // store에 저장된 페이지 정보 및 검색 조건을 불러오기
+    let isKeep = false;
+    if (getCondition) {
+      this.grid.pagePerRows = getCondition.perPage;
+      this.grid.params = getCondition.params;      
+      page = getCondition.page;
+      isKeep = true;
+    }
+    //this.search(isKeep);
+  },
+  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();
+  },
+  methods: {
+    search: function(isKeep) {
+      // 발송일자 필수입력체크
+
+		  // 수신번호 필수입력체크
+
+		  // 발신번호 필수입력체크
+
+      this.grid.params.sentDate = moment(this.startDate).format('YYYYMMDD');
+      this.grid.params.reqChennel = this.grid.params.searchType1;
+      this.grid.params.phone = this.grid.params.searchText1;
+      this.grid.params.callbackNumber = this.grid.params.searchText2;
+      this.grid.params.custNm = this.grid.params.searchText3;
+      console.log(this.grid.params);
+      this.$refs.table.search(this.grid.params, isKeep);
+      this.sendStoreData();
+    },
+    setPeriodDay(day) {
+      this.periodDay = day;
+      this.endDate = new Date();
+      this.startDate = moment(this.endDate)
+          .subtract(day, 'day')
+          .toDate();
+
+      this.closeDate('start');
+      this.closeDate('end');
+    },
+	  selectedStartDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+      if (this.startDate > this.endDate) {
+        this.startDate = this.endDate;
+      }
+      // console.log(this.disabledSDate)
+      // this.grid.params.startDt = day
+    },
+    selectedEndDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+    },
+    closeDate(type) {
+      if (type != undefined && type != null) {
+        if (type == 'start') {
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: this.endDate };
+        } else if (type == 'end') {
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: new Date() };
+        }
+      }
+    },
+    customFormatter: function(date) {
+      if (this.sDateDiv == 'month') {
+        return moment(date).format('YYYY-MM');
+      } else if (this.sDateDiv == 'year') {
+        return moment(date).format('YYYY');
+      } else {
+        return moment(date).format('YYYY-MM-DD');
+      }
+    },
+    changePerPage: function(){ 	// 페이지당 조회할 개수
+      this.grid.pagePerRows = this.perPageCnt;
+      this.search(true);
+    },
+    sendStoreData: function() {
+      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
+      });
+
+      const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+      console.log("getCondition : "+ getCondition.perPage);
+    },
+  }
+};
 </script>

frontend/src/modules/riskMgt/views/IntrcpList.vue

@@ -250,7 +250,6 @@ export default {
       this.$refs.commonModal.confirmModalOpen(props);
     },
     confirmCalbackFnc: function(props){
-		console.log('dsfsd');
 		// if(props.result){
 		// 	// this.doInsert(props.result);
 		// }

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

@@ -8,167 +8,63 @@
       <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>
+          <input class="search-box" type="text" value="" v-model="searchText1">
+          <button type="button" class="button btn-p2color" @click="adminList">조회</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>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>사업자등록번호</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="(item, idx) in list">
+              <td>{{ item.custNm }}</td>
+              <td><a href="javascript:void(0)" @click="setAdminInfo(item)">{{ item.bregNo }}</a></td>
+            </tr>
+          </tbody>
         </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);
-    });
-  }
-}
+import sendNumMgtApi from "@/modules/sendNumMgt/service/sendNumMgtApi";
 
 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: '',
-          }
-        },
+        searchText1: '',
+        list:[],
       }
   },
   components: {
-    customGrid,
-    commonModal,
   },
+  props: ['sendData'],
   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);
+      // console.log('childData', this.$parent.childData)
+      // this.getParent('numberRegPop').setAdminInfo(props);
+      // this.$emit('event-data', changeData)
+      this.$emit('event-data', props)
+      this.adminNmPopClose();
     },
     // 모달 띄우기
     adminNmPopOpen(){
@@ -177,7 +73,6 @@ export default {
       for(var i = 0; i < dimmed.length; i++){
         dimmed[i].style.display = 'block';
       }
-      this.$refs.table.cleanData();
     },
     // 모달 끄기
     adminNmPopClose(){
@@ -187,6 +82,23 @@ export default {
         dimmed[i].style.display = 'none';
       }
     },
+
+    async adminList(){
+      try {
+        this.row.searchText1 = this.searchText1
+        const response = await sendNumMgtApi.adminList(this.row);
+        const result = response.data;
+        console.log(result);
+        if (result != null && result.retCode == "0000") {
+          this.list = result.data.list
+        }
+      } catch (error) {
+        // this.row.title = '청약고객관리';
+        // this.row.msg1 = '실패 하였습니다.';
+        // this.$refs.commmonModal.alertModalOpen(this.row);
+        alert(error);
+      }
+    },
     formReset(){
       Object.assign(this.$data, this.$options.data());
     },

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

@@ -0,0 +1,266 @@
+<template>
+	<!-- <div class="wrap bg-wrap"> -->
+	<div>
+		<div class="dimmed" @click="apprDetailPopClose"></div>
+    <div class="popup-wrap">
+    <!-- 발신번호 상세 (타사업자)-->
+      <div class="popup modal55 popup_form">
+        <div class="pop-head">
+          <h3 class="pop-tit">발신번호 승인 요청 내역</h3>
+        </div>
+        <table>
+          <tbody>
+          <tr>
+            <th>요청일</th>
+            <td>{{ regDt }}</td>
+          </tr>
+          <tr v-show="cmpltDt !== '' && cmpltDt !== null">
+            <th>완료일</th>
+            <td>{{ cmpltDt }}</td>
+          </tr>
+          <tr>
+            <th>관리자 ID</th>
+            <td>{{ adminId }}</td>
+          </tr>
+          <tr>
+            <th>고객사명</th>
+            <td>{{ custNm }}</td>
+          </tr>
+          <tr>
+            <th>사업자번호</th>
+            <td>{{ bizrno }}</td>
+          </tr>
+          <tr>
+            <th>명의자 구분</th>
+            <td>{{ nmineeDivCd }}</td>
+          </tr>
+          <tr>
+            <th>본인인증 휴대폰번호</th>
+            <td>{{ slfAuthHp }}</td>
+          </tr>
+          <tr>
+            <th>발신번호</th>
+            <td class="sender">
+              <div class="sender-head">
+                <div class="count">
+                  총<span>{{ numList.length }}</span>건
+                </div>
+                <div class="radio_group">
+                  <input type="radio" name="state" ref="apprRadio" value="01" id="popup_radio13" @change="allApprSttus($event)">
+                  <label for="popup_radio13">전체승인</label>
+                  <input type="radio" name="state" ref="rejRadio" value="03" id="popup_radio14" @change="allApprSttus($event)">
+                  <label for="popup_radio14">전체반려</label>
+                </div>
+              </div>
+              <ul>
+                <li v-for="(item, idx) in numList">{{idx+1}}. {{ item.sndrno }}
+                  <div class="select-btn">
+                    <button :class="{'btn-pcolor' : item.sttusCd === '01' || item.sttusCd === '02', 'btn-default' : item.sttusCd === '03'}" @click="change(idx, '01')">승인</button>
+                    <button :class="{'btn-pcolor' : item.sttusCd === '03', 'btn-default' : item.sttusCd === '01' || item.sttusCd === '02'}" @click="change(idx, '03')">반려</button>
+                  </div>
+                </li>
+              </ul>
+            </td>
+          </tr>
+          <tr>
+            <th>제출서류</th>
+            <td class="sender">
+              <p v-for="(item, idx) in docList" v-if="item.docTpCd !== '06'">{{ item.docTitle }}</p>
+            </td>
+          </tr>
+          <tr>
+            <th>사업자등록증</th>
+            <td class="sender">
+              <p v-for="(item, idx) in docList" v-if="item.docTpCd === '06'">{{ item.docTitle }}</p>
+            </td>
+          </tr>
+          <tr>
+            <th>메모</th>
+            <td class="sender"><textarea class="memo_text" v-model="memo">{{memo}}</textarea></td>
+          </tr>
+          </tbody>
+        </table>
+      <div class="popup-btn2">
+        <button class="btn-pcolor" @click="updateSttus">저장</button>
+        <button class="btn-default" @click="apprDetailPopClose">취소</button>
+      </div>
+    </div>
+
+      <common-modal ref="commmonModal"></common-modal>
+
+    </div>
+	</div>
+</template>
+
+<script>
+import sendNumMgtApi from "@/modules/sendNumMgt/service/sendNumMgtApi";
+import commonModal from "@/components/modal/commonModal";
+
+export default {
+  name: "numberRegPop",
+  // mixins: [utils_mixin, chkPattern2],
+  watch:{
+    nmineeDivCd(){
+      console.log('watch : ', this.nmineeDivCd)
+    }
+  },
+  data(){
+    return{
+			row: {},
+      regReqNo:'',
+      reqNo:'',
+      seqNo:'',
+      cmpltDt:'',
+      adminId:'',
+      custNm:'',
+      bizrno:'',
+      nmineeDivCd:'',
+      slfAuthHp:'',
+      regDt:'',
+      memo:'',
+      docList: [],
+      numList: [],
+    }
+  },
+	components: {
+    commonModal,
+  },
+	model: {
+		prop: 'sendData',
+		event: 'event-data'
+	},
+	props: ['sendData'],
+	created(){
+		this.formReset();
+  },
+	methods :{
+		// 모달 띄우기
+    apprDetailPopOpen(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('modal55');
+			obj[0].style.display = 'block';
+
+      this.apprDetail(props);
+
+		},
+    async apprDetail(props){
+      try {
+        console.log(props)
+        this.row.regReqNo = props.regReqNo
+        const response = await sendNumMgtApi.apprDetail(this.row);
+        const result = response.data;
+        console.log(result);
+        if (result != null && result.retCode == "0000") {
+
+          this.regRegNo = result.data.regReqNo
+          this.reqNo  = result.data.regReqNo
+          this.regDt = result.data.regDt
+          this.custNm = result.data.custNm
+          this.adminId = result.data.adminId
+          this.chgDt = result.data.chgDt
+          this.bizrno = result.data.bizrno.substring(0,3)+'-'+result.data.bizrno.substring(3,5)+'-'+result.data.bizrno.substring(5,10)
+          this.nmineeDivCd = result.data.nmineeDivCd
+          this.regRegNo = result.data.regRegNo
+          this.slfAuthHp = result.data.slfAuthHp
+          this.docList = result.data.docList
+          this.numList = result.data.numList
+          this.memo = result.data.memo
+          this.cmpltDt = result.data.cmpltDt
+
+          console.log(this.reqNo)
+          var apprCnt=0;
+          var rejtCnt=0;
+          this.numList.forEach(function(value, index) {
+            // value.sttusCd = data
+            if(value.sttusCd == '01' || value.sttusCd == '02' ){
+              apprCnt = apprCnt + 1;
+            }else if(value.sttusCd == '03'){
+              rejtCnt = rejtCnt + 1;
+            }
+          });
+          if(apprCnt == this.numList.length){
+            this.$refs.apprRadio.checked = true;
+          }else if(rejtCnt == this.numList.length){
+            this.$refs.rejRadio.checked = true;
+          }
+
+        }
+      } catch (error) {
+        this.row.title = '발신번호승인';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+      }
+    },
+		// 모달 끄기
+    apprDetailPopClose(){
+			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('modal55');
+			popup[0].style.display = 'none';
+		},
+    allApprSttus(event) {
+      var data = event.target.value;
+      console.log(data);
+      this.numList.forEach(function(value, index) {
+        value.sttusCd = data
+      });
+    },
+    change(idx, val){
+      this.numList[idx].sttusCd = val
+      this.$refs.apprRadio.checked = false;
+      this.$refs.rejRadio.checked = false;
+      // radio_group 클래스 하위 라디오 박스 체크 유무 변경 필요.
+      var apprCnt=0;
+      var rejtCnt=0;
+      this.numList.forEach(function(value, index) {
+        // value.sttusCd = data
+        if(value.sttusCd == '01' || value.sttusCd == '02' ){
+          apprCnt = apprCnt + 1;
+        }else if(value.sttusCd == '03'){
+          rejtCnt = rejtCnt + 1;
+        }
+      });
+      if(apprCnt == this.numList.length){
+        this.$refs.apprRadio.checked = true;
+      }else if(rejtCnt == this.numList.length){
+        this.$refs.rejRadio.checked = true;
+      }
+    },
+    updateSttus(){
+      // 컨펌??
+      this.doSave()
+    },
+    async doSave(){
+      this.row.memo = this.memo
+      this.row.regReqNo = this.reqNo
+      this.row.adminId = this.adminId
+      this.row.list = this.numList
+
+      console.log(this.row)
+      try{
+        const response = await sendNumMgtApi.updateAppr(this.row);
+        const result = response.data;
+        console.log(result);
+        if (result != null && result.retCode == "0000") {
+          this.apprDetailPopClose()
+          this.$parent.search()
+        }
+      } catch (error) {
+        this.row.title = '발신번호 승인';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+      }
+    },
+		formReset(){
+			Object.assign(this.$data, this.$options.data());
+		},
+	}
+}
+</script>

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

@@ -1,7 +1,7 @@
 <template>
 	<!-- <div class="wrap bg-wrap"> -->
 	<div>
-		<div class="dimmed" @click="numberDetailPopClose();"></div>
+		<div class="dimmed" @click="numberDetailPopClose"></div>
     <!-- 발신번호 상세 (타사업자)-->
     <div class="popup modal53 popup_form register">
       <div class="pop-head">
@@ -12,57 +12,52 @@
           <tbody>
           <tr>
             <th>관리자 ID</th>
-            <td><input type="text" disabled value="uplus01"></td>
+            <td><input type="text" disabled v-model="adminId"></td>
           </tr>
           <tr>
             <th>고객사명</th>
-            <td><input type="text" disabled value="유플러스"></td>
+            <td><input type="text" disabled v-model="custNm"></td>
           </tr>
           <tr>
             <th>등록자 ID</th>
-            <td><input type="text" disabled value="uplus01"></td>
+            <td><input type="text" disabled v-model="register"></td>
           </tr>
           <tr>
             <th>사업자번호</th>
-            <td><input type="text" disabled value="229-81-39938"></td>
+            <td><input type="text" disabled v-model="bRegNo"></td>
           </tr>
           <tr>
             <th>명의자 구분</th>
-            <td><input type="text" disabled value="타사업자"></td>
+            <td><input type="text" disabled v-model="nmineeDivCd"></td>
           </tr>
           <tr>
             <th>인입채널</th>
-            <td><input type="text" disabled value="홈페이지"></td>
+            <td><input type="text" disabled v-model="inchDivCd"></td>
           </tr>
           <tr>
             <th>발신번호</th>
             <td>
               <div class="input_add">
                 <div>
-                  <input type="text" disabled value="테스트">
-                  <input type="text" disabled value="02-555-5555">
+                  <input type="text" disabled v-model="sndrnoNm">
+                  <input type="text" disabled v-model="sndrno">
                 </div>
               </div>
             </td>
           </tr>
           <tr>
             <th>승인상태</th>
-            <td class="red">승인 완료</td>
+            <td class="red">{{ sttusCd }}</td>
           </tr>
           <tr>
             <th>등록일자</th>
-            <td><input type="text" disabled value="2022-03-10"></td>
+            <td><input type="text" disabled v-model="regDt"></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>
+                <p v-for="(item, idx) in list" v-if="item.docTpcd !== '06'">{{ item.docTitle }} ({{ item.fileSize }}KB)</p>
               </div>
               <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
             </td>
@@ -71,7 +66,8 @@
             <th>사업자등록증</th>
             <td>
               <div class="sender">
-                <p>사업자등록증.jpg (00KB)</p>
+<!--                <p>사업자등록증.jpg (00KB)</p>-->
+                <p v-for="(item, idx) in list" v-if="item.docTpCd === '06'">{{ item.docTitle }} ({{ item.fileSize }}KB)</p>
               </div>
               <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
             </td>
@@ -88,7 +84,7 @@
 </template>
 
 <script>
-import AdminListPop from "@/modules/sendNumMgt/components/AdminListPop";
+import sendNumMgtApi from "@/modules/sendNumMgt/service/sendNumMgtApi";
 
 export default {
   name: "numberRegPop",
@@ -103,14 +99,19 @@ export default {
 			row: {},
       adminId:'',
       custNm:'',
+      register:'',
       bRegNo:'',
-      nmineeDivCd:'01',
-      numberInputs: [],
-      fileType:1,
+      nmineeDivCd:'',
+      inchDivCd:'',
+      sndrnoNm:'',
+      sndrno:'',
+      sttusCd:'',
+      regDt:'',
+      list: [],
+      regRegNo:'',
     }
   },
 	components: {
-    AdminListPop,
   },
 	model: {
 		prop: 'sendData',
@@ -121,31 +122,10 @@ export default {
 		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();
+    numberDetailPopOpen(props){
+
+			// this.formReset();
 			var dimmed = document.getElementsByClassName('dimmed');
 			dimmed[0].style.display = 'block';
 			var wrap = document.getElementsByClassName('popup-wrap');
@@ -153,10 +133,40 @@ export default {
 			var obj = document.getElementsByClassName('modal53');
 			obj[0].style.display = 'block';
 
-
-
+      this.numberDetail(props);
 
 		},
+    async numberDetail(props){
+      try {
+        console.log(props)
+        this.row.regReqNo = props.regReqNo
+        this.row.sndrno = props.sndrno
+        const response = await sendNumMgtApi.numberDetail(this.row);
+        const result = response.data;
+        console.log(result);
+        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.list = 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');

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

@@ -26,12 +26,12 @@
             <th>사업자번호</th>
             <td><input type="text" disabled v-model="bRegNo"></td>
           </tr>
-          <tr>
+          <tr v-show="bizrAuthYn !== 'Y'">
             <th>명의자 구분</th>
             <td>
-              <input type="radio" name="nmineeDiv" value="01" id="popup_radio5" v-model="nmineeDivCd" @change="changeNmineDiv($event)">
+              <input type="radio" name="nmineeDivCd" 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)">
+              <input type="radio" name="nmineeDivCd" value="02" id="popup_radio6" v-model="nmineeDivCd" @change="changeNmineDiv($event)">
               <label for="popup_radio6">타사업자</label>
             </td>
           </tr>
@@ -40,18 +40,18 @@
             <td>
               <div class="input_add">
                 <div>
-                  <input type="text" placeholder="발신번호명">
-                  <input type="text" placeholder="발신번호(숫자만입력)">
+                  <input type="text" placeholder="발신번호명" v-model="sendNm" maxlength="20">
+                  <input type="text" placeholder="발신번호(숫자만입력)" v-model="sendNum" v-on:keyup="onlyNum" @input="onlyNum" maxlength="16">
                   <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">
+                  <input type="text" placeholder="발신번호명" v-model="numberInput.sendNm" maxlength="20">
+                  <input type="text" placeholder="발신번호(숫자만입력)" v-model="numberInput.sendNum" v-on:keyup="onlyNum" @input="onlyNum" maxlength="16">
                 </div>
               </div>
             </td>
           </tr>
-          <tr>
+          <tr v-show="bizrAuthYn !== 'Y'">
             <th>제출서류</th>
             <td>
               <div class="attach" v-show="fileType === 2">
@@ -72,24 +72,30 @@
                 <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="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>
               <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 class="attach" v-show="fileType === 2">
+                <p class="essential list"><span>*</span>사업자등록증</p>
+                <input type="file" ref="otherBusinessFile" style="display: none" @change="readOtherBusinessFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.otherBusinessFile.click()">파일업로드</button>
+                <p class="file" id="otherBusinessNm"></p>
               </div>
               <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
             </td>
           </tr>
           <tr>
             <th>사업자 등록증</th>
-            <td>
+            <td v-show="bizrAuthYn !== 'Y'">
               <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"/>
@@ -98,26 +104,30 @@
               </div>
               <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
             </td>
+            <td class="red" v-show="bizrAuthYn === 'Y'">인증 완료</td>
           </tr>
           </tbody>
         </table>
       <div class="popup-btn2">
-        <button class="btn-pcolor">저장</button>
+        <button class="btn-pcolor" @click="saveSendNum">저장</button>
         <button class="btn-default" @click="numberRegPopClose();">취소</button>
       </div>
 
-      <admin-list-pop ref="admnListPop" />
-
+      <admin-list-pop ref="admnListPop" :send-data="childData" @event-data="setChildData"/>
+      <common-modal ref="commmonModal2"></common-modal>
     </div>
 	</div>
 </template>
 
 <script>
 import AdminListPop from "@/modules/sendNumMgt/components/AdminListPop";
+import { utils_mixin, chkPattern2 } from '../service/mixins';
+import commonModal from "@/components/modal/commonModal";
+import sendNumMgtApi from "@/modules/sendNumMgt/service/sendNumMgtApi";
 
 export default {
   name: "numberRegPop",
-  // mixins: [utils_mixin, chkPattern2],
+  mixins: [utils_mixin, chkPattern2],
   watch:{
     nmineeDivCd(){
       console.log('watch : ', this.nmineeDivCd)
@@ -129,8 +139,13 @@ export default {
       adminId:'',
       custNm:'',
       bRegNo:'',
+      bizrAuthYn: '',
+      custSeq: '',
       nmineeDivCd:'01',
+      sendNm: '',
+      sendNum: '',
       numberInputs: [],
+      saveSendNums: [],
       fileType:1,
       trustFile: null,
       warrantFile: null,
@@ -138,10 +153,14 @@ export default {
       tenureFile: null,
       businessFile: null,
       communicationFile: null,
+      otherBusinessFile:null,
+      childData: 20,
+      reqCnt:0,
     }
   },
 	components: {
     AdminListPop,
+    commonModal,
   },
 	model: {
 		prop: 'sendData',
@@ -155,6 +174,14 @@ export default {
 		searchIdPop(){
       this.$refs.admnListPop.adminNmPopOpen();
 		},
+    setChildData (data) {
+      console.log(data)
+      this.adminId = data.adminId
+      this.custNm = data.custNm
+      this.bRegNo = data.bregNo
+      this.bizrAuthYn = data.bizrAuthYn
+      this.custSeq = data.custSeq
+    },
     addNumberInput(){
       this.numberInputs.push({
         sendNm: '',
@@ -175,7 +202,7 @@ export default {
       }
     },
 		// 모달 띄우기
-    numberRegPopopen(insertType){
+    numberRegPopopen(){
 			this.formReset();
 			var dimmed = document.getElementsByClassName('dimmed');
 			dimmed[0].style.display = 'block';
@@ -304,6 +331,7 @@ export default {
       }
       this.tenureFile = null;
     },
+    //사업자 등록증.
     readBusinessFile(event){
       const file = event.target.files[0];
 
@@ -329,6 +357,7 @@ export default {
       }
       this.businessFile = null;
     },
+    //통신서비스 증명원
     readCommunicationFile(event){
       const file = event.target.files[0];
 
@@ -354,6 +383,107 @@ export default {
       }
       this.communicationFile = null;
     },
-	}
+    // 타사업자 등록증
+    readOtherBusinessFile(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.delOtherBusinessFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('otherBusinessNm');
+      root.appendChild(text);
+      root.appendChild(button);
+      this.otherBusinessFile = file;
+    },
+    delOtherBusinessFile(event){
+      const file = event.target.files[0];
+      this.$refs.otherBusinessFile.value=null;
+      let element = document.getElementById("otherBusinessNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.otherBusinessFile = null;
+    },
+    async saveSendNum(){
+
+
+      this.saveSendNums = []
+      this.saveSendNums.push({
+        sendNm: this.sendNm,
+        sendNum: this.sendNum
+      })
+
+      if(this.numberInputs.length > 0){
+        this.numberInputs.forEach(element =>
+            this.saveSendNums.push({
+              sendNm: element.sendNm,
+              sendNum: element.sendNum
+            })
+        )
+      }
+      this.doValidate();
+      // console.log(this.custSeq)
+      console.log(this.$data)
+      if(this.bizrAuthYn !== 'Y'){
+        if(this.nmineeDivCd === '01'){
+        // 사업자
+          const response = await sendNumMgtApi.insertNumber1(this.tenureFile, this.businessFile, this.communicationFile, this.adminId, this.custNm, this.bRegNo, this.nmineeDivCd, this.saveSendNums, this.bizrAuthYn, this.custSeq)
+          const result = response.data;
+          console.log(result)
+          if (result != null && result.retCode == "0000") {
+            this.toComplete()
+          }
+
+        }else if(this.nmineeDivCd === '02'){
+          const response = await sendNumMgtApi.insertNumber2(this.trustFile, this.warrantFile, this.deputyFile, this.tenureFile, this.otherBusinessFile, this.businessFile, this.adminId, this.custNm, this.bRegNo, this.nmineeDivCd, this.saveSendNums, this.bizrAuthYn, this.custSeq)
+          const result = response.data;
+          console.log(result)
+          if (result != null && result.retCode == "0000") {
+            this.toComplete()
+          }
+
+        }
+      }else{
+        const response = await sendNumMgtApi.insertNumber(this.adminId, this.custNm, this.bRegNo, this.nmineeDivCd, this.saveSendNums, this.bizrAuthYn, this.custSeq)
+        const result = response.data;
+        console.log(result)
+        if (result != null && result.retCode == "0000") {
+          this.toComplete()
+        }
+      }
+    },
+    doValidate(){
+
+
+      if(this.isNull(this.adminId) || this.isNull(this.custNm) || this.isNull(this.bRegNo)){
+        this.row.title = '발신번호 등록';
+        this.row.msg1 = '관리자ID를 조회 해주세요.';
+        this.getParent('NumberList').commonModalOpen(this.row)
+        // this.$refs.commmonModal2.alertModalOpen(this.row);
+        return false;
+      }
+      if(this.isNull(this.sendNm) || this.isNull(this.sendNum)){
+        this.row.title = '발신번호 등록';
+        this.row.msg1 = '발신번호명/발신번호를 입력해 주세요.';
+        this.$refs.commmonModal2.alertModalOpen(this.row);
+        return false;
+      }
+      // if(this.isNull(this.adminId)){
+      //   this.row.title = '발신번호 등록';
+      //   this.row.msg1 = '관리자ID를 조회 해주세요..';
+      //   this.$refs.commmonModal.alertModalOpen(this.row);
+      //   return false;
+      // }
+    },
+    toComplete(){
+      this.getParent('numberList').$refs.table.reloadData();
+      this.numberRegPopClose();
+    },
+  }
 }
 </script>

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

@@ -0,0 +1,353 @@
+import lodash from "lodash";
+
+const utils_mixin = {
+      methods:{
+      /** * 이메일 형식 체크 * * @param 데이터 */
+      emailCheck(email,rtnArrYn) {
+          if(this.isNull(rtnArrYn)){
+            rtnArrYn='N';
+          }
+          // var regExp = /(^[A-Za-z0-9_\.\-]+)@([A-Za-z0-9\-]+\.[A-Za-z0-9\-]+)/;
+          var regExp = /^([0-9a-zA-Z_\.\-]([-_.]?[0-9a-zA-Z_\.\-])*)@([0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$)/i;//이메일 정규식
+  
+          if(regExp.test(email) == false) {
+            // 이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
+            if(rtnArrYn == 'Y'){
+                return email;
+              }
+            return false;
+          }else{
+              var myArray = regExp.exec(email);
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return true;
+          }
+  
+        },
+        /** * 전화번호 포맷으로 변환 * * @param 데이터 */
+        formatPhone(phoneNum,fmt,rtnArrYn) {
+          if(this.isNull(fmt)){
+            fmt='';
+          }
+          if(this.isNull(rtnArrYn)){
+            fmt='N';
+          }
+          if(this.isPhone(phoneNum)) {
+            var rtnNum;
+            var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+            if(regExp.test(phoneNum)){
+              myArray = regExp.exec(phoneNum);
+              rtnNum = myArray[1]+fmt + myArray[2]+fmt+myArray[3];
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return rtnNum;
+            } else {
+              regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+              if(regExp.test(phoneNum)){
+                myArray = regExp.exec(phoneNum);
+                rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
+                if(rtnArrYn == 'Y'){
+                  return myArray;
+                }
+                return rtnNum;
+              } else {
+                return phoneNum;
+              }
+            }
+          } else {
+            return phoneNum;
+          }
+        },
+        /** * 핸드폰번호 포맷으로 변환 * * @param 데이터 */
+        formatMobile(phoneNum,fmt,rtnArrYn) {
+  
+          if(this.isNull(fmt)){
+            fmt='';
+          }
+          if(this.isNull(rtnArrYn)){
+            fmt='N';
+          }
+          if(this.isMobile(phoneNum)) {
+  
+            var rtnNum;
+            var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+  
+            if(regExp.test(phoneNum)){
+  
+              myArray = regExp.exec(phoneNum);
+              rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return rtnNum;
+            } else {
+              return phoneNum;
+            }
+          } else {
+            return phoneNum;
+          }
+        },
+  
+        /** * 전화번호 형식 체크 * * @param 데이터 */
+        isPhone(phoneNum) {
+          var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
+          if(regExp.test(phoneNum)){
+            return true;
+            } else {
+              regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+              if(regExp.test(phoneNum)){
+                return true;
+              } else {
+                return false;
+              }
+          }
+        },
+  
+        /** * 핸드폰번호 형식 체크 * * @param 데이터 */
+        isMobile(phoneNum) {
+          var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
+          var myArray;
+          if(regExp.test(phoneNum)){
+            myArray = regExp.exec(phoneNum);
+            return true;
+          } else {
+            return false;
+          }
+        },
+        isMobile2(phoneNum) {
+          var regExp =/(1[016789])([0-9]{3,4})([0-9]{4})$/;
+          var myArray;
+          if(regExp.test(phoneNum)){
+            myArray = regExp.exec(phoneNum);
+            return true;
+          } else {
+            return false;
+          }
+        },
+  
+        isNull(obj){
+          if(lodash.isNil(obj) || lodash.trim(obj) == ''){
+            return true;
+          }
+          return false;
+        },
+        getParent(name){
+          let p = this.$parent;
+          while(typeof p !== 'undefined'){
+              if(p.$options.name == name) {
+              return p;
+              }else {
+              p = p.$parent;
+              }
+          }
+          return false;
+        },
+        getJsonObj(str){
+          return JSON.parse(JSON.stringify(str));
+        },
+      }
+  };
+  
+  var chkPattern2 = {
+      data: function () {
+          return {      
+          }
+      },
+      methods: {
+      selSesStorage(keyLike){
+        if(this.isNull(keyLike)){
+          return null;
+        }
+        if(sessionStorage.length > 0){
+          let keyList = [];
+          for(let i=0;i<sessionStorage.length;i++){
+            const keyNm = sessionStorage.key(i);
+            if(keyNm.indexOf(keyLike) > -1){
+              keyList.push({name : keyNm, value : sessionStorage.getItem(keyNm)});
+            }
+          }
+          if(keyList.length > 0){
+            return keyList;
+          }
+          return null;
+        }
+        return null;
+      },
+  
+      delSesStorage(keyList){
+        if(this.isNull(keyList)){
+          return null;
+        }
+        if(keyList.length > 0){
+          keyList.map((o) => (sessionStorage.removeItem(o.name)));
+          return true;
+        }
+      },
+  
+      setGridMouseDownActive(){
+          const ele = document.querySelector(`div.tui-grid-container.tui-grid-show-lside-area`);
+          if(window.getEventListeners(ele).mousedown){
+            ele.removeEventListener('mousedown',window.getEventListeners(ele).mousedown[0].listener);
+          }
+      },
+          restrictChars : function($event,regExp,hanYn){
+  
+        if(this.isNull(hanYn)){
+          hanYn='N';
+        }
+        if(hanYn === 'N' && $event.type === 'keydown'){
+          if($event.keyCode === 229){
+            $event.preventDefault();
+            return false;
+          }
+        }
+  
+        if($event.type === 'keypress'){
+          //한글 처리 불가
+          if(regExp.test(String.fromCharCode($event.charCode))) {
+            return true;
+          }else{
+            $event.preventDefault();
+            return false;
+          }
+        }
+  
+        if(hanYn === 'N' && ( $event.type === 'keyup' || $event.type === 'input' || $event.type === 'change' || $event.type === 'blur')){
+          $event.target.value = $event.target.value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g,'');
+          $event.preventDefault();
+          return false;
+        }
+        return true;
+      },
+          setLenth: function (e, len) {
+              this.cut(e, len);
+      },
+      onlyCustom: function (e,strRegExp,hanYn) {
+        var regExp_g = new RegExp(strRegExp,'g');
+        this.cut(e);
+              return this.restrictChars(e,regExp_g,hanYn);
+      },
+      onlyCommon: function(strRegExp, e, len, isEventCall, hanYn) {
+        var regExp_g = new RegExp(strRegExp,'g');         
+        if(isEventCall === 'N'){
+          if(!this.cut(e, len, isEventCall)){
+            return false;
+          }
+          if(!regExp_g.test(e.value)){
+            return false;
+          }
+          return true;
+        }
+        this.cut(e, len);
+              return this.restrictChars(e,regExp_g,hanYn);
+      },
+          onlyNum: function (e, len, isEventCall) {
+        var strRegExp = '^[0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyEng: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },
+      onlyLowerEng: function (e, len, isEventCall) {
+        var strRegExp = '^[a-z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },
+      onlyUpperEng: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyEmail: function (e, len, isEventCall) {
+        var strRegExp = '^[a-zA-Z0-9_\.\-@._-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyName: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyTitle: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyText: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9_-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyPassword: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z0-9!@#$%^&*]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyId: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z0-9_\.\-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyIp: function (e, len, isEventCall) {
+        var strRegExp = '^[0-9,.*]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyRoleNm_Space: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyRoleId_UnderBar: function (e, len, isEventCall) {
+        var strRegExp = '^[a-zA-Z0-9_]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },    
+          cut: function (ele, len, isValidChk) {
+        let e=ele;
+        if (typeof ele.target != "undefined") {
+          e=ele.target;
+        }
+        let max = this.isNull(len) ? e.attributes.maxlength.value : len;      
+        let str = e.value;
+  
+        if (this.bytes(str) > max) {
+          if(this.isNull(isValidChk)){
+            e.value = this.cutBytes(str, max);
+          }
+          return false;
+        }			
+        return true;
+          },
+          cutBytes: function (str, len) {
+        while(1 === 1){
+          if(this.bytes(str) <= len){
+            return str;
+          }
+          str = str.slice(0,-1);
+        }
+          },
+          bytes: function (str) {
+              var length = ((s,b,i,c) => {
+            // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);  // 한글 3바이트
+            // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?2:c>>7?1:1);     //한글 2바이트
+          b=0,i=0;
+          while(1 === 1){          
+            c = s.charCodeAt(i++);
+            if (isNaN(c)) {
+              break;
+            }
+            b += c >> 11 ? 2 : c >> 7 ? 1 : 1;
+          }
+          return b
+        })(str);
+              return length;
+          },
+          checkPhone: function(str) {
+              str = str.replace(/[-\s]+/g, '');
+              if (str.charAt(0)!="0"){
+                  str = "0"+str;
+              }
+              if (str.length<10||str.length>12){return "";}
+              if (isNaN(str)){return "";	}
+              if (str.substr(0,2)!="01" && str.substr(0,3)!="070"  && str.substr(0,4)!="0505" && str.substr(0,4)!="0503"){return "";	}
+              return str;
+  
+          },
+      }
+  };
+  export { utils_mixin, chkPattern2 };

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

@@ -5,17 +5,59 @@ const getCommCode = (params) => {
     return httpClient.post('/api/v1/bo/comm/getCode', params, { withCredentials: false });
 }
 
+const adminList = (params) => {
+    return httpClient.post('/api/v1/bo/sendNumMgt/adminList', params, {withCredentials: false});
+}
+
+const numberDetail = (params) => {
+    return httpClient.post('/api/v1/bo/sendNumMgt/numberDetail', params, {withCredentials: false});
+}
+
+const apprDetail = (params) => {
+    return httpClient.post('/api/v1/bo/sendNumMgt/apprDetail', params, {withCredentials: false});
+}
+
 // 사업자가 등록 요청.
-const insertNumber1 = (tenureFile, businessFile, communicationFile, adminId, custNm, bRegNo, nmineeDivCd, numberInputs) => {
+const insertNumber = (adminId, custNm, bRegNo, nmineeDivCd, numberInputs, bizrAuthYn, custSeq) => {
+    let formData = new FormData();
+    const row = {}
+    row.adminId = adminId
+    row.custNm = custNm
+    row.bRegNo = bRegNo
+    row.list = numberInputs
+    row.bizrAuthYn = bizrAuthYn
+    row.custSeq = custSeq
+
+    console.log(row)
+    formData.append('key', new Blob([ JSON.stringify(row) ], {type : "application/json"}));
+
+    let url = "/api/v1/bo/sendNumMgt/insertNumber";
+    return httpClient.post(url, formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+            "Show-Layer": "Yes"
+        }
+    });
+};
+
+// 사업자가 등록 요청.
+const insertNumber1 = (tenureFile, businessFile, communicationFile, adminId, custNm, bRegNo, nmineeDivCd, numberInputs, bizrAuthYn, custSeq) => {
     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);
+    formData.append("communicationFile", communicationFile);
+
+    const row = {}
+    row.adminId = adminId
+    row.custNm = custNm
+    row.bRegNo = bRegNo
+    row.nmineeDivCd = nmineeDivCd
+    row.list = numberInputs
+    row.bizrAuthYn = bizrAuthYn
+    row.custSeq = custSeq
+
+    console.log(row)
+    formData.append('key', new Blob([ JSON.stringify(row) ], {type : "application/json"}));
 
     let url = "/api/v1/bo/sendNumMgt/insertNumber";
     return httpClient.post(url, formData, {
@@ -27,18 +69,27 @@ const insertNumber1 = (tenureFile, businessFile, communicationFile, adminId, cus
 };
 
 // 타사업자가 등록 요청.
-const insertNumber2 = (trustFile, warrantFile, deputyFile, tenureFile, businessFile, adminId, custNm, bRegNo, nmineeDivCd, numberInputs) => {
+const insertNumber2 = (trustFile, warrantFile, deputyFile, tenureFile, otherBusinessFile, businessFile, adminId, custNm, bRegNo, nmineeDivCd, numberInputs, bizrAuthYn, custSeq) => {
     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);
+    formData.append("otherBusinessFile", otherBusinessFile);
+
+    const row = {}
+    row.adminId = adminId
+    row.custNm = custNm
+    row.bRegNo = bRegNo
+    row.nmineeDivCd = nmineeDivCd
+    row.numberInputs = numberInputs
+    row.bizrAuthYn = bizrAuthYn
+    row.custSeq = custSeq
+
+    console.log(row)
+
+    formData.append('key', new Blob([ JSON.stringify(row) ], {type : "application/json"}));
 
     let url = "/api/v1/bo/sendNumMgt/insertNumber";
     return httpClient.post(url, formData, {
@@ -49,8 +100,17 @@ const insertNumber2 = (trustFile, warrantFile, deputyFile, tenureFile, businessF
     });
 };
 
+const updateAppr = (params) => {
+    return httpClient.post('/api/v1/bo/sendNumMgt/updateAppr', params, {withCredentials: false});
+}
+
 export default {
     getCommCode,
+    numberDetail,
+    adminList,
+    insertNumber,
     insertNumber1,
     insertNumber2,
+    apprDetail,
+    updateAppr,
 }

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

@@ -0,0 +1,373 @@
+import lodash from "lodash";
+import moment from "moment";
+import '@/modules/mgt/components/eventlisteners.js';
+
+const filter_mixin = {
+  filters: {
+    _yyyy_mm_dd(val){
+      if(lodash.isNil(val) || lodash.trim(val) == '') return '';
+      const orgin = val;
+      if(orgin.length < 8) {
+        return orgin;
+      }
+      if(!Number(orgin)) return orgin;
+      const date = orgin.substring(0,8);
+      if(moment(date).isValid()){
+        return moment(date).format('YYYY[-]MM[-]DD');
+      }
+      return orgin;
+    }
+  },
+}
+
+const utils_mixin = {
+    methods:{
+    /** * 이메일 형식 체크 * * @param 데이터 */
+    emailCheck(email,rtnArrYn) {
+        if(this.isNull(rtnArrYn)){
+          rtnArrYn='N';
+        }
+        // var regExp = /(^[A-Za-z0-9_\.\-]+)@([A-Za-z0-9\-]+\.[A-Za-z0-9\-]+)/;
+        var regExp = /^([0-9a-zA-Z_\.\-]([-_.]?[0-9a-zA-Z_\.\-])*)@([0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$)/i;//이메일 정규식
+
+        if(regExp.test(email) == false) {
+          // 이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
+          if(rtnArrYn == 'Y'){
+              return email;
+            }
+          return false;
+        }else{
+            var myArray = regExp.exec(email);
+            if(rtnArrYn == 'Y'){
+              return myArray;
+            }
+            return true;
+        }
+
+      },
+      /** * 전화번호 포맷으로 변환 * * @param 데이터 */
+      formatPhone(phoneNum,fmt,rtnArrYn) {
+        if(this.isNull(fmt)){
+          fmt='';
+        }
+        if(this.isNull(rtnArrYn)){
+          fmt='N';
+        }
+        if(this.isPhone(phoneNum)) {
+          var rtnNum;
+          var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
+          var myArray;
+          if(regExp.test(phoneNum)){
+            myArray = regExp.exec(phoneNum);
+            rtnNum = myArray[1]+fmt + myArray[2]+fmt+myArray[3];
+            if(rtnArrYn == 'Y'){
+              return myArray;
+            }
+            return rtnNum;
+          } else {
+            regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+            if(regExp.test(phoneNum)){
+              myArray = regExp.exec(phoneNum);
+              rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return rtnNum;
+            } else {
+              return phoneNum;
+            }
+          }
+        } else {
+          return phoneNum;
+        }
+      },
+      /** * 핸드폰번호 포맷으로 변환 * * @param 데이터 */
+      formatMobile(phoneNum,fmt,rtnArrYn) {
+
+        if(this.isNull(fmt)){
+          fmt='';
+        }
+        if(this.isNull(rtnArrYn)){
+          fmt='N';
+        }
+        if(this.isMobile(phoneNum)) {
+
+          var rtnNum;
+          var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
+          var myArray;
+
+          if(regExp.test(phoneNum)){
+
+            myArray = regExp.exec(phoneNum);
+            rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
+            if(rtnArrYn == 'Y'){
+              return myArray;
+            }
+            return rtnNum;
+          } else {
+            return phoneNum;
+          }
+        } else {
+          return phoneNum;
+        }
+      },
+
+      /** * 전화번호 형식 체크 * * @param 데이터 */
+      isPhone(phoneNum) {
+        var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
+        if(regExp.test(phoneNum)){
+          return true;
+          } else {
+            regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+            if(regExp.test(phoneNum)){
+              return true;
+            } else {
+              return false;
+            }
+        }
+      },
+
+      /** * 핸드폰번호 형식 체크 * * @param 데이터 */
+      isMobile(phoneNum) {
+        var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
+        var myArray;
+        if(regExp.test(phoneNum)){
+          myArray = regExp.exec(phoneNum);
+          return true;
+        } else {
+          return false;
+        }
+      },
+      isMobile2(phoneNum) {
+        var regExp =/(1[016789])([0-9]{3,4})([0-9]{4})$/;
+        var myArray;
+        if(regExp.test(phoneNum)){
+          myArray = regExp.exec(phoneNum);
+          return true;
+        } else {
+          return false;
+        }
+      },
+
+      isNull(obj){
+        if(lodash.isNil(obj) || lodash.trim(obj) == ''){
+          return true;
+        }
+        return false;
+      },
+      getParent(name){
+        let p = this.$parent;
+        while(typeof p !== 'undefined'){
+            if(p.$options.name == name) {
+            return p;
+            }else {
+            p = p.$parent;
+            }
+        }
+        return false;
+      },
+      getJsonObj(str){
+        return JSON.parse(JSON.stringify(str));
+      },
+    }
+};
+
+var chkPattern2 = {
+	data: function () {
+		return {      
+		}
+	},
+	methods: {
+    selSesStorage(keyLike){
+      if(this.isNull(keyLike)){
+        return null;
+      }
+      if(sessionStorage.length > 0){
+        let keyList = [];
+        for(let i=0;i<sessionStorage.length;i++){
+          const keyNm = sessionStorage.key(i);
+          if(keyNm.indexOf(keyLike) > -1){
+            keyList.push({name : keyNm, value : sessionStorage.getItem(keyNm)});
+          }
+        }
+        if(keyList.length > 0){
+          return keyList;
+        }
+        return null;
+      }
+      return null;
+    },
+
+    delSesStorage(keyList){
+      if(this.isNull(keyList)){
+        return null;
+      }
+      if(keyList.length > 0){
+        keyList.map((o) => (sessionStorage.removeItem(o.name)));
+        return true;
+      }
+    },
+
+    setGridMouseDownActive(){
+        const ele = document.querySelector(`div.tui-grid-container.tui-grid-show-lside-area`);
+        if(window.getEventListeners(ele).mousedown){
+          ele.removeEventListener('mousedown',window.getEventListeners(ele).mousedown[0].listener);
+        }
+    },
+		restrictChars : function($event,regExp,hanYn){
+
+      if(this.isNull(hanYn)){
+        hanYn='N';
+      }
+      if(hanYn === 'N' && $event.type === 'keydown'){
+        if($event.keyCode === 229){
+          $event.preventDefault();
+          return false;
+        }
+      }
+
+      if($event.type === 'keypress'){
+        //한글 처리 불가
+        if(regExp.test(String.fromCharCode($event.charCode))) {
+          return true;
+        }else{
+          $event.preventDefault();
+          return false;
+        }
+      }
+
+      if(hanYn === 'N' && ( $event.type === 'keyup' || $event.type === 'input' || $event.type === 'change' || $event.type === 'blur')){
+        $event.target.value = $event.target.value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g,'');
+        $event.preventDefault();
+        return false;
+      }
+      return true;
+    },
+		setLenth: function (e, len) {
+			this.cut(e, len);
+    },
+    onlyCustom: function (e,strRegExp,hanYn) {
+      var regExp_g = new RegExp(strRegExp,'g');
+      this.cut(e);
+			return this.restrictChars(e,regExp_g,hanYn);
+    },
+    onlyCommon: function(strRegExp, e, len, isEventCall, hanYn) {
+      var regExp_g = new RegExp(strRegExp,'g');         
+      if(isEventCall === 'N'){
+        if(!this.cut(e, len, isEventCall)){
+          return false;
+        }
+        if(!regExp_g.test(e.value)){
+          return false;
+        }
+        return true;
+      }
+      this.cut(e, len);
+			return this.restrictChars(e,regExp_g,hanYn);
+    },
+		onlyNum: function (e, len, isEventCall) {
+      var strRegExp = '^[0-9]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall);
+		},
+		onlyEng: function (e, len, isEventCall) {
+      var strRegExp = '^[A-Za-z]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall);
+    },
+    onlyLowerEng: function (e, len, isEventCall) {
+      var strRegExp = '^[a-z]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall);
+    },
+    onlyUpperEng: function (e, len, isEventCall) {
+      var strRegExp = '^[A-Z]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall);
+		},
+		onlyEmail: function (e, len, isEventCall) {
+      var strRegExp = '^[a-zA-Z0-9_\.\-@._-]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall);
+		},
+		onlyName: function (e, len, isEventCall) {
+      var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+		},
+		onlyTitle: function (e, len, isEventCall) {
+      var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+		},
+		onlyText: function (e, len, isEventCall) {
+      var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9_-]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+		},
+		onlyPassword: function (e, len, isEventCall) {
+      var strRegExp = '^[A-Za-z0-9!@#$%^&*]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall);
+		},
+		onlyId: function (e, len, isEventCall) {
+      var strRegExp = '^[A-Za-z0-9_\.\-]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall);
+		},
+		onlyIp: function (e, len, isEventCall) {
+      var strRegExp = '^[0-9,.*]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall);
+		},
+		onlyRoleNm_Space: function (e, len, isEventCall) {
+      var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+		},
+		onlyRoleId_UnderBar: function (e, len, isEventCall) {
+      var strRegExp = '^[a-zA-Z0-9_]*$';
+      return this.onlyCommon(strRegExp, e, len, isEventCall);
+    },    
+		cut: function (ele, len, isValidChk) {
+      let e=ele;
+      if (typeof ele.target != "undefined") {
+        e=ele.target;
+      }
+      let max = this.isNull(len) ? e.attributes.maxlength.value : len;      
+      let str = e.value;
+
+      if (this.bytes(str) > max) {
+        if(this.isNull(isValidChk)){
+          e.value = this.cutBytes(str, max);
+        }
+        return false;
+      }			
+      return true;
+		},
+		cutBytes: function (str, len) {
+      while(1 === 1){
+        if(this.bytes(str) <= len){
+          return str;
+        }
+        str = str.slice(0,-1);
+      }
+		},
+		bytes: function (str) {
+			var length = ((s,b,i,c) => {
+          // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);  // 한글 3바이트
+          // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?2:c>>7?1:1);     //한글 2바이트
+        b=0,i=0;
+        while(1 === 1){          
+          c = s.charCodeAt(i++);
+          if (isNaN(c)) {
+            break;
+          }
+          b += c >> 11 ? 2 : c >> 7 ? 1 : 1;
+        }
+        return b
+      })(str);
+			return length;
+		},
+		checkPhone: function(str) {
+			str = str.replace(/[-\s]+/g, '');
+			if (str.charAt(0)!="0"){
+				str = "0"+str;
+			}
+			if (str.length<10||str.length>12){return "";}
+			if (isNaN(str)){return "";	}
+			if (str.substr(0,2)!="01" && str.substr(0,3)!="070"  && str.substr(0,4)!="0505" && str.substr(0,4)!="0503"){return "";	}
+			return str;
+
+		},
+	}
+};
+export { utils_mixin, chkPattern2, filter_mixin };

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

@@ -11,37 +11,37 @@
           <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 name="" id="" v-model="grid.params.searchType1" @keyup.enter="search">
+                <option value="" selected>전체</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="검색어 입력"/>
+              <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="">
-                <option value="전체">전체</option>
-                <option value="사업자">사업자</option>
-                <option value="타사업자">타사업자</option>
+              <select name="" id="" v-model="grid.params.searchType2" @keyup.enter="search">
+                <option value="" selected>전체</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="검색어 입력"/>
+              <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText2" @keyup.enter="search"/>
             </div>
-            <button type="button" class="button grey">조회</button>
+            <button type="button" class="button grey" @click="search">조회</button>
           </div>
 
         </div>
       </form>
       <div class="info">
-        <div class="count">총 <span>100</span>건
+        <div class="count">총 <span>{{ totalItems }}</span>건
           <div class="select_box NumberSe">
-            <select name="" id="">
+            <select name="" id="" v-model="grid.pagePerRows" @keyup.enter="search">
               <option value="20">20</option>
               <option value="50" selected>50</option>
               <option value="100">100</option>
@@ -50,254 +50,193 @@
         </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>
+        <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>
       </div>
+
+      <appr-detail-pop ref="apprDetailPop" />
+
     </div>
   </div>
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
-//import api from '../service/api';
+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) {
+  }
+}
+
+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: 'profileList',
+  name: 'apprList',
   data() {
     return {
-      testList: {
-        url: '/api/v1/bo/sysMgt/adminList',
-        perPage: 20,
+      row: {},
+      authType: [],
+      statType: [],
+      cate2Code: "",
+      totalItems: 0,
+      // 테이블 리스트 데이터
+      perPageCnt: 50,
+      grid: {
+        url: '/api/v1/bo/sendNumMgt/apprList',
+        perPage: 50,
         pagination: true,
-        isCheckbox: true,
+        isCheckbox: false,
         initialRequest: false,
         addCls: 'box_OFvis',
-
-
-        header: [
-          [
-            { header: 'NO', childNames: [] },
-            { header: '권한', childNames: [] },
-            { header: '이름(대리점명)', childNames: [] },
-            { header: 'ID', childNames: [] },
-            { header: '상태', childNames: [] },
-            { header: '등록일', childNames: [] }
-          ]
-        ],
-
-        columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: 60 },
-          { name: 'auth', header: '권한', align: 'left', width: 160 },
-          { name: 'name', header: '이름(대리점명)', align: 'center', width: 130},
-          { name: 'adminId', header: 'ID', align: 'center', width: 130},
-          { name: 'adminStat', header: '상태', align: 'center', width: 130},      
-          { name: 'regDt', header: '등록일', width: 90, cls: 'td_line' }
+        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: {
+              type: CustomATagRenderer
+              ,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%' }
         ],
         noDataStr: '검색 결과가 없습니다.',        
-        // params: {
-        //   apprResult: '',
-        //   searchType: '',
-        //   searchText: '',
-        //   startDate: '',
-        //   endDate: ''
-        // },
+        params: {
+          searchType1: '',
+          searchType2: '',
+          searchText1: '',
+          searchText2: '',
+        },
         excelHeader: []
       }    
     };
   },  
   components: {
-    customGrid: customGrid
+    customGrid: customGrid,
+    ApprDetailPop
+  },
+  created(){
+    this.$store.commit("login/isLogin", true);
+    this.$store.commit("login/isAuthChk", true);
   },
   destroyed() {
-      
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      page: 1,
+      perPage: 50,
+      params: {
+        searchType1: '',
+        searchType2: '',
+        searchText1: '',
+        searchText2: ''
+      }
+    });
   },
   mounted() {
+    let page = 1;
+    const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+
     let isKeep = false;
-    isKeep = true;
+    if(getCondition) {
+      this.grid.pagePerRows = getCondition.perPage;
+      this.grid.params = getCondition.params;
+      page = getCondition.page;
+      isKeep = true;
+    }
     this.search(isKeep);
   },
   methods: {
     search: function(isKeep) {
-      console.log(this.testList.params);
-      this.$refs.table.search(this.testList.params, isKeep);
+      console.log(this.grid.params);
+      this.$refs.table.search(this.grid.params, isKeep);
+      this.sendStoreData();
     },
+    sendStoreData: function() {
+      const getP = this.$refs.table.getPagination();
+      console.log("==========getP : " + getP);
+      this.$store.commit('searchcondition/updateSearchCondition', {
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
+        params: {
+          searchType1: '',
+          searchType2: '',
+          searchText1: ''
+        }
+      });
+
+      const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+      //console.log("getCondition : "+ getCondition.perPage);
+    },
+    apprDetail(props){
+      console.log(props)
+      this.$refs.apprDetailPop.apprDetailPopOpen(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();
   }
 };
 </script>

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

@@ -69,7 +69,7 @@
           </div>
 				  <div class="button_group">
 						<button type="button" class="button blue add" @click="numberRegPopOpen();">등록</button>
-						<button type="button" class="button white del">삭제</button>
+						<button type="button" class="button white del" @click="numberDelete">삭제</button>
 					</div>
 				</div>
             <div class="table">    
@@ -159,6 +159,8 @@ export default {
 
         columns: [          
           { name: 'no', header: 'NO', align: 'center', width: '5%' },
+          { name: 'regReqNo', hidden: true},
+          { name: 'bizrAuthYn', hidden: true},
           { name: 'custNm', header: '고객사명', align: 'center', width: '5%' },
           { name: 'adminId', header: '관리자ID', align: 'center', width: '10%' },
           { name: 'register', header: '등록자ID', align: 'center', width: '10%' },
@@ -262,6 +264,12 @@ export default {
       console.log(props)
       this.$refs.numberDetailPop.numberDetailPopOpen(props);
     },
+    commonModalOpen(row){
+      this.$refs.commmonModal.alertModalOpen(row);
+    },
+    numberDelete(){
+
+    }
   },
   // beforeRouteLeave(to, from, next) {
   //

frontend/src/modules/servMgt/views/rejectRecvList.vue

@@ -31,7 +31,7 @@
 					</div>
 				</form>
 				<div class="info">
-					<div class="count">총 <span>{{ totalItems }}</span>건
+					<div class="count">총 <span>{{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</span>건
 						<div class="select_box NumberSe">
 							<select name="" id="perPage" v-model="grid.pagePerRows" @keyup.enter="search">
 								<option value="20">20</option>
@@ -123,14 +123,14 @@ export default {
         ],
 
         columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: 50 },
-          { name: 'custNm', header: '고객사명(이름)', align: 'left', width: 200 },
-          { name: 'bregNo', header: '사업자번호(생년월일)', align: 'center', width: 100, renderer: {type: customBRegNo}},
-          { name: 'userId', header: '관리자ID', align: 'center', width: 100},
-          { name: 'authcd080', header: '인증코드', align: 'center', width: 100},      
-          { name: 'useYN', header: '사용여부', width: 100, cls: 'td_line' },
-          { name: 'regDt', header: '등록일', align: 'center', width: 150},      
-          { name: 'chgDt', header: '최종수정일', width: 150, cls: 'td_line' }
+          { name: 'no', header: 'NO', align: 'center', width: '5%' },
+          { name: 'custNm', header: '고객사명', align: 'center', width: '15%' },
+          { name: 'bregNo', header: '사업자번호', align: 'center', width: '10%', renderer: {type: customBRegNo}},
+          { name: 'userId', header: '관리자ID', align: 'center', width: '15%'},
+          { name: 'authcd080', header: '인증코드', align: 'center', width: '10%'},      
+          { name: 'useYN', header: '사용여부', align: 'center', width: '10%', cls: 'td_line' },
+          { name: 'regDt', header: '등록일', align: 'center', width: '15%'},      
+          { name: 'chgDt', header: '마지막 수정일', align: 'center', width: '15%', cls: 'td_line' }
         ],
         noDataStr: '검색 결과가 없습니다.',        
          params: {

frontend/src/modules/statics/components/CampaignStaticsList.vue

@@ -1,563 +0,0 @@
-<template>
-  <article id="content" class="content">
-    <ul class="breadcrumb">
-      <li class="home">
-        <a href="javascript:void(0);">홈</a>
-      </li>
-      <li>
-        <a href="javascript:void(0);">발송통계</a>
-      </li>
-      <li>
-        <span>캠페인ID별통계</span>
-      </li>
-    </ul>
-    <div class="title_area">
-      <h2>캠페인ID별통계</h2>
-    </div>
-    <div class="tab_wrap">
-      <ul class="tab_nav">
-        <li>
-          <a
-            href="javascript:void(0);"
-            @click="isAdmin ? toMove('staticsList') : ''"
-            :style="isAdmin ? '' : 'cursor:default'"
-          >상품별통계</a>
-        </li>
-        <li>
-          <a
-            href="javascript:void(0);"
-            @click="isAdmin ? toMove('tmpltStatics') : ''"
-            :style="isAdmin ? '' : 'cursor:default'"
-          >포맷ID별통계</a>
-        </li>
-        <li>
-          <a href="javascript:void(0);" @click="toMove('userStatics')">사용자별통계</a>
-        </li>
-        <li class="active">
-          <a href="javascript:void(0);">캠페인ID별통계</a>
-        </li>
-      </ul>
-    </div>
-
-    <div class="box_search_area">
-      <div class="filter_bundle_wrap">
-        <div class="filter_bundle">
-          <strong class="tit_bundle">발송일</strong>
-          <div class="cont_bundle center">
-            <div class="box_select_period">
-              <div class="period_wrap">
-                <span class="custom_input icon_date">
-                  <vuejs-datepicker
-                    :language="ko"
-                    :format="customFormatter"
-                    :disabled-dates="disabledSDate"
-                    :minimumView="sDateDiv"
-                    :maximumView="sDateDiv"
-                    v-model="startDate"
-                    @selected="selectedStartDate(0)"
-                    @closed="closeDate('start')"
-                  ></vuejs-datepicker>
-                </span>
-                <span class="hypen">~</span>
-                <span class="custom_input icon_date">
-                  <vuejs-datepicker
-                    :language="ko"
-                    :format="customFormatter"
-                    :disabled-dates="disabledEDate"
-                    :minimumView="sDateDiv"
-                    :maximumView="sDateDiv"
-                    v-model="endDate"
-                    @selected="selectedEndDate(0)"
-                    @closed="closeDate('end')"
-                  ></vuejs-datepicker>
-                </span>
-              </div>
-
-              <div class="radio_wrap">
-                <span class="custom_radio">
-                  <input
-                    type="radio"
-                    name="radioDate"
-                    id="day"
-                    v-model="sDateDiv"
-                    value="day"
-                    checked
-                  >
-                  <label for="day">일별</label>
-                </span>
-                <span class="custom_radio">
-                  <input type="radio" name="radioDate" id="month" v-model="sDateDiv" value="month">
-                  <label for="month">월별</label>
-                </span>
-                <span class="custom_radio">
-                  <input type="radio" name="radioDate" id="year" v-model="sDateDiv" value="year">
-                  <label for="year">년별</label>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- end of filter_bundle_wrap -->
-
-        <div class="filter_bundle">
-          <strong class="tit_bundle">&nbsp;</strong>
-          <div class="cont_flex_bundle full_width">
-            <span style="width:336px;" class="custom_input">
-              <input
-                type="text"
-                placeholder="캠페인ID를 입력해주세요."
-                v-model="grid.params.searchCampId"
-                @keyup.enter="search"
-                maxlength="20"
-              >
-              <!-- <select>
-                <option value="">부서</option>
-              </select>-->
-              <!-- <select
-                v-model="grid.params.searchDeptNm"
-                @change="selectUserIdList"
-                v-bind:disabled="isSelIdDisabled"
-              >
-                <option value>부서</option>
-                <option
-                  v-for="dept in deptNmList"
-                  :key="dept.deptNm"
-                  :value="dept.deptNm"
-                >{{dept.deptNm}}</option>
-              </select> -->
-            </span>
-          </div>
-        </div>
-        <!-- end of filter_bundle 2 -->
-      </div>
-      <div class="btn_wrap center">
-        <a href="javascript:void(0);" class="btn mid point" @click="searchSummary">
-          <span>조회</span>
-        </a>
-      </div>
-    </div>
-    <!-- end of box_search_area -->
-
-    <div class="cont_flex_bundle bottom mar_b20">
-      <div class="result_date left col_6">
-        <span>
-          <em class="date">{{ customFormatter(startDate) }}</em> 부터
-          <em class="date">{{ customFormatter(endDate) }}</em>까지의 전송/성공/성공률 입니다.
-        </span>
-      </div>
-      <div class="btn_wrap right col_6">
-        <a href="javascript:void(0)" class="btn sml bd_gray icon_down_doc" @click="excelDown()">
-          <span>엑셀 다운로드</span>
-        </a>
-      </div>
-    </div>
-
-    <custom-grid
-      ref="table"
-      :url="grid.url"
-      :perPage="grid.perPage"
-      :pagination="grid.pagination"
-      :header="grid.header"
-      :columns="grid.columns"
-      :noDataStr="grid.noDataStr"
-      :initialRequest="grid.initialRequest"
-      :addBodyAlign="grid.addAlign"
-      :addBodyTmplt="grid.summary"
-    ></custom-grid>
-  </article>
-</template>
-
-<script>
-import moment from 'moment';
-
-import customGrid from '@/components/CustomGrid';
-import api from '../service/api';
-import xlsx from '@/common/excel';
-
-let summaryList = {};
-
-export default {
-  name: 'campaignStatisticList',
- 
-  data() {
-    return {
-      userRoleInfoList: [],
-
-      bbsCategoryType: 'CAMPAIGN',
-      ko: vdp_translation_ko.js,
-      periodDay: 7,
-      sDateDiv: 'day',
-      startDate: new Date(),
-      endDate: new Date(),
-
-      isSelIdDisabled: false,
-
-      isAdmin: true,
-      excelHeader: [],
-
-      grid: {
-        url: '/api/statics/campList',
-
-        initialRequest: false,
-        pagination: true,
-        perPage: 10,
-
-        header: [
-          [
-            { header: 'NO', childNames: [] },
-            { header: '캠페인ID', childNames: [] },
-            { header: '템플릿명', childNames: [] },
-            { header: '템플릿아이디', childNames: [] },
-            { header: '날짜', childNames: [] },
-            { header: '스타일 템플릿', childNames: ['cellTmpltTot', 'cellTmpltRateStr'] },
-            { header: '서술 템플릿', childNames: ['descTmpltTot', 'descTmpltRateStr'] },
-            { header: '기본 템플릿', childNames: ['freeTmpltTot', 'freeTmpltRateStr'] },
-            { header: '템플릿 소계', childNames: ['subSumTmpltTot', 'subSumTmpltRateStr'] },
-            { header: 'RCS SMS', childNames: ['smsTot', 'smsRateStr'] },
-            { header: 'RCS LMS', childNames: ['lmsTot', 'lmsRateStr'] },
-            { header: 'RCS MMS', childNames: ['mmsTot', 'mmsRateStr'] },
-            { header: 'RCS 소계', childNames: ['formatTot', 'formatRateStr'] },
-            { header: 'Fallback SMS', childNames: ['fbSmsTot', 'fbSmsRateStr'] },
-            { header: 'Fallback LMS', childNames: ['fbLmsTot', 'fbLmsRateStr'] }
-          ]
-        ],
-
-        columns: [
-          { name: 'seq', header: 'NO', width: 100 },
-          {
-            name: 'campaignId',
-            header: '캠페인ID',
-            width: 150,
-            formatter: props => {
-              return '<div class="ellipsis">' + props.campaignId + '</div>';
-            }
-          },
-          {
-            name: 'msgbaseName',
-            header: '템플릿명',
-            width: 180,
-            formatter: props => {
-              return '<div class="ellipsis">' + props.msgbaseName + '</div>';
-            }
-          },
-          {
-            name: 'msgbaseId',
-            header: '템플릿아이디',
-            width: 200,
-            formatter: props => {
-              return '<div class="ellipsis">' + props.msgbaseId + '</div>';
-            }
-          },
-          { name: 'ymd', header: '날짜', width: 100 },
-          { name: 'cellTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'cellTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'descTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'descTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'freeTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'freeTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'subSumTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'subSumTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-
-          { name: 'smsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'smsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'lmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'lmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'mmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'mmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'formatTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'formatRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-
-          { name: 'fbSmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'fbSmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'fbLmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'fbLmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' }
-        ],
-
-        summary: '',
-        addAlign: '',
-
-        noDataStr: '검색 결과가 없습니다.',
-        params: {
-          searchCampId: ''
-        }
-      }
-    };
-  },
-  beforeCreate() {},
-  created() {
-    api.selectUserRoleInfo().then(response => {
-      const respList = response.data.data;
-      if (response.data.success && respList != null && respList.length > 0) {
-        let adminStr = respList[0].selIsAdmin;
-        if (typeof adminStr != undefined && adminStr != null && adminStr == 'false') {
-          this.isAdmin = false;
-        }
-      } else {
-        this.isAdmin = true;
-      }
-    });
-
-    this.setPeriodDay(0);
-    this.getExcelHeader();
-  },
-
-  mounted() {
-    // 합계 조회
-    this.searchSummary();
-  },
-
-  components: {
-    'vuejs-datepicker': vuejsDatepicker,
-    customGrid: customGrid
-  },
-  methods: {
-    getExcelHeader() {
-      // 헤더를 mockup으로 관리한다.
-      api.getExcelHeader(this.bbsCategoryType).then(res => {
-        this.excelHeader = res;
-      });
-    },
-
-    selectUserRoleInfo() {
-      api
-        .selectUserRoleInfo()
-        .then(response => {
-          const respList = response.data.data;
-          console.log('selectUserRoleInfo : ' ,  respList)
-          if (response.data.success && respList != null && respList.length > 0) {
-            this.userRoleInfoList = respList;
-          } else {
-            this.userRoleInfoList = '';
-          }
-        })
-        .finally(() => {
-          this.setUserIdListByRole();
-        });
-    },
-
-    setUserIdListByRole: function() {
-      var selUserId = this.userRoleInfoList[0].selUserId;
-      if (this.userRoleInfoList[0].selIsAdmin != null && this.userRoleInfoList[0].selIsAdmin == 'false') {
-        if (this.userRoleInfoList != null && this.userRoleInfoList.length > 0) {
-          this.userIdList = this.userIdListOrigin.filter(function(rowData) {
-            if (rowData.userId == selUserId) {
-              return rowData.userId;
-            }
-          });
-
-          this.grid.params.searchCampId = this.userRoleInfoList[0].selCampId;
-          this.isSelIdDisabled = true; // 두개 같이 사용.
-        }
-      } else {
-        let isContain = false;
-        let currSelId = this.grid.params.searchCampId;
-        this.userIdList.some(function(id) {
-          if (currSelId == id) {
-            isContain = true;
-            return true;
-          }
-        });
-
-        if (!isContain) this.grid.params.searchCampId = '';
-      }
-    },
-
-    customFormatter: function(date) {
-      if (this.sDateDiv == 'month') {
-        return moment(date).format('YYYY-MM');
-      } else if (this.sDateDiv == 'year') {
-        return moment(date).format('YYYY');
-      } else {
-        return moment(date).format('YYYY-MM-DD');
-      }
-    },
-    toPage(lifeCycle) {
-      const page = this.isNull(this.$route.params.page) ? 1 : this.$route.params.page;
-      try {
-        console.log('page-->', page);
-        this.$refs.table.readData(page, this.grid.params);
-      } catch (error) {
-        console.log(lifeCycle, error);
-      }
-    },
-
-    toMove(routeName) {
-      this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
-    },
-
-    search: function(data) {
-      this.grid.params = {
-        sDate: moment(this.startDate).format('YYYYMMDD'),
-        eDate: moment(this.endDate).format('YYYYMMDD'),
-        dateDiv: this.sDateDiv,
-        searchCampId: this.grid.params.searchCampId
-      };
-      this.$refs.table.search(this.grid.params);
-    },
-
-    searchSummary: function(data) {
-      let summaryList = {};
-
-      this.grid.params.sDate = moment(this.startDate).format('YYYYMMDD');
-      this.grid.params.eDate = moment(this.endDate).format('YYYYMMDD');
-      this.grid.params.dateDiv = this.sDateDiv;
-      this.grid.params.searchCampId = this.grid.params.searchCampId;
-
-      api
-        .selectCampSummary(this.grid.params)
-        .then(response => {
-          console.log('selectCampSummary :  ' ,  response);
-          const respList = response.data.data;
-          if (response.data.success && respList != null && respList.length > 0) {
-            summaryList = respList[0];
-
-            this.grid.addAlign = 'TOP';
-            let addBody = '';
-            addBody += '<tr>';
-            addBody += '<td colspan="5">합계</td>';
-            addBody += '<td>' + summaryList.cellTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.cellTmpltSucc + '<br>(' + summaryList.cellTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.descTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.descTmpltSucc + '<br>(' + summaryList.descTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.freeTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.freeTmpltSucc + '<br>(' + summaryList.freeTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.subSumTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.subSumTmpltSucc + '<br>(' + summaryList.subSumTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.smsTot + '</td>';
-            addBody += '<td>' + summaryList.smsSucc + '<br>(' + summaryList.smsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.lmsTot + '</td>';
-            addBody += '<td>' + summaryList.lmsSucc + '<br>(' + summaryList.lmsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.mmsTot + '</td>';
-            addBody += '<td>' + summaryList.mmsSucc + '<br>(' + summaryList.mmsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.formatTot + '</td>';
-            addBody += '<td>' + summaryList.formatSucc + '<br>(' + summaryList.formatRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.fbSmsTot + '</td>';
-            addBody += '<td>' + summaryList.fbSmsSucc + '<br>(' + summaryList.fbSmsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.fbLmsTot + '</td>';
-            addBody += '<td>' + summaryList.fbLmsSucc + '<br>(' + summaryList.fbLmsRate + '%)</td>';
-            addBody += '</tr>';
-
-            this.grid.summary = addBody;
-          } else {
-            this.grid.addAlign = '';
-            this.grid.summary = '';
-          }
-        })
-        .finally(() => {
-          this.search(data);
-        });
-    },
-
-    setPeriodDay(day) {
-      this.periodDay = day;
-      this.endDate = new Date();
-      this.startDate = moment(this.endDate)
-        .subtract(day, 'day')
-        .toDate();
-
-      this.closeDate('start');
-      this.closeDate('end');
-    },
-
-    selectedStartDate(day) {
-      if (day != undefined && day != null) {
-        this.periodDay = day;
-      }
-      if (this.startDate > this.endDate) {
-        this.startDate = this.endDate;
-      }
-    },
-    selectedEndDate(day) {
-      if (day != undefined && day != null) {
-        this.periodDay = day;
-      }
-    },
-    closeDate(type) {
-      if (type != undefined && type != null) {
-        if (type == 'start') {
-          this.disabledSDate = { from: this.endDate };
-          this.disabledEDate = { to: this.startDate, from: this.endDate };
-        } else if (type == 'end') {
-          this.disabledSDate = { from: this.endDate };
-          this.disabledEDate = { to: this.startDate, from: new Date() };
-        }
-      }
-    },
-
-    async getExcelDataDown() {
-      try {
-        let response;
-        const params = {
-          startDtXls: moment(this.startDate).format('YYYYMMDD'),
-          endDtXls: moment(this.endDate).format('YYYYMMDD'),
-          sDate: this.startDate,
-          eDate: this.endDate,
-          dateDiv: this.sDateDiv,
-          searchCampId: this.grid.params.searchCampId
-        };
-
-        response = await api.selectCampXlslist(params);
-
-        const result = response.data;
-        if (result != null && result.success) {
-          if (!this.isNull(result.data)) {
-            return result.data;
-          }
-        }
-        return false;
-      } catch (err) {
-        return false;
-      }
-    }, // end of getExcelDataDown
-
-    async getExcelSumData() {
-      try {
-        let response = await api.selectCampSummary(this.grid.params);
-        const result = response.data;
-
-        if (result != null && result.success) {
-          if (!this.isNull(result.data)) {
-            return result.data;
-          }
-        }
-        return false;
-      } catch (err) {
-        return false;
-      }
-    },
-    async excelDown() {
-      if (this.$refs.table.getData().length <= 0) {
-        alert('조회된 데이터가 없습니다.');
-        return false;
-      }
-
-      let today = moment().format('YYYYMMDDHHmmss');
-      const saveFileName = `캠페인ID별통계_${today}.xlsx`;
-
-      const data = await this.getExcelDataDown();
-      const sumData = await this.getExcelSumData();
-      let options = {
-        header: this.excelHeader,
-        summary: {
-          isUse: true,
-          position: 'first',
-          data: sumData,
-          title: { replaceKeys: ['seq', 'campaignId', 'msgbaseName', 'msgbaseId', 'ymd'], name: '합계' }
-        },
-        dataOrder: 'header' // header, data, ['no', 'sendnum', 'errorDesc']
-      };
-
-      xlsx.export(data, saveFileName, options).then(() => {});
-    }
-  }
-};
-</script>

frontend/src/modules/statics/components/StaticsList.vue

@@ -1,433 +0,0 @@
-<template>
-  <article id="content" class="content">
-    <ul class="breadcrumb">
-      <li class="home">
-        <a href="javascript:void(0);">홈</a>
-      </li>
-      <li>
-        <a href="javascript:void(0);">발송통계</a>
-      </li>
-      <li>
-        <span>상품별통계</span>
-      </li>
-    </ul>
-    <div class="title_area">
-      <h2>상품별통계</h2>
-    </div>
-    <div class="tab_wrap">
-      <ul class="tab_nav">
-        <li class="active">
-          <a href="javascript:void(0);" :style="isAdmin ? '' : 'cursor:default'">상품별통계</a>
-        </li>
-        <li>
-          <a
-            href="javascript:void(0);"
-            @click="isAdmin ? toMove('tmpltStatics') : ''"
-            :style="isAdmin ? '' : 'cursor:default'"
-          >포맷ID별통계</a>
-        </li>
-        <li>
-          <a href="javascript:void(0);" @click="toMove('userStatics')">사용자별통계</a>
-        </li>
-        <li>
-          <a href="javascript:void(0);" @click="toMove('campaignStatics')">캠페인ID별통계</a>
-        </li>
-      </ul>
-    </div>
-
-    <div class="box_search_area">
-      <div class="filter_bundle_wrap">
-        <div class="filter_bundle">
-          <strong class="tit_bundle">발송일</strong>
-          <div class="cont_bundle center">
-            <div class="box_select_period">
-              <div class="period_wrap">
-                <span class="custom_input icon_date">
-                  <vuejs-datepicker
-                    :language="ko"
-                    :format="customFormatter"
-                    :disabled-dates="disabledSDate"
-                    :minimumView="sDateDiv"
-                    :maximumView="sDateDiv"
-                    v-model="startDate"
-                    @selected="selectedStartDate(0)"
-                    @closed="closeDate('start')"
-                  ></vuejs-datepicker>
-                </span>
-                <span class="hypen">~</span>
-                <span class="custom_input icon_date">
-                  <vuejs-datepicker
-                    :language="ko"
-                    :format="customFormatter"
-                    :disabled-dates="disabledEDate"
-                    :minimumView="sDateDiv"
-                    :maximumView="sDateDiv"
-                    v-model="endDate"
-                    @selected="selectedEndDate(0)"
-                    @closed="closeDate('end')"
-                  ></vuejs-datepicker>
-                </span>
-              </div>
-
-              <div class="radio_wrap">
-                <span class="custom_radio">
-                  <input
-                    type="radio"
-                    name="radioDate"
-                    id="day"
-                    v-model="sDateDiv"
-                    value="day"
-                    checked
-                  >
-                  <label for="day">일별</label>
-                </span>
-                <span class="custom_radio">
-                  <input type="radio" name="radioDate" id="month" v-model="sDateDiv" value="month">
-                  <label for="month">월별</label>
-                </span>
-                <span class="custom_radio">
-                  <input type="radio" name="radioDate" id="year" v-model="sDateDiv" value="year">
-                  <label for="year">년별</label>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- end of filter_bundle_wrap -->
-      <div class="btn_wrap center">
-        <a href="javascript:void(0);" class="btn mid point" @click="searchSummary">
-          <span>조회</span>
-        </a>
-      </div>
-    </div>
-    <!-- end of box_search_area -->
-
-    <div class="cont_flex_bundle bottom mar_b20">
-      <div class="result_date left col_6">
-        <span>
-          <em class="date">{{ customFormatter(startDate) }}</em> 부터
-          <em class="date">{{ customFormatter(endDate) }}</em>까지의 전송/성공/성공률 입니다.
-        </span>
-      </div>
-      <div class="btn_wrap right col_6">
-        <a href="javascript:void(0)" class="btn sml bd_gray icon_down_doc" @click="excelDown()">
-          <span>엑셀 다운로드</span>
-        </a>
-      </div>
-    </div>
-
-    <custom-grid
-      ref="table"
-      :url="grid.url"
-      :perPage="grid.perPage"
-      :pagination="grid.pagination"
-      :header="grid.header"
-      :columns="grid.columns"
-      :noDataStr="grid.noDataStr"
-      :initialRequest="grid.initialRequest"
-      :addBodyAlign="grid.addAlign"
-      :addBodyTmplt="grid.summary"
-    ></custom-grid>
-  </article>
-</template>
-
-<script>
-import moment from 'moment';
-import customGrid from '@/components/CustomGrid';
-import api from '../service/api';
-import xlsx from '@/common/excel';
-
-export default {
-  name: 'staticsList',  
-  data() {
-    return {
-      ko: vdp_translation_ko.js,
-      bbsCategoryType: 'PROD',
-
-      sDateDiv: 'day',
-      startDate: new Date(),
-      endDate: new Date(),
-
-      disabledSDate: { from: new Date() },
-      disabledEDate: { from: new Date() },
-
-      isAdmin: true,
-
-      grid: {
-        url: '/api/statics/list',
-
-        initialRequest: false,
-        pagination: true,
-        perPage: 10,
-
-        header: [
-          [
-            { header: 'NO', childNames: [] },
-            { header: '날짜', childNames: [] },
-            { header: '스타일 템플릿', childNames: ['cellTmpltTot', 'cellTmpltRateStr'] },
-            { header: '서술 템플릿', childNames: ['descTmpltTot', 'descTmpltRateStr'] },
-            { header: '기본 템플릿', childNames: ['freeTmpltTot', 'freeTmpltRateStr'] },
-            { header: '템플릿 소계', childNames: ['subSumTmpltTot', 'subSumTmpltRateStr'] },
-            { header: 'RCS SMS', childNames: ['smsTot', 'smsRateStr'] },
-            { header: 'RCS LMS', childNames: ['lmsTot', 'lmsRateStr'] },
-            { header: 'RCS MMS', childNames: ['mmsTot', 'mmsRateStr'] },
-            { header: '포맷 소계', childNames: ['formatTot', 'formatRateStr'] },
-            { header: 'Fallback SMS', childNames: ['fbSmsTot', 'fbSmsRateStr'] },
-            { header: 'Fallback LMS', childNames: ['fbLmsTot', 'fbLmsRateStr'] }
-          ]
-        ],
-
-        columns: [
-          { name: 'seq', header: 'NO', width: 100 },
-          { name: 'ymd', header: '날짜', width: 100 },
-          { name: 'cellTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'cellTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'descTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'descTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'freeTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'freeTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'subSumTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'subSumTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-
-          { name: 'smsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'smsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'lmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'lmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'mmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'mmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'formatTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'formatRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-
-          { name: 'fbSmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'fbSmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'fbLmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'fbLmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' }
-        ],
-
-        summary: '',
-        addAlign: '',
-
-        noDataStr: '검색 결과가 없습니다.',
-        params: {},
-        excelHeader: []
-      }
-    };
-  },
-  created() {
-    api.selectUserRoleInfo().then(response => {
-      const respList = response.data.data;
-      if (response.data.success && respList != null && respList.length > 0) {
-        let adminStr = respList[0].selIsAdmin;
-        if (typeof adminStr != undefined && adminStr != null && adminStr == 'false') {
-          this.isAdmin = false;
-        }
-      } else {
-        this.isAdmin = true;
-      }
-    });
-
-    this.getExcelHeader();
-  },
-  mounted() {
-    // 합계 조회
-    this.searchSummary();
-  },
-
-  components: {
-    'vuejs-datepicker': vuejsDatepicker,
-    customGrid: customGrid
-  },
-  methods: {
-    getExcelHeader() {
-      // 헤더를 mockup으로 관리한다.
-      api.getExcelHeader(this.bbsCategoryType).then(res => {
-        this.excelHeader = res;
-      });
-    },
-    customFormatter: function(date) {
-      if (this.sDateDiv == 'month') {
-        return moment(date).format('YYYY-MM');
-      } else if (this.sDateDiv == 'year') {
-        return moment(date).format('YYYY');
-      } else {
-        return moment(date).format('YYYY-MM-DD');
-      }
-    },
-    toPage(lifeCycle) {
-      const page = this.isNull(this.$route.params.page) ? 1 : this.$route.params.page;
-      try {
-        this.$refs.table.readData(page, this.grid.params);
-      } catch (error) {
-        console.log(lifeCycle, error);
-      }
-    },
-
-    toMove(routeName) {
-      this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
-    },
-
-    search: function(data) {
-      this.grid.params = {
-        sDate: moment(this.startDate).format('YYYYMMDD'),
-        eDate: moment(this.endDate).format('YYYYMMDD'),
-        dateDiv: this.sDateDiv
-      };
-
-      this.$refs.table.search(this.grid.params);
-    },
-
-    searchSummary: function(data) {
-      let summaryList = {};
-
-      this.grid.params = {
-        sDate: moment(this.startDate).format('YYYYMMDD'),
-        eDate: moment(this.endDate).format('YYYYMMDD'),
-        dateDiv: this.sDateDiv
-      };
-
-      api
-        .selectStaticsSummary(this.grid.params)
-        .then(response => {
-          const respList = response.data.data;
-          if (response.data.success && respList != null && respList.length > 0) {
-            summaryList = respList[0];
-
-            this.grid.addAlign = 'TOP';
-            let addBody = '';
-            addBody += '<tr>';
-            addBody += '<td colspan="2">합계</td>';
-            addBody += '<td>' + summaryList.cellTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.cellTmpltSucc + '<br>(' + summaryList.cellTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.descTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.descTmpltSucc + '<br>(' + summaryList.descTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.freeTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.freeTmpltSucc + '<br>(' + summaryList.freeTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.subSumTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.subSumTmpltSucc + '<br>(' + summaryList.subSumTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.smsTot + '</td>';
-            addBody += '<td>' + summaryList.smsSucc + '<br>(' + summaryList.smsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.lmsTot + '</td>';
-            addBody += '<td>' + summaryList.lmsSucc + '<br>(' + summaryList.lmsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.mmsTot + '</td>';
-            addBody += '<td>' + summaryList.mmsSucc + '<br>(' + summaryList.mmsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.formatTot + '</td>';
-            addBody += '<td>' + summaryList.formatSucc + '<br>(' + summaryList.formatRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.fbSmsTot + '</td>';
-            addBody += '<td>' + summaryList.fbSmsSucc + '<br>(' + summaryList.fbSmsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.fbLmsTot + '</td>';
-            addBody += '<td>' + summaryList.fbLmsSucc + '<br>(' + summaryList.fbLmsRate + '%)</td>';
-            addBody += '</tr>';
-
-            this.grid.summary = addBody;
-          } else {
-            this.grid.addAlign = '';
-            this.grid.summary = '';
-          }
-        })
-        .finally(() => {
-          this.search();
-        });
-    },
-
-    selectedStartDate(day) {
-      if (this.startDate > this.endDate) {
-        this.startDate = this.endDate;
-      }
-    },
-    selectedEndDate(day) {
-      if (day != undefined && day != null) {
-        this.periodDay = day;
-      }
-    },
-    closeDate(type) {
-      if (type != undefined && type != null) {
-        if (type == 'start') {
-          this.disabledSDate = { from: this.endDate };
-          this.disabledEDate = { to: this.startDate, from: this.endDate };
-        } else if (type == 'end') {
-          this.disabledSDate = { from: this.endDate };
-          this.disabledEDate = { to: this.startDate, from: new Date() };
-        }
-      }
-    },
-
-    async getExcelDataDown() {
-      try {
-        let response;
-        const params = {
-          startDtXls: moment(this.startDate).format('YYYYMMDD'),
-          endDtXls: moment(this.endDate).format('YYYYMMDD'),
-          sDate: this.startDate,
-          eDate: this.endDate,
-          dateDiv: this.sDateDiv
-        };
-
-        response = await api.selectStaticsXls(params);
-
-        const result = response.data;
-        if (result != null && result.success) {
-          if (!this.isNull(result.data)) {
-            return result.data;
-          }
-        }
-        return false;
-      } catch (err) {
-        return false;
-      }
-    }, // end of getExcelDataDown
-
-    async getExcelSumData() {
-      // let sumBody = '';
-      try {
-        let response = await api.selectStaticsSummary(this.grid.params);
-        const result = response.data;
-
-        if (result != null && result.success) {
-          if (!this.isNull(result.data)) {
-            return result.data;
-          }
-        }
-        return false;
-      } catch (err) {
-        return false;
-      }
-    },
-    async excelDown() {
-      if (this.$refs.table.getData().length <= 0) {
-        alert('조회된 데이터가 없습니다.');
-        return false;
-      }
-
-      let today = moment().format('YYYYMMDDHHmmss');
-      const saveFileName = `상품별통계_${today}.xlsx`;
-
-      const data = await this.getExcelDataDown();
-      const sumData = await this.getExcelSumData();
-
-      let options = {
-        header: this.excelHeader,
-        summary: {
-          isUse: true,
-          position: 'first',
-          data: sumData,
-          title: { replaceKeys: ['seq', 'ymd'], name: '합계' }
-        },
-        dataOrder: 'header' // header, data, ['no', 'sendnum', 'errorDesc']
-      };
-
-      xlsx.export(data, saveFileName, options).then(() => {});
-    }
-  }
-};
-</script>
-

frontend/src/modules/statics/components/TmpltStaticsList.vue

@@ -1,551 +0,0 @@
-<template>
-  <article id="content" class="content">
-    <ul class="breadcrumb">
-      <li class="home">
-        <a href="javascript:void(0);">홈</a>
-      </li>
-      <li>
-        <a href="javascript:void(0);">발송통계</a>
-      </li>
-      <li>
-        <span>포맷ID별통계</span>
-      </li>
-    </ul>
-    <div class="title_area">
-      <h2>포맷ID별통계</h2>
-    </div>
-    <div class="tab_wrap">
-      <ul class="tab_nav">
-        <li>
-          <a
-            href="javascript:void(0);"
-            @click="isAdmin ? toMove('staticsList') : ''"
-            :style="isAdmin ? '' : 'cursor:default'"
-          >상품별통계</a>
-        </li>
-        <li class="active">
-          <a href="javascript:void(0);" :style="isAdmin ? '' : 'cursor:default'">포맷ID별통계</a>
-        </li>
-        <li>
-          <a href="javascript:void(0);" @click="toMove('userStatics')">사용자별통계</a>
-        </li>
-        <li>
-          <a href="javascript:void(0);" @click="toMove('campaignStatics')">캠페인ID별통계</a>
-        </li>
-      </ul>
-    </div>
-
-    <div class="box_search_area">
-      <div class="filter_bundle_wrap">
-        <div class="filter_bundle">
-          <strong class="tit_bundle">발송일</strong>
-          <div class="cont_bundle center">
-            <div class="box_select_period">
-              <div class="period_wrap">
-                <span class="custom_input icon_date">
-                  <vuejs-datepicker
-                    :language="ko"
-                    :format="customFormatter"
-                    :disabled-dates="disabledSDate"
-                    :minimumView="sDateDiv"
-                    :maximumView="sDateDiv"
-                    v-model="startDate"
-                    @selected="selectedStartDate(0)"
-                    @closed="closeDate('start')"
-                  ></vuejs-datepicker>
-                </span>
-                <span class="hypen">~</span>
-                <span class="custom_input icon_date">
-                  <vuejs-datepicker
-                    :language="ko"
-                    :format="customFormatter"
-                    :disabled-dates="disabledEDate"
-                    :minimumView="sDateDiv"
-                    :maximumView="sDateDiv"
-                    v-model="endDate"
-                    @selected="selectedEndDate(0)"
-                    @closed="closeDate('end')"
-                  ></vuejs-datepicker>
-                </span>
-              </div>
-              <div class="radio_wrap">
-                <span class="custom_radio">
-                  <input
-                    type="radio"
-                    name="radioDate"
-                    id="day"
-                    v-model="sDateDiv"
-                    value="day"
-                    checked
-                  >
-                  <label for="day">일별</label>
-                </span>
-                <span class="custom_radio">
-                  <input type="radio" name="radioDate" id="month" v-model="sDateDiv" value="month">
-                  <label for="month">월별</label>
-                </span>
-                <!-- 템플릿별에는 년별구분 없음 -->
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- end of filter_bundle 1 -->
-
-        <div class="filter_bundle">
-          <strong class="tit_bundle">&nbsp;</strong>
-          <div class="cont_flex_bundle full_width">
-            <span style="width:336px;" class="custom_select">
-              <select v-model="grid.params.searchProdCd" @change="selectMsgbaseIdList">
-                <option value>상품</option>
-                <option v-for="grp in grpList" :key="grp.code" :value="grp.code">{{grp.codeDesc}}</option>
-              </select>
-            </span>
-            <span style="width:336px;" class="box_select mar_l12">
-              <a
-                href="javascript:void(0);"
-                class="btn_arrow"
-                @click.stop="showSearchMsgbaseId()"
-              >{{searchMsgbaseId}}</a>
-
-              <div class="select_search_area active" v-show="setShowMsgbId">
-                <span class="custom_input search">
-                  <input type="text" v-model.trim="searchStr" @input="searchMsgbase" @click.stop>
-                  <a
-                    href="javascript:void(0);"
-                    class="btn_search"
-                    @click.stop="setwSearchMsgbaseId()"
-                  >검색</a>
-                </span>
-                <ul class="select box_scrollY">
-                  <li
-                    class="option"
-                    v-for="msgbase in msgbaseIdList"
-                    :key="msgbase.msgbaseId"
-                    :value="msgbase.msgbaseId"
-                    @click="setwSearchMsgbaseId(msgbase.msgbaseId)"
-                  >{{msgbase.msgbaseId}}</li>
-                </ul>
-              </div>
-            </span>
-          </div>
-        </div>
-        <!-- end of filter_bundle 2 -->
-      </div>
-      <!-- end of filter_bundle_wrap -->
-
-      <div class="btn_wrap center">
-        <a href="javascript:void(0);" class="btn mid point" @click="searchSummary">
-          <span>조회</span>
-        </a>
-      </div>
-    </div>
-    <!-- end of box_search_area -->
-
-    <div class="cont_flex_bundle bottom mar_b20">
-      <div class="result_date left col_6">
-        <span>
-          <em class="date">{{ customFormatter(startDate) }}</em> 부터
-          <em class="date">{{ customFormatter(endDate) }}</em>까지의 전송/성공/성공률 입니다.
-        </span>
-      </div>
-      <div class="btn_wrap right col_6">
-        <a href="javascript:void(0)" class="btn sml bd_gray icon_down_doc" @click="excelDown()">
-          <span>엑셀 다운로드</span>
-        </a>
-      </div>
-    </div>
-
-    <custom-grid
-      ref="table"
-      :url="grid.url"
-      :perPage="grid.perPage"
-      :pagination="grid.pagination"
-      :header="grid.header"
-      :columns="grid.columns"
-      :noDataStr="grid.noDataStr"
-      :initialRequest="grid.initialRequest"
-      :summary="grid.summary"
-      :addBodyAlign="grid.addAlign"
-      :addBodyTmplt="grid.summary"
-    ></custom-grid>
-  </article>
-</template>
-
-<script>
-import moment from 'moment';
-import lodash from 'lodash';
-import customGrid from '@/components/CustomGrid';
-import api from '../service/api';
-import xlsx from '@/common/excel';
-
-export default {
-  name: 'tmpltStaticsList',  
-  data() {
-    return {
-      grpList: [],
-
-      bbsCategoryType: 'TMPL',
-      msgbaseIdList: [],
-      msgbaseIdListOrigin: [],
-      setShowMsgbId: false,
-      searchStr: '',
-      searchProdCd: '',
-      searchMsgbaseId: '포맷 아이디',
-
-      ko: vdp_translation_ko.js,
-
-      sDateDiv: 'day',
-      startDate: new Date(),
-      endDate: new Date(),
-      disabledSDate: new Date(),
-      disabledEDate: new Date(),
-
-      isAdmin: true,
-      excelHeader: [],
-
-      grid: {
-        url: '/api/statics/tmpltList',
-
-        initialRequest: false,
-        pagination: true,
-        perPage: 10,
-
-        header: [
-          [
-            { header: 'NO', childNames: [] },
-            { header: '템플릿명(상품명)', childNames: [] },
-            { header: '포맷아이디', childNames: [] },
-            { header: '날짜', childNames: [] },
-            { header: '상품', childNames: [] },
-            { header: 'RCS', childNames: ['rcsCnt', 'rcsRateStr'] },
-            { header: 'Fallback SMS', childNames: ['fbSmsTot', 'fbSmsRateStr'] },
-            { header: 'Fallback LMS', childNames: ['fbLmsTot', 'fbLmsRateStr'] }
-          ]
-        ],
-        columns: [
-          { name: 'seq', header: 'NO', width: 120 },
-          {
-            name: 'msgbaseName',
-            header: '템플릿명(상품명)',
-            width: 180,
-            formatter: props => {
-              return '<div class="ellipsis">' + props.msgbaseName + '</div>';
-            }
-          },
-          {
-            name: 'msgbaseId',
-            header: '포맷아이디',
-            width: 250,
-            formatter: props => {
-              return '<div class="ellipsis">' + props.msgbaseId + '</div>';
-            }
-          },
-          { name: 'ymd', header: '날짜', width: 120 },
-          { name: 'productName', header: '상품', width: 120 },
-
-          { name: 'rcsCnt', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'rcsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-
-          { name: 'fbSmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'fbSmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-
-          { name: 'fbLmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'fbLmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' }
-        ],
-
-        summary: '',
-        addAlign: '',
-
-        noDataStr: '검색 결과가 없습니다.',
-        params: {
-          // mounted() 에서 reset 한다.
-          searchProdCd: ''
-        }
-      }
-    };
-  },
-  created() {
-    api.selectUserRoleInfo().then(response => {
-      const respList = response.data.data;
-      if (response.data.success && respList != null && respList.length > 0) {
-        let adminStr = respList[0].selIsAdmin;
-        if (typeof adminStr != undefined && adminStr != null && adminStr == 'false') {
-          this.isAdmin = false;
-        }
-      } else {
-        this.isAdmin = true;
-      }
-    });
-
-    this.setPeriodDay(0);
-    this.selectCodeProdList();
-    this.selectMsgbaseIdList();
-    this.getExcelHeader();
-  },
-  mounted() {
-    // 합계 조회
-    this.searchSummary();
-
-    document.addEventListener('click', () => {
-      if (this.setShowMsgbId) {
-        this.searchStr = '';
-        this.setShowMsgbId = false;
-      }
-    });
-  },
-
-  components: {
-    'vuejs-datepicker': vuejsDatepicker,
-    customGrid: customGrid
-  },
-  methods: {
-    getExcelHeader() {
-      // 헤더를 mockup으로 관리한다.
-      api.getExcelHeader(this.bbsCategoryType).then(res => {
-        this.excelHeader = res;
-      });
-    },
-    selectCodeProdList() {
-      api.selectCodeProdList('PROD_DIV').then(response => {
-        const respList = response.data.data;
-        if (response.data.success && respList != null) {
-          this.grpList = lodash.clone(respList);
-        }
-      });
-    },
-
-    showSearchMsgbaseId() {
-      if (this.setShowMsgbId) {
-        this.searchStr = '';
-        this.setShowMsgbId = false;
-      } else {
-        this.setShowMsgbId = true;
-      }
-    },
-
-    setwSearchMsgbaseId(searchMsgbaseId) {
-      let exe = true;
-      if (typeof searchMsgbaseId == undefined || searchMsgbaseId == null || searchMsgbaseId == '') {
-        if (this.searchStr.length == 0) {
-          //전체리스트
-          this.searchMsgbaseId = '포맷 아이디';
-        } else {
-          exe = false;
-          alert('선택된 포맷 아이디가 없습니다.');
-        }
-      } else {
-        this.searchMsgbaseId = searchMsgbaseId;
-      }
-
-      if (exe) {
-        this.setShowMsgbId = false;
-        this.searchStr = '';
-        this.msgbaseIdList = this.msgbaseIdListOrigin;
-      }
-    },
-
-    selectMsgbaseIdList() {
-      api.selectMsgbaseIdList(this.grid.params.searchProdCd).then(response => {
-        const respList = response.data.data;
-        if (response.data.success && respList != null && respList.length > 0) {
-          this.msgbaseIdList = respList;
-          this.msgbaseIdListOrigin = respList;
-        } else {
-          this.msgbaseIdList = '';
-          this.msgbaseIdListOrigin = '';
-        }
-        this.searchStr = '';
-        this.searchMsgbaseId = '포맷 아이디';
-
-        this.setShowMsgbId = false;
-      });
-    },
-    searchMsgbase() {
-      if (this.msgbaseIdListOrigin.length > 0) {
-        this.msgbaseIdList = this.msgbaseIdListOrigin.filter(props => {
-          return props.msgbaseId.toLowerCase().indexOf(this.searchStr.toLowerCase()) >= 0;
-        });
-      }
-    },
-    customFormatter: function(date) {
-      if (this.sDateDiv == 'month') {
-        return moment(date).format('YYYY-MM');
-      } else if (this.sDateDiv == 'year') {
-        return moment(date).format('YYYY');
-      } else {
-        return moment(date).format('YYYY-MM-DD');
-      }
-    },
-    toPage(lifeCycle) {
-      const page = this.isNull(this.$route.params.page) ? 1 : this.$route.params.page;
-      try {
-        console.log('page-->', page);
-        this.$refs.table.readData(page, this.grid.params);
-      } catch (error) {
-        console.log(lifeCycle, error);
-      }
-    },
-
-    toMove(routeName) {
-      this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
-    },
-
-    search: function(data) {
-      this.grid.params = {
-        sDate: moment(this.startDate).format('YYYYMMDD'),
-        eDate: moment(this.endDate).format('YYYYMMDD'),
-        dateDiv: this.sDateDiv,
-        searchProdCd: this.grid.params.searchProdCd,
-        searchMsgbaseId: this.searchMsgbaseId
-      };
-      this.$refs.table.search(this.grid.params);
-    },
-
-    searchSummary: function(data) {
-      let summaryList = {};
-
-      this.grid.params.sDate = moment(this.startDate).format('YYYYMMDD');
-      this.grid.params.eDate = moment(this.endDate).format('YYYYMMDD');
-      this.grid.params.dateDiv = this.sDateDiv;
-      this.grid.params.searchProdCd = this.grid.params.searchProdCd;
-      this.grid.params.searchMsgbaseId = this.searchMsgbaseId;
-
-      api
-        .selectTmpltSummary(this.grid.params)
-        .then(response => {
-
-          console.log('조회 결과 : ' , response);
-
-          const respList = response.data.data;
-          if (response.data.success && respList != null && respList.length > 0) {
-            summaryList = respList[0];
-
-            this.grid.addAlign = 'TOP';
-            let addBody = '';
-            addBody += '<tr>';
-            addBody += '<td colspan="5">합계</td>';
-
-            addBody += '<td>' + summaryList.rcsCnt + '</td>';
-            addBody += '<td>' + summaryList.rcsSucc + '<br>(' + summaryList.rcsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.fbSmsTot + '</td>';
-            addBody += '<td>' + summaryList.fbSmsSucc + '<br>(' + summaryList.fbSmsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.fbLmsTot + '</td>';
-            addBody += '<td>' + summaryList.fbLmsRate + '<br>(' + summaryList.fbLmsRate + '%)</td>';
-            addBody += '</tr>';
-
-            this.grid.summary = addBody;
-          } else {
-            this.grid.addAlign = '';
-            this.grid.summary = '';
-          }
-        })
-        .finally(() => {
-          this.search(data);
-        });
-    },
-
-    setPeriodDay(day) {
-      this.endDate = new Date();
-      this.startDate = moment(this.endDate)
-        .subtract(day, 'day')
-        .toDate();
-
-      this.closeDate('start');
-      this.closeDate('end');
-    },
-
-    selectedStartDate(day) {
-      if (this.startDate > this.endDate) {
-        this.startDate = this.endDate;
-      }
-    },
-    selectedEndDate(day) {
-      if (day != undefined && day != null) {
-        this.periodDay = day;
-      }
-    },
-    closeDate(type) {
-      if (type != undefined && type != null) {
-        if (type == 'start') {
-          this.disabledSDate = { from: this.endDate };
-          this.disabledEDate = { to: this.startDate, from: this.endDate };
-        } else if (type == 'end') {
-          this.disabledSDate = { from: this.endDate };
-          this.disabledEDate = { to: this.startDate, from: new Date() };
-        }
-      }
-    },
-
-    async getExcelDataDown() {
-      try {
-        let response;
-        const params = {
-          startDtXls: moment(this.startDate).format('YYYYMMDD'),
-          endDtXls: moment(this.endDate).format('YYYYMMDD'),
-          sDate: this.startDate,
-          eDate: this.endDate,
-          dateDiv: this.sDateDiv,
-          searchProdCd: this.grid.params.searchProdCd,
-          searchMsgbaseId: this.searchMsgbaseId
-        };
-
-        response = await api.selectTmpltXlslist(params);
-
-        const result = response.data;
-        if (result != null && result.success) {
-          if (!this.isNull(result.data)) {
-            return result.data;
-          }
-        }
-        return false;
-      } catch (err) {
-        return false;
-      }
-    }, // end of getExcelDataDown
-
-    async getExcelSumData() {
-      try {
-        let response = await api.selectTmpltSummary(this.grid.params);
-        const result = response.data;
-
-        if (result != null && result.success) {
-          if (!this.isNull(result.data)) {
-            return result.data;
-          }
-        }
-        return false;
-      } catch (err) {
-        return false;
-      }
-    },
-
-    async excelDown() {
-      if (this.$refs.table.getData().length <= 0) {
-        alert('조회된 데이터가 없습니다.');
-        return false;
-      }
-
-      let today = moment().format('YYYYMMDDHHmmss');
-      const saveFileName = `포맷ID별통계_${today}.xlsx`;
-
-      const data = await this.getExcelDataDown();
-      const sumData = await this.getExcelSumData();
-
-      let options = {
-        header: this.excelHeader,
-        summary: {
-          isUse: true,
-          position: 'first',
-          data: sumData,
-          title: { replaceKeys: ['seq', 'msgbaseName', 'msgbaseId', 'ymd', 'productName'], name: '합계' }
-        },
-        dataOrder: 'header' // header, data, ['no', 'sendnum', 'errorDesc']
-      };
-
-      xlsx.export(data, saveFileName, options).then(() => {});
-    }
-  }
-};
-</script>

frontend/src/modules/statics/components/UserStaticsList.vue

@@ -1,609 +0,0 @@
-<template>
-  <article id="content" class="content">
-    <ul class="breadcrumb">
-      <li class="home">
-        <a href="javascript:void(0);">홈</a>
-      </li>
-      <li>
-        <a href="javascript:void(0);">발송통계</a>
-      </li>
-      <li>
-        <span>사용자별통계</span>
-      </li>
-    </ul>
-    <div class="title_area">
-      <h2>사용자별통계</h2>
-    </div>
-    <div class="tab_wrap">
-      <ul class="tab_nav">
-        <li>
-          <a
-            href="javascript:void(0);"
-            @click="isAdmin ? toMove('staticsList') : ''"
-            :style="isAdmin ? '' : 'cursor:default'"
-          >상품별통계</a>
-        </li>
-        <li>
-          <a
-            href="javascript:void(0);"
-            @click="isAdmin ? toMove('tmpltStatics') : ''"
-            :style="isAdmin ? '' : 'cursor:default'"
-          >포맷ID별통계</a>
-        </li>
-        <li class="active">
-          <a href="javascript:void(0);">사용자별통계</a>
-        </li>
-        <li>
-          <a href="javascript:void(0);" @click="toMove('campaignStatics')">캠페인ID별통계</a>
-        </li>
-      </ul>
-    </div>
-
-    <div class="box_search_area">
-      <div class="filter_bundle_wrap">
-        <div class="filter_bundle">
-          <strong class="tit_bundle">발송일</strong>
-          <div class="cont_bundle center">
-            <div class="box_select_period">
-              <div class="period_wrap">
-                <span class="custom_input icon_date">
-                  <vuejs-datepicker
-                    :language="ko"
-                    :format="customFormatter"
-                    :disabled-dates="disabledSDate"
-                    :minimumView="sDateDiv"
-                    :maximumView="sDateDiv"
-                    v-model="startDate"
-                    @selected="selectedStartDate(0)"
-                    @closed="closeDate('start')"
-                  ></vuejs-datepicker>
-                </span>
-                <span class="hypen">~</span>
-                <span class="custom_input icon_date">
-                  <vuejs-datepicker
-                    :language="ko"
-                    :format="customFormatter"
-                    :disabled-dates="disabledEDate"
-                    :minimumView="sDateDiv"
-                    :maximumView="sDateDiv"
-                    v-model="endDate"
-                    @selected="selectedEndDate(0)"
-                    @closed="closeDate('end')"
-                  ></vuejs-datepicker>
-                </span>
-              </div>
-
-              <div class="radio_wrap">
-                <span class="custom_radio">
-                  <input
-                    type="radio"
-                    name="radioDate"
-                    id="day"
-                    v-model="sDateDiv"
-                    value="day"
-                    checked
-                  >
-                  <label for="day">일별</label>
-                </span>
-                <span class="custom_radio">
-                  <input type="radio" name="radioDate" id="month" v-model="sDateDiv" value="month">
-                  <label for="month">월별</label>
-                </span>
-                <span class="custom_radio">
-                  <input type="radio" name="radioDate" id="year" v-model="sDateDiv" value="year">
-                  <label for="year">년별</label>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- end of filter_bundle_wrap -->
-
-        <div class="filter_bundle">
-          <strong class="tit_bundle">&nbsp;</strong>
-          <div class="cont_flex_bundle full_width">
-            <span style="width:336px;" class="custom_select">
-              <!-- <select>
-                <option value="">부서</option>
-              </select>-->
-              <select
-                v-model="grid.params.searchDeptNm"
-                @change="selectUserIdList"
-                v-bind:disabled="isSelIdDisabled"
-              >
-                <option value>부서</option>
-                <option
-                  v-for="dept in deptNmList"
-                  :key="dept.deptNm"
-                  :value="dept.deptNm"
-                >{{dept.deptNm}}</option>
-              </select>
-            </span>
-            <span style="width:336px;" class="custom_select">
-              <!-- <select>
-                <option value="">아이디</option>
-              </select>-->
-              <select v-model="grid.params.searchUserId" v-bind:disabled="isSelIdDisabled">
-                <option value>아이디</option>
-                <option value="system">system</option>
-                <option
-                  v-for="user in userIdList"
-                  :key="user.userId"
-                  :value="user.userId"
-                >{{user.userId}}</option>
-              </select>
-            </span>
-          </div>
-        </div>
-        <!-- end of filter_bundle 2 -->
-      </div>
-      <div class="btn_wrap center">
-        <a href="javascript:void(0);" class="btn mid point" @click="searchSummary">
-          <span>조회</span>
-        </a>
-      </div>
-    </div>
-    <!-- end of box_search_area -->
-
-    <div class="cont_flex_bundle bottom mar_b20">
-      <div class="result_date left col_6">
-        <span>
-          <em class="date">{{ customFormatter(startDate) }}</em> 부터
-          <em class="date">{{ customFormatter(endDate) }}</em>까지의 전송/성공/성공률 입니다.
-        </span>
-      </div>
-      <div class="btn_wrap right col_6">
-        <a href="javascript:void(0)" class="btn sml bd_gray icon_down_doc" @click="excelDown()">
-          <span>엑셀 다운로드</span>
-        </a>
-      </div>
-    </div>
-
-    <custom-grid
-      ref="table"
-      :url="grid.url"
-      :perPage="grid.perPage"
-      :pagination="grid.pagination"
-      :header="grid.header"
-      :columns="grid.columns"
-      :noDataStr="grid.noDataStr"
-      :initialRequest="grid.initialRequest"
-      :addBodyAlign="grid.addAlign"
-      :addBodyTmplt="grid.summary"
-    ></custom-grid>
-  </article>
-</template>
-
-<script>
-import moment from 'moment';
-
-import customGrid from '@/components/CustomGrid';
-
-import api from '../service/api';
-import xlsx from '@/common/excel';
-
-let summaryList = {};
-
-export default {
-  name: 'userStatisticList',
-  
-  data() {
-    return {
-      deptNmList: [],
-      userIdList: [],
-      userRoleInfoList: [],
-
-      bbsCategoryType: 'USER',
-      ko: vdp_translation_ko.js,
-      periodDay: 7,
-      sDateDiv: 'day',
-      startDate: new Date(),
-      endDate: new Date(),
-
-      isSelIdDisabled: false,
-
-      isAdmin: true,
-      excelHeader: [],
-
-      grid: {
-        url: '/api/statics/userList',
-
-        initialRequest: false,
-        pagination: true,
-        perPage: 10,
-
-        header: [
-          [
-            { header: 'NO', childNames: [] },
-            { header: '아이디', childNames: [] },
-            { header: '부서명', childNames: [] },
-            { header: '날짜', childNames: [] },
-            { header: '스타일 템플릿', childNames: ['cellTmpltTot', 'cellTmpltRateStr'] },
-            { header: '서술 템플릿', childNames: ['descTmpltTot', 'descTmpltRateStr'] },
-            { header: '기본 템플릿', childNames: ['freeTmpltTot', 'freeTmpltRateStr'] },
-            { header: '템플릿 소계', childNames: ['subSumTmpltTot', 'subSumTmpltRateStr'] },
-            { header: 'RCS SMS', childNames: ['smsTot', 'smsRateStr'] },
-            { header: 'RCS LMS', childNames: ['lmsTot', 'lmsRateStr'] },
-            { header: 'RCS MMS', childNames: ['mmsTot', 'mmsRateStr'] },
-            { header: 'RCS 소계', childNames: ['formatTot', 'formatRateStr'] },
-            { header: 'Fallback SMS', childNames: ['fbSmsTot', 'fbSmsRateStr'] },
-            { header: 'Fallback LMS', childNames: ['fbLmsTot', 'fbLmsRateStr'] }
-          ]
-        ],
-
-        columns: [
-          { name: 'seq', header: 'NO', width: 100 },
-          {
-            name: 'userId',
-            header: '아이디',
-            width: 150,
-            formatter: props => {
-              return '<div class="ellipsis">' + props.userId + '</div>';
-            }
-          },
-          {
-            name: 'deptNm',
-            header: '부서명',
-            width: 180,
-            formatter: props => {
-              return '<div class="ellipsis">' + props.deptNm + '</div>';
-            }
-          },
-          { name: 'ymd', header: '날짜', width: 100 },
-          { name: 'cellTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'cellTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'descTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'descTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'freeTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'freeTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'subSumTmpltTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'subSumTmpltRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-
-          { name: 'smsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'smsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'lmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'lmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'mmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'mmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'formatTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'formatRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-
-          { name: 'fbSmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'fbSmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' },
-          { name: 'fbLmsTot', header: '발송', width: 90, cls: 'td_line' },
-          { name: 'fbLmsRateStr', header: '성공<br>(성공률)', width: 90, cls: 'td_line' }
-        ],
-
-        summary: '',
-        addAlign: '',
-
-        noDataStr: '검색 결과가 없습니다.',
-        params: {
-          searchDeptNm: '',
-          searchUserId: ''
-        }
-      }
-    };
-  },
-  beforeCreate() {},
-  created() {
-    api.selectUserRoleInfo().then(response => {
-      const respList = response.data.data;
-      if (response.data.success && respList != null && respList.length > 0) {
-        let adminStr = respList[0].selIsAdmin;
-        if (typeof adminStr != undefined && adminStr != null && adminStr == 'false') {
-          this.isAdmin = false;
-        }
-      } else {
-        this.isAdmin = true;
-      }
-    });
-
-    this.setPeriodDay(0);
-    this.selectDeptNmList();
-    this.selectUserIdList();
-    this.getExcelHeader();
-  },
-
-  mounted() {
-    // 합계 조회
-    this.searchSummary();
-  },
-
-  components: {
-    'vuejs-datepicker': vuejsDatepicker,
-    customGrid: customGrid
-  },
-  methods: {
-    getExcelHeader() {
-      // 헤더를 mockup으로 관리한다.
-      api.getExcelHeader(this.bbsCategoryType).then(res => {
-        this.excelHeader = res;
-      });
-    },
-
-    selectDeptNmList() {
-      api.selectDeptNmList().then(response => {
-        const respList = response.data.data;
-        if (response.data.success && respList != null && respList.length > 0) {
-          this.deptNmList = respList;
-        } else {
-          this.deptNmList = '';
-        }
-      });
-
-      this.grid.params.searchDeptNm = '';
-    },
-
-    selectUserIdList() {
-      api
-        .selectUserIdList(this.grid.params.searchDeptNm)
-        .then(response => {
-          const respList = response.data.data;
-          if (response.data.success && respList != null && respList.length > 0) {
-            this.userIdList = respList;
-            this.userIdListOrigin = respList;
-          } else {
-            this.userIdList = '';
-            this.userIdListOrigin = '';
-          }
-          this.searchUserId = '';
-        })
-        .finally(() => {
-          this.selectUserRoleInfo();
-        });
-    },
-
-    selectUserRoleInfo() {
-      api
-        .selectUserRoleInfo()
-        .then(response => {
-          const respList = response.data.data;
-          if (response.data.success && respList != null && respList.length > 0) {
-            this.userRoleInfoList = respList;
-          } else {
-            this.userRoleInfoList = '';
-          }
-        })
-        .finally(() => {
-          this.setUserIdListByRole();
-        });
-    },
-
-    setUserIdListByRole: function() {
-      var selUserId = this.userRoleInfoList[0].selUserId;
-      if (this.userRoleInfoList[0].selIsAdmin != null && this.userRoleInfoList[0].selIsAdmin == 'false') {
-        if (this.userRoleInfoList != null && this.userRoleInfoList.length > 0) {
-          this.userIdList = this.userIdListOrigin.filter(function(rowData) {
-            if (rowData.userId == selUserId) {
-              return rowData.userId;
-            }
-          });
-
-          this.grid.params.searchDeptNm = this.userRoleInfoList[0].deptNm;
-          this.grid.params.searchUserId = this.userRoleInfoList[0].selUserId;
-          this.isSelIdDisabled = true; // 두개 같이 사용.
-        }
-      } else {
-        let isContain = false;
-        let currSelId = this.grid.params.searchUserId;
-        this.userIdList.some(function(id) {
-          if (currSelId == id) {
-            isContain = true;
-            return true;
-          }
-        });
-
-        if (!isContain) this.grid.params.searchUserId = '';
-      }
-    },
-
-    customFormatter: function(date) {
-      if (this.sDateDiv == 'month') {
-        return moment(date).format('YYYY-MM');
-      } else if (this.sDateDiv == 'year') {
-        return moment(date).format('YYYY');
-      } else {
-        return moment(date).format('YYYY-MM-DD');
-      }
-    },
-    toPage(lifeCycle) {
-      const page = this.isNull(this.$route.params.page) ? 1 : this.$route.params.page;
-      try {
-        console.log('page-->', page);
-        this.$refs.table.readData(page, this.grid.params);
-      } catch (error) {
-        console.log(lifeCycle, error);
-      }
-    },
-
-    toMove(routeName) {
-      this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
-    },
-
-    search: function(data) {
-      this.grid.params = {
-        sDate: moment(this.startDate).format('YYYYMMDD'),
-        eDate: moment(this.endDate).format('YYYYMMDD'),
-        dateDiv: this.sDateDiv,
-        searchDeptNm: this.grid.params.searchDeptNm,
-        searchUserId: this.grid.params.searchUserId
-      };
-      this.$refs.table.search(this.grid.params);
-    },
-
-    searchSummary: function(data) {
-      let summaryList = {};
-
-      this.grid.params.sDate = moment(this.startDate).format('YYYYMMDD');
-      this.grid.params.eDate = moment(this.endDate).format('YYYYMMDD');
-      this.grid.params.dateDiv = this.sDateDiv;
-      this.grid.params.searchDeptNm = this.grid.params.searchDeptNm;
-      this.grid.params.searchUserId = this.grid.params.searchUserId;
-      /*
-      if (this.grid.params.searchUserId == null) {
-        this.grid.params.searchUserId = '';
-      }
-      */
-
-      api
-        .selectUserSummary(this.grid.params)
-        .then(response => {
-
-          const respList = response.data.data;
-          if (response.data.success && respList != null && respList.length > 0) {
-            summaryList = respList[0];
-
-            this.grid.addAlign = 'TOP';
-            let addBody = '';
-            addBody += '<tr>';
-            addBody += '<td colspan="4">합계</td>';
-            addBody += '<td>' + summaryList.cellTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.cellTmpltSucc + '<br>(' + summaryList.cellTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.descTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.descTmpltSucc + '<br>(' + summaryList.descTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.freeTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.freeTmpltSucc + '<br>(' + summaryList.freeTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.subSumTmpltTot + '</td>';
-            addBody += '<td>' + summaryList.subSumTmpltSucc + '<br>(' + summaryList.subSumTmpltRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.smsTot + '</td>';
-            addBody += '<td>' + summaryList.smsSucc + '<br>(' + summaryList.smsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.lmsTot + '</td>';
-            addBody += '<td>' + summaryList.lmsSucc + '<br>(' + summaryList.lmsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.mmsTot + '</td>';
-            addBody += '<td>' + summaryList.mmsSucc + '<br>(' + summaryList.mmsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.formatTot + '</td>';
-            addBody += '<td>' + summaryList.formatSucc + '<br>(' + summaryList.formatRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.fbSmsTot + '</td>';
-            addBody += '<td>' + summaryList.fbSmsSucc + '<br>(' + summaryList.fbSmsRate + '%)</td>';
-
-            addBody += '<td>' + summaryList.fbLmsTot + '</td>';
-            addBody += '<td>' + summaryList.fbLmsSucc + '<br>(' + summaryList.fbLmsRate + '%)</td>';
-            addBody += '</tr>';
-
-            this.grid.summary = addBody;
-          } else {
-            this.grid.addAlign = '';
-            this.grid.summary = '';
-          }
-        })
-        .finally(() => {
-          this.search(data);
-        });
-    },
-
-    setPeriodDay(day) {
-      this.periodDay = day;
-      this.endDate = new Date();
-      this.startDate = moment(this.endDate)
-        .subtract(day, 'day')
-        .toDate();
-
-      this.closeDate('start');
-      this.closeDate('end');
-    },
-
-    selectedStartDate(day) {
-      if (day != undefined && day != null) {
-        this.periodDay = day;
-      }
-      if (this.startDate > this.endDate) {
-        this.startDate = this.endDate;
-      }
-    },
-    selectedEndDate(day) {
-      if (day != undefined && day != null) {
-        this.periodDay = day;
-      }
-    },
-    closeDate(type) {
-      if (type != undefined && type != null) {
-        if (type == 'start') {
-          this.disabledSDate = { from: this.endDate };
-          this.disabledEDate = { to: this.startDate, from: this.endDate };
-        } else if (type == 'end') {
-          this.disabledSDate = { from: this.endDate };
-          this.disabledEDate = { to: this.startDate, from: new Date() };
-        }
-      }
-    },
-
-    async getExcelDataDown() {
-      try {
-        let response;
-        const params = {
-          startDtXls: moment(this.startDate).format('YYYYMMDD'),
-          endDtXls: moment(this.endDate).format('YYYYMMDD'),
-          sDate: this.startDate,
-          eDate: this.endDate,
-          dateDiv: this.sDateDiv,
-          searchDeptNm: this.grid.params.searchDeptNm,
-          searchUserId: this.grid.params.searchUserId
-        };
-
-        // this.params.searchText = this.params.searchText2;
-        response = await api.selectUserXlslist(params);
-
-        const result = response.data;
-        if (result != null && result.success) {
-          if (!this.isNull(result.data)) {
-            return result.data;
-          }
-        }
-        return false;
-      } catch (err) {
-        return false;
-      }
-    }, // end of getExcelDataDown
-
-    async getExcelSumData() {
-      try {
-        let response = await api.selectUserSummary(this.grid.params);
-        const result = response.data;
-
-        if (result != null && result.success) {
-          if (!this.isNull(result.data)) {
-            return result.data;
-          }
-        }
-        return false;
-      } catch (err) {
-        return false;
-      }
-    },
-    async excelDown() {
-      if (this.$refs.table.getData().length <= 0) {
-        alert('조회된 데이터가 없습니다.');
-        return false;
-      }
-
-      let today = moment().format('YYYYMMDDHHmmss');
-      const saveFileName = `사용자별통계_${today}.xlsx`;
-
-      const data = await this.getExcelDataDown();
-      const sumData = await this.getExcelSumData();
-
-      let options = {
-        header: this.excelHeader,
-        summary: {
-          isUse: true,
-          position: 'first',
-          data: sumData,
-          title: { replaceKeys: ['seq', 'userId', 'deptNm', 'ymd'], name: '합계' }
-        },
-        dataOrder: 'header' // header, data, ['no', 'sendnum', 'errorDesc']
-      };
-
-      xlsx.export(data, saveFileName, options).then(() => {});
-    }
-  }
-};
-</script>

frontend/src/modules/statics/router/index.js

@@ -1,33 +0,0 @@
-import  StaticsList  from "../components/StaticsList";
-import  TmpltStatics  from "../components/TmpltStaticsList";
-import  UserStatics  from "../components/UserStaticsList";
-import  CampaignStaticsList  from "../components/CampaignStaticsList";
-
-export default [
-  {
-    // 
-    path: '/view/stat/prod',
-    name: 'staticsList',
-    component: StaticsList,
-  },
-  {
-    // 
-    path: '/view/stat/tmplt',
-    name: 'tmpltStatics',
-    component: TmpltStatics,
-  },
-  {
-    //
-    path: '/view/stat/usr',
-    name: 'userStatics',
-    component: UserStatics,
-  },
-  {
-    //
-    path: '/view/stat/camp',
-    name: 'campaignStatics',
-    component: CampaignStaticsList,
-  },
-]
-
-   	

frontend/src/modules/statics/service/api.js

@@ -1,147 +0,0 @@
-import httpClient from '@/common/http-client';
-import prodExcelHeader from './mock/prodExcelHeader';
-import tmplExcelHeader from './mock/tmplExcelHeader';
-import userExcelHeader from './mock/userExcelHeader';
-import campExcelHeader from './mock/campExcelHeader';
-//import lodash from "lodash";
-
-const selectStatics = params => {
-  return httpClient.get('/api/statics/list');
-};
-
-const selectStaticsSummary = params => {
-  return httpClient.get('/api/statics/list/summary', {
-    params: { dateDiv: params.dateDiv, sDate: params.sDate, eDate: params.eDate }
-  });
-};
-
-const selectStaticsXls = params => {
-  return httpClient.post('/api/statics/xls/list', params);
-};
-
-const selectTmpltlist = params => {
-  return httpClient.get('/api/statics/tmpltList');
-};
-
-const selectTmpltXlslist = params => {
-  return httpClient.post('/api/statics/tmpltList/xls/list', params);
-};
-
-const selectTmpltSummary = params => {
-  return httpClient.get('/api/statics/tmpltList/summary', {
-    params: {
-      dateDiv: params.dateDiv,
-      sDate: params.sDate,
-      eDate: params.eDate,
-      searchProdCd: params.searchProdCd,
-      searchMsgbaseId: params.searchMsgbaseId
-      // searchProdCd: params.searchProdCd != undefined ? params.searchProdCd : null,
-      // searchMsgbaseId: params.searchMsgbaseId != undefined ? params.searchMsgbaseId : null
-    }
-  });
-};
-
-const selectUserlist = params => {
-  return httpClient.get('/api/statics/userList');
-};
-
-const selectUserXlslist = params => {
-  return httpClient.post('/api/statics/userList/xls/list', params);
-};
-
-const selectUserSummary = params => {
-  return httpClient.get('/api/statics/userList/summary', {
-    params: {
-      dateDiv: params.dateDiv,
-      sDate: params.sDate,
-      eDate: params.eDate,
-      searchDeptNm: params.searchDeptNm,
-      searchUserId: params.searchUserId
-    }
-  });
-};
-
-const selectCampXlslist = params => {
-  return httpClient.post('/api/statics/campList/xls/list', params);
-};
-
-const selectCampSummary = params => {
-  return httpClient.get('/api/statics/campList/summary', {
-    params: {
-      dateDiv: params.dateDiv,
-      sDate: params.sDate,
-      eDate: params.eDate,
-      searchCampId: params.searchCampId
-    }
-  });
-};
-
-const selectCodeProdList = codeGrp => {
-  // ES6에서는 key와 value가 같을경우. get은 아래와 같이 가능.
-  return httpClient.get('/api/statics/code/list', { params: { codeGrp } });
-};
-
-const selectMsgbaseIdList = searchProdCd => {
-  //console.log("api selectMsgbaseIdList productcode : " + searchProdCd);
-  return httpClient.get('/api/statics/msgbaseid/list', { params: { searchProdCd } });
-};
-
-const selectDeptNmList = () => {
-  return httpClient.get('/api/statics/deptNm/list');
-};
-
-const selectUserRoleInfo = () => {
-  return httpClient.get('/api/statics/userId/roleId');
-};
-
-const selectUserIdList = searchDeptNm => {
-  //console.log("api selectUserIdList searchDeptNm : " + searchDeptNm);
-  return httpClient.get('/api/statics/userId/list', { params: { searchDeptNm } });
-};
-
-const getExcelHeader = category => {
-  // 엑셀에 출력할 Header 정보를 Mockup 데이터로 관리한다.
-  return new Promise(function(resolve, reject) {
-    let header = [];
-    switch (category) {
-      case 'TMPL':
-        header = tmplExcelHeader.header;
-        break;
-      case 'USER':
-        header = userExcelHeader.header;
-        break;
-      case 'CAMPAIGN':
-        header = campExcelHeader.header;
-        break; 
-      default:
-        header = prodExcelHeader.header;
-        break;
-    }
-    resolve(header);
-  });
-};
-
-export default {
-  selectStatics,
-  selectStaticsXls,
-  selectStaticsSummary,
-
-  selectTmpltlist,
-  selectTmpltXlslist,
-  selectTmpltSummary,
-
-  selectUserlist,
-  selectUserXlslist,
-  selectUserSummary,
-
-  selectCampXlslist,
-  selectCampSummary,
-
-  selectCodeProdList,
-  selectMsgbaseIdList,
-  selectDeptNmList,
-  selectUserIdList,
-
-  selectUserRoleInfo,
-  getExcelHeader
-};

frontend/src/modules/statics/service/mock/campExcelHeader.json

@@ -1,203 +0,0 @@
-{
-  "header": [
-    [
-      {
-        "key": "seq",
-        "name": "NO",
-        "rowspan": "2"
-      },
-      {
-        "key": "campaignId",
-        "name": "캠페인ID",
-        "rowspan": "2"
-      },
-      {
-        "key": "msgbaseName",
-        "name": "템플릿명",
-        "rowspan": "2"
-      },
-      {
-        "key": "msgbaseId",
-        "name": "템플릿아이디",
-        "rowspan": "2"
-      },
-      {
-        "key": "ymd",
-        "name": "날짜",
-        "rowspan": "2"
-      },
-      {
-        "key": "",
-        "name": "스타일 템플릿",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "서술 템플릿",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "기본 템플릿",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "템플릿 소계",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "RCS SMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "RCS LMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "RCS MMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "RCS 소계",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "Fallback SMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "Fallback LMS",
-        "colspan": "3"
-      }
-    ],
-    [
-      {
-        "key": "cellTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "cellTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "cellTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "descTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "descTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "descTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "freeTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "freeTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "freeTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "subSumTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "subSumTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "subSumTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "smsTot",
-        "name": "발송"
-      },
-      {
-        "key": "smsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "smsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "lmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "lmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "lmsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "mmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "mmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "mmsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "formatTot",
-        "name": "발송"
-      },
-      {
-        "key": "formatSucc",
-        "name": "성공"
-      },
-      {
-        "key": "formatRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "fbSmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "fbSmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "fbSmsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "fbLmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "fbLmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "fbLmsRate",
-        "name": "성공률(%)"
-      }
-    ]
-  ]
-}

frontend/src/modules/statics/service/mock/prodExcelHeader.json

@@ -1,188 +0,0 @@
-{
-  "header": [
-    [
-      {
-        "key": "seq",
-        "name": "NO",
-        "rowspan": "2"
-      },
-      {
-        "key": "ymd",
-        "name": "날짜",
-        "rowspan": "2"
-      },
-      {
-        "key": "",
-        "name": "스타일 템플릿",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "서술 템플릿",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "기본 템플릿",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "템플릿 소계",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "RCS SMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "RCS LMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "RCS MMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "포맷 소계",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "Fallback SMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "Fallback LMS",
-        "colspan": "3"
-      }
-    ],
-    [
-      {
-        "key": "cellTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "cellTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "cellTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "descTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "descTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "descTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "freeTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "freeTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "freeTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "subSumTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "subSumTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "subSumTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "smsTot",
-        "name": "발송"
-      },
-      {
-        "key": "smsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "smsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "lmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "lmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "lmsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "mmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "mmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "mmsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "formatTot",
-        "name": "발송"
-      },
-      {
-        "key": "formatSucc",
-        "name": "성공"
-      },
-      {
-        "key": "formatRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "fbSmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "fbSmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "fbSmsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "fbLmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "fbLmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "fbLmsRate",
-        "name": "성공률(%)"
-      }
-    ]
-  ]
-}

frontend/src/modules/statics/service/mock/tmplExcelHeader.json

@@ -1,84 +0,0 @@
-{
-  "header": [
-    [
-      {
-        "key": "seq",
-        "name": "NO",
-        "rowspan": "2"
-      },
-      {
-        "key": "msgbaseName",
-        "name": "템플릿명",
-        "rowspan": "2"
-      },
-      {
-        "key": "msgbaseId",
-        "name": "포맷ID",
-        "rowspan": "2"
-      },
-      {
-        "key": "ymd",
-        "name": "날짜",
-        "rowspan": "2"
-      },
-      {
-        "key": "productName",
-        "name": "상품명",
-        "rowspan": "2"
-      },
-      {
-        "key": "",
-        "name": "RCS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "Fallback SMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "Fallback LMS",
-        "colspan": "3"
-      }
-    ],
-    [
-      {
-        "key": "rcsCnt",
-        "name": "발송"
-      },
-      {
-        "key": "rcsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "rcsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "fbSmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "fbSmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "fbSmsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "fbLmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "fbLmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "fbLmsRate",
-        "name": "성공률(%)"
-      }
-    ]
-  ]
-}

frontend/src/modules/statics/service/mock/userExcelHeader.json

@@ -1,198 +0,0 @@
-{
-  "header": [
-    [
-      {
-        "key": "seq",
-        "name": "NO",
-        "rowspan": "2"
-      },
-      {
-        "key": "userId",
-        "name": "아이디",
-        "rowspan": "2"
-      },
-      {
-        "key": "deptNm",
-        "name": "부서명",
-        "rowspan": "2"
-      },
-      {
-        "key": "ymd",
-        "name": "날짜",
-        "rowspan": "2"
-      },
-      {
-        "key": "",
-        "name": "스타일 템플릿",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "서술 템플릿",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "기본 템플릿",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "템플릿 소계",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "RCS SMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "RCS LMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "RCS MMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "RCS 소계",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "Fallback SMS",
-        "colspan": "3"
-      },
-      {
-        "key": "",
-        "name": "Fallback LMS",
-        "colspan": "3"
-      }
-    ],
-    [
-      {
-        "key": "cellTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "cellTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "cellTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "descTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "descTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "descTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "freeTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "freeTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "freeTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "subSumTmpltTot",
-        "name": "발송"
-      },
-      {
-        "key": "subSumTmpltSucc",
-        "name": "성공"
-      },
-      {
-        "key": "subSumTmpltRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "smsTot",
-        "name": "발송"
-      },
-      {
-        "key": "smsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "smsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "lmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "lmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "lmsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "mmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "mmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "mmsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "formatTot",
-        "name": "발송"
-      },
-      {
-        "key": "formatSucc",
-        "name": "성공"
-      },
-      {
-        "key": "formatRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "fbSmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "fbSmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "fbSmsRate",
-        "name": "성공률(%)"
-      },
-      {
-        "key": "fbLmsTot",
-        "name": "발송"
-      },
-      {
-        "key": "fbLmsSucc",
-        "name": "성공"
-      },
-      {
-        "key": "fbLmsRate",
-        "name": "성공률(%)"
-      }
-    ]
-  ]
-}

frontend/src/modules/stats/views/BsnmDayList.vue

@@ -67,6 +67,7 @@
         </div>
 
       </div>
+      
       <div class="table calculate scroll">
         <custom-grid
 						ref="table"
@@ -105,13 +106,13 @@ export default {
       startDate: new Date(),
       endDate: new Date(),
 
-    	startDt:'',
+        startDt:'',
     	endDt:'',		
-		  startYear:'',
-		  startMonth:'',
-		  endYear:'',
-		  endMonth:'',
-		  row: {},
+		startYear:'',
+		startMonth:'',
+		endYear:'',
+		endMonth:'',
+		row: {},
     	list:[],
     	totalCnt: '',
 

frontend/src/modules/stats/views/BsnmMonthList.vue

@@ -153,7 +153,12 @@ export default {
         columns: [          
           { name: 'sumYm', header: '날짜', align: 'center'},
           { name: 'custNm', header: '고객사명', align: 'center'},
-          { name: 'bizrno', header: '사업자번호', align: 'center'},
+          { name: 'bizrno', header: '사업자번호', align: 'center'
+            ,formatter: props => {
+              let result = props.bizrno.substring(0,3)+'-'+ props.bizrno.substring(3,5)+'-'+ props.bizrno.substring(5,10)
+              return result;
+            }
+          },
           { name: 'sndCnt', header: '발송건수', align: 'center', cls: 'td_line',
             formatter: props =>{
               let result = props.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

frontend/src/modules/stats/views/MonthList.vue

@@ -17,10 +17,7 @@
 						<div class="input_box cal">
 							<label for="right" class="label txt">날짜</label>
 							<p> 최대 3개월까지 조회 가능합니다.</p>
-                            <div class="term">
-							                                
-<!--								<div class="group" style="width:500px;">-->
-								
+                            <div class="term">								
 								<span class="custom_input icon_date">
                   					<vuejs-datepicker
                       					:language="ko"
@@ -46,12 +43,9 @@
                   					></vuejs-datepicker>
                 				</span>
 
-								<button type="button" class="button grey" @click="search">조회</button>
-
-								</div>
-
-<!--							</div>-->
+							</div>
 						</div>
+						<button type="button" class="button grey" @click="search">조회</button>
 						<!--<button type="button" class="button grey">조회</button>-->
 					</div>
 				</form>
@@ -204,35 +198,6 @@ export default {
       //this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
       this.$router.push({ name: routeName, params: {} });
     },
-    
-		// disabledStDate(date) {
-		// 	date = moment(String(date)).format('YYYYMMDD');
-		// 	return date > moment().format('YYYYMMDD') || date < moment().add(-1, 'years').format('YYYYMMDD');
-		// },
-		// disabledEdDate(date) {
-		// 	date = moment(String(date)).format('YYYYMMDD')
-		// 	return date > moment().format('YYYYMMDD') || date < this.searchData.startDate ;
-		// },
-		// changeDate(type) {
-		// 	if (type === 'start') {
-		// 		if (this.endDate === null || this.startDate > this.endDate) {
-		// 			this.endDate = this.startDate;
-		// 		}
-		// 		if (moment(this.startDate).isBefore(moment(this.endDate).subtract(2, 'months').format('YYYYMMDD'))) {
-		// 			alert('검색 기간은 최대 3개월까지 선택 가능 합니다.');
-		// 			this.startDate = moment(this.endDate).subtract(2, 'months').format('YYYYMMDD');
-		// 		}
-		// 	} else if (type === 'end') {
-		// 		if (this.startDate === null || this.startDate > this.endDate) {
-		// 			this.startDate = this.endDate;
-		// 		}
-		// 		if (moment(this.endDate).isAfter(moment(this.startDate).add(2, 'months').format('YYYYMMDD'))) {
-		// 			alert('검색 기간은 최대 3개월까지 선택 가능 합니다.')
-		// 			this.endDate = moment(this.startDate).add(2, 'months').format('YYYYMMDD');
-		// 		}
-		// 	}
-		// },
-
 	setPeriodDay(day) {
       this.periodDay = day;
       this.endDate = new Date();