Your IP : 216.73.217.77
<template>
<div>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Sales Reports</h3>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<router-link to="/dashboard">{{ __('dashboard') }}</router-link>
</li>
<li class="breadcrumb-item active" aria-current="page">Sales Reports</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Sales Reports</h4>
</div>
<div class="card-body">
<b-row class="mb-2">
<b-col md="2">
<h6 class="box-title">From & To Date</h6>
<div class="d-flex justify-content-center align-items-center">
<date-range-picker
:autoApply=false
:showDropdowns = true
v-model="dateRange"
:maxDate="maxDate"
@update="getSalesReports"
></date-range-picker>
<button class="btn btn-sm btn-danger ml-1" @click="dateRange.startDate = null, dateRange.endDate = null, getSalesReports()">
{{ __('clear') }}
</button>
</div>
</b-col>
<b-col md="2">
<h6 class="box-title" for="seller">Seller</h6>
<select name="seller" id="seller" v-model="seller" @change="getSalesReports()"
class="form-control form-select">
<option value="">Select Seller</option>
<option v-for="seller in sellers" :value="seller.id">{{ seller.name }}</option>
</select>
</b-col>
<b-col md="2">
<h6 class="box-title" for="category">Category </h6>
<select name="category" id="category" v-model="category" @change="getSalesReports()"
class="form-control form-select">
<option value="">Select Category</option>
<option v-for="category in categories" :value="category.id">{{ category.name }}
</option>
</select>
</b-col>
<b-col md="2">
<h6 class="box-title" for="category">Delivery Boys </h6>
<select name="deliveryBoy" id="deliveryBoy" v-model="deliveryBoy" @change="getSalesReports()"
class="form-control form-select">
<option value="">Select Delivery Boys</option>
<option v-for="deliveryBoy in deliveryBoys" :value="deliveryBoy.id">{{ deliveryBoy.name }}
</option>
</select>
</b-col>
<b-col md="1">
<h6 class="box-title" for="category">Payment </h6>
<select name="payment_type" id="payment_type" v-model="payment_type" @change="getSalesReports()"
class="form-control form-select">
<option value="">Select Type</option>
<option :value="1"> COD</option>
<option :value="2">Online</option>
</select>
</b-col>
<b-col md="2">
<h6 class="box-title">Search</h6>
<b-form-input
id="filter-input"
v-model="filter"
type="search"
placeholder="Search"
></b-form-input>
</b-col>
<b-col md="1" class="text-center">
<button class="btn btn-primary btn_refresh" v-b-tooltip.hover :title="__('refresh')" @click="getSalesReports()">
<i class="fa fa-refresh" aria-hidden="true"></i>
</button>
</b-col>
</b-row>
<div class="table-responsive">
<b-table
:items="salesReports"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:filter-included-fields="filterOn"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection"
:bordered="true"
:busy="isLoading"
stacked="md"
show-empty
small>
<template #table-busy>
<div class="text-center text-black my-2">
<b-spinner class="align-middle"></b-spinner>
<strong>{{ __('loading') }}...</strong>
</div>
</template>
<template #head(final_total)="row">
{{'Total ('+$currency+')' }}
</template>
<template #cell(created_at)="row">
{{ new Date(row.item.created_at).toLocaleString() }}
</template>
</b-table>
</div>
<b-row>
<div class="col-md-4 text-success h6">Total Amount :- {{ $currency }} {{ final_total_sum.toFixed(2) }}</div>
</b-row>
<b-row>
<b-col md="2" class="my-1">
<b-form-group
:label="__('per_page')"
label-for="per-page-select"
label-align-sm="right"
label-size="sm"
class="mb-0">
<b-form-select
id="per-page-select"
v-model="perPage"
:options="pageOptions"
size="sm"
class="form-control form-select"
></b-form-select>
</b-form-group>
</b-col>
<b-col md="4" class="my-1" offset-md="6">
<b-pagination
v-model="currentPage"
:total-rows="totalRows"
:per-page="perPage"
align="fill"
size="sm"
class="my-0"
></b-pagination>
</b-col>
</b-row>
</div>
</div>
</section>
</div>
</div>
</template>
<script>
import DateRangePicker from 'vue2-daterange-picker';
import moment from "moment";
export default {
name: "range_dates",
components: {DateRangePicker},
data: function () {
return {
dateRange: {startDate:null, endDate:null},
maxDate: new Date(),
seller: "",
category: "",
fields: [
{key: 'id', label: 'Order Item ID', sortable: true, sortDirection: 'desc'},
{key: 'user_name', label: 'User', sortable: true, class: 'text-center'},
{key: 'product_name', label: 'Product', sortable: true, class: 'text-center'},
{key: 'mobile', label: 'Mob.', sortable: true, class: 'text-center'},
{key: 'sub_total', label: 'Total( '+this.$currency+' )', sortable: true, class: 'text-center'},
{key: 'added_date', label: 'Date', sortable: true, class: 'text-center'}
],
totalRows: 1,
currentPage: 1,
perPage: this.$perPage,
pageOptions: this.$pageOptions,
sortBy: '',
sortDesc: false,
sortDirection: 'asc',
filter: null,
filterOn: [],
page: 1,
isLoading: false,
sectionStyle: 'style_1',
max_visible_units: 12,
max_col_in_single_row: 3,
salesReports: [],
final_total_sum: 0,
sellers: null,
categories: null,
deliveryBoy: '',
deliveryBoys: '',
payment_type: '',
}
},
computed: {
sortOptions() {
// Create an options list from our fields
return this.fields
.filter(f => f.sortable)
.map(f => {
return {text: f.label, value: f.key}
})
}
},
mounted() {
// Set the initial number of items
this.totalRows = this.salesReports.length
},
created: function () {
this.getSalesReports();
},
methods: {
getSalesReports() {
this.isLoading = true;
let param = {
"startDate": (this.dateRange.startDate != null) ? moment(this.dateRange.startDate).format('YYYY-MM-DD'):"",
"endDate": (this.dateRange.endDate != null) ? moment(this.dateRange.endDate).format('YYYY-MM-DD'):"",
"seller": this.seller,
"category": this.category,
"deliveryBoy": this.deliveryBoy,
"payment_type": this.payment_type
}
axios.get(this.$apiUrl + '/sales_reports', {
params: param
}).then((response) => {
this.isLoading = false
this.sellers = response.data.data.sellers;
this.categories = response.data.data.categories;
this.deliveryBoys = response.data.data.deliveryBoys;
this.salesReports = response.data.data.salesReports;
this.final_total_sum = this.salesReports.map(item => item.sub_total).reduce((prev, curr) => prev + curr, 0) || 0;
this.totalRows = this.salesReports.length
});
},
}
};
</script>
<style scoped>
@import "../../../../node_modules/vue2-daterange-picker/dist/vue2-daterange-picker.css";
.vue-daterange-picker[data-v-1ebd09d2] {
min-width: 80%;
}
@media only screen and (min-width: 600px) {
.vue-daterange-picker[data-v-1ebd09d2] {
min-width: 90%;
}
}
</style>