sodalive-vuejs-admin/src/views/Calculate/CalculateChannelDonation.vue

<template>
  <div>
    <v-toolbar dark>
      <v-spacer />
      <v-toolbar-title>채널 후원 정산</v-toolbar-title>
      <v-spacer />
    </v-toolbar>

    <br>

    <v-container>
      <v-row>
        <v-col cols="2">
          <datetime
            v-model="start_date"
            class="datepicker"
            format="YYYY-MM-DD"
          />
        </v-col>

        <v-col cols="1">
          ~
        </v-col>

        <v-col cols="2">
          <datetime
            v-model="end_date"
            class="datepicker"
            format="YYYY-MM-DD"
          />
        </v-col>

        <v-col cols="1" />

        <v-col cols="2">
          <v-btn
            block
            color="#3bb9f1"
            dark
            depressed
            @click="getCalculateChannelDonationByDate"
          >
            조회
          </v-btn>
        </v-col>

        <v-spacer />

        <v-col cols="2">
          <v-btn
            block
            color="#3bb9f1"
            dark
            depressed
            @click="downloadExcel"
          >
            엑셀 다운로드
          </v-btn>
        </v-col>
      </v-row>

      <v-row>
        <v-col>
          <v-data-table
            :headers="headers"
            :items="items"
            :loading="is_loading"
            :items-per-page="-1"
            class="elevation-1"
            hide-default-footer
          >
            <template slot="body.prepend">
              <tr v-if="total">
                <td colspan="2">
                  합계
                </td>
                <td class="text-center">
                  {{ total.count.toLocaleString() }} 건
                </td>
                <td class="text-center">
                  {{ total.totalCan.toLocaleString() }} 캔
                </td>
                <td class="text-center">
                  {{ total.krw.toLocaleString() }} 원
                </td>
                <td class="text-center">
                  {{ total.fee.toLocaleString() }} 원
                </td>
                <td class="text-center">
                  {{ total.settlementAmount.toLocaleString() }} 원
                </td>
                <td class="text-center">
                  {{ total.withholdingTax.toLocaleString() }} 원
                </td>
                <td class="text-center">
                  {{ total.depositAmount.toLocaleString() }} 원
                </td>
              </tr>
            </template>

            <template v-slot:item.date="{ item }">
              {{ item.date }}
            </template>

            <template v-slot:item.creator="{ item }">
              {{ item.creator }}
            </template>

            <template v-slot:item.count="{ item }">
              {{ item.count.toLocaleString() }} 건
            </template>

            <template v-slot:item.totalCan="{ item }">
              {{ item.totalCan.toLocaleString() }} 캔
            </template>

            <template v-slot:item.krw="{ item }">
              {{ item.krw.toLocaleString() }} 원
            </template>

            <template v-slot:item.fee="{ item }">
              {{ item.fee.toLocaleString() }} 원
            </template>

            <template v-slot:item.settlementAmount="{ item }">
              {{ item.settlementAmount.toLocaleString() }} 원
            </template>

            <template v-slot:item.withholdingTax="{ item }">
              {{ item.withholdingTax.toLocaleString() }} 원
            </template>

            <template v-slot:item.depositAmount="{ item }">
              {{ item.depositAmount.toLocaleString() }} 원
            </template>
          </v-data-table>
        </v-col>
      </v-row>

      <v-row>
        <v-col>
          <v-pagination
            v-model="page"
            :length="total_page"
            :total-visible="7"
            @input="next"
          />
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import * as api from '@/api/calculate'
import datetime from 'vuejs-datetimepicker'

export default {
  name: 'CalculateChannelDonation',
  components: {
    datetime
  },
  data() {
    return {
      start_date: '',
      end_date: '',
      is_loading: false,
      items: [],
      total: null,
      page: 1,
      page_size: 20,
      total_page: 1,
      headers: [
        { text: '날짜', align: 'center', sortable: false, value: 'date' },
        { text: '크리에이터', align: 'center', sortable: false, value: 'creator' },
        { text: '건수', align: 'center', sortable: false, value: 'count' },
        { text: '캔', align: 'center', sortable: false, value: 'totalCan' },
        { text: '원화', align: 'center', sortable: false, value: 'krw' },
        { text: '수수료(6.6%)', align: 'center', sortable: false, value: 'fee' },
        { text: '정산금액', align: 'center', sortable: false, value: 'settlementAmount' },
        { text: '원천세(3.3%)', align: 'center', sortable: false, value: 'withholdingTax' },
        { text: '입금액', align: 'center', sortable: false, value: 'depositAmount' }
      ]
    }
  },

  async created() {
    const date = new Date()
    const firstDate = new Date(date.getFullYear(), date.getMonth(), 1)
    const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0)

    this.start_date = this.formatDate(firstDate)
    this.end_date = this.formatDate(lastDate)

    await this.getCalculateChannelDonationByDate()
  },

  methods: {
    formatDate(date) {
      const year = date.getFullYear()
      const month = ('0' + (date.getMonth() + 1)).slice(-2)
      const day = ('0' + date.getDate()).slice(-2)
      return `${year}-${month}-${day}`
    },

    notifyError(message) {
      this.$dialog.notify.error(message)
    },

    async next() {
      await this.getCalculateChannelDonationByDate()
    },

    async getCalculateChannelDonationByDate() {
      this.is_loading = true
      try {
        const res = await api.getCalculateChannelDonationByDate(
          this.start_date.substring(0, 10),
          this.end_date.substring(0, 10),
          this.page,
          this.page_size
        )

        if (res.status === 200 && res.data.success === true) {
          const data = res.data.data
          this.items = data.items
          this.total = data.total
          this.total_page = Math.ceil(data.totalCount / this.page_size) || 1
        } else {
          this.notifyError(res.data.message || '데이터를 불러오는 중 오류가 발생했습니다.')
        }
      } catch (e) {
        this.notifyError('서버와의 통신 중 오류가 발생했습니다.')
      } finally {
        this.is_loading = false
      }
    },

    async downloadExcel() {
      try {
        const res = await api.downloadCalculateChannelDonationByDateExcel(
          this.start_date.substring(0, 10),
          this.end_date.substring(0, 10)
        )
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', '채널후원정산.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      } catch (e) {
        this.notifyError('엑셀 다운로드 중 오류가 발생했습니다.')
      }
    }
  }
}
</script>

<style scoped>
.datepicker {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>