발송통계 조회기간을 8-10월로 조회 했다가 다시 9월부터 11월까지 하려고 하면 달력에서 11월이 block 되는 현상 수정

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

@@ -1,5 +1,4 @@
 <template>
-
   <div class="contents">
     <div class="contents_wrap">
       <div class="top_wrap">
@@ -13,70 +12,76 @@
       <div class="search_wrap">
         <div class="input_box cal">
           <label for="right" class="label txt">조회기간</label>
-          <p> 최대 1개월까지 조회 가능합니다.</p>
+          <p>최대 1개월까지 조회 가능합니다.</p>
           <div class="term">
             <!--
               <input class="date" type="text" id="" placeholder="2022-10-12"/>
               ~
               <input class="" type="text" id="" placeholder="2022-10-12"/>
             -->
-            <div class="group" style="width:500px;">
-                <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 class="group" style="width: 500px">
               <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>
+                <vuejs-datepicker
+                  :language="ko"
+                  :format="customFormatter"
+                  :disabled-dates="disabledSDate"
+                  v-model="startDate"
+                  @selected="selectedStartDate"
+                  @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>
         <div class="input_box id">
           <label for="name" class="label">고객사명</label>
-          <input class="search-box" type="text" id="name" placeholder="검색어 입력" v-model.trim="grid.params.custNm">
+          <input class="search-box" type="text" id="name" placeholder="검색어 입력" v-model.trim="grid.params.custNm" />
         </div>
         <div class="input_box">
           <label for="name" class="label">사업자번호</label>
-          <input class="search-box" type="text" id="name" placeholder="검색어 입력" v-model.trim="grid.params.bizrno" @keypress="onlyNum"
-                 @input="onlyNum" maxlength="10">
+          <input
+            class="search-box"
+            type="text"
+            id="name"
+            placeholder="검색어 입력"
+            v-model.trim="grid.params.bizrno"
+            @keypress="onlyNum"
+            @input="onlyNum"
+            maxlength="10"
+          />
         </div>
         <button type="button" class="button grey" @click="search">조회</button>
       </div>
       <div class="info">
         <div class="count">집계결과</div>
         <div class="button_group">
-          <button type="button" class="button blue download" @click="excelDown();">엑셀 다운로드</button>
+          <button type="button" class="button blue download" @click="excelDown()">엑셀 다운로드</button>
         </div>
-
       </div>
 
       <div class="table calculate scroll">
         <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"
+          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>
       </div>
       <common-modal ref="commmonModal"></common-modal>
@@ -86,11 +91,11 @@
 
 <script>
 import moment from 'moment';
-import statsApi from "../service/statsApi.js";
+import statsApi from '../service/statsApi.js';
 import customGrid from '@/components/CustomGrid';
 import xlsx from '@/common/excel';
-import commonModal from "@/components/modal/commonModal";
-import {utils_mixin, chkPattern2} from '../service/mixins';
+import commonModal from '@/components/modal/commonModal';
+import { utils_mixin, chkPattern2 } from '../service/mixins';
 
 export default {
   name: 'bsnmDayList',
@@ -119,126 +124,169 @@ export default {
       // 테이블 리스트 데이터
       perPageCnt: 50,
       options: [
-        {text: '20', value: 20},
-        {text: '50', value: 50},
-        {text: '100', value: 100}
+        { text: '20', value: 20 },
+        { text: '50', value: 50 },
+        { text: '100', value: 100 },
       ],
       totalItems: 0,
       grid: {
         url: '/api/v1/bo/stats/bsnmDayList',
         pagePerRows: 20,
         pagination: true,
-        isCheckbox: false,        // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
+        isCheckbox: false, // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
         initialRequest: false,
         addCls: 'box_OFvis',
 
         header: [
           [
-            {header: '날짜', childNames: []},
-            {header: '고객사명', childNames: []},
-            {header: '사업자번호', childNames: []},
-            {header: '전체', childNames: ['sndCnt', 'succCntRt']},
-            {header: 'SMS', childNames: ['sndCntS', 'succCntRtS']},
-            {header: 'LMS', childNames: ['sndCntL', 'succCntRtL']},
-            {header: 'MMS', childNames: ['sndCntM', 'succCntRtM']},
-            {header: '알림톡', childNames: ['sndCntR', 'succCntRtR']},
-          ]
+            { header: '날짜', childNames: [] },
+            { header: '고객사명', childNames: [] },
+            { header: '사업자번호', childNames: [] },
+            { header: '전체', childNames: ['sndCnt', 'succCntRt'] },
+            { header: 'SMS', childNames: ['sndCntS', 'succCntRtS'] },
+            { header: 'LMS', childNames: ['sndCntL', 'succCntRtL'] },
+            { header: 'MMS', childNames: ['sndCntM', 'succCntRtM'] },
+            { header: '알림톡', childNames: ['sndCntR', 'succCntRtR'] },
+          ],
         ],
 
         columns: [
-          {name: 'sumYmd', header: '날짜', align: 'center'},
-          {name: 'custNm', header: '고객사명', align: 'center'},
-          {name: 'bizrno', header: '사업자번호', align: 'center'},
+          { name: 'sumYmd', header: '날짜', align: 'center' },
+          { name: 'custNm', header: '고객사명', align: 'center' },
+          { name: 'bizrno', header: '사업자번호', align: 'center' },
           {
-            name: 'sndCnt', header: '발송건수', align: 'center', cls: 'td_line',
-            formatter: props => {
+            name: 'sndCnt',
+            header: '발송건수',
+            align: 'center',
+            cls: 'td_line',
+            formatter: (props) => {
               let result = props.sndCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
               return result;
-            }
+            },
           },
           {
             name: 'succCntRt',
             header: '성공건수/(%)',
             align: 'center',
             cls: 'td_line',
-            formatter: props => {
-              return "<p>" + props.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRt + "%)</p>";
-            }
+            formatter: (props) => {
+              return (
+                '<p>' +
+                props.succCnt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
+                '</p>\n<p>(' +
+                props.succRt +
+                '%)</p>'
+              );
+            },
           },
           {
-            name: 'sndCntS', header: '발송건수', align: 'center', cls: 'td_line',
-            formatter: props => {
+            name: 'sndCntS',
+            header: '발송건수',
+            align: 'center',
+            cls: 'td_line',
+            formatter: (props) => {
               let result = props.sndCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
               return result;
-            }
+            },
           },
           {
             name: 'succCntRtS',
             header: '성공건수/(%)',
             align: 'center',
             cls: 'td_line',
-            formatter: props => {
-              return "<p>" + props.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtS + "%)</p>";
-            }
+            formatter: (props) => {
+              return (
+                '<p>' +
+                props.succCntS.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
+                '</p>\n<p>(' +
+                props.succRtS +
+                '%)</p>'
+              );
+            },
           },
           {
-            name: 'sndCntL', header: '발송건수', align: 'center', cls: 'td_line',
-            formatter: props => {
+            name: 'sndCntL',
+            header: '발송건수',
+            align: 'center',
+            cls: 'td_line',
+            formatter: (props) => {
               let result = props.sndCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
               return result;
-            }
+            },
           },
           {
             name: 'succCntRtL',
             header: '성공건수/(%)',
             align: 'center',
             cls: 'td_line',
-            formatter: props => {
-              return "<p>" + props.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtL + "%)</p>";
-            }
+            formatter: (props) => {
+              return (
+                '<p>' +
+                props.succCntL.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
+                '</p>\n<p>(' +
+                props.succRtL +
+                '%)</p>'
+              );
+            },
           },
           {
-            name: 'sndCntM', header: '발송건수', align: 'center', cls: 'td_line',
-            formatter: props => {
+            name: 'sndCntM',
+            header: '발송건수',
+            align: 'center',
+            cls: 'td_line',
+            formatter: (props) => {
               let result = props.sndCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
               return result;
-            }
+            },
           },
           {
             name: 'succCntRtM',
             header: '성공건수/(%)',
             align: 'center',
             cls: 'td_line',
-            formatter: props => {
-              return "<p>" + props.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtM + "%)</p>";
-            }
+            formatter: (props) => {
+              return (
+                '<p>' +
+                props.succCntM.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
+                '</p>\n<p>(' +
+                props.succRtM +
+                '%)</p>'
+              );
+            },
           },
           {
-            name: 'sndCntR', header: '발송건수', align: 'center', cls: 'td_line',
-            formatter: props => {
+            name: 'sndCntR',
+            header: '발송건수',
+            align: 'center',
+            cls: 'td_line',
+            formatter: (props) => {
               let result = props.sndCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
               return result;
-            }
+            },
           },
           {
             name: 'succCntRtR',
             header: '성공건수/(%)',
             align: 'center',
             cls: 'td_line',
-            formatter: props => {
-              return "<p>" + props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + "</p>\n<p>(" + props.succRtR + ")</p>";
-            }
+            formatter: (props) => {
+              return (
+                '<p>' +
+                props.succCntR.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
+                '</p>\n<p>(' +
+                props.succRtR +
+                ')</p>'
+              );
+            },
           },
         ],
         noDataStr: '검색 결과가 없습니다.',
         params: {
           startDay: '',
-          endDay: ''
+          endDay: '',
         },
-        excelHeader: []
-      }
-
-
+        excelHeader: [],
+      },
     };
   },
   components: {
@@ -253,7 +301,6 @@ export default {
   destroyed() {
     this.grid.params.custNm = '';
     this.grid.params.bizrno = '';
-
   },
   mounted() {
     let page = 1;
@@ -271,12 +318,11 @@ export default {
     this.search(isKeep);
   },
   beforeRouteLeave(to, from, next) {
-
     const getP = this.$refs.table.getPagination();
     this.$store.commit('searchcondition/updateSearchCondition', {
       page: getP._currentPage,
       perPage: this.perPageCnt,
-      params: this.grid.params
+      params: this.grid.params,
     });
     // 라우트 하기전 실행
     next();
@@ -287,21 +333,25 @@ export default {
         startDay: moment(this.startDate).format('YYYYMMDD'),
         endDay: moment(this.endDate).format('YYYYMMDD'),
         custNm: this.grid.params.custNm,
-        bizrno: this.grid.params.bizrno
+        bizrno: this.grid.params.bizrno,
       };
 
-      if (moment(this.grid.params.startDay).isBefore(moment(this.grid.params.endDay).subtract(1, 'months').format('YYYYMMDD'))) {
+      if (
+        moment(this.grid.params.startDay).isBefore(
+          moment(this.grid.params.endDay).subtract(1, 'months').format('YYYYMMDD')
+        )
+      ) {
         this.row.title = '발송통계';
         this.row.msg1 = '검색 기간은 최대 1개월까지 선택 가능 합니다.';
         this.$refs.commmonModal.alertModalOpen(this.row);
-        return false
+        return false;
       }
 
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
     toMove(routeName) {
-      this.$router.push({name: routeName, params: {page: 1, searchText: ''}});
+      this.$router.push({ name: routeName, params: { page: 1, searchText: '' } });
     },
     setPeriodDay(day) {
       this.periodDay = day;
@@ -318,7 +368,14 @@ export default {
       if (this.startDate > this.endDate) {
         this.startDate = this.endDate;
       }
-
+      const todayDate = new Date();
+      let selectDay = new Date(day);
+      let after30Day = new Date(selectDay.setDate(selectDay.getDate() + 30));
+      if (after30Day > todayDate) {
+        this.endDate = new Date();
+      } else {
+        this.endDate = after30Day;
+      }
     },
     selectedEndDate(day) {
       if (day != undefined && day != null) {
@@ -328,11 +385,22 @@ export default {
     closeDate(type) {
       if (type != undefined && type != null) {
         if (type == 'start') {
-          this.disabledSDate = {from: this.endDate};
-          this.disabledEDate = {to: this.startDate, from: this.endDate};
+          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()};
+          let stDate = new Date(this.startDate);
+          let fromDate = new Date(stDate.setMonth(stDate.getDay() + 30));
+          let endDate = this.endDate;
+          const nowDate = new Date();
+          let selectedEndDate = endDate.getDay() + 30;
+
+          if (Number(selectedEndDate) > Number(nowDate.getMonth())) {
+            this.disabledSDate = { from: new Date() };
+            this.disabledEDate = { to: this.startDate, from: new Date() };
+          } else {
+            this.disabledSDate = { from: new Date() };
+            this.disabledEDate = { to: this.startDate, from: fromDate };
+          }
         }
       }
     },
@@ -345,7 +413,8 @@ export default {
         return moment(date).format('YYYY-MM-DD');
       }
     },
-    changePerPage: function () { 	// 페이지당 조회할 개수
+    changePerPage: function () {
+      // 페이지당 조회할 개수
       this.grid.pagePerRows = this.perPageCnt;
       this.search(true);
     },
@@ -354,7 +423,7 @@ export default {
       this.$store.commit('searchcondition/updateSearchCondition', {
         page: getP._currentPage,
         perPage: this.perPageCnt,
-        params: this.grid.params
+        params: this.grid.params,
       });
 
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
@@ -375,10 +444,10 @@ export default {
         result.data.list = result.data.list.map((item) => {
           return {
             ...item,
-            custNm: this.fromHtmlEntities(item.custNm)
-          }
+            custNm: this.fromHtmlEntities(item.custNm),
+          };
         });
-        if (result != null && result.retCode == "0000") {
+        if (result != null && result.retCode == '0000') {
           return result.data;
         } else {
           return false;
@@ -401,14 +470,13 @@ export default {
       const data = await this.getExcelDataDown();
       let options = {
         header: this.excelHeader,
-        dataOrder: 'header'
+        dataOrder: 'header',
       };
-      xlsx.export(data.list, saveFileName, options).then(() => {
-      });
+      xlsx.export(data.list, saveFileName, options).then(() => {});
     },
     getExcelHeader() {
       // 헤더를 mockup으로 관리한다.
-      statsApi.getExcelHeader(this.pageType).then(res => {
+      statsApi.getExcelHeader(this.pageType).then((res) => {
         this.excelHeader = res;
       });
     },
@@ -417,6 +485,6 @@ export default {
         return String.fromCharCode(s.match(/\d+/gm)[0]);
       });
     },
-  }
+  },
 };
-</script>
+</script>