plantillas listas de las vistas principales

This commit is contained in:
KIKIN
2020-08-09 20:30:49 -05:00
parent bf4fdad21e
commit 6edcfd4559
9 changed files with 525 additions and 64 deletions
+13
View File
@@ -6484,6 +6484,11 @@
"whet.extend": "~0.9.9"
}
},
"sweetalert2": {
"version": "9.17.1",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.17.1.tgz",
"integrity": "sha512-D/VE2lT/bKd64/RBglLUtQ+3nsftzjzIiP2iqN6zPzPwf+2djIY+4k8Bg430zxRUn4DkZzyIuU58q3n0J43lvw=="
},
"tapable": {
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.9.tgz",
@@ -6931,6 +6936,14 @@
"loader-utils": "^1.0.2"
}
},
"vue-sweetalert2": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-3.0.6.tgz",
"integrity": "sha512-uT+UrASTlwVCeNCZwPVdzN28KQfnVDEYXdfJr3OJwt77bWfcVZrNDOqezZq0Y45SWpkpYKjrQr1/mjieuriWmg==",
"requires": {
"sweetalert2": "9.x"
}
},
"vue-template-compiler": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
+2 -1
View File
@@ -19,7 +19,8 @@
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.16.0",
"vue": "^2.5.11",
"vue-router": "^3.3.4"
"vue-router": "^3.3.4",
"vue-sweetalert2": "^3.0.6"
},
"browserslist": [
"> 1%",
+7 -1
View File
@@ -1,5 +1,5 @@
<template>
<footer id="footer">
<footer id="footer" v-if="['login'].includes($route.name)">
<div class="separador"></div>
<div class="contenedor-footer p-3">
<div class="cont-text-foo text-white text-center">
@@ -17,6 +17,12 @@
</footer>
</template>
<script>
export default {
}
</script>
<style scoped>
* {
margin: 0px;
+22 -22
View File
@@ -21,30 +21,30 @@
</a>
</div>
</div>
<!--
<div class="header-f">
<nav class="navbar navbar-expand-lg navbar-dark container">
<a class="navbar-brand">USUARIO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Añadir equipo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Consultar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="badge badge-danger p-2">Cerrar Sesión</span></a>
</li>
</ul>
<div
class="header-f"
v-if="!['login'].includes($route.name)"
>
<div class="container d-flex justify-content-between py-1">
<div class="d-flex">
<span class="text-white mr-3 my-auto mr-md-4">Nombre de Usuario</span>
<div>
<!-- <router-link to="login" class="text-white align-middle">Añadir equipo</router-link> -->
<b-dropdown id="dropdown-left" text="Añadir " variant="info" class="m-2">
<b-dropdown-item> <router-link to="addEquip" class="text-decoration-none text-body"> Computadora </router-link></b-dropdown-item>
<b-dropdown-item> <router-link to="addPrinter" class="text-decoration-none text-body"> Impresora </router-link></b-dropdown-item>
</b-dropdown>
</div>
</div>
<div class="my-auto">
<router-link to="./login" class="badge badge-danger py-2 px-3" style="font-size:14px, font-family: Arial">Cerrar sesión</router-link>
</div>
</div>
</nav>
</div>
-->
</header>
</template>
@@ -86,7 +86,7 @@ export default {
}
.header-f {
padding: 0.5rem 0;
padding: 0.1rem 0;
background-color: #bb8800;
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

+7 -1
View File
@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
import Login from './views/Login.vue'
import User from './views/User.vue'
import AddEquip from './views/AddEquip.vue'
import UpdateEquip from './views/UpdateEquip.vue'
const routes = [{
path: '/',
@@ -24,7 +25,12 @@ const routes = [{
path: '/addEquip',
component: AddEquip,
name: 'addEquip'
}
},
{
path: '/updateEquip',
component: UpdateEquip,
name: 'updateEquip'
},
]
Vue.use(VueRouter)
+189 -5
View File
@@ -1,15 +1,199 @@
<template>
<div>
<h1 class="serv-title m-4 text-center">Agregar un equipo</h1>
</div>
<div class="container mt-5">
<div class="d-flex flex-column">
<h1 class="text-center">Agregar equipo</h1>
<h3 class="text-left mt-4">Datos generales:</h3>
<form
class="mb-5 form-add-user pl-0"
enctype="multipart/form-data"
>
<input
type="text"
class="pb-2 my-4"
placeholder="Número de inventario:"
/>
<select class="py-2 my-4 sel-form-add">
<option value="" hidden>Unidad responsable:</option>
<option value="">Opcion 1</option>
</select>
</form>
<div>
<h3>Computadora</h3>
<form
class="mb-5 form-add-user pl-0"
enctype="multipart/form-data"
>
<select class="py-2 my-4 sel-form-add">
<option value="" hidden>Sistema operativo:</option>
<option value="">Opcion 1</option>
</select>
<input
type="text"
class="pb-2 my-4"
placeholder="Memoria:"
/>
</form>
</div>
<div class="">
<button
class="btn btn-lg btn-primary mr-4"
@click="$router.push('./user')"
>
Regresar
</button>
<button
class="btn btn-lg btn-success"
@click.prevent="addEquip()"
>
Añadir
</button>
</div>
</div>
<div
style="margin-top:200px; left: 0px; position: absolute;"
class="container-fluid px-0"
>
<footer id="footer" style="left: 0px;" class="text-center">
<div class="separador"></div>
<div class="contenedor-footer p-3">
<div class="text-white mt-3" style="font-size: 11px;">
<p>
Hecho en México, todos los derechos reservados 2020.
<br />
Esta página puede ser reproducida con fines no
lucrativos, siempre y cuando no se mutile, se cite
la fuente
<br />
completa y su dirección electrónica. De otra forma,
requiere permiso previo por escrito de la
institución.
</p>
</div>
</div>
</footer>
</div>
</div>
</template>
<script>
export default {
import Swal from 'sweetalert2'
export default {
data() {
return {
}
},
methods: {
addEquip() {
Swal.fire({
title: '¿Está seguro de querer añadir este equipo?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Si, estoy seguro',
cancelButtonText: 'Cancelar'
}).then((result) => {
if (result.value) {
Swal.fire({
title: '¡Equipo añadido!',
icon: 'success'
})
}
})
}
},
}
</script>
<style scope>
<style scoped>
select {
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
margin: 30px 0;
padding: 10px 50px 10px 10px;
background: url('../img/select-triangle.png') no-repeat 97% center !important;
background-color: #5c9cd8 !important;
cursor: pointer;
color: #fff;
border-radius: 2px;
border: none;
background-size: 12px !important;
}
.form-add-user input[type='text'],
.form-add-user input[type='email'],
.form-add-user input[type='date'] {
text-align: left;
width: 60%;
border: none;
border-bottom: 1.5px solid #000;
background-color: transparent;
}
.form-add-user input[type='text']:focus {
outline-color: transparent;
}
.sel-form-add {
width: 60%;
}
#footer {
bottom: 0px;
position: absolute;
width: 100%;
}
.separador {
width: 100%;
background: #2e5795;
height: 1rem;
}
.contenedor-footer {
width: 100%;
}
.cont-text-foo {
font-size: 12px;
}
footer {
background: #1b3d70;
}
@media (max-width: 577px) {
.form-add-user input[type='text'],
.form-add-user input[type='email'],
.form-add-user input[type='date'],
.sel-form-add{
width: 100%;
}
}
@media (min-width: 578px) and (max-width: 980px) {
.form-add-user input[type='text'],
.form-add-user input[type='email'],
.form-add-user input[type='date'],
.sel-form-add{
width: 75%;
}
}
</style>
+223
View File
@@ -0,0 +1,223 @@
<template>
<div class="container mt-5">
<div class="d-flex flex-column">
<h1 class="text-center">Editar información del equipo</h1>
<h3 class="text-left mt-4">Datos generales:</h3>
<form
class="mb-5 form-add-user pl-0"
enctype="multipart/form-data"
>
<input
type="text"
class="pb-2 my-4"
placeholder="Número de inventario:"
/>
<select class="py-2 my-4 sel-form-add">
<option value="" hidden>Unidad responsable:</option>
<option value="">Opcion 1</option>
</select>
</form>
<div>
<h3>Computadora</h3>
<form
class="mb-5 form-add-user pl-0"
enctype="multipart/form-data"
>
<select class="py-2 my-4 sel-form-add">
<option value="" hidden>Sistema operativo:</option>
<option value="">Opcion 1</option>
</select>
<input
type="text"
class="pb-2 my-4"
placeholder="Memoria:"
/>
</form>
</div>
<div class="">
<button
class="btn btn-lg btn-primary"
@click="$router.push('./user')"
>
Regresar
</button>
<button
class="btn btn-lg btn-danger mx-3"
@click.prevent="deleteEquip()"
>
Eliminar
</button>
<button
class="btn btn-lg btn-success mt-3 mt-sm-0"
@click.prevent="saveChanges()"
>
Guardar cambios
</button>
</div>
</div>
<div
style="margin-top:200px; left: 0px; position: absolute;"
class="container-fluid px-0"
>
<footer id="footer" style="left: 0px;" class="text-center">
<div class="separador"></div>
<div class="contenedor-footer p-3">
<div class="text-white mt-3" style="font-size: 11px;">
<p>
Hecho en México, todos los derechos reservados 2020.
<br />
Esta página puede ser reproducida con fines no
lucrativos, siempre y cuando no se mutile, se cite
la fuente
<br />
completa y su dirección electrónica. De otra forma,
requiere permiso previo por escrito de la
institución.
</p>
</div>
</div>
</footer>
</div>
</div>
</template>
<script>
import Swal from 'sweetalert2'
export default {
data() {
return {
}
},
methods: {
saveChanges() {
Swal.fire({
title: '¿Está seguro de querer guardar los cambios?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Si, estoy seguro',
cancelButtonText: 'Cancelar'
}).then((result) => {
if (result.value) {
Swal.fire({
title: '¡Información actualizada!',
icon: 'success'
})
}
})
},
deleteEquip() {
Swal.fire({
title: '¿Está seguro de querer eliminar este equipo?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Si, estoy seguro',
cancelButtonText: 'Cancelar'
}).then((result) => {
if (result.value) {
Swal.fire({
title: '¡Información eliminada!',
icon: 'success'
})
}
})
}
},
}
</script>
<style scoped>
select {
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
margin: 30px 0;
padding: 10px 50px 10px 10px;
background: url('../img/select-triangle.png') no-repeat 97% center !important;
background-color: #5c9cd8 !important;
cursor: pointer;
color: #fff;
border-radius: 2px;
border: none;
background-size: 12px !important;
}
.form-add-user input[type='text'],
.form-add-user input[type='email'],
.form-add-user input[type='date'] {
text-align: left;
width: 60%;
border: none;
border-bottom: 1.5px solid #000;
background-color: transparent;
}
.form-add-user input[type='text']:focus {
outline-color: transparent;
}
.sel-form-add {
width: 60%;
}
#footer {
bottom: 0px;
position: absolute;
width: 100%;
}
.separador {
width: 100%;
background: #2e5795;
height: 1rem;
}
.contenedor-footer {
width: 100%;
}
.cont-text-foo {
font-size: 12px;
}
footer {
background: #1b3d70;
}
@media (max-width: 577px) {
.form-add-user input[type='text'],
.form-add-user input[type='email'],
.form-add-user input[type='date'],
.sel-form-add{
width: 100%;
}
}
@media (min-width: 578px) and (max-width: 980px) {
.form-add-user input[type='text'],
.form-add-user input[type='email'],
.form-add-user input[type='date'],
.sel-form-add{
width: 75%;
}
}
</style>
+62 -34
View File
@@ -1,58 +1,37 @@
<template>
<div>
<div class="header-f">
<div class="container d-flex justify-content-between py-1">
<div class="d-flex">
<span class="text-white mr-3 my-auto mr-md-4">Nombre de Usuario</span>
<div>
<!-- <router-link to="login" class="text-white align-middle">Añadir equipo</router-link> -->
<b-dropdown id="dropdown-left" text="Añadir " variant="info" class="m-2">
<b-dropdown-item> <router-link to="addEquip" class="text-decoration-none text-body"> Computadora </router-link></b-dropdown-item>
<b-dropdown-item> <router-link to="addPrinter" class="text-decoration-none text-body"> Impresora </router-link></b-dropdown-item>
</b-dropdown>
</div>
</div>
<div class="my-auto">
<a href="/">
<span class="badge badge-danger py-2 px-3" style="font-size:14px, font-family: Arial">Cerrar sesión</span>
</a>
</div>
</div>
</div>
<div class="container">
<div class="container mt-5">
<div class="justify-content-center d-flex">
<h1 style="text-align:center">Sistema de censo</h1>
</div>
<a href="#" class="btn bg-info">
<span class="text-white justi">Impresoras</span>
</a>
<div class="row" style="margin: 0px; margin-top:20px">
<router-link to="#" class="btn btn-info mt-4">
Ver impresoras
</router-link>
<div class="row m-0 mt-3 mb-4">
<div class="row">
<div class="col">
<input
type="text"
class="form-control input-login-form shadow-none"
placeholder="Id: 2225491"
placeholder="Número de inventario"
/>
</div>
</div>
</div>
<div class="table-responsive table-fixed text-nowrap justify-content-md-center"
style="max-height: 130px;margin-top:30px; margin-bottom:15px">
style="max-height: 350px;">
<table class="table table-sm table-hover text-center" style="font-size:14px">
<thead class="thead-light text-uppercase">
<tr>
<th v-for="tableHead in tableHeads">{{ tableHead }}</th>
<th v-for="tableHead in tableHeads" class="sticky-top">{{ tableHead }}</th>
</tr>
</thead>
<tbody class="overflow-auto" v-for="(item, index) in inventory">
<tr>
<tbody class="overflow-auto t-hov" v-for="(item, index) in inventory">
<tr @click="watchRow()">
<td>
<a href="#">{{ item.noInventario }}</a>
</td>
@@ -78,8 +57,32 @@
</tbody>
</table>
</div>
<button class="btn btn-lg btn-success mt-3">Descargar</button>
</div>
<a class="btn btn-success" href="#" role="button">Descargar</a>
<div
style="margin-top:200px; left: 0px; position: absolute;"
class="container-fluid px-0"
>
<footer id="footer" style="left: 0px;" class="text-center">
<div class="separador"></div>
<div class="contenedor-footer p-3">
<div class="text-white mt-3" style="font-size: 11px;">
<p>
Hecho en México, todos los derechos reservados 2020.
<br />
Esta página puede ser reproducida con fines no
lucrativos, siempre y cuando no se mutile, se cite
la fuente
<br />
completa y su dirección electrónica. De otra forma,
requiere permiso previo por escrito de la
institución.
</p>
</div>
</div>
</footer>
</div>
</div>
@@ -141,6 +144,9 @@ export default {
"resguardo": 5848
}
}
},
watchRow() {
this.$router.push('./updateEquip')
}
},
}
@@ -150,5 +156,27 @@ export default {
.header-f {
background-color: #bb8800;
}
.t-hov:hover {
cursor: pointer;
}
#footer {
bottom: 0px;
position: absolute;
width: 100%;
}
.separador {
width: 100%;
background: #2e5795;
height: 1rem;
}
.contenedor-footer {
width: 100%;
}
.cont-text-foo {
font-size: 12px;
}
footer {
background: #1b3d70;
}
</style>