|
@@ -1,26 +1,31 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div class="menu-container">
|
3
|
3
|
<div class="btn left-btn" @click="scrollLeft">
|
4
|
|
- <img v-show="hasPrev" src="@/assets/wisdom_images/left-nav.png">
|
|
4
|
+ <img v-show="hasPrev" src="@/assets/wisdom_images/left-nav.png" />
|
5
|
5
|
</div>
|
6
|
6
|
<nav class="menu" ref="menu">
|
7
|
7
|
<ul>
|
8
|
|
- <li v-for="(item, index) in list" :key="index" class="menu-item" :class="{activate: $store.state.user.topMenuIndex === index}" @click="openMenu(item, index)">
|
|
8
|
+ <li
|
|
9
|
+ v-for="(item, index) in list"
|
|
10
|
+ :key="index"
|
|
11
|
+ class="menu-item"
|
|
12
|
+ :class="{ activate: $store.state.user.topMenuIndex === index }"
|
|
13
|
+ @click="openMenu(item, index)"
|
|
14
|
+ >
|
9
|
15
|
<i :class="item.icon"></i>
|
10
|
|
- {{item.funcName}}
|
|
16
|
+ {{ item.funcName }}
|
11
|
17
|
</li>
|
12
|
18
|
</ul>
|
13
|
19
|
</nav>
|
14
|
20
|
<div class="btn right-btn" @click="scrollRight">
|
15
|
|
- <img v-show="hasNext" src="@/assets/wisdom_images/right-nav.png">
|
|
21
|
+ <img v-show="hasNext" src="@/assets/wisdom_images/right-nav.png" />
|
16
|
22
|
</div>
|
17
|
23
|
</div>
|
18
|
24
|
</template>
|
19
|
25
|
|
20
|
26
|
<script>
|
21
|
|
-
|
22
|
|
-const ITEM_WIDTH = 130
|
23
|
|
-const ITEM_BORDER = 1
|
|
27
|
+const ITEM_WIDTH = 130;
|
|
28
|
+const ITEM_BORDER = 1;
|
24
|
29
|
export default {
|
25
|
30
|
data() {
|
26
|
31
|
return {
|
|
@@ -31,9 +36,9 @@ export default {
|
31
|
36
|
funcTree: null,
|
32
|
37
|
list: [
|
33
|
38
|
{
|
34
|
|
- icon: 'el-icon-s-home',
|
35
|
|
- funcName: '首页',
|
36
|
|
- funcUrl: '/home',
|
|
39
|
+ icon: "el-icon-s-home",
|
|
40
|
+ funcName: "首页",
|
|
41
|
+ funcUrl: "/home",
|
37
|
42
|
resourceCode: null,
|
38
|
43
|
},
|
39
|
44
|
// {
|
|
@@ -91,14 +96,13 @@ export default {
|
91
|
96
|
// funcUrl: '/system/userManagement',
|
92
|
97
|
// resourceCode: 'RM1001008008',
|
93
|
98
|
// },
|
94
|
|
-
|
95
|
|
- ]
|
96
|
|
- }
|
|
99
|
+ ],
|
|
100
|
+ };
|
97
|
101
|
},
|
98
|
102
|
created() {
|
99
|
|
- this.visibleItems = this.list.length
|
|
103
|
+ this.visibleItems = this.list.length;
|
100
|
104
|
// this.welcome()
|
101
|
|
- this.welcome2()
|
|
105
|
+ this.welcome2();
|
102
|
106
|
const menuCode = sessionStorage.getItem("menuCode");
|
103
|
107
|
const menuData = JSON.parse(sessionStorage.getItem("xzdata"));
|
104
|
108
|
|
|
@@ -109,28 +113,26 @@ export default {
|
109
|
113
|
// }
|
110
|
114
|
// });
|
111
|
115
|
// }
|
112
|
|
- window.addEventListener('resize', this.updateVisibleItems);
|
|
116
|
+ window.addEventListener("resize", this.updateVisibleItems);
|
113
|
117
|
},
|
114
|
118
|
mounted() {
|
115
|
119
|
this.updateVisibleItems();
|
116
|
120
|
this.$nextTick(() => {
|
117
|
|
- this.$refs.menu.scrollLeft = 0
|
118
|
|
- })
|
|
121
|
+ this.$refs.menu.scrollLeft = 0;
|
|
122
|
+ });
|
119
|
123
|
},
|
120
|
124
|
beforeDestroy() {
|
121
|
|
- window.removeEventListener('resize', this.updateVisibleItems);
|
|
125
|
+ window.removeEventListener("resize", this.updateVisibleItems);
|
122
|
126
|
},
|
123
|
127
|
watch: {
|
124
|
128
|
defaultActiveUrl(n, o) {
|
125
|
|
- console.log('------', n)
|
126
|
|
- }
|
|
129
|
+ console.log("------", n);
|
|
130
|
+ },
|
127
|
131
|
},
|
128
|
132
|
methods: {
|
129
|
|
- handleSelect() {
|
130
|
|
-
|
131
|
|
- },
|
|
133
|
+ handleSelect() {},
|
132
|
134
|
scrollLeft() {
|
133
|
|
- this.$refs.menu.scrollLeft -= (ITEM_WIDTH + 2);
|
|
135
|
+ this.$refs.menu.scrollLeft -= ITEM_WIDTH + 2;
|
134
|
136
|
// if(this.$refs.menu.scrollLeft <= 0) {
|
135
|
137
|
// this.hasPrev = false
|
136
|
138
|
// }else {
|
|
@@ -138,7 +140,7 @@ export default {
|
138
|
140
|
// }
|
139
|
141
|
},
|
140
|
142
|
scrollRight() {
|
141
|
|
- this.$refs.menu.scrollLeft += (ITEM_WIDTH + 2);
|
|
143
|
+ this.$refs.menu.scrollLeft += ITEM_WIDTH + 2;
|
142
|
144
|
// if(this.$refs.menu.scrollLeft >= (ITEM_WIDTH + 2) * this.list.length) {
|
143
|
145
|
// this.hasNext = false
|
144
|
146
|
// }else {
|
|
@@ -146,7 +148,10 @@ export default {
|
146
|
148
|
// }
|
147
|
149
|
},
|
148
|
150
|
updateVisibleItems() {
|
149
|
|
- const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|
151
|
+ const width =
|
|
152
|
+ window.innerWidth ||
|
|
153
|
+ document.documentElement.clientWidth ||
|
|
154
|
+ document.body.clientWidth;
|
150
|
155
|
if (width <= 690) {
|
151
|
156
|
this.visibleItems = 2;
|
152
|
157
|
} else if (width <= 800) {
|
|
@@ -160,56 +165,58 @@ export default {
|
160
|
165
|
} else {
|
161
|
166
|
this.visibleItems = this.list.length;
|
162
|
167
|
}
|
163
|
|
- this.$refs.menu.style.width = `${this.visibleItems * ITEM_WIDTH + this.visibleItems * 2}px`;
|
|
168
|
+ this.$refs.menu.style.width = `${
|
|
169
|
+ this.visibleItems * ITEM_WIDTH + this.visibleItems * 2
|
|
170
|
+ }px`;
|
164
|
171
|
},
|
165
|
172
|
openMenu(item, index) {
|
166
|
|
- console.log('open menu', item, index)
|
167
|
|
- if (['crk', '/crk'].indexOf(item.funcUrl) >= 0) {
|
168
|
|
- // this.$store.state.flag = 1;
|
|
173
|
+ console.log("open menu", item, index);
|
|
174
|
+ if (["crk", "/crk"].indexOf(item.funcUrl) >= 0) {
|
|
175
|
+ this.$store.state.flag = 1;
|
169
|
176
|
// return
|
170
|
|
- this.$store.commit('SET_TOP_MENU_INDEX', index)
|
171
|
|
- return this.$systemUtils.gotoCrkSystem(this)
|
172
|
|
- }else {
|
173
|
|
- // this.$store.state.flag = 2;
|
|
177
|
+ this.$store.commit("SET_TOP_MENU_INDEX", index);
|
|
178
|
+ // return this.$systemUtils.gotoCrkSystem(this)
|
|
179
|
+ } else {
|
|
180
|
+ this.$store.state.flag = 2;
|
174
|
181
|
}
|
175
|
|
- if (this.$store.state.user.topMenuIndex === index) return
|
176
|
|
- this.$store.commit('SET_TOP_MENU_INDEX', index)
|
|
182
|
+ if (this.$store.state.user.topMenuIndex === index) return;
|
|
183
|
+ this.$store.commit("SET_TOP_MENU_INDEX", index);
|
177
|
184
|
// if(!item.resourceCode) {
|
178
|
185
|
// return this.$router.push({path: item.funcUrl})
|
179
|
186
|
// }
|
180
|
187
|
|
181
|
|
- this.getMenuList(item, index)
|
|
188
|
+ this.getMenuList(item, index);
|
182
|
189
|
},
|
183
|
190
|
welcome() {
|
184
|
191
|
this.loginPeople = sessionStorage.getItem("userName");
|
185
|
192
|
const data = JSON.parse(sessionStorage.getItem("xzdata"));
|
186
|
|
- this.xzdata = data
|
187
|
|
- this.$store.commit("SET_MENU_DATA", data)
|
188
|
|
- const defaultCode = 'RM1001008001'
|
189
|
|
- let leftMenuList = []
|
|
193
|
+ this.xzdata = data;
|
|
194
|
+ this.$store.commit("SET_MENU_DATA", data);
|
|
195
|
+ const defaultCode = "RM1001008001";
|
|
196
|
+ let leftMenuList = [];
|
190
|
197
|
this.xzdata.forEach((item) => {
|
191
|
198
|
if (item.resourceCode == defaultCode) {
|
192
|
|
- leftMenuList = [item]
|
|
199
|
+ leftMenuList = [item];
|
193
|
200
|
}
|
194
|
201
|
});
|
195
|
202
|
this.$store.dispatch("changeLeftMenu", leftMenuList);
|
196
|
203
|
},
|
197
|
204
|
welcome2() {
|
198
|
205
|
const tree = JSON.parse(sessionStorage.getItem("FUN_TREE"));
|
199
|
|
- this.funcTree = tree
|
200
|
|
- let defaultChild = []
|
|
206
|
+ this.funcTree = tree;
|
|
207
|
+ let defaultChild = [];
|
201
|
208
|
for (const menu of tree) {
|
202
|
209
|
if (defaultChild.length <= 0) {
|
203
|
|
- defaultChild = menu.children
|
|
210
|
+ defaultChild = menu.children;
|
204
|
211
|
}
|
205
|
212
|
this.list.push({
|
206
|
|
- icon: 'el-icon-s-home',
|
|
213
|
+ icon: "el-icon-s-home",
|
207
|
214
|
funcName: menu.funcName,
|
208
|
215
|
funcUrl: menu.funcUrl,
|
209
|
216
|
funcId: menu.funcId,
|
210
|
|
- resourceCode: 'RM1001008007',
|
211
|
|
- children: menu.children
|
212
|
|
- })
|
|
217
|
+ resourceCode: "RM1001008007",
|
|
218
|
+ children: menu.children,
|
|
219
|
+ });
|
213
|
220
|
}
|
214
|
221
|
this.$store.dispatch("changeLeftMenu", defaultChild);
|
215
|
222
|
},
|
|
@@ -220,21 +227,21 @@ export default {
|
220
|
227
|
if (arr[0] && arr[0].children && arr[0].children.length) {
|
221
|
228
|
this.getFirstMenu(arr[0].children);
|
222
|
229
|
} else {
|
223
|
|
- console.log('first menu', arr[0])
|
|
230
|
+ console.log("first menu", arr[0]);
|
224
|
231
|
this.menuUrl = arr[0].funcUrl;
|
225
|
232
|
}
|
226
|
233
|
},
|
227
|
234
|
getMenuList(item, index) {
|
228
|
|
- console.log('get menu list', item, index,)
|
|
235
|
+ console.log("get menu list", item, index);
|
229
|
236
|
// debugger
|
230
|
237
|
let leftMenuList = item.children;
|
231
|
238
|
if (item.children && item.children.length > 0) {
|
232
|
239
|
this.getFirstMenu(item.children);
|
233
|
|
- console.log('menuUrl', this.menuUrl)
|
234
|
|
- this.$router.push({path: this.menuUrl});
|
|
240
|
+ console.log("menuUrl", this.menuUrl);
|
|
241
|
+ this.$router.push({ path: this.menuUrl });
|
235
|
242
|
} else {
|
236
|
243
|
if (item.funcUrl.indexOf("http") == -1) {
|
237
|
|
- this.$router.push({path: item.funcUrl});
|
|
244
|
+ this.$router.push({ path: item.funcUrl });
|
238
|
245
|
} else {
|
239
|
246
|
window.location.href = item.funcUrl;
|
240
|
247
|
}
|
|
@@ -243,7 +250,7 @@ export default {
|
243
|
250
|
this.isClick = index;
|
244
|
251
|
sessionStorage.menuIdx = index;
|
245
|
252
|
// this.getFirstMenu([item]);
|
246
|
|
- this.$store.commit('SET_DEFAULT_ACTIVE_URL', this.menuUrl)
|
|
253
|
+ this.$store.commit("SET_DEFAULT_ACTIVE_URL", this.menuUrl);
|
247
|
254
|
sessionStorage.setItem("leftMenuList", JSON.stringify(leftMenuList));
|
248
|
255
|
sessionStorage.setItem("menuCode", code);
|
249
|
256
|
sessionStorage.setItem("resourceCode", code);
|
|
@@ -252,8 +259,8 @@ export default {
|
252
|
259
|
|
253
|
260
|
this.$store.dispatch("changeLeftMenu", leftMenuList);
|
254
|
261
|
},
|
255
|
|
- }
|
256
|
|
-}
|
|
262
|
+ },
|
|
263
|
+};
|
257
|
264
|
</script>
|
258
|
265
|
|
259
|
266
|
|
|
@@ -303,7 +310,6 @@ export default {
|
303
|
310
|
list-style-type: none;
|
304
|
311
|
}
|
305
|
312
|
|
306
|
|
-
|
307
|
313
|
.menu-item {
|
308
|
314
|
width: 130px;
|
309
|
315
|
height: 100%;
|