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

frontend/src/modules/custMgt/views/MemberList.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>
@@ -87,6 +107,7 @@
 				</div>
 
         <testId-reg-pop ref="testIdRegPop"> </testId-reg-pop>
+        <common-modal ref="commmonModal"></common-modal>
 
 			</div>
 		</div>
@@ -98,6 +119,7 @@ import customGrid from '@/components/CustomGrid';
 import TestIdRegPop from '../components/TestIdRegPop';
 import moment from 'moment';
 import api from '@/service/api.js';
+import commonModal from "@/components/modal/commonModal";
 
 class CustomATagRenderer {
     constructor(props) {
@@ -126,12 +148,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: [],
 
@@ -184,11 +206,14 @@ export default {
   components: {
     customGrid: customGrid, 
     TestIdRegPop,
+    commonModal,
+    vuejsDatepicker,
   },
   created(){            
     this.$store.commit("login/isLogin", true);
     this.$store.commit("login/isAuthChk", true);
-    this.setCodeData();   	
+    this.setCodeData();
+    this.setPeriodDay(0);
   },  
   destroyed() {
     this.$store.commit('searchcondition/updateSearchCondition', {
@@ -274,6 +299,52 @@ export default {
         this.userType = response.data.data.list;
       });
     },
+    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');
+      }
+    },
   },
   beforeRouteLeave(to, from, next) {