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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
| <!--导航组件-->
| <template>
| <div class="app-sidebar">
| <div class="box">
| <div class="logo-view">
| <el-image :src="require('@/assets/logo.png')"></el-image>
| </div>
| <el-menu
| router
| unique-opened
| :default-active="$route.path"
| class="el-menu-vertical-demo"
| @select="handleOpen"
| @close="handleClose"
| background-color="#314255"
| text-color="#bfcbd9"
| active-text-color="#fff"
| >
| <el-submenu v-for="item in menus" :key="item.id" :index="item.id.toString()">
| <template slot="title">
| <i class="el-icon-money icon"></i>
| <span>{{ item.title }}</span>
| </template>
| <el-menu-item v-for="itm in item.children" :key="itm.id" :index="itm.path">{{ itm.title }}</el-menu-item>
| </el-submenu>
| </el-menu>
| <el-empty
| v-if="this.menus === null || this.menus === undefined || this.menus.length === 0"
| :image-size="130"
| description="没有侧栏菜单"
| ></el-empty>
| </div>
| </div>
| </template>
|
| <script>
| export default {
| name: "AppSidebar",
| props: {},
| data() {
| return {
| menus: []
| }
| },
| watch: {
| // $route: {
| // handler: "initNavMenu",
| // immediate: true
| // }
| },
| created() {
| this.initNavMenu()
| this.getMenuTreeByRole()
| },
| methods: {
| getMenuTreeByRole() {
| this.menus = [
| {
| id: 1,
| parentId: 0,
| path: "",
| name: "",
| title: "统一管理",
| sort: 87,
| icon: "el-icon-money",
| hidden: false,
| type: 0,
| children: [
| {
| id: 11,
| parentId: 1,
| path: "/unifiedManage/userManage",
| name: "",
| title: "用户管理",
| sort: 88,
| icon: "",
| hidden: false,
| type: 1,
| children: null,
| createAt: "2023-12-12 11:11:02",
| updateAt: "2023-12-12 11:11:02",
| systemType: 5
| },
| {
| id: 12,
| parentId: 1,
| path: "/unifiedManage/userLevel",
| name: "",
| title: "用户等级",
| sort: 88,
| icon: "",
| hidden: false,
| type: 1,
| children: null,
| createAt: "2023-12-12 11:11:02",
| updateAt: "2023-12-12 11:11:02",
| systemType: 5
| }
| ],
| createAt: "2023-12-12 11:11:02",
| updateAt: "2023-12-12 11:11:02",
| systemType: 5
| }
| ]
| },
| // 监听路由
| initNavMenu() {
| // console.log(this.$route.name)
| },
| handleOpen(index) {
| console.log(index)
| },
| handleClose() {}
| }
| }
| </script>
|
| <!-- Add "scoped" attribute to limit CSS to this component only -->
| <style lang="scss" scoped>
| @import "./index.scss";
| ::v-deep .el-empty {
| .el-empty__description {
| p {
| color: #dddd;
| }
| }
| }
| </style>
|
|
