114 lines
3.9 KiB
Vue
114 lines
3.9 KiB
Vue
<template>
|
|
<div class="column is-one-third">
|
|
<div class="fixed-right">
|
|
<table v-show="mostrar_tabla" class="table is-striped is-bordered tabla-chismosa is-narrow">
|
|
<thead>
|
|
<tr>
|
|
<th>Producto</th>
|
|
<th>Cantidad</th>
|
|
<th><abbr title="Precio Total">$</abbr></th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
|
|
<th class="has-text-right">{{ cantidad_bonos_transporte }}</th>
|
|
<th class="has-text-right">{{ total_bonos_transporte }}</th>
|
|
</tr>
|
|
<tr v-if="devoluciones_habilitadas">
|
|
<th><p>Devoluciones</p></th>
|
|
<td>
|
|
<abbr :title="notas_devoluciones">{{ notas_devoluciones_abbr }}</abbr>
|
|
<button @click.capture="modificarDevoluciones()" class="button is-warning is-small">
|
|
<span class="icon">
|
|
<i class="fas fa-edit"></i>
|
|
</span>
|
|
</button>
|
|
</td>
|
|
<th class="has-text-right">-{{ devoluciones }}</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Total total</th>
|
|
<th></th>
|
|
<th class="has-text-right">{{ total }}</th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<producto-row v-for="producto in productos" :producto="producto" :key="producto.id"></producto-row>
|
|
</tbody>
|
|
</table>
|
|
<p class="has-text-centered" v-show="!mostrar_tabla">
|
|
Compa, todavía no agregaste nada a la chismosa.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ProductoRow from "./ProductoRow.vue";
|
|
import { mapState } from "vuex";
|
|
|
|
export default {
|
|
components: { ProductoRow },
|
|
computed: {
|
|
...mapState('barrio',["devoluciones_habilitadas"]),
|
|
...mapState('pedido',[
|
|
"productos",
|
|
"total",
|
|
"total_transporte",
|
|
"cantidad_transporte",
|
|
"devoluciones_total",
|
|
"devoluciones_notas",
|
|
]),
|
|
},
|
|
data() {
|
|
return {
|
|
mostrar_tabla: false,
|
|
cantidad_bonos_transporte: 0,
|
|
total_bonos_transporte: 0,
|
|
devoluciones: 0,
|
|
notas_devoluciones: "",
|
|
notas_devoluciones_abbr: "",
|
|
}
|
|
},
|
|
mounted() {
|
|
Event.$on('pedido-actualizado', this.pedidoActualizado);
|
|
Event.$on('toggle-chismosa', this.pedidoActualizado);
|
|
},
|
|
methods: {
|
|
pedidoActualizado: function () {
|
|
this.mostrar_tabla = this.$root.productos.length > 0;
|
|
this.cantidad_bonos_transporte = this.cantidadBonosDeTransporte();
|
|
this.total_bonos_transporte = this.totalBonosDeTransporte();
|
|
this.devoluciones = this.$root.pedido.devoluciones_total;
|
|
this.notas_devoluciones = this.$root.pedido.devoluciones_notas;
|
|
this.notas_devoluciones_abbr = this.notas_devoluciones.substring(0, 15);
|
|
if (this.notas_devoluciones.length > 15) {
|
|
this.notas_devoluciones_abbr += "...";
|
|
}
|
|
},
|
|
modificarDevoluciones: function () {
|
|
Event.$emit("modificar-devoluciones");
|
|
},
|
|
cantidadBonosDeTransporte: function () {
|
|
return this.$root.pedido.cantidad_transporte;
|
|
},
|
|
totalBonosDeTransporte: function () {
|
|
return this.$root.pedido.total_transporte
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.tabla-chismosa {
|
|
width: 100%;
|
|
}
|
|
|
|
.fixed-right {
|
|
position: fixed;
|
|
overflow-y: auto;
|
|
max-height: 81vh;
|
|
margin-right: 20px;
|
|
}
|
|
</style>
|