hubez-admin/frontend/src/modules/custMgt/components/CarryOverListPop.vue

<template>

  <div>
    <div class="dimmed modal25" onClick="ModalClose();"></div>

    <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>최근 1년 내역을 확인할 수 있습니다.</p>

        </div>
        <div class="button_group">
          <button class="btn-pcolor download" @click="excelDown();">엑셀 다운로드</button>
        </div>
      </div>
      <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.lmtYm }}</td>
          <td>{{ option.startAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
          <td>{{ option.useAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
          <td>{{ option.krrrAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
          <td>{{ option.extshAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}</td>
        </tr>
        <tr v-if="list.length === 0">
          <td colspan="5">검색 결과가 없습니다.</td>
        </tr>
        </tbody>
      </table>
      <div class="popup-btn1">

        <button class="btn-default" @click="carryOverListPopClose();">닫기</button>
      </div>
    </div>
          <common-modal ref="commmonModal"></common-modal>
  </div>
</template>

<script>
//import api from '@/service/api';
import custMgtApi from "../service/custMgtApi.js";
import xlsx from '@/common/excel';
import moment from 'moment';
import commonModal from "./commonModal";

export default {
  name: "carryOverListPop",
  data() {
    return {
      row: {},
      list: [],
      totalCnt: '',
      pageType: 'CARRY',
    }
  },
  components: {
    commonModal,
  },
  created() {
    this.getExcelHeader();
  },
  methods: {

    // 모달 띄우기
    async carryOverListPopOpen(serviceId) {
      this.row.serviceId = serviceId;
      try {
        const response = await custMgtApi.carryOverList(this.row);
        const result = response.data;
        if (result != null && result.retCode == "0000") {
          this.list = result.data.list;
          this.totalCnt = result.data.list.length;
        }
      } catch (err) {
        this.row.title = '청약고객관리';
        this.row.msg1 = '실패 하였습니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);
      }
      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) {
        this.row.title = '청약고객관리';
        this.row.msg1 = '조회된 데이터가 없습니다.';
        this.$refs.commmonModal.alertModalOpen(this.row);

        return false;
      }

      let today = moment().format('YYYYMMDDHHmmss');
      const saveFileName = `이월금액_${today}.xls`;

      let options = {
        header: this.excelHeader,
        dataOrder: 'header'
      };
      xlsx.export(this.list, saveFileName, options).then(() => {
      });
    },
    getExcelHeader() {
      // 헤더를 mockup으로 관리한다.
      custMgtApi.getExcelHeader(this.pageType).then(res => {
        this.excelHeader = res;
      });
    },
  }
}
</script>