c1b532ad
梁保满
权限配置,路由基础设置
|
1
2
3
4
|
<template>
<div>
<el-header id="header">
<span class="hideAside" @click="collapse"
|
d4283687
梁保满
首页布局完成,页面顶部返回组件
|
5
|
><i class="el-icon-s-fold" v-show="!isCollapse"></i>
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
6
7
|
<i class="el-icon-s-unfold" v-show="isCollapse"></i
></span>
|
c1b532ad
梁保满
权限配置,路由基础设置
|
8
|
<ul class="personal">
|
4c4f7640
梁保满
路由表,路由前端文件
|
9
10
11
|
<!-- <li>
<langSelect></langSelect>
</li> -->
|
21dfdeae
梁保满
平台管理员
|
12
|
<li class="dropdown-box" v-if="role != 'ROLE_PERSONAL'&&role != 'ROLE_PINGTAI'">
|
4c4f7640
梁保满
路由表,路由前端文件
|
13
14
15
16
|
<div class="userInfo">
<img :src="avatar" />
<div class="txt">
<p>{{ `${this.$store.getters.info.name}` }}</p>
|
42056450
阿宝
权限修改
|
17
|
<p>{{ `${this.$store.getters.info.showRoleName}` }}</p>
|
4c4f7640
梁保满
路由表,路由前端文件
|
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
</div>
<i class="el-icon-arrow-down"></i>
</div>
<el-dropdown
class="dropdown"
@command="handleCommand"
trigger="click"
>
<div class="el-dropdown-link dropdown-link"></div>
<el-dropdown-menu slot="dropdown" v-if="permissions.length">
<el-dropdown-item
v-for="item in permissions"
:key="item.role"
:command="item.role"
>{{ item.roleName }}</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
</li>
|
21dfdeae
梁保满
平台管理员
|
37
38
39
40
41
|
<li class="dropdown-box" v-if="role == 'ROLE_PINGTAI'">
<div class="userInfo">
<img :src="avatar" />
<div class="txt">
<p>{{ `${this.$store.getters.info.name}` }}</p>
|
21dfdeae
梁保满
平台管理员
|
42
43
44
45
|
</div>
</div>
</li>
<li class="dropdown-box" v-if="role == 'ROLE_PERSONAL'" @click="linkToUserInfo">
|
77ebf04d
梁保满
个人版
|
46
47
48
49
50
51
52
53
|
<div class="userInfo">
<img :src="avatar" />
<div class="txt">
<p>{{ `${this.$store.getters.info.name}` }}</p>
<p>个人版</p>
</div>
</div>
</li>
|
c1b532ad
梁保满
权限配置,路由基础设置
|
54
55
56
57
58
59
|
<li class="fullScreen" @click="fullScreen">
<el-tooltip
class="item"
effect="dark"
content="全屏"
placement="bottom"
|
b2d3d803
梁保满
批量设置答案优化
|
60
61
62
|
><i class="el-icon el-icon-full-screen"></i
></el-tooltip>
</li>
|
85b306de
梁保满
跳转旧平台入口权限设置
|
63
|
<li v-if="code && (role == 'ROLE_BANZHUREN' || role == 'ROLE_JIAOSHI')">
|
b2d3d803
梁保满
批量设置答案优化
|
64
65
66
67
68
69
70
|
<el-tooltip
class="item"
effect="dark"
content="老平台入口"
placement="bottom"
>
<i @click="_LinkOld" class="el-icon el-icon-guide"></i
|
c1b532ad
梁保满
权限配置,路由基础设置
|
71
72
|
></el-tooltip>
</li>
|
c1b532ad
梁保满
权限配置,路由基础设置
|
73
|
<li>
|
4c4f7640
梁保满
路由表,路由前端文件
|
74
75
76
77
78
79
|
<el-tooltip
class="item"
effect="dark"
content="退出"
placement="bottom"
>
|
b2d3d803
梁保满
批量设置答案优化
|
80
|
<i @click="logOut" class="el-icon el-icon-switch-button"></i
|
4c4f7640
梁保满
路由表,路由前端文件
|
81
|
></el-tooltip>
|
c1b532ad
梁保满
权限配置,路由基础设置
|
82
|
</li>
|
c1b532ad
梁保满
权限配置,路由基础设置
|
83
84
85
86
87
88
89
|
</ul>
</el-header>
<!-- <tabNav></tabNav> -->
</div>
</template>
<script>
|
c1b532ad
梁保满
权限配置,路由基础设置
|
90
91
|
import langSelect from "../../../components/lang/langSelect";
import tabNav from "./tabNav";
|
b2d3d803
梁保满
批量设置答案优化
|
92
|
import _ from "lodash";
|
c1b532ad
梁保满
权限配置,路由基础设置
|
93
94
|
export default {
name: "Header",
|
d5987f6a
阿宝
组件修改答案
|
95
|
components: { tabNav, langSelect },
|
4c4f7640
梁保满
路由表,路由前端文件
|
96
97
98
99
100
|
computed: {
permissions: function () {
return this.$store.getters.info.permissions || [];
},
},
|
c1b532ad
梁保满
权限配置,路由基础设置
|
101
102
|
data() {
return {
|
b2d3d803
梁保满
批量设置答案优化
|
103
|
code: "",
|
7be21664
梁保满
跳转旧系统
|
104
|
role: "",
|
c1b532ad
梁保满
权限配置,路由基础设置
|
105
106
107
108
109
110
|
isfullScreen: true,
avatar: require("@/assets/images/womandefault.png"),
dialogInfoVisible: false,
dialogPassVisible: false,
title: "",
userId: "",
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
111
|
isCollapse: false,
|
c1b532ad
梁保满
权限配置,路由基础设置
|
112
113
|
};
},
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
114
|
created() {
|
b2d3d803
梁保满
批量设置答案优化
|
115
|
this.code = localStorage.getItem("csCode") || "";
|
03bce046
梁保满
个人版调整
|
116
|
this.role = this.$store.getters.info.showRole || this.$store.getters.info.permissions[0].role;
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
117
|
this.isCollapse = this.$store.getters.isCollapse;
|
65f592b6
梁保满
答题卡列表页
|
118
|
},
|
c1b532ad
梁保满
权限配置,路由基础设置
|
119
|
methods: {
|
b2d3d803
梁保满
批量设置答案优化
|
120
121
|
_LinkOld: _.throttle(
async function () {
|
7be21664
梁保满
跳转旧系统
|
122
|
const { data, status, info } = await this.$request.linkOld();
|
b2d3d803
梁保满
批量设置答案优化
|
123
|
if (status == 0) {
|
7be21664
梁保满
跳转旧系统
|
124
|
window.location.href = data.url;
|
b2d3d803
梁保满
批量设置答案优化
|
125
126
127
128
129
130
131
|
} else {
this.$message.error(info);
}
},
2000,
{ leading: true, trailing: false }
),
|
c2460294
梁保满
平台管理员接口联调
|
132
133
134
135
136
|
linkToUserInfo() {
this.$router.push({
path:'/userInfo'
})
},
|
c1b532ad
梁保满
权限配置,路由基础设置
|
137
|
collapse() {
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
138
|
this.isCollapse = !this.isCollapse;
|
c1b532ad
梁保满
权限配置,路由基础设置
|
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
this.$store.dispatch("collapse");
},
successCallback() {
this.dialogInfoVisible = false;
},
editPwdCallback() {
this.dialogPassVisible = false;
},
fullScreen() {
if (this.isfullScreen) {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
this.isfullScreen = false;
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
this.isfullScreen = true;
}
},
handleCommand(command) {
|
4c4f7640
梁保满
路由表,路由前端文件
|
174
|
//刷新权限跳转首页
|
42056450
阿宝
权限修改
|
175
|
this.$store.dispatch("permissions", command);
|
4c4f7640
梁保满
路由表,路由前端文件
|
176
|
},
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
177
|
async logOut() {
|
b2d3d803
梁保满
批量设置答案优化
|
178
|
const { data, status, info } = await this.$request.logout();
|
6fffbd55
阿宝
组卷接口调整
|
179
180
|
if (status == 0) {
if (data) {
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
181
182
|
window.location.href = data;
} else {
|
76eb1bf6
梁保满
授课端版本管理,学生画像接口联调
|
183
|
localStorage.setItem("token","")
|
bbc51d4b
梁保满
组卷添加修改分数,打开新开页面跳转...
|
184
185
186
187
|
this.$store.commit("setToken", "");
this.$store.commit("setInfo", {});
this.$store.commit("setRouters", []);
this.$store.commit("resetTabnavBox");
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
188
189
190
|
this.$router.push({
path: "/login",
});
|
b2d3d803
梁保满
批量设置答案优化
|
191
|
window.location.reload();
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
192
193
|
}
} else {
|
b2d3d803
梁保满
批量设置答案优化
|
194
|
this.$message.error(info);
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
195
|
}
|
c1b532ad
梁保满
权限配置,路由基础设置
|
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
|
},
},
};
</script>
<style lang="scss">
$top: top;
$bottom: bottom;
$left: left;
$right: right;
$leftright: ($left, $right);
%w100 {
width: 100%;
}
%h100 {
height: 100%;
}
%cursor {
cursor: pointer;
}
html,
body,
#app,
.el-container,
#asideNav,
ul.el-menu {
@extend %h100;
}
@mixin set-value($side, $value) {
@each $prop in $leftright {
#{$side}-#{$prop}: $value;
}
}
#header {
max-height: 50px;
line-height: 50px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
4c4f7640
梁保满
路由表,路由前端文件
|
238
|
background: #03152a;
|
c1b532ad
梁保满
权限配置,路由基础设置
|
239
240
|
display: flex;
justify-content: space-between;
|
4c4f7640
梁保满
路由表,路由前端文件
|
241
|
color: #fff;
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
242
|
padding: 0 20px 0 10px;
|
c1b532ad
梁保满
权限配置,路由基础设置
|
243
244
|
.hideAside {
@extend %cursor;
|
ee6e7628
梁保满
备题组卷借口数据对接调整
|
245
246
|
i {
font-size: 24px;
|
d4283687
梁保满
首页布局完成,页面顶部返回组件
|
247
248
|
line-height: 50px;
}
|
c1b532ad
梁保满
权限配置,路由基础设置
|
249
250
251
252
253
|
}
.personal {
display: flex;
flex-direction: row;
li {
|
4c4f7640
梁保满
路由表,路由前端文件
|
254
|
@include set-value(margin, 8px);
|
c1b532ad
梁保满
权限配置,路由基础设置
|
255
|
font-size: 12px;
|
c1b532ad
梁保满
权限配置,路由基础设置
|
256
|
@extend %cursor;
|
4c4f7640
梁保满
路由表,路由前端文件
|
257
|
position: relative;
|
d4283687
梁保满
首页布局完成,页面顶部返回组件
|
258
|
line-height: 50px;
|
c1b532ad
梁保满
权限配置,路由基础设置
|
259
|
}
|
4c4f7640
梁保满
路由表,路由前端文件
|
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
|
}
.userInfo {
display: flex;
align-items: center;
height: 50px;
@extend %cursor;
.txt {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 5px;
p {
line-height: 16px;
font-size: 12px;
}
|
c1b532ad
梁保满
权限配置,路由基础设置
|
275
|
}
|
4c4f7640
梁保满
路由表,路由前端文件
|
276
|
img {
|
c1b532ad
梁保满
权限配置,路由基础设置
|
277
|
border-radius: 5px;
|
4c4f7640
梁保满
路由表,路由前端文件
|
278
279
280
281
|
width: 28px;
height: 28px;
}
}
|
b2d3d803
梁保满
批量设置答案优化
|
282
|
.el-icon {
|
4c4f7640
梁保满
路由表,路由前端文件
|
283
|
font-size: 20px;
|
d4283687
梁保满
首页布局完成,页面顶部返回组件
|
284
|
line-height: 50px;
|
4c4f7640
梁保满
路由表,路由前端文件
|
285
286
287
288
289
290
291
292
293
294
295
296
|
}
.fa-lg {
color: #fff;
}
.dropdown {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
.dropdown-link {
height: 50px;
|
c1b532ad
梁保满
权限配置,路由基础设置
|
297
298
299
300
|
}
}
}
</style>
|