79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<template>
|
|
<div class="columns is-mobile is-centered">
|
|
<div class="column is-half">
|
|
<div class="block">
|
|
<tabs-secciones
|
|
:tabs="tabs"
|
|
:tabInicial="tabActiva"
|
|
:clases="['is-centered', 'is-fullwidth']">
|
|
</tabs-secciones>
|
|
<div class="block pb-6" id="faltantes-seccion"
|
|
:class="seccionActiva === 'faltantes-seccion' ? 'is-active' : 'is-hidden'">
|
|
<p>{{faltantes ?? 'nada aún'}}</p>
|
|
</div>
|
|
<div class="block pb-6" id="sobrantes-seccion"
|
|
:class="seccionActiva === 'sobrantes-seccion' ? 'is-active' : 'is-hidden'">
|
|
<p>{{sobrantes ?? 'nada aún'}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import TabsSecciones from "../comunes/TabsSecciones.vue";
|
|
import Chismosa from "../pedidos/Chismosa.vue";
|
|
|
|
export default {
|
|
name: "FaltantesYSobrantes",
|
|
components: {
|
|
TabsSecciones,
|
|
Chismosa,
|
|
},
|
|
data() {
|
|
return {
|
|
gdc: undefined,
|
|
tabs: [{ id: "faltantes", nombre: "Faltantes" },
|
|
{ id: "sobrantes", nombre: "Sobrantes" }],
|
|
tabActiva: "faltantes",
|
|
seccionActiva: "faltantes-seccion",
|
|
faltantes: undefined,
|
|
sobrantes: undefined,
|
|
};
|
|
},
|
|
watch: {
|
|
'$root.gdc' : {
|
|
handler(newValue) {
|
|
if (newValue) {
|
|
this.gdc = newValue;
|
|
this.actualizarFaltantes();
|
|
this.actualizarSobrantes();
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
setSeccionActiva(tabId) {
|
|
this.tabActiva = tabId;
|
|
this.seccionActiva = tabId + "-seccion";
|
|
},
|
|
actualizarFaltantes() {
|
|
axios.get(`/api/grupos-de-compra/${this.gdc}/faltantes`)
|
|
.then(response => {
|
|
this.faltantes = response.data['faltantes'];
|
|
})
|
|
},
|
|
actualizarSobrantes() {
|
|
axios.get(`/api/grupos-de-compra/${this.gdc}/sobrantes`)
|
|
.then(response => {
|
|
this.sobrantes = response.data['sobrantes'];
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|