chrgModal 수정중

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

@@ -65,32 +65,37 @@
         </div>
         <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" >
-              <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{
-                  option.text
-                }}
-              </option>
-            </select>
+            <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="button_group">
+            <button type="button" class="button blue add" @click="insertChrg()">등록</button>
+            <button type="button" class="button white del" @click="deleteChrg()">삭제</button>
+          </div>
+        
         </div>
 
         <div class="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>
+          <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>
+        <insert-chrg-modal ref="insertChrgModal"></insert-chrg-modal>
       </div>
     </div>
 </template>
@@ -98,9 +103,30 @@
 
 <script>
 import customGrid from '@/components/CustomGrid';
-import api from '@/service/api.js';
 import moment from 'moment';
-import custMgtApi from '../service/custMgtApi.js';
+import InsertChrgModal from '../components/InsertChrgModal';
+
+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: 'chrgList',
@@ -143,8 +169,8 @@ export default {
           {name: 'no', header: 'No', align: 'center', width: 60},
           {name: 'custNm', header: '고객사명', align: 'center', width: 130},
           {name: 'userId', header: '고객명', align: 'center', width: 130},
-          {name: 'chrdDiv', header: '충전구분', align: 'center', width: 130},
-          {name: 'Date', header: '기간', align: 'center', width: 130},
+          {name: 'chrgDiv', header: '충전구분', align: 'center', width: 130},
+          {name: 'chrgDate', header: '기간', align: 'center', width: 130},
           {name: 'chrgAmt', header: '충전금액', align: 'center', width: 130},
         ],
         noDataStr: '검색 결과가 없습니다.',
@@ -160,35 +186,47 @@ export default {
   components: {
     customGrid: customGrid,
     vuejsDatepicker,
+    InsertChrgModal,
   },
   created() {
     this.setPeriodDay(0);
   },
   destroyed() {
-
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      page: 1,
+      perPage: 50,
+      params: {
+        searchType1: '',
+        searchText1: '',
+        startMonth: '',
+        endMonth: '',
+      },
+    });
   },
   mounted() {
 
     // 달력 세팅
-
     let page = 1;
+
     // 페이지 정보 및 검색 조건
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
 
     // store에 저장된 페이지 정보 및 검색 조건을 불러오기
     let isKeep = false;
-    /*
-    if (getCondition) {
-      this.grid.pagePerRows = getCondition.perPage;
-      this.grid.params = getCondition.params;
-      page = getCondition.page;
-      isKeep = true;
-    }
-    */
     this.grid.pagePerRows = 50;
     page = 1;
     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,
+    });
+    // 라우트 하기전 실행
+    next();
+  },
 
   methods: {
     toMove(routeName) {
@@ -203,6 +241,23 @@ export default {
       this.sendStoreData();
     },
 
+    changePerPage: function () {
+      // 페이지당 조회할 개수
+      this.grid.pagePerRows = this.perPageCnt;
+      this.search(true);
+    },
+
+    sendStoreData: function () {
+      const getP = this.$refs.table.getPagination();
+      this.$store.commit('searchcondition/updateSearchCondition', {
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
+        params: this.grid.params
+      });
+
+      const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+    },
+  
     //달력 셋팅
     setPeriodDay(day) {
       this.periodDay = day;
@@ -274,6 +329,10 @@ export default {
       initEndDate.setMonth(Number(moment(initEndDate).format('MM')) - 2);
       this.endDate = initEndDate;
     },
-}
+
+    insertChrg() {
+      this.$refs.insertChrgModal.insertChrgOpen();
+    }
+  }
 }
 </script>