| | |
| | | import {ElMessage} from "element-plus"; |
| | | import {ref, watch} from "vue" |
| | | import deepClone from "@/utils/deepClone" |
| | | |
| | | |
| | | const store = userInfo() |
| | | |
| | | |
| | | const router = useRouter() |
| | | const userStore = useUserInfoStore() |
| | | const user = userStore.user.userName |
| | | |
| | | |
| | | // store.createWebSocket(); |
| | | function quit() { |
| | | userStore.$patch({ |
| | |
| | | }) |
| | | router.push("/login") |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | //提取模块列表 |
| | | let menuList = $ref([]) |
| | | request.get('/menu/sysMenu/list').then((res) => { |
| | |
| | | router.push('/login') |
| | | } |
| | | }) |
| | | |
| | | |
| | | //获取菜单列表 |
| | | // let menuItemList = $ref([]) |
| | | // request.get('/menuItem').then((res) => { |
| | |
| | | // router.push('/login') |
| | | // } |
| | | // }) |
| | | |
| | | |
| | | const menu = ref(null) |
| | | let indexKey = ref(null) |
| | | |
| | | |
| | | function handleOpen(key) { |
| | | indexKey.value = key |
| | | } |
| | | |
| | | |
| | | watch(indexKey, (newVal, oldVal) => { |
| | | if (oldVal !== newVal && oldVal !== null) { |
| | | menu.value.close(oldVal) |
| | |
| | | }, |
| | | {deep:true} |
| | | ) |
| | | |
| | | |
| | | router.beforeEach((to, from) => { |
| | | //return false |
| | | }) |
| | | |
| | | |
| | | |
| | | |
| | | let openFlag = $ref(null) |
| | | //原始菜单打开 |
| | | const openMenu = (menuID) => { |
| | |
| | | openFlag = menuID |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | </script> |
| | | |
| | | |
| | | <template> |
| | | <div id="all"> |
| | | <el-container> |
| | |
| | | </div> |
| | | <ul class='enter-x-left' |
| | | v-show="openFlag==items.id"> |
| | | |
| | | |
| | | <li v-for="menuItem in items.children" |
| | | style="margin-bottom:2px"> |
| | | <router-link :to="{path:menuItem.url}"> |
| | | {{ menuItem.menuName }} |
| | | </router-link> |
| | | |
| | | |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | </div> |
| | | </el-aside> |
| | | |
| | | |
| | | <el-main> |
| | | <div id="main"> |
| | | <router-view></router-view> |
| | | </div> |
| | | </el-main> |
| | | |
| | | |
| | | </el-container> |
| | | </el-container> |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | <style scoped> |
| | | #all{ |
| | | background-color: #eee; |
| | |
| | | height: 100vh; |
| | | width: 99vw |
| | | } |
| | | |
| | | |
| | | *{ |
| | | padding: 0; |
| | | margin: 0; |
| | |
| | | } |
| | | :deep(span){ |
| | | margin-right: 0; |
| | | |
| | | |
| | | } |
| | | .el-collapse{ |
| | | font-size: 16px; |
| | |
| | | background-color: #fff; |
| | | } |
| | | /*------------*/ |
| | | |
| | | |
| | | /* .menu div div{ |
| | | |
| | | |
| | | width: 138px; |
| | | height: 35px; |
| | | line-height: 35px; |
| | |
| | | /* background-color:#5CADFE; */ |
| | | /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */ |
| | | /* } */ |
| | | |
| | | |
| | | .menu { |
| | | width: 138px; |
| | | height: 33px; |
| | | line-height: 25px; |
| | | |
| | | |
| | | color: #000000; |
| | | font-size: 16px; |
| | | padding-left: 15px; |
| | | padding-right: 2px; |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | ul { |
| | | height: auto; |
| | | margin: 1px auto; |
| | | text-align: center; |
| | | } |
| | | |
| | | |
| | | ul li { |
| | | |
| | | |
| | | height: 28px; |
| | | line-height: 30px; |
| | | /* background: rgb(128, 128, 128); */ |
| | |
| | | text-align: left; |
| | | /* border-radius:8px; */ |
| | | /* outline: none; */ |
| | | |
| | | |
| | | /* background: #5CADFE; */ |
| | | /* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */ |
| | | } |
| | | |
| | | |
| | | ul li:hover { |
| | | /* background:#5CADFE ; */ |
| | | color: #ffffff; |
| | | } |
| | | |
| | | |
| | | ul li a { |
| | | text-decoration: none; |
| | | color: #000000; |
| | | font-size: 14px; |
| | | } |
| | | ul li a:hover { |
| | | |
| | | |
| | | color: #1087ff; |
| | | } |
| | | |
| | | |
| | | .item_divider { |
| | | width: 118px; |
| | | height: 0px; |
| | |
| | | font-size: 14px; |
| | | text-decoration: none; |
| | | } |
| | | |
| | | |
| | | .menu_title { |
| | | width: 140px; |
| | | height: 45px; |
| | |
| | | position: relative; |
| | | font-weight: bold; |
| | | overflow: hidden; |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | .menu_title:hover { |
| | | /* background: #dedede; */ |
| | | color: #3b9af9; |
| | | } |
| | | |
| | | |
| | | .indicator { |
| | | display: block; |
| | | width: 40px; |
| | |
| | | transition: all 0.3s ease; |
| | | text-align: center; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | /* 动画效果 */ |
| | | .enter-x-left { |
| | | z-index: 9; |
| | |
| | | transform: translateX(0); |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | </style> |