시스템관리 - 권한관리, 고객관리 - 청약고객관리/회원관리 추가

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

@@ -0,0 +1,129 @@
+<template>
+
+    <div>
+        <div class="dimmed modal25" onClick="ModalClose();"></div>
+		<div class="popup-wrap modal25">
+			<!-- 이월금액 상세내역 -->
+			<div class="popup modal25 popup_form price">
+				<div class="pop-head">
+					<h3 class="pop-tit">이월금액 상세내역</h3>
+				</div>
+				<div class="info">
+					<div class="count">총 <span>{{totalCnt}}</span>건
+					<p>최근 3개월 내역을 확인할 수 있습니다.</p>
+					</div>
+				</div>
+				<form autocomplete="off">
+					<table class="table-r">
+						<thead>
+							<tr>
+								<th>날짜</th>
+								<th>시작 금액</th>
+								<th>사용 금액</th>
+								<th>이월 금액</th>
+								<th>소멸 금액</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr v-for="(option, i) in list" v-bind:key="i">
+								<td>{{ option.date }}</td>
+								<td>{{ option.startAmount }}</td>
+								<td>{{ option.useAmount }}</td>
+								<td>{{ option.krrrAmount }}</td>
+								<td>{{ option.extshAmount }}</td>
+							</tr>
+						</tbody>
+					</table>
+				</form>
+				<div class="pop-btn2">
+					<button class="btn-default" @click="carryOverListPopClose();">닫기</button>
+					<button class="btn-pcolor download" @click="excelDown();">엑셀 다운로드</button>
+				</div>
+			</div>
+        </div>
+    </div>
+</template>
+
+<script>
+//import api from '@/service/api';
+import custMgtApi from "../service/custMgtApi.js";
+import xlsx from '@/common/excel';
+import moment from 'moment';
+
+export default {
+	name: "carryOverListPop",
+	data(){
+        return{
+			row: {},
+            list:[],
+            totalCnt: '',
+            pageType: 'CARRY',
+        }
+    },
+	created(){
+        this.getExcelHeader();
+    }, 
+	methods :{
+		
+		// 모달 띄우기
+		async carryOverListPopOpen(serviceId){
+            console.log(serviceId);
+			this.row.serviceId = serviceId;
+			try {
+				const response = await custMgtApi.carryOverList(this.row);
+				const result = response.data;
+				console.log(result);
+				if (result != null && result.retCode == "0000") {
+					this.list = result.data.list;
+                    this.totalCnt = result.data.totalCnt;
+				}
+			} catch(err) {
+				alert("실패 하였습니다.");
+			}
+			var dimmed = document.getElementsByClassName('modal25');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'block';
+			}
+		},
+		// 모달 끄기
+		carryOverListPopClose(){
+			var dimmed = document.getElementsByClassName('modal25');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';
+			}
+		},
+		toComplete(){
+			this.getParent('adminList').$refs.table.reloadData();
+			this.ModalClose();
+        },
+        excelDown() {
+            if (this.list.length <= 0) {
+                alert('조회된 데이터가 없습니다.');
+                return false;
+            }
+
+            let today = moment().format('YYYYMMDDHHmmss');
+            const saveFileName = `이월금액_${today}.xlsx`;
+
+            let options = {
+                header: this.excelHeader,
+                dataOrder: 'header'
+            };
+            // console.log(data);
+            xlsx.export(this.list, saveFileName, options).then(() => {});
+        },
+        getExcelHeader() {
+            // 헤더를 mockup으로 관리한다.
+            custMgtApi.getExcelHeader(this.pageType).then(res => {
+                this.excelHeader = res;
+            });
+        },
+	}
+}
+</script>
+
+<style>
+    .popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
+    .popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
+    .popup-btn-wrap button:hover {background: #000; color: #fff;}
+</style>