pedi2/resources/js/components/compras/Body.vue

<template>
    <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop">
        <comunes-tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></comunes-tabs-secciones>
        <div class="block" id="pedidos-compras-seccion"
             :class="seccionActiva === 'pedidos-compras-seccion' ? 'is-active' : 'is-hidden'">
            <div class="block pb-6" id="pedidos-compras-tabla-y-dropdown">
                <compras-dropdown-descargar>
                </compras-dropdown-descargar>
            </div>
        </div>
        <div class="block pb-6" id="canasta-compras-seccion"
             :class="seccionActiva === 'canasta-compras-seccion' ? 'is-active' : 'is-hidden'">
            <div class="block" id="canasta-compras-seccion">
                <article class="message is-warning">
                    <div class="message-header">
                        <p>Formato de la canasta</p>
                    </div>
                    <div class="message-body">
                        <div class="content">
                            La planilla de la canasta tiene que tener el siguiente formato para que la aplicación la lea correctamente:
                            <ul>
                                <li> Los precios deben usar punto y no coma decimal </li>
                                <li> Después del último producto, en la primera celda, debe estar la palabra "TOTAL", para indicar el final de la lista </li>
                                <li> El nombre de la columna de precios debe ser "Precio" </li>
                                <li> Las columnas deben separarse con '|' </li>
                                <li> No puede haber "enters" en ningún campo de la planilla </li>
                                <li> Todos los bonos deben tener tipo 'B' para evitar que paguen transporte </li>
                                <li> El bono de transporte debe tener tipo 'T' </li>
                            </ul>
                            <a class="has-text-info" href="/compras/canasta/ejemplo">Planilla de ejemplo.</a>
                        </div>
                    </div>
                </article>
                <div class="buttons is-right">
                    <compras-canasta-input></compras-canasta-input>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TabsSecciones from "../comunes/TabsSecciones.vue";
import DropdownDescargar from "./DropdownDescargar.vue";
import CanastaInput from "./CanastaInput.vue";

export default {
    components: {
        TabsSecciones,
        DropdownDescargar,
        CanastaInput,
    },
    data() {
        return {
            tabs: [{ id: "pedidos-compras", nombre: "Pedidos" },
                { id: "canasta-compras", nombre: "Canasta" }],
            tabActiva: "pedidos-compras",
            seccionActiva: "pedidos-compras-seccion",
            archivo: undefined,
        }
    },
    methods: {
        setSeccionActiva(tabId) {
            this.tabActiva = tabId;
            this.seccionActiva = tabId + "-seccion";
        },
    }
}
</script>