65 lines
1.9 KiB
Vue
65 lines
1.9 KiB
Vue
<template>
|
|
<v-container>
|
|
<v-toolbar>
|
|
<v-toolbar-title> Cuadres del Tarro </v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card>
|
|
<v-card-text>
|
|
<v-data-table-server
|
|
v-model:items-per-page="itemsPerPage"
|
|
:headers="headers"
|
|
:items="serverItems"
|
|
:items-length="totalItems"
|
|
:loading="loading"
|
|
:search="search"
|
|
@update:options="loadItems"
|
|
>
|
|
<template v-slot:item.id="{ item }">
|
|
<v-btn @click="openSummaryModal(item.id)">{{ item.id }}</v-btn>
|
|
</template>
|
|
</v-data-table-server>
|
|
<SummaryReconciliationModal :id="selectedReconciliationId" ref="summaryModal" />
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-container>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
api: inject('api'),
|
|
selectedReconciliationId: null,
|
|
itemsPerPage: 10,
|
|
headers: [
|
|
{ title: 'Acciones', key: 'id'},
|
|
{ title: 'Fecha', key: 'date_time'},
|
|
{ title: 'Reconciliador', key: 'reconcilier'},
|
|
{ title: 'Total Compras Efectivo', key: 'total_cash_purchases'},
|
|
{ title: 'Recogido', key: 'cash_taken'},
|
|
{ title: 'Descuadre', key: 'cash_discrepancy'},
|
|
],
|
|
search: '',
|
|
serverItems: [],
|
|
loading: true,
|
|
totalItems: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
loadItems ({page, itemsPerPage}) {
|
|
this.loading = true;
|
|
this.api.getListReconcliations(page, itemsPerPage)
|
|
.then(data => {
|
|
this.serverItems = data['results'];
|
|
this.totalItems = data['count'];
|
|
this.loading = false;
|
|
})
|
|
.catch(error => console.log('Error:', error));
|
|
},
|
|
openSummaryModal(id) {
|
|
this.selectedReconciliationId = id.toString();
|
|
this.$refs.summaryModal.dialog = true;
|
|
},
|
|
},
|
|
}
|
|
</script>
|