89 lines
2.8 KiB
Vue
89 lines
2.8 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_transporte }}</th>
|
|
<th class="has-text-right">{{ total_transporte }}</th>
|
|
</tr>
|
|
<tr v-if="devoluciones_habilitadas">
|
|
<th><p>Devoluciones</p></th>
|
|
<td>
|
|
<abbr :title="devoluciones_notas">{{ notas_abreviadas }}</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_total }}</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",
|
|
]),
|
|
notas_abreviadas() {
|
|
return this.devoluciones_notas.substring(0, 15) + (this.devoluciones_notas.length > 15 ? "..." : "");
|
|
},
|
|
mostrar_tabla() {
|
|
return this.productos?.length !== 0;
|
|
},
|
|
},
|
|
methods: {
|
|
modificarDevoluciones() {
|
|
Event.$emit("modificar-devoluciones");
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.tabla-chismosa {
|
|
width: 100%;
|
|
}
|
|
|
|
.fixed-right {
|
|
position: fixed;
|
|
overflow-y: auto;
|
|
max-height: 81vh;
|
|
margin-right: 20px;
|
|
}
|
|
</style>
|