|
@@ -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.title}}
|
|
16
|
+ {{ item.title }}
|
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 {
|
|
@@ -30,73 +35,72 @@ export default {
|
30
|
35
|
hasNext: true,
|
31
|
36
|
list: [
|
32
|
37
|
{
|
33
|
|
- icon: 'el-icon-s-home',
|
34
|
|
- title: '首页',
|
35
|
|
- resourceUrl: '/home',
|
|
38
|
+ icon: "el-icon-s-home",
|
|
39
|
+ title: "首页",
|
|
40
|
+ resourceUrl: "/home",
|
36
|
41
|
resourceCode: null,
|
37
|
42
|
},
|
38
|
43
|
{
|
39
|
|
- icon: 'el-icon-s-home',
|
40
|
|
- title: '综合业务',
|
41
|
|
- resourceUrl: '/businessHome',
|
42
|
|
- resourceCode: 'RM1001008001',
|
|
44
|
+ icon: "el-icon-s-home",
|
|
45
|
+ title: "综合业务",
|
|
46
|
+ resourceUrl: "/businessHome",
|
|
47
|
+ resourceCode: "RM1001008001",
|
43
|
48
|
},
|
44
|
49
|
{
|
45
|
|
- icon: 'el-icon-s-home',
|
46
|
|
- title: '出入库',
|
47
|
|
- type: 'crk',
|
48
|
|
- resourceUrl: '/businessHome',
|
49
|
|
- resourceCode: 'RM10010080010',
|
|
50
|
+ icon: "el-icon-s-home",
|
|
51
|
+ title: "出入库",
|
|
52
|
+ type: "crk",
|
|
53
|
+ resourceUrl: "/businessHome",
|
|
54
|
+ resourceCode: "RM10010080010",
|
50
|
55
|
},
|
51
|
56
|
{
|
52
|
|
- icon: 'el-icon-house',
|
53
|
|
- title: '仓储业务',
|
54
|
|
- resourceUrl: '/storageHome',
|
55
|
|
- resourceCode: 'RM1001008002',
|
|
57
|
+ icon: "el-icon-house",
|
|
58
|
+ title: "仓储业务",
|
|
59
|
+ resourceUrl: "/storageHome",
|
|
60
|
+ resourceCode: "RM1001008002",
|
56
|
61
|
},
|
57
|
62
|
{
|
58
|
|
- icon: 'el-icon-s-home',
|
59
|
|
- title: '智能安防',
|
60
|
|
- resourceUrl: '/monitorHome',
|
61
|
|
- resourceCode: 'RM1001008003',
|
|
63
|
+ icon: "el-icon-s-home",
|
|
64
|
+ title: "智能安防",
|
|
65
|
+ resourceUrl: "/monitorHome",
|
|
66
|
+ resourceCode: "RM1001008003",
|
62
|
67
|
},
|
63
|
68
|
{
|
64
|
|
- icon: 'el-icon-s-home',
|
65
|
|
- title: '粮库决策',
|
66
|
|
- resourceUrl: '/granaryComprehensiveExhibition/warningThreshold',
|
67
|
|
- resourceCode: 'RM1001008004',
|
|
69
|
+ icon: "el-icon-s-home",
|
|
70
|
+ title: "粮库决策",
|
|
71
|
+ resourceUrl: "/granaryComprehensiveExhibition/warningThreshold",
|
|
72
|
+ resourceCode: "RM1001008004",
|
68
|
73
|
},
|
69
|
74
|
{
|
70
|
|
- icon: 'el-icon-s-home',
|
71
|
|
- title: '查询追溯',
|
72
|
|
- resourceUrl: '/inventoryQualityTraceability/warehouseSource',
|
73
|
|
- resourceCode: 'RM1001008005',
|
|
75
|
+ icon: "el-icon-s-home",
|
|
76
|
+ title: "查询追溯",
|
|
77
|
+ resourceUrl: "/inventoryQualityTraceability/warehouseSource",
|
|
78
|
+ resourceCode: "RM1001008005",
|
74
|
79
|
},
|
75
|
80
|
{
|
76
|
|
- icon: 'el-icon-s-home',
|
77
|
|
- title: '智能仓房',
|
78
|
|
- resourceUrl: '/grainSituationInspection/grainSituationReport',
|
79
|
|
- resourceCode: 'RM1001008006',
|
|
81
|
+ icon: "el-icon-s-home",
|
|
82
|
+ title: "智能仓房",
|
|
83
|
+ resourceUrl: "/grainSituationInspection/grainSituationReport",
|
|
84
|
+ resourceCode: "RM1001008006",
|
80
|
85
|
},
|
81
|
86
|
{
|
82
|
|
- icon: 'el-icon-s-home',
|
83
|
|
- title: '基础数据',
|
84
|
|
- resourceUrl: '/basicData/storehouseList',
|
85
|
|
- resourceCode: 'RM1001008007',
|
|
87
|
+ icon: "el-icon-s-home",
|
|
88
|
+ title: "基础数据",
|
|
89
|
+ resourceUrl: "/basicData/storehouseList",
|
|
90
|
+ resourceCode: "RM1001008007",
|
86
|
91
|
},
|
87
|
92
|
{
|
88
|
|
- icon: 'el-icon-s-home',
|
89
|
|
- title: '系统设置',
|
90
|
|
- resourceUrl: '/system/userManagement',
|
91
|
|
- resourceCode: 'RM1001008008',
|
|
93
|
+ icon: "el-icon-s-home",
|
|
94
|
+ title: "系统设置",
|
|
95
|
+ resourceUrl: "/system/userManagement",
|
|
96
|
+ resourceCode: "RM1001008008",
|
92
|
97
|
},
|
93
|
|
-
|
94
|
|
- ]
|
95
|
|
- }
|
|
98
|
+ ],
|
|
99
|
+ };
|
96
|
100
|
},
|
97
|
101
|
created() {
|
98
|
|
- this.visibleItems = this.list.length
|
99
|
|
- this.welcome()
|
|
102
|
+ this.visibleItems = this.list.length;
|
|
103
|
+ this.welcome();
|
100
|
104
|
const menuCode = sessionStorage.getItem("menuCode");
|
101
|
105
|
const menuData = JSON.parse(sessionStorage.getItem("xzdata"));
|
102
|
106
|
|
|
@@ -107,25 +111,23 @@ export default {
|
107
|
111
|
}
|
108
|
112
|
});
|
109
|
113
|
}
|
110
|
|
- window.addEventListener('resize', this.updateVisibleItems);
|
|
114
|
+ window.addEventListener("resize", this.updateVisibleItems);
|
111
|
115
|
},
|
112
|
116
|
mounted() {
|
113
|
117
|
this.updateVisibleItems();
|
114
|
118
|
},
|
115
|
119
|
beforeDestroy() {
|
116
|
|
- window.removeEventListener('resize', this.updateVisibleItems);
|
|
120
|
+ window.removeEventListener("resize", this.updateVisibleItems);
|
117
|
121
|
},
|
118
|
122
|
watch: {
|
119
|
|
- defaultActiveUrl (n, o) {
|
120
|
|
- console.log('------', n)
|
121
|
|
- }
|
|
123
|
+ defaultActiveUrl(n, o) {
|
|
124
|
+ console.log("------", n);
|
|
125
|
+ },
|
122
|
126
|
},
|
123
|
127
|
methods: {
|
124
|
|
- handleSelect() {
|
125
|
|
-
|
126
|
|
- },
|
|
128
|
+ handleSelect() {},
|
127
|
129
|
scrollLeft() {
|
128
|
|
- this.$refs.menu.scrollLeft -= (ITEM_WIDTH + 2);
|
|
130
|
+ this.$refs.menu.scrollLeft -= ITEM_WIDTH + 2;
|
129
|
131
|
// if(this.$refs.menu.scrollLeft <= 0) {
|
130
|
132
|
// this.hasPrev = false
|
131
|
133
|
// }else {
|
|
@@ -133,7 +135,7 @@ export default {
|
133
|
135
|
// }
|
134
|
136
|
},
|
135
|
137
|
scrollRight() {
|
136
|
|
- this.$refs.menu.scrollLeft += (ITEM_WIDTH + 2);
|
|
138
|
+ this.$refs.menu.scrollLeft += ITEM_WIDTH + 2;
|
137
|
139
|
// if(this.$refs.menu.scrollLeft >= (ITEM_WIDTH + 2) * this.list.length) {
|
138
|
140
|
// this.hasNext = false
|
139
|
141
|
// }else {
|
|
@@ -141,44 +143,52 @@ export default {
|
141
|
143
|
// }
|
142
|
144
|
},
|
143
|
145
|
updateVisibleItems() {
|
144
|
|
- const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|
146
|
+ const width =
|
|
147
|
+ window.innerWidth ||
|
|
148
|
+ document.documentElement.clientWidth ||
|
|
149
|
+ document.body.clientWidth;
|
145
|
150
|
if (width <= 690) {
|
146
|
151
|
this.visibleItems = 2;
|
147
|
152
|
} else if (width <= 800) {
|
148
|
153
|
this.visibleItems = 3;
|
149
|
154
|
} else if (width <= 1200) {
|
150
|
155
|
this.visibleItems = 4;
|
151
|
|
- } else if(width <= 1400) {
|
|
156
|
+ } else if (width <= 1400) {
|
152
|
157
|
this.visibleItems = 5;
|
153
|
|
- }else if (width <= 1600) {
|
|
158
|
+ } else if (width <= 1600) {
|
154
|
159
|
this.visibleItems = 6;
|
155
|
160
|
} else {
|
156
|
161
|
this.visibleItems = this.list.length;
|
157
|
162
|
}
|
158
|
|
- this.$refs.menu.style.width = `${this.visibleItems * ITEM_WIDTH + this.visibleItems * 2}px`;
|
|
163
|
+ this.$refs.menu.style.width = `${
|
|
164
|
+ this.visibleItems * ITEM_WIDTH + this.visibleItems * 2
|
|
165
|
+ }px`;
|
159
|
166
|
},
|
|
167
|
+
|
160
|
168
|
openMenu(item, index) {
|
161
|
|
- if(item.type === 'crk') {
|
162
|
|
- return this.$systemUtils.gotoCrkSystem(this)
|
|
169
|
+ if (item.type === "crk") {
|
|
170
|
+ this.$store.state.flag = 1;
|
|
171
|
+ // return this.$systemUtils.gotoCrkSystem(this);
|
|
172
|
+ } else {
|
|
173
|
+ this.$store.state.flag = 2;
|
163
|
174
|
}
|
164
|
|
- if(this.$store.state.user.topMenuIndex === index) return
|
165
|
|
- this.$store.commit('SET_TOP_MENU_INDEX', index)
|
166
|
|
- if(!item.resourceCode) {
|
167
|
|
- return this.$router.push({path: item.resourceUrl})
|
|
175
|
+ if (this.$store.state.user.topMenuIndex === index) return;
|
|
176
|
+ this.$store.commit("SET_TOP_MENU_INDEX", index);
|
|
177
|
+ if (!item.resourceCode) {
|
|
178
|
+ return this.$router.push({ path: item.resourceUrl });
|
168
|
179
|
}
|
169
|
|
-
|
170
|
|
- this.getMenuList(item, index)
|
|
180
|
+ this.getMenuList(item, index);
|
171
|
181
|
},
|
172
|
182
|
welcome() {
|
173
|
183
|
this.loginPeople = sessionStorage.getItem("userName");
|
174
|
184
|
const data = JSON.parse(sessionStorage.getItem("xzdata"));
|
175
|
|
- this.xzdata = data
|
176
|
|
- this.$store.commit("SET_MENU_DATA", data)
|
177
|
|
- const defaultCode = 'RM1001008001'
|
178
|
|
- let leftMenuList = []
|
|
185
|
+ this.xzdata = data;
|
|
186
|
+ this.$store.commit("SET_MENU_DATA", data);
|
|
187
|
+ const defaultCode = "RM1001008001";
|
|
188
|
+ let leftMenuList = [];
|
179
|
189
|
this.xzdata.forEach((item) => {
|
180
|
190
|
if (item.resourceCode == defaultCode) {
|
181
|
|
- leftMenuList = [item]
|
|
191
|
+ leftMenuList = [item];
|
182
|
192
|
}
|
183
|
193
|
});
|
184
|
194
|
this.$store.dispatch("changeLeftMenu", leftMenuList);
|
|
@@ -207,11 +217,11 @@ export default {
|
207
|
217
|
let leftMenuList = [];
|
208
|
218
|
this.xzdata.forEach((item) => {
|
209
|
219
|
if (item.resourceCode == code) {
|
210
|
|
- leftMenuList = [item]
|
|
220
|
+ leftMenuList = [item];
|
211
|
221
|
}
|
212
|
222
|
});
|
213
|
223
|
this.getFirstMenu([item]);
|
214
|
|
- this.$store.commit('SET_DEFAULT_ACTIVE_URL', this.menuUrl)
|
|
224
|
+ this.$store.commit("SET_DEFAULT_ACTIVE_URL", this.menuUrl);
|
215
|
225
|
sessionStorage.setItem("leftMenuList", JSON.stringify(leftMenuList));
|
216
|
226
|
sessionStorage.setItem("menuCode", code);
|
217
|
227
|
sessionStorage.setItem("resourceCode", code);
|
|
@@ -220,8 +230,8 @@ export default {
|
220
|
230
|
|
221
|
231
|
this.$store.dispatch("changeLeftMenu", leftMenuList);
|
222
|
232
|
},
|
223
|
|
- }
|
224
|
|
-}
|
|
233
|
+ },
|
|
234
|
+};
|
225
|
235
|
</script>
|
226
|
236
|
|
227
|
237
|
|
|
@@ -270,7 +280,6 @@ export default {
|
270
|
280
|
list-style-type: none;
|
271
|
281
|
}
|
272
|
282
|
|
273
|
|
-
|
274
|
283
|
.menu-item {
|
275
|
284
|
width: 130px;
|
276
|
285
|
height: 100%;
|