<script setup>
|
import { RouterLink,useRouter} from 'vue-router'
|
import useUserInfoStore from '@/stores/userInfo'
|
import request from "@/utils/request";
|
import {ElMessage} from "element-plus";
|
import {onMounted, reactive, ref, watch} from "vue"
|
import deepClone from "@/utils/deepClone"
|
import userInfo from '@/stores/userInfo'
|
const store=userInfo()
|
|
const router = useRouter()
|
const userStore = useUserInfoStore()
|
const user = userStore.user.userName
|
|
store.createWebSocket();
|
function quit(){
|
userStore.$patch({
|
user:null
|
})
|
router.push("/login")
|
}
|
|
|
//提取模块列表
|
let menuList=$ref([])
|
request.get("/menu").then((res) => {
|
if(res.code==200){
|
menuList= deepClone(res.data)
|
}else{
|
ElMessage.warning(res.msg)
|
router.push("/login")
|
}
|
})
|
|
//获取菜单列表
|
let menuItemList=$ref([])
|
request.get("/menuItem").then((res) => {
|
if(res.code==200){
|
menuItemList= deepClone(res.data)
|
}else{
|
ElMessage.warning(res.msg)
|
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
|
})
|
|
|
</script>
|
|
<template>
|
<div>
|
<el-container>
|
<el-header>
|
<div style="height: 100%;width: 100%;display: flex">
|
<img src="../assets/northGlass.ico" alt="" style="max-width: 100%;max-height: 100%">
|
<h3 style="margin: 1rem ;font-weight: bold;width: 20vw;"> 欢迎{{ user }}使用北玻ERP系统！</h3>
|
<span style="height: 70%;width: 78vw;margin-top: 1rem;" >
|
<el-button class="sys-quit" @click="quit" type="info" round>退出</el-button>
|
</span>
|
|
</div>
|
</el-header>
|
<el-container >
|
<el-aside width="160px" style="margin-top: 1.5rem;height: 90% " >
|
<el-menu
|
@open="handleOpen"
|
ref="menu"
|
active-color="#ffd04b"
|
background-color="#545c64"
|
class="el-menu-vertical-demo"
|
default-active="2"
|
text-color="#fff">
|
<el-sub-menu
|
v-for="items in menuList"
|
:index="items.id"
|
:key="items.id">
|
<template #title>
|
<span>{{items.menuName}}</span>
|
</template>
|
<router-link
|
v-show="items.id==menuItem.menuID"
|
v-for="menuItem in menuItemList"
|
:to="{path:menuItem.url}">
|
<el-menu-item >
|
{{ menuItem.itemName}}
|
</el-menu-item>
|
</router-link>
|
|
</el-sub-menu>
|
</el-menu>
|
</el-aside>
|
|
<el-main>
|
<div id="main">
|
<router-view></router-view>
|
</div>
|
</el-main>
|
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
|
<style scoped>
|
.el-container{
|
height: 100vh;
|
width: 100vw
|
}
|
|
*{
|
padding: 0;
|
margin: 0;
|
}
|
:deep(.sys-quit){
|
float: right;
|
margin-right: 1rem;
|
width: 5rem;
|
|
}
|
:deep(span){
|
margin-right: 0;
|
|
}
|
.el-collapse{
|
font-size: 16px;
|
font-weight: bold;
|
}
|
#main{
|
width: 99%;
|
float: right;
|
height: 99%;
|
}
|
</style>
|
