pcpuma_unam_operador/components/layouts/Menu.vue
2022-05-24 22:38:17 -05:00

167 lines
5.0 KiB
Vue

<template>
<aside>
<b-sidebar type="is-white" v-model="open" fullheight overlay>
<div class="m-5">
<b-image :src="require('@/assets/logo.png')" alt="logo_pc_puma" />
<b-menu>
<b-menu-list label="Menu">
<!-- <b-menu-list>
<b-menu-item
label="Inicio"
:icon="icono('/inicio')"
:disabled="activo('/inicio')"
@click="opcionMenu('/inicio')"
/>
</b-menu-list> -->
<b-menu-list>
<b-menu-item
label="Préstamo/Devolución"
:icon="icono('/prestamo_devolucion')"
:disabled="activo('/prestamo_devolucion')"
@click="opcionMenu('/prestamo_devolucion')"
/>
</b-menu-list>
<b-menu-list>
<b-menu-item
label="Historial de Préstamos"
:icon="icono('/historial_prestamos')"
:disabled="activo('/historial_prestamos')"
@click="opcionMenu('/historial_prestamos')"
/>
</b-menu-list>
<b-menu-item icon="cellphone-link">
<template #label="props">
Equipos
<b-icon
class="is-pulled-right"
:icon="props.expanded ? 'menu-down' : 'menu-up'"
/>
</template>
<b-menu-item
label="Buscar equipo"
:icon="icono('/equipos/buscar_equipo')"
:disabled="activo('/equipos/buscar_equipo')"
@click="opcionMenu('/equipos/buscar_equipo')"
/>
<b-menu-item
label="Todos los equipos"
:icon="icono('/equipos/todos_equipos')"
:disabled="activo('/equipos/todos_equipos')"
@click="opcionMenu('/equipos/todos_equipos')"
/>
</b-menu-item>
<b-menu-item
label="Regreso Inmediato"
:icon="icono('/regreso_inmediato')"
:disabled="activo('/regreso_inmediato')"
@click="opcionMenu('/regreso_inmediato')"
v-if="idTipoUsuario === 1"
/>
<b-menu-item icon="account-plus" v-if="idTipoUsuario === 1">
<template #label="props">
Administrator
<b-icon
class="is-pulled-right"
:icon="props.expanded ? 'menu-down' : 'menu-up'"
/>
</template>
<b-menu-item
label="Usuarios"
:icon="icono('/admin/usuarios')"
:disabled="activo('/admin/usuarios')"
@click="opcionMenu('/admin/usuarios')"
/>
<b-menu-item
label="Operadores"
:icon="icono('/admin/operadores')"
:disabled="activo('/admin/operadores')"
@click="opcionMenu('/admin/operadores')"
/>
<b-menu-item
label="Carga Masiva Equipos"
:icon="icono('/admin/carga_masiva_equipos')"
:disabled="activo('/admin/carga_masiva_equipos')"
@click="opcionMenu('/admin/carga_masiva_equipos')"
/>
<b-menu-item
label="Carga Masiva Usuarios"
:icon="icono('/admin/carga_masiva_usuarios')"
:disabled="activo('/admin/carga_masiva_usuarios')"
@click="opcionMenu('/admin/carga_masiva_usuarios')"
/>
<b-menu-item
label="Reportes"
:icon="icono('/admin/reportes')"
:disabled="activo('/admin/reportes')"
@click="opcionMenu('/admin/reportes')"
/>
</b-menu-item>
</b-menu-list>
<b-menu-list label="Acciones">
<b-menu-item label="Cerrar Sesión" @click="cerrarSesion()" />
</b-menu-list>
</b-menu>
</div>
</b-sidebar>
<dir class="pl-0 py-5">
<b-button type="is-info" @click="open = true">
<b-icon icon="menu" />
</b-button>
</dir>
</aside>
</template>
<script>
export default {
data() {
return {
open: false,
idTipoUsuario: Number(localStorage.getItem('idTipoUsuario')),
}
},
methods: {
cerrarSesion() {
localStorage.clear()
this.$router.push('/')
},
opcionMenu(path) {
this.open = false
this.$router.push(path)
},
activo(ruta) {
return ruta === window.location.pathname
},
icono(ruta) {
return this.activo(ruta) ? 'square' : 'crop-square'
},
},
created() {
if (
!localStorage.getItem('token') ||
!localStorage.getItem('idOperador') ||
!localStorage.getItem('idTipoUsuario') ||
!localStorage.getItem('operador') ||
!localStorage.getItem('tipoUsuario') ||
!localStorage.getItem('idModulo')
)
this.cerrarSesion()
},
}
</script>
<style></style>