diff --git a/src/api/calculate.js b/src/api/calculate.js index 4b01a2f..1718140 100644 --- a/src/api/calculate.js +++ b/src/api/calculate.js @@ -12,4 +12,8 @@ async function getCumulativeSalesByContent(page, size) { return Vue.axios.get('/admin/calculate/cumulative-sales-by-content?page=' + (page - 1) + "&size=" + size); } -export { getCalculateLive, getCalculateContent, getCumulativeSalesByContent } +async function getCalculateContentDonation(startDate, endDate) { + return Vue.axios.get('/admin/calculate/content-donation-list?startDateStr=' + startDate + '&endDateStr=' + endDate); +} + +export { getCalculateLive, getCalculateContent, getCumulativeSalesByContent, getCalculateContentDonation } diff --git a/src/router/index.js b/src/router/index.js index 59c827d..fe2570d 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -125,6 +125,11 @@ const routes = [ name: 'CalculateAccumulation', component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateAccumulation.vue') }, + { + path: '/calculate/content-donation-by-date', + name: 'CalculateContentDonation', + component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateContentDonation.vue') + }, { path: '/notice', name: 'NoticeView', diff --git a/src/views/Calculate/CalculateContentDonation.vue b/src/views/Calculate/CalculateContentDonation.vue new file mode 100644 index 0000000..9ef101e --- /dev/null +++ b/src/views/Calculate/CalculateContentDonation.vue @@ -0,0 +1,315 @@ +<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="#9970ff" + dark + depressed + @click="getCalculateContentDonation" + > + 조회 + </v-btn> + </v-col> + + + <v-spacer /> + + <v-col cols="2"> + <vue-excel-xlsx + :data="items" + :columns="columns" + :file-name="'정산'" + :file-type="'xlsx'" + :sheet-name="'정산'" + > + <v-btn + block + color="#9970ff" + dark + depressed + > + 엑셀 다운로드 + </v-btn> + </vue-excel-xlsx> + </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> + <td colspan="4"> + 합계 + </td> + <td>{{ sumField('numberOfDonation').toLocaleString() }}</td> + <td>{{ sumField('totalCan').toLocaleString() }} 캔</td> + <td>{{ sumField('totalKrw').toLocaleString() }} 원</td> + <td>{{ sumField('paymentFee').toLocaleString() }} 원</td> + <td>{{ sumField('settlementAmount').toLocaleString() }} 원</td> + <td>{{ sumField('tax').toLocaleString() }} 원</td> + <td>{{ sumField('depositAmount').toLocaleString() }} 원</td> + <td /> + </tr> + </template> + + <template v-slot:item.totalCan="{ item }"> + {{ item.totalCan.toLocaleString() }} 캔 + </template> + + <template v-slot:item.totalKrw="{ item }"> + {{ item.totalKrw.toLocaleString() }} 원 + </template> + + <template v-slot:item.paymentFee="{ item }"> + {{ item.paymentFee.toLocaleString() }} 원 + </template> + + <template v-slot:item.settlementAmount="{ item }"> + {{ item.settlementAmount.toLocaleString() }} 원 + </template> + + <template v-slot:item.tax="{ item }"> + {{ item.tax.toLocaleString() }} 원 + </template> + + <template v-slot:item.depositAmount="{ item }"> + {{ item.depositAmount.toLocaleString() }} 원 + </template> + </v-data-table> + </v-col> + </v-row> + </v-container> + </div> +</template> + +<script> +import * as api from "@/api/calculate"; +import datetime from "vuejs-datetimepicker"; + +export default { + name: "CalculateContentDonation", + components: {datetime}, + + data() { + return { + is_loading: false, + start_date: null, + end_date: null, + items: [], + columns: [ + { + label: '후원날짜', + field: 'donationDate', + }, + { + label: '크리에이터', + field: 'nickname', + }, + { + label: '콘텐츠 제목', + field: 'title', + }, + { + label: '후원금액(캔)', + field: 'donation', + }, + { + label: '후원수', + field: 'numberOfDonation', + }, + { + label: '합계(캔)', + field: 'totalCan', + }, + { + label: '원화', + field: 'totalKrw', + }, + { + label: '수수료\n(6.6%)', + field: 'paymentFee', + }, + { + label: '정산금액', + field: 'settlementAmount', + }, + { + label: '원천세\n(3.3%)', + field: 'tax', + }, + { + label: '입금액', + field: 'depositAmount', + }, + { + label: '콘텐츠 등록일', + field: 'registrationDate', + }, + ], + headers: [ + { + text: '후원날짜', + align: 'center', + sortable: false, + value: 'donationDate', + }, + { + text: '크리에이터', + align: 'center', + sortable: false, + value: 'nickname', + }, + { + text: '콘텐츠 제목', + sortable: false, + value: 'title', + align: 'center', + width: "300px" + }, + { + text: '후원수', + align: 'center', + sortable: false, + value: 'numberOfDonation', + }, + { + text: '합계(캔)', + align: 'center', + sortable: false, + value: 'totalCan', + }, + { + text: '원화', + align: 'center', + sortable: false, + value: 'totalKrw', + }, + { + text: '수수료\n(6.6%)', + align: 'center', + sortable: false, + value: 'paymentFee', + }, + { + text: '정산금액', + align: 'center', + sortable: false, + value: 'settlementAmount', + }, + { + text: '원천세\n(3.3%)', + align: 'center', + sortable: false, + value: 'tax', + }, + { + text: '입금액', + align: 'center', + sortable: false, + value: 'depositAmount', + }, + { + text: '콘텐츠 등록일', + align: 'center', + sortable: false, + value: 'registrationDate', + }, + ], + } + }, + + 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); + + let firstDateMonth = (firstDate.getMonth() + 1).toString() + if (firstDateMonth.length < 2) { + firstDateMonth = '0' + firstDateMonth + } + + + let lastDateMonth = (lastDate.getMonth() + 1).toString() + if (lastDateMonth.length < 2) { + lastDateMonth = '0' + lastDateMonth + } + + this.start_date = firstDate.getFullYear() + '-' + firstDateMonth + '-0' + firstDate.getDate() + this.end_date = lastDate.getFullYear() + '-' + lastDateMonth + '-' + lastDate.getDate() + + await this.getCalculateContentDonation(); + }, + + methods: { + notifyError(message) { + this.$dialog.notify.error(message) + }, + + notifySuccess(message) { + this.$dialog.notify.success(message) + }, + + sumField(key) { + return this.items.reduce((a, b) => a + (b[key] || 0), 0) + }, + + async getCalculateContentDonation() { + this.is_loading = true + + try { + const res = await api.getCalculateContentDonation(this.start_date, this.end_date) + if (res.status === 200 && res.data.success === true) { + this.items = res.data.data + } else { + this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') + } + + this.is_loading = false + } catch (e) { + this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') + this.is_loading = false + } + } + } +} +</script>