141 lines
3.8 KiB
Vue
141 lines
3.8 KiB
Vue
<template>
|
|
<v-container>
|
|
<v-toolbar>
|
|
<v-toolbar-title> Cuadre de Tarro: {{ id }}</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card>
|
|
<v-card-text>
|
|
<v-text-field
|
|
v-model="reconciliation.date_time"
|
|
label="Fecha"
|
|
required
|
|
readonly
|
|
></v-text-field>
|
|
<v-text-field
|
|
v-model="reconciliation.reconcilier"
|
|
label="Cajero"
|
|
required
|
|
readonly
|
|
></v-text-field>
|
|
<v-text-field
|
|
v-model="reconciliation.total_cash_purchases"
|
|
label="Total Ventas en efectivo"
|
|
prefix="$"
|
|
type="number"
|
|
readonly
|
|
></v-text-field>
|
|
<v-text-field
|
|
v-model="reconciliation.cash_taken"
|
|
label="Dinero Recogido"
|
|
prefix="$"
|
|
type="number"
|
|
></v-text-field>
|
|
<v-text-field
|
|
v-model="reconciliation.cash_discrepancy"
|
|
label="Descuadre"
|
|
prefix="$"
|
|
type="number"
|
|
></v-text-field>
|
|
<v-tabs v-model="tab">
|
|
<v-tab
|
|
v-for="(elements, paymentMethod) in purchases"
|
|
:key="paymentMethod"
|
|
>
|
|
{{ paymentMethod }} <CurrencyText :value="elements.total" />
|
|
</v-tab>
|
|
</v-tabs>
|
|
<v-tabs-window v-model="tab">
|
|
<v-tabs-window-item
|
|
v-for="(elements, paymentMethod) in purchases"
|
|
:key="paymentMethod"
|
|
>
|
|
<v-table>
|
|
<thead>
|
|
<tr>
|
|
<th>Id</th>
|
|
<th>Fecha</th>
|
|
<th>Cliente</th>
|
|
<th>Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="purchase in elements.purchases" :key="purchase.id">
|
|
<td><v-btn @click="openSummaryModal(purchase.id)">{{ purchase.id }}</v-btn></td>
|
|
<td>{{ purchase.date }}</td>
|
|
<td>{{ purchase.customer }}</td>
|
|
<td><CurrencyText :value="purchase.total" /></td>
|
|
|
|
</tr>
|
|
</tbody>
|
|
</v-table>
|
|
|
|
</v-tabs-window-item>
|
|
</v-tabs-window>
|
|
<SummaryPurchaseModal :id="selectedPurchaseId" ref="summaryModal" />
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-container>
|
|
</template>
|
|
<script>
|
|
import { inject } from 'vue';
|
|
|
|
export default {
|
|
name: 'ReconciliationJar View',
|
|
props: {
|
|
msg: String,
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
tab: '0',
|
|
selectedPurchaseId: null,
|
|
api: inject('api'),
|
|
valid: null,
|
|
reconciliation: {
|
|
},
|
|
purchases: {},
|
|
};
|
|
},
|
|
created() {
|
|
if (this.id) {
|
|
this.fetchReconciliation(this.id);
|
|
} else {
|
|
console.error('No se proporcionó ID');
|
|
}
|
|
},
|
|
methods: {
|
|
fetchReconciliation(reconciliationId) {
|
|
this.api.getReconciliation(reconciliationId)
|
|
.then(data => {
|
|
this.reconciliation = data;
|
|
this.groupPurchases();
|
|
})
|
|
.catch(error => console.error(error));
|
|
},
|
|
groupPurchases() {
|
|
if (this.reconciliation.Sales) {
|
|
this.purchases = this.reconciliation.Sales.reduce((grouped, sale) => {
|
|
const paymentMethod = sale.payment_method;
|
|
if (!grouped[paymentMethod]) {
|
|
grouped[paymentMethod] = {
|
|
purchases: [],
|
|
total: 0,
|
|
};
|
|
}
|
|
grouped[paymentMethod].purchases.push(sale);
|
|
grouped[paymentMethod].total += sale.total;
|
|
return grouped;
|
|
}, {});
|
|
}
|
|
},
|
|
openSummaryModal(id) {
|
|
this.selectedPurchaseId = id;
|
|
this.$refs.summaryModal.dialog = true;
|
|
},
|
|
},
|
|
}
|
|
</script>
|