chrgModal 수정중

frontend/src/modules/custMgt/components/InsertChrgModal.vue

@@ -0,0 +1,262 @@
+<template>
+  <div>
+    <div class="dimmed insertChrgModal" @click="insertChrgClose()"></div>
+    <!-- 발신번호 등록 (타사업자)-->
+    <div class="popup insertChrgModal popup_form register w700">
+        <div class="pop-head">
+            <h3 class="pop-tit">충전금 등록</h3>
+        </div>
+        <table style="width: 100%">
+        <tbody>
+          <tr>
+            <th>유저 ID</th>
+            <td>
+              <div class="input_search">
+                <input class="search-box" type="text" placeholder="아이디 입력" disabled v-model="searchText1" />
+                <button type="button" class="button grey" @click="searchIdPop">조회</button>
+              </div>
+            </td>
+            
+          </tr>
+          <tr>
+            <th>충전월</th>
+            <td>
+                <div class="input_box cal">
+                    <div class="term">
+                        <span class="custom_input icon_date">
+                        <vuejs-datepicker
+                            :language="ko"
+                            :format="customFormatter"
+                            :disabled-dates="disabledSDate"
+                            :minimumView="sDateDiv"
+                            :maximumView="sDateDiv"
+                            v-model="startDate"
+                            @selected="selectedStartDate(0)"
+                            @closed="closeDate('start')"
+                            :picker-options="startDateOptions"
+                        ></vuejs-datepicker>
+                        </span>
+                    ~
+                    <span class="custom_input icon_date">
+                        <vuejs-datepicker
+                            :language="ko"
+                            :format="customFormatter"
+                            :disabled-dates="disabledEDate"
+                            :minimumView="sDateDiv"
+                            :maximumView="sDateDiv"
+                            v-model="endDate"
+                            @selected="selectedEndDate(0)"
+                            @closed="closeDate('end')"
+                            :picker-options="endDateOptions"
+                        ></vuejs-datepicker>
+                        </span>
+                    </div>
+                </div>
+            </td>
+          </tr>
+          <tr v-show="bizrAuthYn !== 'Y'">
+            <th>충전금액</th>
+            <td>
+              <div class="input_add">
+              <input
+                type="radio"
+                name="nmineeDivCd"
+                value="01"
+                id="popup_radio5"
+                v-model="nmineeDivCd"
+                @change="changeNmineDiv($event)"
+              />
+              <label for="popup_radio5"></label>
+              <input  
+                type="number" 
+                placeholder="소멸 충전 금액 입력" 
+                v-model="chrgAmt" 
+              />
+              <input
+                type="radio"
+                name="nmineeDivCd"
+                value="02"
+                id="popup_radio6"
+                v-model="nmineeDivCd"
+                @change="changeNmineDiv($event)"
+              />
+              <label for="popup_radio6"></label>
+              <input 
+                class="search-box" 
+                type="number"  
+                placeholder="이월 충전 금액 입력" 
+                disabled 
+                v-model="chrgAmt" 
+              />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+        </table>
+        <div class="popup-btn2">
+        <button class="btn-pcolor" @click="saveChrg">저장</button>
+        <button class="btn-default" @click="insertChrgClose()">취소</button>
+      </div>
+      <user-list-pop ref="userListPop" :send-data="childData" @event-data="setChildData" />
+    </div>
+  </div>
+</template>
+
+<script>
+import UserListPop from './UserListPop.vue';
+import moment from 'moment';
+export default {
+  name: 'insertChrgModal',
+
+  watch: {
+    nmineeDivCd() {},
+  },
+
+  data() {
+    return {
+      childData: 20,
+      searchText1: '',
+      ko: vdp_translation_ko.js,
+
+      // 달력 데이터
+      periodDay: 7, 
+      sDateDiv: 'month',
+      startDate: new Date(),
+      endDate: new Date(),
+      startDateOptions: {disabledDate: this.disabledStDate},
+      endDateOptions: {disabledDate: this.disabledEdDate},
+      startDt: '',
+      endDt: '',
+      startYear: '',
+      startMonth: '',
+      endYear: '',
+      endMonth: '',
+
+      bizrAuthYn: '',
+      nmineeDivCd: '01',
+      chrgAmt: ''
+
+    }
+  },
+   components: {
+    vuejsDatepicker,
+    UserListPop,
+  },
+  mounted(){
+    // 달력 세팅
+    let page = 1;
+  },
+  created() {
+    this.setPeriodDay(0);
+  },
+  methods: {
+     // 모달 띄우기
+    insertChrgOpen() {
+      var dimmed = document.getElementsByClassName('insertChrgModal');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'block';
+      }
+    },
+    // 모달 끄기
+    insertChrgClose() {
+      var dimmed = document.getElementsByClassName('insertChrgModal');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+    },
+    searchIdPop(){
+      this.$refs.userListPop.UserListPopOpen();
+    },
+    setChildData(data) {
+      this.adminId = data.adminId;
+      this.custNm = this.fromHtmlEntities(data.custNm);
+      this.bRegNo = data.bregNo;
+      this.bizrAuthYn = data.bizrAuthYn;
+      this.custSeq = data.custSeq;
+    },
+
+    search: function (isKeep) {
+      this.grid.params.startDt = moment(this.startDate).format('YYYYMM');
+      this.grid.params.endDt = moment(this.endDate).format('YYYYMM');
+      this.grid.params.searchType1 = this.searchType1;
+      this.$refs.table.search(this.grid.params, isKeep);
+      this.sendStoreData();
+    },
+
+    //달력 셋팅
+    setPeriodDay(day) {
+      this.periodDay = day;
+      this.endDate = new Date();     
+      this.initSetStartDate();
+      this.initSetEndDate();
+      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;
+      }      
+    },
+    selectedEndDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+    },
+    closeDate(type) {
+      if (type != undefined && type != null) {
+        let initStartDate = new Date();
+        let initEndDate = new Date();
+        initStartDate.setMonth(Number(moment(initStartDate).format('MM')) - 4)
+        initEndDate.setMonth(Number(moment(initEndDate).format('MM')) - 2)
+
+
+        if (type == 'start') {
+          this.disabledSDate = {to: initStartDate, from: new Date()};
+          if (this.startDate !== initStartDate) {
+            this.disabledEDate = {to: this.startDate, from: initEndDate};
+
+          }
+        } else if (type == 'end') {
+          this.disabledEDate = {to: initStartDate, from: initEndDate};
+          if (this.endDate !== initEndDate) {
+            this.disabledSDate = {from: this.endDate};
+            this.disabledSDate = {to: initStartDate, from: initEndDate};
+          }
+        }
+      }
+    },
+    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');
+      }
+    },
+    gridParamSet() {
+      this.grid.params = {
+        startMonth: moment(this.startDate).format('YYYYMM'),
+        endMonth: moment(this.endDate).format('YYYYMM'),
+      }
+  },
+  initSetStartDate() {
+      let initStartDate = new Date();
+      initStartDate.setMonth(Number(moment(initStartDate).format('MM')) - 4);
+      this.startDate = initStartDate;
+    },
+    initSetEndDate() {
+      let initEndDate = new Date();
+      initEndDate.setMonth(Number(moment(initEndDate).format('MM')) - 2);
+      this.endDate = initEndDate;
+    },
+    saveChrg(){
+
+    },
+  },
+};
+</script>

frontend/src/modules/custMgt/components/UserListPop.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <!-- 관리자ID 조회 -->
+    <div class="popup popup_form modal44 popup_inside">
+      <div class="pop-head">
+        <h3 class="pop-tit">사용자ID 조회</h3>
+      </div>
+      <div class="pop-cont-detail input_box">
+        <label>ID</label>
+        <div class="input_search">
+          <input class="search-box" type="text" value="" v-model="searchText1" maxlength="100">
+          <button type="button" class="button btn-p2color" @click="memberDetail">조회</button>
+        </div>
+      </div>
+        <table class="table-c">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>사업자등록번호</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="(item, idx) in list">
+              <td>{{ item.userId }}</td>
+              <td><a href="javascript:void(0)" @click="setUserInfo(item)">{{ item.bregNo }}</a></td>
+            </tr>
+          </tbody>
+        </table>
+      <div class="popup-btn2">
+        <button class="btn-default" @click="UserListPopClose();">닫기</button>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import custMgtApi from '../service/custMgtApi';
+export default {
+  name: "userListPop",
+  data(){
+      return {
+        row: {},
+        searchText1: '',
+        list:[],
+      }
+  },
+  components: {
+  },
+  props: ['sendData'],
+  created(){
+  },
+  mounted() {
+
+  },
+  methods : {
+    search: function(isKeep) {
+
+
+    },
+    setUserInfo: function(props){
+      this.$emit('event-data', props)
+      this.UserListPopClose();
+    },
+    // 모달 띄우기
+    UserListPopOpen(){
+      this.formReset();
+      var dimmed = document.getElementsByClassName('modal44');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'block';
+      }
+    },
+    // 모달 끄기
+    UserListPopClose(){
+      var dimmed = document.getElementsByClassName('modal44');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'none';
+      }
+    },
+
+    async memberDetail(){
+      try {
+        this.row.searchText1 = this.searchText1
+        if(this.row.searchText1 == ''){
+          return false;
+        }
+        const response = await custMgtApi.memberDetail(this.row);
+        const result = response.data;
+        if (result != null && result.retCode == "0000") {
+          this.list = result.data.list
+        }
+      } catch (error) { 
+        
+      }
+    },
+    formReset(){
+      Object.assign(this.$data, this.$options.data());
+    },
+  }
+}
+</script>

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

@@ -66,14 +66,18 @@
         <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
-                }}
+              <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 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">
@@ -91,6 +95,7 @@
               :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>