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

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

@@ -4,17 +4,29 @@
 
       <div class="contents_wrap">
         <div class="top_wrap">
-          <h3 class="title">차단내역</h3>
+          <h3 class="title">웹발송 차단내역</h3>
           <p class="breadcrumb">리스크관리 &gt; 차단 내역</p>
         </div>
         <form autocomplete="off" class="search_form">
           <div class="search_wrap">
+          <label for="right" class="label">발송일</label>
 						<div class="group">
 							<div class="input_box cal one">
-								<label for="right" class="label">발송일</label>
-								<input class="" type="text" id="" placeholder="2022-10-12">
-							</div>
-							<button type="button" class="button grey btn-a">오늘</button>
+                <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      v-model="startDate"
+                      @selected="selectedStartDate(0)"
+                  ></vuejs-datepicker>
+								<!-- <input class="" type="text" id=""
+                 placeholder="2022-10-12"
+                  v-model="grid.params.startDt"
+                   @click="openStartPicker = true" />
+                <div v-show="openStartPicker === true">
+                <calendar ref="calendar"/> -->
+                <!-- </div> -->
+              </div>
+							<button type="button" class="button grey btn-a" @click="todayDate">오늘</button>
 							<div class="select_box id">
 									<label for="right" class="label">차단사유</label>
 									<select name="" id="" v-model="grid.params.blckRsnCd">
@@ -40,11 +52,11 @@
 						<div class="group">
 							<div class="input_box">
 								<label for="right" class="label">발신번호</label>
-								<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.sndrno">
+								<input class="search-box" type="number" id="search" placeholder="검색어 입력" v-model="grid.params.sndrno">
 							</div>
 							<div class="input_box">
 								<label for="right" class="label">수신번호</label>
-								<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.rcvno">
+								<input class="search-box" type="number" id="search" placeholder="검색어 입력" v-model="grid.params.rcvno">
 							</div>
 							<div class="select_box">
 								<label for="right" class="label">상세검색</label>
@@ -88,22 +100,23 @@
           </custom-grid>
 				</div>
       </div>
-
+<common-modal ref="commmonModal"></common-modal>
     </div>
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
+import moment from 'moment';
+import commonModal from "@/components/modal/commonModal";
+
 //import api from '../service/api';
-class customBRegNo {
+class CustomATagRenderer {
     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)
-        }
+        const el = document.createElement('a');
+        el.href = 'javascript:void(0);';
+        el.className = 'btn_text';
+        el.innerText= String(props.colValue)
         this.el = el;
     }
 
@@ -112,6 +125,10 @@ class customBRegNo {
     }
 
     addEvent(selEl) {
+        selEl.addEventListener("click", () => {
+            const { callback } = this.props["cgrido" + this.props.colName].options;
+            callback(this.props);
+        });
     }
 }
 export default {
@@ -119,6 +136,16 @@ export default {
   data() {
     return {
       totalItems: 0,
+      // 달력 데이터      
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
+      sDateDiv: 'day',
+      startDate: new Date(),
+      endDate: new Date(),     
+
+      statType: [],
+      userType: [],
+      row:{},
       grid: {
         url: '/api/v1/bo/riskMgt/web/intrcpList',
         perPage: 20,
@@ -143,10 +170,15 @@ export default {
         columns: [          
           { name: 'no', header: 'NO', align: 'center', width: 60 },
           { name: 'blckTpCd', header: '차단구분', align: 'center', width: 160 },
-          { name: 'userId', header: '발송ID', align: 'center', width: 100, renderer: {type: customBRegNo}},
+          { name: 'userId', header: '발송ID', align: 'center', width: 100},
           { name: 'sndrno', header: '발신번호', align: 'center', width: 130},
-          { name: 'custNm', header: '고객사명', align: 'center', width: 130},
-          { name: 'bizrno', header: '사업자번호', align: 'center', width: 90, renderer: {type: customBRegNo} },
+          { name: 'custNm', header: '고객사명', align: 'center', width: 130, renderer: {
+            type: CustomATagRenderer
+            , options: {
+              callback: this.custDetail,
+            }
+          }},
+          { name: 'bizrno', header: '사업자번호', align: 'center', width: 90},
           { name: 'rcvno', header: '수신번호', align: 'center', width: 90 },
           { name: 'blckRsnCd', header: '차단사유', align: 'center', width: 90 },
           { name: 'blckDt', header: '발송일자', align: 'center', width: 90 },
@@ -160,14 +192,17 @@ export default {
           sndrno: '',
           rcvno: '',
           searchType1: '',
-          searchText1: ''
+          searchText1: '',
+          startDt: new Date(+new Date() + 3240 * 10000).toISOString().split("T")[0],
         },
         excelHeader: []
       }    
     };
   },  
   components: {
-    customGrid: customGrid
+    customGrid: customGrid,
+    commonModal,
+    vuejsDatepicker,
   },
   destroyed() {
       this.$store.commit('searchcondition/updateSearchCondition', {
@@ -188,6 +223,7 @@ export default {
     this.$store.commit("login/isLogin", true);
     this.$store.commit("login/isAuthChk", true);
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+    this.setPeriodDay(0);
   },
   mounted() {
     let page = 1;
@@ -214,19 +250,81 @@ export default {
       this.$store.commit('searchcondition/updateSearchCondition', {
         page: getP._currentPage,        
 		    perPage: this.perPageCnt,        
-        params: {
-          blckDt: '',
-          blckRsnCd: '',
-          blckTpCd: '',
-          sndrno: '',
-          rcvno: '',
-          searchType1: '',
-          searchText1: ''
-		    }
+        params: this.grid.params
       });
 
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
       //console.log("getCondition : "+ getCondition.perPage);
+    },
+    setPeriodDay(day) {
+      this.periodDay = day;
+      this.endDate = new Date();
+      this.startDate = moment(this.endDate)
+          .subtract(day, 'day')
+          .toDate();
+
+      this.closeDate('start');
+    },
+    selectedStartDate(day) {      
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }     
+      console.log(this.startDate);
+    },
+    selectedEndDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+    },
+    closeDate(type) {
+      if (type != undefined && type != null) {
+         
+      }
+      console.log(this.startDate);
+    },
+    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');
+      }
+    },
+    //회원 상세페이지로 이동
+    custDetail(props) {
+      this.row.custNm = props.serviceId;
+      this.$router.push({ name: 'subsDetail', params: this.row });
+    },
+    calendarCalbackFnc(year, month, day){
+
+      if(this.openStartPicker){
+        this.startDate= year +''+ month +''+ day
+        if(Number(this.endDate) < Number(this.startDate) && this.endDate !== 0){
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '조회 시작일이 종료일보다 큽니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+          this.openStartPicker = false
+          return false
+        }
+        this.grid.params.startDt = year + '-' + month + '-' + day
+        this.openStartPicker = false
+      }
+      if(this.openEndPicker){
+        this.endDate=year +''+ month +''+ day
+        if(Number(this.endDate) < Number(this.startDate) && this.startDate !== 0){
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '조회 종료일이 시작일보다 작습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+          this.openEndPicker = false
+          return false
+        }
+        this.grid.params.endDt = year + '-' + month + '-' + day
+        this.openEndPicker = false
+      }
+    },
+    todayDate() {
+      this.startDate = new Date(+new Date() + 3240 * 10000).toISOString().split("T")[0];
     }
   },
   beforeRouteLeave(to, from, next) {