343 lines
16 KiB
Vue
343 lines
16 KiB
Vue
<template>
|
|
<div class="container">
|
|
<h1 style="margin: 2rem">Agregar Equipo</h1>
|
|
<div class="row">
|
|
<div class="col-md-4" >
|
|
<b-form-input style="margin: .5rem;" placeholder="Número de inventario" v-model="noInventario"></b-form-input>
|
|
</div>
|
|
<div class="col-md-4" >
|
|
<b-form-input style="margin: .5rem;" placeholder="Número de resguardo" v-model="noResguardo"></b-form-input>
|
|
</div>
|
|
<div class="col-md-4" >
|
|
<b-form-input style="margin: .5rem;" placeholder="Serie" v-model="serie"></b-form-input>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6" >
|
|
<b-form-input style="margin: .5rem;" placeholder="Tamaño de discos" v-model="sizeDiscos"></b-form-input>
|
|
</div>
|
|
<div class="col-md-6" >
|
|
<b-form-input style="margin: .5rem;" placeholder="Número de discos" v-model="numeroDiscos"></b-form-input>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4" >
|
|
<b-form-input style="margin: .5rem;" placeholder="Cantidad de memoria RAM" v-model="cantidadMemoriaRam"></b-form-input>
|
|
</div>
|
|
<div class="col-md-4" >
|
|
<b-form-input style="margin: .5rem;" placeholder="Velocidad de memoria Ram" v-model="velocidadMemoriaRam"></b-form-input>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle btn btn-outline-primary dropdown-toggle btn-block short" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{tipoMemoriaRamSelected != null ? tipoMemoriaRamSelected.nombre : 'Tipo de Memoria Ram'}}
|
|
</button>
|
|
<div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
|
|
<div class="containerDrop" v-for="tipo in tipoMemoriaRam" v-bind:key="tipo.id" @click="tipoMemoriaRamSelected = tipo">
|
|
<a class="dropdown-item"><p>{{tipo.nombre}}</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4" >
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle btn btn-outline-primary dropdown-toggle btn-block short" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{tarjetaGraficaSelected != null ? tarjetaGraficaSelected.nombre : 'Tipo de tarjeta grafica'}}
|
|
</button>
|
|
<div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
|
|
<div class="containerDrop" v-for="tipo in tarjetaGrafica" v-bind:key="tipo.id" @click="tarjetaGraficaSelected = tipo">
|
|
<a class="dropdown-item"><p>{{tipo.nombre}}</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4" >
|
|
<b-form-input style="margin: .5rem;" placeholder="Cantidad de memoria de la tarjeta grafica" v-model="cantidadMemoriaGrafica"></b-form-input>
|
|
</div>
|
|
<div class="col-md-4" >
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle btn btn-outline-primary dropdown-toggle btn-block short" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{tipoEquipoSelected != null ? tipoEquipoSelected.nombre : 'Tipo de Equipo'}}
|
|
</button>
|
|
<div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
|
|
<div class="containerDrop" v-for="tipo in tipoEquipo" v-bind:key="tipo.id" @click="tipoEquipoSelected = tipo">
|
|
<a class="dropdown-item"><p>{{tipo.nombre}}</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4" >
|
|
<b-dropdown v-bind:text="osSelected != null ? osSelected.nombre : 'Sistema operativo'" block variant="outline-primary" class="m-2">
|
|
<b-dropdown-item v-for="tipo in os" v-bind:key="tipo.id" @click="osSelected = tipo">{{tipo.nombre}}</b-dropdown-item>
|
|
</b-dropdown>
|
|
</div>
|
|
<div class="col-md-4" >
|
|
<b-form-input style="margin: .5rem;" placeholder="Versión del sistema operativo" v-model="versionOS"></b-form-input>
|
|
</div>
|
|
<div class="col-md-4" >
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle btn btn-outline-primary dropdown-toggle btn-block short" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{procesadorSelected != null ? procesadorSelected.nombre : 'Procesador'}}
|
|
</button>
|
|
<div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
|
|
<div class="containerDrop" v-for="tipo in procesador" v-bind:key="tipo.id" @click="procesadorSelected = tipo">
|
|
<a class="dropdown-item"><p>{{tipo.nombre}}</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4" >
|
|
<b-form-input style="margin: .5rem;" placeholder="Velocidad del procesador GHz" v-model="velocidadProcesadorGHz"></b-form-input>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<b-form-input style="margin: .5rem;" placeholder="Descripción del procesador" v-model="descripcionProcesador"></b-form-input>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4" >
|
|
<b-dropdown v-bind:text="marcaSelected != null ? marcaSelected.nombre : 'Marca'" block variant="outline-primary" class="m-2">
|
|
<b-dropdown-item v-for="tipo in marca" v-bind:key="tipo.id" @click="marcaSelected = tipo">{{tipo.nombre}}</b-dropdown-item>
|
|
</b-dropdown>
|
|
</div>
|
|
<div class="col-md-4" >
|
|
<b-form-input style="margin: .5rem;" placeholder="Modelo del equipo" v-model="modeloEquipo"></b-form-input>
|
|
</div>
|
|
<div class="col-md-4" >
|
|
<b-dropdown v-bind:text="usoSelected != null ? usoSelected.nombre : '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" style="margin: .5rem;" >
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle btn btn-outline-primary dropdown-toggle btn-block short" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{unidadSelected != null ? unidadSelected.unidadResponsable.nombre : 'Unidad Responsable'}}
|
|
</button>
|
|
<div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
|
|
<div class="containerDrop" v-for="tipo in unidad" v-bind:key="tipo.unidadResponsable.id" @click="unidadSelected = tipo">
|
|
<a class="dropdown-item"><p>{{tipo.unidadResponsable.nombre}}</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 " style="margin: .5rem;">
|
|
<div class="dropdown">
|
|
<button class="btn dropdown-toggle btn btn-outline-primary dropdown-toggle btn-block short" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{unidadSelected != null ? unidadSelected.responsable.nombre : 'Nombre del responsable' }}
|
|
</button>
|
|
<div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
|
|
<div class="containerDrop" v-for="(tipo,index) in unidad" v-bind:key="index" @click="unidadSelected = tipo">
|
|
<a class="dropdown-item"><p>{{tipo.responsable.nombre}}</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 " >
|
|
<b-form-input style="margin: .5rem;" placeholder="Ubicación de la Unidad Responsable" v-model="ubicacionUnidad"></b-form-input>
|
|
</div>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-2">
|
|
<button class="button " @click="agregar()">
|
|
Agregar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import config from "../config/config.js";
|
|
import Swal from 'sweetalert2';
|
|
|
|
export default {
|
|
|
|
name: "home",
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
typeSelected:"Equipos",
|
|
noInventario: "",
|
|
noResguardo: "",
|
|
serie: "",
|
|
cantidadMemoriaRam: "",
|
|
velocidadMemoriaRam: "",
|
|
cantidadMemoriaGrafica: "",
|
|
versionOS:"",
|
|
velocidadProcesadorGHz: "",
|
|
descripcionProcesador: "",
|
|
numeroDiscos: "",
|
|
sizeDiscos: "",
|
|
modeloEquipo: "",
|
|
tipoEquipo : null,
|
|
tipoEquipoSelected: null,
|
|
tipoMemoriaRam : null,
|
|
tipoMemoriaRamSelected: null,
|
|
tarjetaGrafica : null,
|
|
tarjetaGraficaSelected: null,
|
|
os : null,
|
|
osSelected: null,
|
|
marca : null,
|
|
marcaSelected: null,
|
|
procesador : null,
|
|
procesadorSelected: null,
|
|
unidad: null,
|
|
unidadSelected: null,
|
|
uso: null,
|
|
usoSelected : null,
|
|
ubicacionUnidad: ""
|
|
}
|
|
},
|
|
methods: {
|
|
async faltaCampo(campo){
|
|
await Swal.fire(
|
|
`Falta el campo de ${campo} por llenar`,
|
|
'',
|
|
'warning'
|
|
)
|
|
return;
|
|
},
|
|
async agregar() {
|
|
if(this.noInventario === "") return this.faltaCampo("Número de inventario");
|
|
if(this.noResguardo === "") return this.faltaCampo("Número de resguardo");
|
|
if(this.serie === "") return this.faltaCampo("Serie");
|
|
if(this.sizeDiscos === "") return this.faltaCampo("El tamaño de disco");
|
|
if(this.numeroDiscos === "") return this.faltaCampo("El número de descos");
|
|
if(this.cantidadMemoriaRam === "") return this.faltaCampo("Cantidad de memoria RAM");
|
|
if(this.velocidadMemoriaRam === "") return this.faltaCampo("Velocidad de la memoria RAM");
|
|
if(this.cantidadMemoriaGrafica === "") return this.faltaCampo("Cantidad de la memoria Grafica");
|
|
if(this.versionOS ==="") return this.faltaCampo("Versión del Sistema Operativo");
|
|
if(this.velocidadProcesadorGHz === "") return this.faltaCampo("Velocidad de procesador");
|
|
if(this.descripcionProcesador === "") return this.faltaCampo("Descripción del procesador");
|
|
if(this.modeloEquipo === "") return this.faltaCampo("Modelo del equipo");
|
|
if(this.ubicacionUnidad === "") return this.faltaCampo("Ubicación de la Unidad responsable");
|
|
if(this.tipoEquipoSelected === null) return this.faltaCampo("El tipo de equipo");
|
|
if(this.tipoMemoriaRamSelected === null) return this.faltaCampo("El tipo de memoria RAM");
|
|
if(this.tarjetaGraficaSelected === null) return this.faltaCampo("El tipo de tarjeta grafica");
|
|
if(this.osSelected === null) return this.faltaCampo("El tipo de sistema operativo");
|
|
if(this.marcaSelected === null) return this.faltaCampo("La marca del equipo");
|
|
if(this.procesadorSelected === null) return this.faltaCampo("El tipo del procesador");
|
|
if(this.unidadSelected === null) return this.faltaCampo("La unidad Responsable");
|
|
const data ={
|
|
noInventario: this.noInventario,
|
|
noResguardo: this.noResguardo,
|
|
serie: this.serie,
|
|
sizeDiscos: this.sizeDiscos,
|
|
numeroDiscos: this.numeroDiscos,
|
|
cantidadMemoriaRam: this.cantidadMemoriaRam,
|
|
velocidadMemoriaRam: this.velocidadMemoriaRam,
|
|
cantidadMemoriaGrafica: this.cantidadMemoriaGrafica,
|
|
versionOS: this.versionOS,
|
|
velocidadProcesadorGHz: this.velocidadProcesadorGHz,
|
|
descripcionProcesador: this.descripcionProcesador,
|
|
modeloEquipo: this.modeloEquipo,
|
|
idTipoEquipo: this.tipoEquipoSelected,
|
|
idMemoriaRam: this.tipoMemoriaRamSelected,
|
|
idTarjetaGrafica: this.tarjetaGraficaSelected,
|
|
idOs: this.osSelected,
|
|
idMarcaEquipo: this.marcaSelected,
|
|
idProcesador: this.procesadorSelected,
|
|
idUso : this.usoSelected,
|
|
unidad: this.unidadSelected,
|
|
ubicacion: this.ubicacionUnidad,
|
|
}
|
|
console.log(data);
|
|
try{
|
|
await axios.post( `${config.api}/addEquipo`, data );
|
|
await Swal.fire(
|
|
'Se agrego con exito el equipo',
|
|
'',
|
|
'success'
|
|
);
|
|
location.reload();
|
|
return;
|
|
}
|
|
catch(error){
|
|
console.log(error);
|
|
await Swal.fire(
|
|
'No se pudo agregar el equipo',
|
|
`Error en consola ${error}`,
|
|
'error'
|
|
);
|
|
return;
|
|
}
|
|
|
|
|
|
}
|
|
},
|
|
async beforeCreate() {
|
|
try {
|
|
let catalogo = await axios.get(`${config.api}/getCatalgoEquipo`);
|
|
this.tipoEquipo= catalogo.data.catalogos.tipoEquipo;
|
|
this.tipoMemoriaRam= catalogo.data.catalogos.tipoMemoriaRam;
|
|
this.tarjetaGrafica= catalogo.data.catalogos.tarjetaGrafica;
|
|
this.os= catalogo.data.catalogos.os;
|
|
this.marca= catalogo.data.catalogos.marca;
|
|
this.procesador= catalogo.data.catalogos.procesador;
|
|
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;
|
|
}
|
|
|
|
.dropdown-item,.short{
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: pre;
|
|
text-overflow: ellipsis;
|
|
-webkit-appearance: none;
|
|
word-wrap: break-word;
|
|
text-overflow: inherit;
|
|
white-space: normal;
|
|
}
|
|
.dropdown{
|
|
position: relative ;
|
|
display: inline-block;
|
|
height: auto;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.dropdown-menu{
|
|
max-height: 20rem;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
</style>
|