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

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

@@ -17,8 +17,28 @@
 						<div class="group">
 						<div class="input_box cal">
 							<label for="right" class="label">조회기간</label>
-							<input class="" type="text" id="" v-model="grid.params.startDt"/>
-							<input class="" type="text" id="" v-model="grid.params.endDt"/>
+              <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>~
+                <span class="custom_input icon_date">
+                  <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      :disabled-dates="disabledEDate"
+                      v-model="endDate"
+                      @selected="selectedEndDate(0)"
+                      @closed="closeDate('end')"
+                  ></vuejs-datepicker>
+                </span>
+              </div>
 						</div>
 						<div class="select_box id">
 							<label for="right" class="label">상태</label>
@@ -93,7 +113,9 @@
 						:header="grid.headder"        
 					></custom-grid>
 				</div>
-        
+
+        <common-modal ref="commmonModal"></common-modal>
+
 			</div>
 		</div>
 </template>
@@ -104,6 +126,7 @@ import moment from 'moment';
 import api from '@/service/api.js';
 import custMgtApi from "../service/custMgtApi.js";
 import xlsx from '@/common/excel';
+import commonModal from "@/components/modal/commonModal";
 
 class CustomATagRenderer {
     constructor(props) {
@@ -132,13 +155,12 @@ export default {
   data() {
     return {
       // 달력 데이터      
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
       sDateDiv: 'day',
-      eDateDiv: 'year',      
-      startDate: null,
-      endDate: null,
-      disabledSDate: { from: new Date()},
-      disabledEDate: { to: new Date()},
-      
+      startDate: new Date(),
+      endDate: new Date(),
+
       statType: [],
       userType: [],
       row:{},
@@ -192,13 +214,16 @@ export default {
     };
   },  
   components: {
-    customGrid: customGrid
+    customGrid: customGrid,
+    commonModal,
+    vuejsDatepicker,
   },
   created(){            
     this.$store.commit("login/isLogin", true);
     this.$store.commit("login/isAuthChk", true);
     this.setCodeData();
     this.getExcelHeader();
+    this.setPeriodDay(0);
   },  
   destroyed() {
       
@@ -221,6 +246,18 @@ export default {
     }
     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.perPageCnt'+this.perPageCnt);
@@ -243,8 +280,8 @@ export default {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP._currentPage);
       this.$store.commit('searchcondition/updateSearchCondition', {
-        page: getP._currentPage,        
-        perPage: this.perPageCnt,        
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
         params: this.grid.params
       });
 
@@ -287,7 +324,9 @@ export default {
     }, // end of getExcelDataDown
     async excelDown() {
       if (this.$refs.table.getData().length <= 0) {
-        alert('조회된 데이터가 없습니다.');
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '조회된 데이터가 없습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
         return false;
       }
 
@@ -308,18 +347,52 @@ export default {
         this.excelHeader = res;
       });
     },
-  },
-  beforeRouteLeave(to, from, next) {
+    setPeriodDay(day) {
+      this.periodDay = day;
+      this.endDate = new Date();
+      this.startDate = moment(this.endDate)
+          .subtract(day, 'day')
+          .toDate();
 
-    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();
+      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');
+      }
+    },
   },
 };
 </script>