From ab7ca620da33e1323c718a5bbfde395713c16de5 Mon Sep 17 00:00:00 2001
From: DanielRamirezGe <daniel.adrian.ramirez.george@gmail.com>
Date: Thu, 31 Dec 2020 03:02:59 -0600
Subject: [PATCH] agregar impresoras

---
 censo_front/src/components/header.vue        |   2 +-
 censo_front/src/components/nav.vue           |  68 ++---------
 censo_front/src/components/pcsTable.vue      | 109 +++++++++++++++++
 censo_front/src/components/printersTable.vue |  82 +++++++++++++
 censo_front/src/routes.js                    |   6 +-
 censo_front/src/view/addPcs.vue              | 119 ++++++++++++++++++
 censo_front/src/view/addPrinter.vue          |  95 +++++++++++++++
 censo_front/src/view/home.vue                | 121 +++++--------------
 8 files changed, 451 insertions(+), 151 deletions(-)
 create mode 100644 censo_front/src/components/pcsTable.vue
 create mode 100644 censo_front/src/components/printersTable.vue
 create mode 100644 censo_front/src/view/addPcs.vue
 create mode 100644 censo_front/src/view/addPrinter.vue

diff --git a/censo_front/src/components/header.vue b/censo_front/src/components/header.vue
index 03a0704..0b2fca0 100644
--- a/censo_front/src/components/header.vue
+++ b/censo_front/src/components/header.vue
@@ -26,7 +26,7 @@
 
 <style>
 .divMaster {
-  height: 7em;
+  height: 8rem;
   margin: 0;
   width: auto;
 }
diff --git a/censo_front/src/components/nav.vue b/censo_front/src/components/nav.vue
index 60cea98..4cc5098 100644
--- a/censo_front/src/components/nav.vue
+++ b/censo_front/src/components/nav.vue
@@ -3,7 +3,6 @@
     <div class="col-10 offset-1">
       <nav class="navbar navbar-expand-sm navbar-dark  ">
         <button
-          @click="method()"
           class="navbar-toggler col-5"
           type="button"
           data-toggle="collapse"
@@ -13,7 +12,6 @@
           aria-label="Toggle navigation"
         >
           <span class="navbar-toggler-icon blanco d-flex"></span>
-          <!-- <span class="mx-2">Menu</span> -->
         </button>
 
         <div class="collapse navbar-collapse " id="navbarTogglerDemo02">
@@ -21,14 +19,8 @@
             class="navbar-nav mr-auto w-100 d-flex align-items-center justify-content-between mt-0 mt-lg-0"
           >
             <li class="nav-item">
-              <a class="nav-link text-white" @click="inicio()">Inicio</a>
+               <router-link to="/"><a class="nav-link text-white">Inicio</a></router-link>
             </li>
-            <li class="nav-item">
-              <a class="nav-link text-white" @click="presentacion()"
-                >Modificar</a
-              >
-            </li>
-
             <li class="nav-item ">
               <div class="dropdown">
                 <a
@@ -46,17 +38,12 @@
                   class="dropdown-menu azulUnam"
                   aria-labelledby="navbarDropdown"
                 >
-                  <a
-                    class="dropdown-item text-white"
-                    @click="tema('Ciencias Socioeconomicas')"
-                    >Alta de equipo</a
-                  >
-                <div class="dropdown-divider"></div>
-                  <a
-                    class="dropdown-item text-white"
-                    @click="tema('Diseño y Edificacion')"
-                    >Alta de impresora</a
-                  >
+                    <router-link to="/agregarEquipo"> 
+                        <a class="dropdown-item text-white" >Alta de equipo</a>
+                    </router-link>
+                    <router-link to="/agregarImpresora"> 
+                        <a class="dropdown-item text-white" >Alta de impresora</a>
+                    </router-link>
                 </div>
               </div>
             </li>
@@ -100,18 +87,14 @@ export default {
   margin: 0 auto;
 }
 nav {
-  padding: 0.5rem 0;
+  padding: 0;
 }
 
 .azulUnam {
   background-color: #1e3c70;
 }
 
-.doradoUnam {
-  background-color: #bb8800;
-}
-
-.dropdown-item:hover {
+.doradoUnam,.dropdown-item:hover {
   background-color: #bb8800;
 }
 
@@ -140,24 +123,6 @@ nav {
   padding: 0.3rem 1rem;
 }
 
-.menuText {
-  display: none;
-}
-
-.reDer {
-  border-top-right-radius: 20px 20px !important;
-  border-bottom-right-radius: 20px 20px !important;
-}
-
-.reIzq {
-  border-top-left-radius: 20px 20px !important;
-  border-bottom-left-radius: 20px 20px !important;
-}
-
-/* 
-.dropdown-menu {
-  width: 10% !important;
-} */
 
 .dropdown {
   position: relative;
@@ -170,23 +135,12 @@ nav {
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  /* padding: 12px 16px; */
   top: 0.8rem;
   left: -10rem;
   display: block;
 }
-.rescont {
-  z-index: 2;
-}
-
-.list-group-item {
-  padding: 12px 16px;
-}
-
-.navbar-toggler {
-  font-size: 1rem;
-}
-.navbar-dark .navbar-toggler {
+.navbar-dark, .navbar-toggler {
+     font-size: 1rem;
   border: none;
 }
 
diff --git a/censo_front/src/components/pcsTable.vue b/censo_front/src/components/pcsTable.vue
new file mode 100644
index 0000000..30588d4
--- /dev/null
+++ b/censo_front/src/components/pcsTable.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="row">
+        <div class="col-12">
+            <div class="table-responsive">
+                <table class="table">      
+                <thead>
+                    <tr>
+                        <th v-for="item in pcHeaders" v-bind:key="item.nombre" scope="col">
+                            <div class="dropdown">
+                                <button class="btn nav-link  dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    {{item.nombre}}
+                                </button>
+                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                    <b-dropdown-form>
+                                        <b-form-checkbox  v-for="type in item.data" v-bind:key="type"  scope="col"><a>{{type.nombre}}</a></b-form-checkbox>
+                                    </b-dropdown-form>
+                                </div>
+                            </div>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="item in pcData" v-bind:key="item.index">
+                        <td v-b-modal.mostrarEventos class="text-primary">{{ item.noInventario }}</td>
+                        <td v-b-modal.mostrarEventos >{{ item.activoFijo }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.modelo }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.marca }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.noSerie }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.procesador }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.vProcesador }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.hdd }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.memoriasz }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.memoria }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.vMemoria }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.graficos }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.osname }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.noResguardo }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.uResponsable }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.nombreResponsable }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.ubicacion }}</td>
+                        <td v-b-modal.mostrarEventos>{{ item.uso }}</td>
+                    </tr>
+                </tbody>
+                </table>
+            </div>
+        </div>
+         <b-modal  id="mostrarEventos"  centered  size="lg" hide-footer title="Actualizar datosz">
+            <p class="my-4">Nombre           </p>
+            <p class="my-4">Cantidad a pagar </p>
+            <div style="margin-top: 2rem;">
+                            <b-button   class="btn btn-outline-success float-right" @click="enviarFicha()" style="width: 30%; ">Enviar</b-button>
+                            <b-button    @click="$bvModal.hide('mostrarEventos')"  variant="outline-danger"  class="btn  float-left"  style="width: 30%; ">Cancelar</b-button>
+                        </div>   
+        </b-modal>
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: "home",
+  data() {
+      return {
+        pcHeaders: [
+            {nombre: "Inventario", data: []},
+            {nombre: "Tipo", data: [{nombre: "compu", value: true}, {nombre: "dos", value: true}]},
+            {nombre: "Modelo", data: []},
+            {nombre: "Marca", data: []},
+            {nombre: "Serie", data: []},
+            {nombre: "Procesador", data: []},
+            {nombre: "Velocidad de procesador (MHz)", data: []},
+            {nombre: "ROM (GB)", data: []},
+            {nombre: "RAM (MB)", data: []},
+            {nombre: "Tipo de memoria", data: []},
+            {nombre: "Velocidad de memoria (MHz)", data: []},
+            {nombre: "Gráficos", data: []},
+            {nombre: "Sistema operativo", data: []},
+            {nombre: "Resguardo", data: []},
+            {nombre: "Unidad responsable", data: []},
+            {nombre: "Responsable", data: []},
+            {nombre: "Ubicación", data: []},
+            {nombre: "Uso", data: []}],
+        pcData: [
+          {    noInventario: "Inventario",
+               activoFijo: "Tipo",
+               modelo: "Modelo",
+               marca: "Marca",
+               noSerie: "Serie",
+               procesador: "Procesador",
+               vProcesador: "Velocidad de procesador (MHz)",
+               hdd: "ROM (GB)",
+               memoriasz: "RAM (MB)",
+               memoria: "Tipo de memoria",
+               vMemoria: "Velocidad de memoria (MHz)",
+               graficos: "Gráficos",
+               osname: "Sistema operativo",
+               noResguardo: "Resguardo",
+               uResponsable: "Unidad responsable",
+               nombreResponsable: "Responsable",
+               ubicacion: "Ubicación",
+               uso: "Uso"  },
+        ],
+      }
+    },
+    methods: {
+     
+    }
+};
+</script>
\ No newline at end of file
diff --git a/censo_front/src/components/printersTable.vue b/censo_front/src/components/printersTable.vue
new file mode 100644
index 0000000..6d8f924
--- /dev/null
+++ b/censo_front/src/components/printersTable.vue
@@ -0,0 +1,82 @@
+<template>
+    <div class="row">
+        <div class="col-12">
+            <div class="table-responsive">
+                <table class="table">      
+                <thead>
+                    <tr>
+                        <th v-for="item in printerHeaders" v-bind:key="item.nombre" scope="col">
+                            <div class="dropdown">
+                                <button class="btn nav-link  dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    {{item.nombre}}
+                                </button>
+                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                    <b-dropdown-form>
+                                        <b-form-checkbox  v-for="type in item.data" v-bind:key="type"  scope="col"><a>{{type.nombre}}</a></b-form-checkbox>
+                                    </b-dropdown-form>
+                                </div>
+                            </div>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="item in printerData" v-bind:key="item.index">
+                        <td class="text-primary">{{ item.noInventario }}</td>
+                        <td>{{ item.activoFijo }}</td>
+                        <td>{{ item.modelo }}</td>
+                        <td>{{ item.marca }}</td>
+                        <td>{{ item.noSerie }}</td> 
+                        <td>{{ item.descripcion }}</td>
+                        <td>{{ item.noResguardo }}</td>
+                        <td>{{ item.uResponsable }}</td>
+                        <td>{{ item.nombreResponsable }}</td>
+                        <td>{{ item.ubicacion }}</td>
+                        <td>{{ item.uso }}</td>
+                    </tr>
+                </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: "home",
+  data() {
+      return {
+        printerHeaders: [
+            {nombre: "Inventario", data: []},
+            {nombre: "Tipo", data: [{nombre: "compu", value: true}, {nombre: "dos", value: true}]},
+            {nombre: "Modelo", data: []},
+            {nombre: "Marca", data: []},
+            {nombre: "Serie", data: []},
+            {nombre: "Descripción adicional", data: []},
+            {nombre: "Resguardo", data: []},
+            {nombre: "Unidad responsable", data: []},
+            {nombre: "Responsable", data: []},
+            {nombre: "Ubicación", data: []},
+            {nombre: "Uso", data: []}
+        ],
+        printerData:[{    
+                noInventario: "Inventario",
+                activoFijo: "Tipo",
+                modelo: "Modelo",
+                marca: "Marca",
+                noSerie: "Serie",
+                descripcion: "Descripcion",
+                noResguardo: "Resguardo",
+                uResponsable: "Unidad responsable",
+                nombreResponsable: "Responsable",
+                ubicacion: "Ubicación",
+                uso: "Uso"  
+                },]
+
+      }
+    },
+    methods: {
+     
+    }
+};
+</script>
\ No newline at end of file
diff --git a/censo_front/src/routes.js b/censo_front/src/routes.js
index c9ed91c..74c6d63 100644
--- a/censo_front/src/routes.js
+++ b/censo_front/src/routes.js
@@ -1,4 +1,8 @@
 import home from "./view/home.vue";
+import addPrinter from "./view/addPrinter.vue";
+import addPcs from "./view/addPcs"
 export const routes = [
-    { path: "/", component: home, name: "form" },
+    { path: "/", component: home, name: "home" },
+    { path: "/agregarImpresora", component: addPrinter, name: "addPrinter" },
+    { path: "/agregarEquipo", component: addPcs, name: "addPcs" }
 ];
diff --git a/censo_front/src/view/addPcs.vue b/censo_front/src/view/addPcs.vue
new file mode 100644
index 0000000..2510d11
--- /dev/null
+++ b/censo_front/src/view/addPcs.vue
@@ -0,0 +1,119 @@
+<template>
+    <div class="container">
+        <h1>Agregar Equipo</h1>
+        <div class="row">
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Número de inventario"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Tipo"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Modelo"></b-form-input>
+            </div>
+        </div>
+         <div class="row">
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Marca"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Serie"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Procesador"></b-form-input>
+            </div>
+        </div>
+         <div class="row">
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Velocidad de procesador (MHz)"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="ROM (GB)"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="RAM (MB)"></b-form-input>
+            </div>
+        </div>
+         <div class="row">
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Tipo de memoria"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Velocidad de memoria (MHz)"></b-form-input>
+            </div>
+             <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Gráficos"></b-form-input>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Sistema operativo"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Resguardo"></b-form-input>
+            </div>
+             <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Unidad responsable"></b-form-input>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Responsable"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Ubicación"></b-form-input>
+            </div>
+             <div class="col-md-4">
+                <b-form-input class="fadeIn second" id="input-small"  placeholder="Uso"></b-form-input>
+            </div>
+        </div>
+        <div class="pure-u-1 pure-u-md-1-2">
+            <button class="button " >
+              Agregar
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+
+  name: "home",
+  components: {
+  },
+  data() {
+      return {
+        typeSelected:"Equipos",
+      }
+    },
+    methods: {
+     
+    }
+};
+</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>
diff --git a/censo_front/src/view/addPrinter.vue b/censo_front/src/view/addPrinter.vue
new file mode 100644
index 0000000..134d62c
--- /dev/null
+++ b/censo_front/src/view/addPrinter.vue
@@ -0,0 +1,95 @@
+<template>
+    <div class="container">
+        <h1>Agregar impresora</h1>
+        <div class="row">
+            <div class="col-md-4">
+                <b-form-input id="input-small"  placeholder="Número de inventario"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input id="input-small"  placeholder="Tipo"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input id="input-small"  placeholder="Modelo"></b-form-input>
+            </div>
+        </div>
+         <div class="row">
+            <div class="col-md-4">
+                <b-form-input id="input-small"  placeholder="Marca"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input id="input-small"  placeholder="Serie"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input id="input-small"  placeholder="Descripcion adicional"></b-form-input>
+            </div>
+        </div>
+         <div class="row">
+            <div class="col-md-4">
+                <b-form-input id="input-small"  placeholder="Resguardo"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input id="input-small"  placeholder="Unidad responsable"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input id="input-small"  placeholder="Nombre del responsable"></b-form-input>
+            </div>
+        </div>
+         <div class="row">
+            <div class="col-md-4">
+                <b-form-input id="input-small"  placeholder="Ubicación"></b-form-input>
+            </div>
+            <div class="col-md-4">
+                <b-form-input id="input-small"  placeholder="Uso"></b-form-input>
+            </div>
+        </div>
+        <div class="pure-u-1 pure-u-md-1-2">
+            <button class="button " >
+              Agregar
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+
+  name: "home",
+  components: {
+  },
+  data() {
+      return {
+        typeSelected:"Equipos",
+      }
+    },
+    methods: {
+     
+    }
+};
+</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>
diff --git a/censo_front/src/view/home.vue b/censo_front/src/view/home.vue
index 5dc17d5..717ebaf 100644
--- a/censo_front/src/view/home.vue
+++ b/censo_front/src/view/home.vue
@@ -1,53 +1,28 @@
 <template>
     <div>
         <h1>Sistema de Censo</h1>
-        <div class="input-group">
-            <div class="input-group-prepend">
-                <span class="input-group-text" id="basic-addon1"><i class="fa fa-search" style="font-size:20px"></i></span>
+        <div class="container">
+             <div class="row">
+                    <div class="col-sm">
+                        <b-input-group size="sm" class="mb-2">
+                            <b-input-group-prepend is-text>
+                                <b-icon icon="search"></b-icon>
+                            </b-input-group-prepend>
+                            <b-form-input type="search" placeholder="Buscar" ></b-form-input>
+                        </b-input-group>
+                    </div>
+                    <div class="col-sm">
+                        <button type="button" class="btn btn-outline-primary float-right" @click="typeSelected=='Equipos' ? typeSelected='Impresoras': typeSelected='Equipos'">{{typeSelected}}</button>
+                    </div>
             </div>
-            <input type="text" class="form-control searchBar" placeholder="Buscar" aria-label="Buscar" aria-describedby="basic-addon1" >
-            <button type="button" class="btn btn-outline-primary">Primary</button>
         </div>
-        <div class="table-responsive">
-            <table class="table">      
-            <thead>
-                <tr>
-                    <th v-for="item in header" v-bind:key="item.nombre" scope="col">
-                        <div class="dropdown">
-                            <button class="btn nav-link  dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                {{item.nombre}}
-                            </button>
-                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                                <a v-for="type in item.data" v-bind:key=" type" scope="col" class="dropdown-item" >{{ type}}</a>
-                            </div>
-                        </div>
-                    </th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr v-for="item in data" v-bind:key="item.index">
-                    <td class="text-primary">{{ item.noInventario }}</td>
-                    <td>{{ item.activoFijo }}</td>
-                    <td>{{ item.modelo }}</td>
-                    <td>{{ item.marca }}</td>
-                    <td>{{ item.noSerie }}</td>
-                    <td>{{ item.procesador }}</td>
-                    <td>{{ item.vProcesador }}</td>
-                    <td>{{ item.hdd }}</td>
-                    <td>{{ item.memoriasz }}</td>
-                    <td>{{ item.memoria }}</td>
-                    <td>{{ item.vMemoria }}</td>
-                    <td>{{ item.graficos }}</td>
-                    <td>{{ item.osname }}</td>
-                    <td>{{ item.noResguardo }}</td>
-                    <td>{{ item.uResponsable }}</td>
-                    <td>{{ item.nombreResponsable }}</td>
-                    <td>{{ item.ubicacion }}</td>
-                    <td>{{ item.uso }}</td>
-                </tr>
-            </tbody>
-            </table>
+        <div class="container" v-if="typeSelected =='Equipos'">
+            <PcTable />
         </div>
+        <div class="container" v-else>
+            <PrinterTable />
+        </div>
+        
         <div class="pure-u-1 pure-u-md-1-2">
             <button class="button " >
               Descargar Excel
@@ -58,50 +33,19 @@
 
 <script>
 
+import PcTable from './../components/pcsTable.vue'
+import PrinterTable from './../components/printersTable.vue'
+
 export default {
+
   name: "home",
+  components: {
+    PcTable,
+    PrinterTable,
+  },
   data() {
       return {
-         header: [
-               {nombre: "Inventario", data: []},
-               {nombre: "Tipo", data: ["compu"]},
-               {nombre: "Modelo", data: []},
-               {nombre: "Marca", data: []},
-               {nombre: "Serie", data: []},
-               {nombre: "Procesador", data: []},
-               {nombre: "Velocidad de procesador (MHz)", data: []},
-               {nombre: "ROM (GB)", data: []},
-               {nombre: "RAM (MB)", data: []},
-               {nombre: "Tipo de memoria", data: []},
-               {nombre: "Velocidad de memoria (MHz)", data: []},
-               {nombre: "Gráficos", data: []},
-               {nombre: "Sistema operativo", data: []},
-               {nombre: "Resguardo", data: []},
-               {nombre: "Unidad responsable", data: []},
-               {nombre: "Responsable", data: []},
-               {nombre: "Ubicación", data: []},
-               {nombre: "Uso", data: []}       ],
-        data: [
-          {    noInventario: "Inventario",
-               activoFijo: "Tipo",
-               modelo: "Modelo",
-               marca: "Marca",
-               noSerie: "Serie",
-               procesador: "Procesador",
-               vProcesador: "Velocidad de procesador (MHz)",
-               hdd: "ROM (GB)",
-               memoriasz: "RAM (MB)",
-               memoria: "Tipo de memoria",
-               vMemoria: "Velocidad de memoria (MHz)",
-               graficos: "Gráficos",
-               osname: "Sistema operativo",
-               noResguardo: "Resguardo",
-               uResponsable: "Unidad responsable",
-               nombreResponsable: "Responsable",
-               ubicacion: "Ubicación",
-               uso: "Uso"  },
-         
-        ]
+        typeSelected:"Equipos",
       }
     },
     methods: {
@@ -110,13 +54,6 @@ export default {
 };
 </script>
 <style scoped>
-.searchBar{
-  
-  width: 15rem;  
-  margin-right: 15rem;
-  
-}
-
 .button {
   background-color: #1b3d70; /* Green */
   border: none;
@@ -137,7 +74,7 @@ export default {
   margin-top: 2rem;
 }
 .button:hover {
-  background-color: #46c200;
+  background-color: #bb8800;
   color: white;
 }
 </style>