71 lines
2.4 KiB
Vue
71 lines
2.4 KiB
Vue
<template>
|
|
<div :class="show_devoluciones ? 'is-active modal' : 'modal'">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Devoluciones</p>
|
|
<button class="delete" aria-label="close" @click.capture="toggleDevoluciones()"></button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<div class="field has-addons is-centered is-thin-centered">
|
|
<p class="control">
|
|
Total:
|
|
<input id="totalControl" class="input" type="number" v-model="totalControl"
|
|
style="text-align: center">
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-centered is-thin-centered">
|
|
<p class="control">
|
|
Notas:
|
|
<input id="notasControl" class="input" type="text" v-model.text="notasControl">
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<footer class="modal-card-foot">
|
|
<button class="button is-success" @click="modificar">Aceptar</button>
|
|
<button class="button" @click.capture="toggleDevoluciones()">Cancelar</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapMutations, mapState } from "vuex";
|
|
|
|
export default {
|
|
name: 'DevolucionesModal',
|
|
data() {
|
|
return {
|
|
totalControl: 0,
|
|
notasControl: "",
|
|
}
|
|
},
|
|
mounted() {
|
|
this.actualizar();
|
|
},
|
|
watch: {
|
|
cantidadEnChismosa() {
|
|
this.actualizar();
|
|
},
|
|
notasEnChismosa() {
|
|
this.actualizar();
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('ui', ["show_devoluciones"]),
|
|
...mapState('pedido', ["devoluciones_total", "devoluciones_notas"])
|
|
},
|
|
methods: {
|
|
...mapMutations('ui', ["toggleDevoluciones"]),
|
|
...mapActions('pedido', ["modificarDevoluciones"]),
|
|
modificar() {
|
|
this.modificarDevoluciones({ monto: this.totalControl, notas: this.notasControl });
|
|
this.toggleDevoluciones();
|
|
},
|
|
actualizar() {
|
|
this.totalControl = this.devoluciones_total;
|
|
this.notasControl = this.devoluciones_notas;
|
|
},
|
|
},
|
|
}
|
|
</script>
|