1 [
2 {
3 "openType": 0,
4 "pageParams": null,
5 "id": 805,
6 "parentId": 0,
7 "text": "基础资料测试",
8 "cls": "",
9 "iconCls": "fa-server",
10 "leaf": false,
11 "expanded": false,
12 "checked": false,
13 "code": null,
14 "nodeOrder": 1
15 },
16 {
17 "openType": 0,
18 "pageParams": null,
19 "id": 50,
20 "parentId": 0,
21 "text": "测试",
22 "cls": "",
23 "iconCls": "fa-group",
24 "leaf": false,
25 "expanded": false,
26 "checked": false,
27 "code": null,
28 "nodeOrder": 1
29 },
30 {
31 "openType": 0,
32 "pageParams": null,
33 "id": 845,
34 "parentId": 0,
35 "text": "报表查询",
36 "cls": "",
37 "iconCls": "fa-file-excel-o",
38 "leaf": false,
39 "expanded": false,
40 "checked": false,
41 "code": null,
42 "nodeOrder": 10
43 },
44 {
45 "openType": 0,
46 "pageParams": null,
47 "id": 51,
48 "parentId": 50,
49 "text": "测试菜单",
50 "cls": "",
51 "iconCls": "fa-table",
52 "leaf": true,
53 "expanded": false,
54 "checked": false,
55 "code": "test/menu",
56 "nodeOrder": 1
57 },
58 {
59 "openType": 0,
60 "pageParams": null,
61 "id": 785,
62 "parentId": 50,
63 "text": "用户管理",
64 "cls": "",
65 "iconCls": "fa-database",
66 "leaf": true,
67 "expanded": false,
68 "checked": false,
69 "code": "test/user",
70 "nodeOrder": 2
71 },
72 {
73 "openType": 0,
74 "pageParams": null,
75 "id": 52,
76 "parentId": 50,
77 "text": "测试查询条件",
78 "cls": "",
79 "iconCls": "fa-server",
80 "leaf": true,
81 "expanded": false,
82 "checked": false,
83 "code": "test/where",
84 "nodeOrder": 2
85 },
86 {
87 "openType": 0,
88 "pageParams": null,
89 "id": 806,
90 "parentId": 805,
91 "text": "车辆询价数据",
92 "cls": "",
93 "iconCls": "fa-server",
94 "leaf": true,
95 "expanded": false,
96 "checked": false,
97 "code": "BaseManage/carPrice",
98 "nodeOrder": 1
99 },
100 {
101 "openType": 0,
102 "pageParams": "{reportId:91}",
103 "id": 985,
104 "parentId": 845,
105 "text": "html5",
106 "cls": "",
107 "iconCls": "fa-file-excel-o",
108 "leaf": true,
109 "expanded": false,
110 "checked": false,
111 "code": "SystemDesign/reportDisplay",
112 "nodeOrder": 0
113 },
114 {
115 "openType": 0,
116 "pageParams": "{reportId:30,type:'active'}",
117 "id": 896,
118 "parentId": 845,
119 "text": "active报表",
120 "cls": "",
121 "iconCls": "fa-file-excel-o",
122 "leaf": true,
123 "expanded": false,
124 "checked": false,
125 "code": "SystemDesign/reportDisplay",
126 "nodeOrder": 0
127 },
128 {
129 "openType": 0,
130 "pageParams": "{reportId:51,type:'echarts'}",
131 "id": 965,
132 "parentId": 845,
133 "text": "echarts报表",
134 "cls": "",
135 "iconCls": "fa-file-excel-o",
136 "leaf": true,
137 "expanded": false,
138 "checked": false,
139 "code": "SystemDesign/reportDisplay",
140 "nodeOrder": 0
141 }
142 ]
1 <template>
2 <div class="menu">
3 <div>
4 <el-menu router :default-active="`${$route.params.pageName}#${$route.params.pageId}`" backgroundColor="#324157" textColor="rgb(191, 203, 217)" :collapse="isCollapse">
5 <nav-menu :list="list"></nav-menu>
6 </el-menu>
7 </div>
8 </div>
9 </template>
10
11 <script>
12 /** 菜单组装*/
13 import navMenu from "./navMenu"
14 import {
15 mapGetters
16 } from "vuex"
17 export default {
18 components: {
19 navMenu
20 },
21 data() {
22 return {
23 list: [],
24 isCollapse: false
25 }
26 },
27 computed: {
28 ...mapGetters(["collapse"])
29 },
30 watch: {
31 collapse: {
32 handler(d) {
33 this.isCollapse = d
34 },
35 deep: true
36 }
37 },
38 mounted() {
39 this.list = this.$store.state.loading.menu
40 }
41 };
42 </script>
43
44 <style lang="scss" scoped>
45 .menu {
46 &__logo {
47 height: 64px;
48 padding: 10px;
49 }
50 }
51
52 .el-menu {
53 border-right: none;
54 }
55 </style>
1 <template>
2 <div class="navmenu">
3 <template class="list-item" v-for="item in list">
4 <el-menu-item :key="item.meta.id" @click="handleMenuClick(`${item.name}`,`${item.meta.id}`,`${item.meta.title}`,`${item.meta.pageParams}`)" v-if="item.children==null||item.children.length==0" :index="`${item.meta.title}#${item.meta.id}`">
5 <template slot="title">
6 <!--图标-->
7 <i class="mi fa" :class="item.meta.iconCls"/>
8 <!--标题-->
9 <span slot="title">{{item.meta.title}}</span>
10 </template>
11 </el-menu-item>
12 <!--有多级菜单-->
13 <el-submenu v-else :index="item.meta.id" :key="item.meta.id">
14 <template slot="title">
15 <!--图标-->
16 <i class="mi fa" :class="item.meta.iconCls"/>
17 <!--标题-->
18 <span slot="title">{{item.meta.title}}</span>
19 </template>
20 <!--递归组件，把遍历的值传回子组件，完成递归调用-->
21 <nav-menu :list="item.children"></nav-menu>
22 </el-submenu>
23 <!-- </router-link> -->
24 </template>
25 </div>
26 </template>
27
28 <script>
29 /**
30 * 路由菜单封装
31 */
32 export default {
33 name: "navMenu",
34 props: ["list"],
35 methods: {
36 handleMenuClick(name, pageid, title, params) {
37 let temp = null
38 if (params != undefined || params !== null)
39 temp = params
40
41 if (name === 'reportDisplay') {
42 this.$router.push({
43 name: name,
44 params: {
45 pageId: pageid,
46 pageName: title,
47 pageparams: temp
48 },
49 query: {
50 id: pageid
51 }
52 })
53 } else {
54 this.$router.push({
55 name: name,
56 params: {
57 pageId: pageid,
58 pageName: title,
59 pageparams: temp
60 }
61 })
62 }
63 }
64 }
65 }
66 </script>
