personCenter.vue
1.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<template>
<div class="body_wrap">
<div class="w80">
<el-menu :default-active="state.activeMenu" mode="horizontal" :router="true" class="selectNone personMenu"
:ellipsis="false"
background-color="#F0F0F0"
text-color="#909399"
active-text-color="#3265FF"
>
<template v-for="(item) in state.menuList">
<el-menu-item :index="item.path" style="width: 33.3%" v-if="item.isShow">
{{ item.title }}
</el-menu-item>
</template>
</el-menu>
<router-view></router-view>
</div>
</div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
import {getToken} from "../../utils/auth.ts";
const route = useRoute();
let state = reactive({
activeMenu: "/personCenter",
menuList: [
{
title: "风险监控维度管理",
path: "/personCenter",
},
{
title: "风险监控企业管理",
path: "/personCenter/monitorEnterprise",
},
{
title: "账号管理",
path: "/personCenter/monitorManager",
}
]
})
let frontMenu = getToken() ? JSON.parse(localStorage.getItem('userInfo')).frontMenu : []
let isHaveMenu = (value: string) => {
let isHave = false
frontMenu.some((item: object)=> {
if (item && item.url === value) {
isHave = true
}
})
return isHave
}
watchEffect(() => {
state.menuList.some((item: object) => {
if (item.path == route.path) {
state.activeMenu = item.path
}
})
})
onMounted(()=> {
state.menuList.forEach((item: object)=> {
item["isShow"] = isHaveMenu(item.path)
})
})
</script>
<style scoped>
:deep(.personMenu.el-menu--horizontal>.el-menu-item:hover) {
background-color: #DFE9FC;
color: #3265FF;
}
:deep(.personMenu.el-menu--horizontal>.el-menu-item.is-active) {
background-color: #DFE9FC;
}
</style>