Untitled
unknown
plain_text
2 years ago
7.5 kB
6
Indexable
<template> <div class="grid grid-cols-12 gap-4"> <div class="col-span-4"> <label for="" class="block mb-1">Merchant</label> <select v-model="merchant_id" :class="[ 'w-full', 'border', 'rounded-md', 'text-base', 'px-4', 'py-2', 'font-normal', 'mb-2', ]" > <option v-for="item in merchants" :key="item.id" :value="item.id"> {{ item.merchant_name }} </option> </select> </div> <div class="col-span-4"> <label for="" class="block mb-1">Bulan</label> <select v-model="form.month" :class="[ 'w-full', 'border', 'rounded-md', 'text-base', 'px-4', 'py-2', 'font-normal', 'mb-2', ]" > <option v-for="(item, index) in bulans" :key="index" :value="item.id"> {{ item.name }} </option> </select> </div> <div class="col-span-4"> <label for="" class="block mb-1">Tahun</label> <select v-model="form.year" :class="[ 'w-full', 'border', 'rounded-md', 'text-base', 'px-4', 'py-2', 'font-normal', 'mb-2', ]" > <option v-for="(item, index) in tahuns" :key="index" :value="item"> {{ item }} </option> </select> </div> <div class="col-span-12"> <button :class="[ 'inline-block', 'py-2.5', 'px-6', 'rounded-md', 'text-white', 'bg-secondary', 'text-sm', 'mr-2', { 'pointer-events-none': form.month === null || form.year === null, }, { 'bg-opacity-60': form.month === null || form.year === null, }, ]" @click="getGR()" > Get Data </button> <button :class="[ 'inline-block', 'py-2.5', 'px-6', 'rounded-md', 'text-white', 'bg-third', 'text-sm', 'mr-2', { 'pointer-events-none': form.month === null || form.year === null, }, { 'bg-opacity-60': form.month === null || form.year === null, }, ]" @click="downloadGeneral()" > Download General </button> <!-- <button :class="[ 'inline-block', 'py-2.5', 'px-6', 'rounded-md', 'text-white', 'bg-primary', 'text-sm', { 'pointer-events-none': form.month === null || form.year === null, }, { 'bg-opacity-60': form.month === null || form.year === null, }, ]" @click="downloadDetail()" > Download Detail </button> --> </div> <div class="col-span-12"> <vue-good-table :columns="columns" :rows="rows" :line-numbers="true" :total-rows="totalRecords" :pagination-options="{ enabled: true, mode: 'records', }" @on-page-change="onPageChange" @on-per-page-change="onPerPageChange" > </vue-good-table> </div> </div> </template> <script> export default { name: 'LoadReportUsage', props: {}, data() { return { merchant_id: null, bulans: [ { id: '1', name: 'Januari', }, { id: '2', name: 'Februari', }, { id: '3', name: 'Maret', }, { id: '4', name: 'April', }, { id: '5', name: 'Mei', }, { id: '6', name: 'Juni', }, { id: '07', name: 'Juli', }, { id: '8', name: 'Agustus', }, { id: '9', name: 'September', }, { id: '10', name: 'Oktober', }, { id: '11', name: 'November', }, { id: '12', name: 'Desember', }, ], tahuns: [], form: { month: null, year: null, page: 1, limit: 10, }, columns: [ { label: 'Date', field: 'created_at', }, { label: 'Total Sent', field: 'sent', }, { label: 'Verified', field: 'verified', }, { label: 'Delivered', field: 'delivered', }, ], rows: [], totalRecords: 0, merchants: [], timeZone: '', } }, mounted() { this.getListMerchant() this.generateArrayOfYears() this.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone }, methods: { generateArrayOfYears() { const max = new Date().getFullYear() const min = max - (max - '2015') for (let i = max; i >= min; i--) { this.tahuns.push(i) } }, async getListMerchant() { await this.$axios .$get(`/v1/r/merchant`) .then((data) => { if (data.status) { this.merchants = data.data } else { this.merchants = [] } }) .catch(() => {}) .finally(() => {}) }, async getGR() { const params = this.form await this.$axios .$get(`/v1/r/report/general`, { params, headers: { 'X-Merchant-ID': Number(this.merchant_id), 'X-Timezone': `${this.timeZone}`, }, }) .then((data) => { if (data.status) { this.rows = data.data[0].general ? data.data[0].general : [] this.totalRecords = data.data[0].paging.total_page * params.limit } else { this.rows = [] } }) .catch(() => {}) .finally(() => {}) }, onPageChange(params) { this.form.page = params.currentPage this.getGR() }, onPerPageChange(params) { this.form.limit = params.currentPerPage this.getGR() }, async downloadGeneral() { await this.$axios .$post( `/v1/r/report/general/download`, { month: this.form.month, year: String(this.form.year), email: this.$auth.user.pic_email, }, { headers: { 'X-Merchant-ID': Number(this.merchant_id), 'X-Timezone': `${this.timeZone}`, }, } ) .then((data) => { if (data.status) { this.$toasts( 'success', `Download General telah dikirim ke Email Akun anda!` ) } }) .catch((err) => { this.$toasts('error', err) }) .finally(() => {}) }, }, } </script>
Editor is loading...