CensoFront/src/view/addPrinter.vue

<template>
    <div class="container">
        <h1 style="margin: 2rem">Agregar impresora</h1>
        <div class="row">
            <div class="col-md-4" >
                <b-form-input style="margin: .5rem;" class="fadeIn second" id="input-small"  placeholder="Número de inventario"></b-form-input>
            </div>
            <div class="col-md-4" >
                <b-form-input style="margin: .5rem;" class="fadeIn second" id="input-small"  placeholder="Número de resguardo"></b-form-input>
            </div>
            <div class="col-md-4" >
                <b-form-input style="margin: .5rem;" class="fadeIn second" id="input-small"  placeholder="Serie"></b-form-input>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <b-form-input style="margin: .5rem;" id="input-small"  placeholder="Serie"></b-form-input>
            </div>
            <div class="col-md-6">
                <b-form-input style="margin: .5rem;" id="input-small"  placeholder="Modelo"></b-form-input>
            </div>
        </div>
         <div class="row">
            <div class="col-md-4"  >
                 <b-dropdown v-bind:text="tipoImpresora != null ? tipoImpresoraSelected.nombre : 'Tipo de Impresora'"  block   variant="outline-primary" class="m-2">
                    <b-dropdown-item v-for="tipo in tipoImpresora" v-bind:key="tipo.id" @click="tipoImpresoraSelected = tipo">{{tipo.nombre}}</b-dropdown-item>
                </b-dropdown>
            </div>
            <div class="col-md-4 "  >
                <b-dropdown v-bind:text="marcaImpresoraSelected != null ? marcaImpresora.nombre : 'Marca de impresora'"  block   variant="outline-primary" class="m-2">
                    <b-dropdown-item v-for="tipo in marcaImpresora" v-bind:key="tipo.id" @click="marcaImpresoraSelected = tipo">{{tipo.nombre}}</b-dropdown-item>
                </b-dropdown>
            </div>
             <div class="col-md-4 " >
                 <b-dropdown v-bind:text="usoSelected != null ? uso.nombre : 'Tipo de Uso'"  block   variant="outline-primary" class="m-2">
                    <b-dropdown-item v-for="tipo in uso" v-bind:key="tipo.id" @click="usoSelected = tipo">{{tipo.nombre}}</b-dropdown-item>
                </b-dropdown>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12"  >
                 <b-dropdown v-bind:text="unidadSelected != null ? unidadSelected.unidadResponsable.nombre : 'Unidad Responsable'"  block   variant="outline-primary" class="m-2">
                    <b-dropdown-item v-for="tipo in unidad" v-bind:key="tipo.unidadResponsable.id" @click="unidadSelected = tipo">{{tipo.unidadResponsable.nombre}}</b-dropdown-item>
                </b-dropdown>
            </div>
            <div class="col-md-12 "  >
                <b-dropdown v-bind:text="unidadSelected != null ? unidadSelected.responsable.nombre : 'Nombre del responsable'"  block   variant="outline-primary" class="m-2">
                    <b-dropdown-item v-for="tipo in unidad" v-bind:key="tipo.responsable.id" @click="unidadSelected = tipo">{{tipo.responsable.nombre}}</b-dropdown-item>
                </b-dropdown>
            </div>
             <div class="col-md-12 " >
                 <b-dropdown v-bind:text="unidadSelected != null ? unidadSelected.ubicacion.nombre : 'Ubicación'"  block   variant="outline-primary" class="m-2">
                    <b-dropdown-item v-for="tipo in unidad" v-bind:key="tipo.ubicacion.id" @click="unidadSelected = tipo">{{tipo.ubicacion.nombre}}</b-dropdown-item>
                </b-dropdown>
            </div>
        </div>
        <div class="pure-u-1 pure-u-md-1-2">
            <button class="button " >
              Agregar
            </button>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import config from "../config/config.js";   


export default {

  name: "home",
  components: {
  },
  data() {
      return {
        typeSelected:"Equipos",
        marcaImpresora : null,
        marcaImpresoraSelected: null,
        tipoImpresora: null,
        tipoImpresoraSelected: null,
        unidad: null,
        unidadSelected: null,
        uso: null,
        usoSelected: null,
      }
    },
    methods: {
     
    },
    async created() {
        try {
            let catalogo = await axios.get(`${config.api}/getCatalgoEquipo`);
            this.marcaImpresora = catalogo.data.catalogos.marcaImpresora;
            this.tipoImpresora = catalogo.data.catalogos.tipoImpresora;
            this.unidad= catalogo.data.catalogos.unidad;
            this.uso = catalogo.data.catalogos.uso;
        }
        catch(error){
            console.log(error);
        }
        
    },
};
</script>
<style scoped> 

.button {
  background-color: #1b3d70; /* Green */
  border: none;
  color: white;
  height: 4rem;
  width: 15rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
  border-radius: 1rem;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
}
.button:hover {
  background-color: #bb8800;
  color: white;
}
</style>