132 lines
4.0 KiB
Vue
132 lines
4.0 KiB
Vue
<template>
|
|
|
|
<v-container>
|
|
<v-container v-show="!id">
|
|
<v-toolbar>
|
|
<v-toolbar-title> No se indicó Id de la compra</v-toolbar-title>
|
|
</v-toolbar>
|
|
</v-container>
|
|
<v-container v-show="id">
|
|
<v-toolbar>
|
|
<v-toolbar-title> Resumen de la compra {{ id }}</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-list>
|
|
<v-list-item>
|
|
<v-list-item-title>Fecha:</v-list-item-title>
|
|
<v-list-item-subtitle>{{ purchase.date }}</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title>Cliente:</v-list-item-title>
|
|
<v-list-item-subtitle v-if="purchase.customer">{{ purchase.customer.name }}</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title>Pagado en:</v-list-item-title>
|
|
<v-list-item-subtitle v-if="purchase.payment_method">{{ purchase.payment_method }}</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-title>Total:</v-list-item-title>
|
|
<v-list-item-subtitle v-if="purchase.lines">{{ currencyFormat(calculateTotal(purchase.lines)) }}</v-list-item-subtitle>
|
|
</v-list-item>
|
|
</v-list>
|
|
<v-data-table-virtual
|
|
:headers="headers"
|
|
:items="purchase.lines"
|
|
>
|
|
<template v-slot:item.unit_price="{ item }">
|
|
{{ currencyFormat(item.unit_price) }}
|
|
</template>
|
|
<template v-slot:item.subtotal="{ item }">
|
|
{{ currencyFormat(calculateSubtotal(item.unit_price, item.quantity)) }}
|
|
</template>
|
|
</v-data-table-virtual>
|
|
<v-alert type="info" class="my-4">
|
|
Recuerda adicionar a la planilla física lo siguiente
|
|
<v-data-table
|
|
:headers="headersTemplate"
|
|
:items="[purchase]"
|
|
item-key="id"
|
|
hide-default-footer
|
|
>
|
|
<template v-slot:item="{ item }">
|
|
<tr>
|
|
<td>{{ item.id }}</td>
|
|
<td>{{ item.date }}</td>
|
|
<td><span v-if="item.customer">{{ item.customer.name }}</span></td>
|
|
<td><span v-if="item.lines">{{ currencyFormat(calculateTotal(item.lines)) }}</span></td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
</v-alert>
|
|
<div class="text-center">
|
|
<v-btn :to="{ path: '/' }" color="green">Ir al inicio</v-btn>
|
|
</div>
|
|
</v-container>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { inject } from 'vue';
|
|
|
|
export default {
|
|
name: 'SummaryPurchase',
|
|
props: {
|
|
msg: String,
|
|
id: Number
|
|
},
|
|
data () {
|
|
return {
|
|
api: inject('api'),
|
|
purchase: {},
|
|
headers: [
|
|
{ title: 'Producto', value: 'product.name' },
|
|
{ title: 'Precio', value: 'unit_price' },
|
|
{ title: 'Cantidad', value: 'quantity' },
|
|
{ title: 'Subtotal', value: 'subtotal' },
|
|
],
|
|
headersTemplate: [
|
|
{title: 'Compra', value: 'id'},
|
|
{title: 'Fecha', value: 'date'},
|
|
{title: 'Nombre', value: 'customer.name'},
|
|
{title: 'Valor', value: ''},
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
if (this.id) {
|
|
this.fetchPurchase(this.id);
|
|
} else {
|
|
console.error('No se proporcionó un ID de compra.');
|
|
}
|
|
},
|
|
methods: {
|
|
fetchPurchase(purchaseId) {
|
|
this.api.getSummaryPurchase(purchaseId)
|
|
.then(data => {
|
|
this.purchase = data;
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
});
|
|
},
|
|
currencyFormat(value) {
|
|
return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(value);
|
|
},
|
|
calculateSubtotal(price, quantity) {
|
|
price = parseFloat(price || 0);
|
|
quantity = parseFloat(quantity || 0);
|
|
return price * quantity;
|
|
},
|
|
calculateTotal(lines) {
|
|
let total = 0;
|
|
lines.forEach(line => {
|
|
total += this.calculateSubtotal(line.unit_price, line.quantity);
|
|
});
|
|
return total;
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
|
|
</style>
|