admin_chrg 수정,삭제부분

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

@@ -0,0 +1,330 @@
+<template>  
+
+	<div>
+<!--	s: 팝업	-->
+		<div class="dimmed modal53"></div>
+		<div class="popup-wrap modal53">
+
+		<!-- 발신번호 차단 수정 -->
+			<div class="popup modal53 popup_form w700">
+				<div class="pop-head">
+					<h3 class="pop-tit">충전금 수정</h3>
+				</div>
+				<form autocomplete="off">
+					<table style="width: 100%">
+						<tbody>
+							<tr>
+								<th>유저 ID</th>
+								<td>
+									<input type="text" placeholder="아이디 입력" v-model.trim="userId" disabled/>
+								</td>
+								
+							</tr>
+							<tr>
+								<th>충전월</th>
+								<td>
+									<div class="input_box cal" style="width:60%">
+										<div class="term">
+											<span class="custom_input icon_date">
+											<vuejs-datepicker
+												:language="ko"
+												:format="customFormatter"
+												:disabled-dates="disabledSDate"
+												:minimumView="sDateDiv"
+												:maximumView="sDateDiv"
+												v-model.trim="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.trim="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.trim="chrgAmtE" 
+								/>
+								<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.trim="chrgAmtC" 
+								/>
+								</div>
+								</td>
+							</tr>
+						</tbody>
+        			</table>
+				</form>
+				<div class="popup-btn2 pop-btn3">
+					<button class="btn-pcolor" @click="ChrgUpdate()">수정</button>
+					<button class="btn-default" @click="ChrgDetailClose()">취소</button>
+					<button class="btn-p2color" @click="ChrgDelete()">삭제</button>
+				</div>
+			</div>
+			<validation-confirm-pop ref="ValidationConfirmPop"/>
+
+		</div>
+	</div>
+	
+</template>
+
+<script>
+import custMgtApi from '../service/custMgtApi';
+import moment from 'moment';
+import ValidationConfirmPop from './ValidationConfirmPop.vue';
+
+export default {
+	data(){
+        return{
+		  ko: vdp_translation_ko.js,
+		  row: {},
+
+		  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',
+		  chrgAmtE: '',
+		  chrgAmtC: '',
+
+		  userId: '',
+		  custNm: '',
+		  bRegNo: '',
+		  bizrAuthYn : '',
+		  custSeq : '',
+		  chrgSeq : '',
+		  useYn: '',
+        }
+    },
+	components: {
+		vuejsDatepicker,
+		ValidationConfirmPop,
+	},
+	created(){
+		this.setPeriodDay(0);
+	},
+	methods :{
+		// 모달 띄우기
+		async ChrgDetailModalOpen(props){
+			this.row.chrgSeq = props.chrgSeq;
+			try {
+				const response = await custMgtApi.chrgDetail(this.row);
+				const result = response.data;
+				if (result != null && result.retCode == "0000") {
+					this.userId = result.data.userId;
+					this.custNm = result.data.custNm;
+					let sym =result.data.strtYm.slice(0,4)+"-"+result.data.strtYm.slice(4,6)
+					this.startDate = sym;
+					let eym =result.data.endYm.slice(0,4)+"-"+result.data.endYm.slice(4,6)
+					this.endDate = eym;
+					this.chrgAmtE = result.data.chrgAmt;
+					this.chrgSeq = result.data.chrgSeq;
+					this.useYn = result.data.useYn;
+				}
+			} catch (error) {
+			}
+			var dimmed = document.getElementsByClassName('modal53');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'block';
+			}
+		},
+
+	   ChrgDetailClose(){
+			console.log("1")
+			var dimmed = document.getElementsByClassName('modal53');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';
+			}
+		},
+		//삭제버튼
+		async ChrgDeleteModal(){
+			try {
+				const response = await custMgtApi.deleteChrg(this.row);
+				const result = response.data;
+				if (result != null && result.retCode == "0000") {
+				this.row.title = '충전금';
+         	 	this.row.msg1 = '삭제하였습니다.';
+           		this.$parent.alertInsert(this.row);
+				this.toComplete();
+				}
+			} catch(err) {
+				}
+    	},
+		//수정버튼
+		async ChrgUpdateModal(){
+			try {
+				const response = await custMgtApi.updateChrg(this.row);
+				const result = response.data
+				if (result != null && result.retCode == "0000"){
+					this.row.title = '충전금';
+					this.row.msg1 = '수정 하였습니다.';
+					this.$parent.alertInsert(this.row);
+					this.toComplete();
+				}
+			} catch(err) {
+				}
+			
+    	},
+
+		doValidate(){
+			this.row.useYn=this.useYn
+			this.row.userId =this.userId;
+			this.row.custNm = this.custNm;
+			this.row.strtYm = this.startDate;
+			this.row.endYm = this.endDate;
+			this.row.chrgAmt = this.chrgAmtE;
+			this.row.chrgSeq = this.chrgSeq;
+
+			return true;
+		},
+		ChrgUpdate(){
+			if (this.doValidate()) {
+				this.$refs.ValidationConfirmPop.chrgconfirmUpdateOpen();
+			}
+		},
+		ChrgDelete(){
+			if(this.doValidate()){
+				this.$refs.ValidationConfirmPop.chrgconfirmDeleteOpen();
+			}
+		},
+
+		toComplete(){
+			console.log("8")
+			this.$parent.$refs.table.reloadData();
+			this.ChrgDetailClose();
+		},
+
+		// 모달 끄기
+		ModalClose(){
+			var dimmed = document.getElementsByClassName('dimmed');
+			dimmed[0].style.display = 'none';
+			var wrap = document.getElementsByClassName('popup-wrap');
+			wrap[0].style.display = 'none';
+			var popup = document.getElementsByClassName('modal53');
+			popup[0].style.display = 'none';
+		},
+
+		//달력 셋팅
+		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')) )
+				initEndDate.setMonth(Number(moment(initEndDate).format('MM')) +12)
+
+				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')) );
+			this.startDate = initStartDate;
+		},
+		initSetEndDate() {
+			let initEndDate = new Date();
+			initEndDate.setMonth(Number(moment(initEndDate).format('MM')) +12);
+			this.endDate = initEndDate;
+		},
+	}
+}
+</script>

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

@@ -144,6 +144,7 @@ export default {
       bRegNo: '',
       bizrAuthYn : '',
       custSeq : '',
+      chrgSeq : '',
 
     }
   },
@@ -219,8 +220,8 @@ export default {
       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)
+        initStartDate.setMonth(Number(moment(initStartDate).format('MM')) )
+        initEndDate.setMonth(Number(moment(initEndDate).format('MM')) + 12)
 
 
         if (type == 'start') {
@@ -255,32 +256,21 @@ export default {
   },
   initSetStartDate() {
       let initStartDate = new Date();
-      initStartDate.setMonth(Number(moment(initStartDate).format('MM')) - 4);
+      initStartDate.setMonth(Number(moment(initStartDate).format('MM')));
       this.startDate = initStartDate;
     },
     initSetEndDate() {
       let initEndDate = new Date();
-      initEndDate.setMonth(Number(moment(initEndDate).format('MM')) - 2);
+      initEndDate.setMonth(Number(moment(initEndDate).format('MM')) +12);
       this.endDate = initEndDate;
     },
     saveChrg(){
-      // this.saveChrg = [];
-      // this.saveChrg.push({
-      //   userId: this.userId,
-      //   strtYm: this.strtYm,
-      //   endYm: this.endDate,
-      //   chrgAmt: this.chrgAmt,
-      // })
-
-      // let startDate2 = this.startDate.toString()
-
       console.log("this.userId: ", this.userId)
       console.log("this.startDate: ", this.startDate)
       console.log("this.endDate: ", this.endDate)
       console.log("this.chrgAmtE: ", this.chrgAmtE)
       
-      // startDate2 = startDate2.replace(/{{/g, '')
-      // console.log("chstartDate",chstartDate)
+
       let param = {
         userId : this.userId,
         strtYm : this.startDate, 
@@ -295,7 +285,7 @@ export default {
           if (result.success) {
             alert("충전금이 등록되었습니다.");
           } else {
-            alert("오류가 발생하였습니다");
+            // alert("오류가 발생하였습니다");
           }
         })
     },

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

@@ -161,6 +161,41 @@
       </div>
     </div>
 
+    <!-- 충전금 상세 - 수정 -->
+    <div class="dimmed chrgconfirm-update" @click="chrgconfirmUpdateClose();"></div>
+    <div class="popup-wrap chrgconfirm-update">
+      <div class="popup chrgconfirm-update">
+        <div class="pop-head">
+          <h3 class="pop-tit">충전금 상세</h3>
+        </div>
+        <div class="pop-cont">
+          <p>작성된 내용으로 수정하겠습니까?</p>
+        </div>
+        <div class="popup-btn2">
+          <button class="btn-pcolor" @click="chrgconfirmUpdate();">확인</button>
+          <button class="btn-default" @click="chrgconfirmUpdateClose();">취소</button>
+        </div>
+      </div>
+    </div>
+
+     <!-- 충전금 상세 삭제-->
+    <div class="dimmed chrgconfirm-delete" @click="chrgconfirmDeleteClose();"></div>
+    <div class="popup-wrap chrgconfirm-delete">
+      <div class="popup chrgconfirm-delete">
+        <div class="pop-head">
+          <h3 class="pop-tit">충전금 상세</h3>
+        </div>
+        <div class="pop-cont">
+          <p>해당 충전금을 리스트에서</p>
+          <p>삭제하시겠습니까?</p>
+        </div>
+        <div class="popup-btn2">
+          <button class="btn-pcolor" @click="chrgconfirmDelete();">확인</button>
+          <button class="btn-default" @click="chrgconfirmDeleteClose();">취소</button>
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -407,6 +442,59 @@ export default {
       // 부모 함수 호출.
       this.$parent.confirmCalbackFnc(this.row);
     },
+
+    //충전금 수정 확인 Open
+    chrgconfirmUpdateOpen() {
+      var dimmed = document.getElementsByClassName('chrgconfirm-update');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'block';
+      }
+
+    },
+    //충전금 수정 확인
+    chrgconfirmUpdate() {
+      var dimmed = document.getElementsByClassName('chrgconfirm-update');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+      console.log("3")
+      this.$parent.ChrgUpdateModal();
+
+    },
+    // 충전금 수정 Close
+    chrgconfirmUpdateClose() {
+      var dimmed = document.getElementsByClassName('chrgconfirm-update');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+
+    },
+
+    // 충전금 삭제 Open
+    chrgconfirmDeleteOpen() {
+      var dimmed = document.getElementsByClassName('chrgconfirm-delete');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'block';
+      }
+    },
+    //충전금 삭제
+    chrgconfirmDelete() {
+      var dimmed = document.getElementsByClassName('chrgconfirm-delete');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+      this.$parent.ChrgDeleteModal();
+    },
+    //충전금 삭제 Close
+    chrgconfirmDeleteClose() {
+      var dimmed = document.getElementsByClassName('chrgconfirm-delete');
+      for (var i = 0; i < dimmed.length; i++) {
+        dimmed[i].style.display = 'none';
+      }
+
+    },
+
+
   }
 }
 </script>

frontend/src/modules/custMgt/service/custMgtApi.js

@@ -93,11 +93,21 @@ const insertChrg = (params) => {
     return httpClient.post('/api/v1/bo/custMgt/insertChrg', params);
 }
 
+// 충전금 생성
+const chrgDetail = (params) => {
+    return httpClient.post('/api/v1/bo/custMgt/chrgDetail', params);
+}
+
 // 충전금 수정
 const updateChrg = (params) => {
     return httpClient.post('/api/v1/bo/custMgt/updateChrg', params);
 }
 
+// 충전금 삭제
+const deleteChrg = (params) => {
+    return httpClient.post('/api/v1/bo/custMgt/deleteChrg', params);
+}
+
 const getExcelHeader = category => {
     // 엑셀에 출력할 Header 정보를 Mockup 데이터로 관리한다.
     return new Promise(function(resolve, reject) {
@@ -141,4 +151,6 @@ export default {
     chrgList,
     insertChrg,
     updateChrg,
+    chrgDetail,
+    deleteChrg,
 }

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

@@ -97,6 +97,7 @@
         </div>
         <insert-chrg-modal ref="insertChrgModal"></insert-chrg-modal>
         <chrg-detail-pop ref="chrgDetailPop" />
+        <common-modal ref="commonModal" />
       </div>
     </div>
 </template>
@@ -107,6 +108,7 @@ import customGrid from '@/components/CustomGrid';
 import moment from 'moment';
 import InsertChrgModal from '../components/InsertChrgModal';
 import chrgDetailPop from '../components/ChrgDetailPop.vue';
+import commonModal from "@/components/modal/commonModal";
 
 class CustomATagRenderer {
   constructor(props) {
@@ -149,7 +151,10 @@ export default {
       endYear: '',
       endMonth: '',
 
+
       searchType1: '01',
+      chrgSeq : '',
+      useYn: '',
 
       // 테이블 리스트 데이터
       perPageCnt: 50,
@@ -168,6 +173,7 @@ export default {
         addCls: 'box_OFvis',
 
         columns:[
+          {name: 'chrgSeq', header: 'chrgSeq', align: 'center', width: 60},
           {name: 'no', header: 'No', align: 'center', width: 60},
           {
             name: 'custNm', header: '고객사명', align: 'center', width: 130,
@@ -193,6 +199,7 @@ export default {
     vuejsDatepicker,
     InsertChrgModal,
     chrgDetailPop,
+    commonModal,
   },
   created() {
     this.setPeriodDay(0);
@@ -342,7 +349,11 @@ export default {
 
     insertChrg () {
       this.$refs.insertChrgModal.insertChrgOpen();
-    }
+    },
+
+    alertInsert(props) {
+      this.$refs.commonModal.alertModalOpen(props);
+    },
   }
 }
 </script>