nav.vue
4.85 KB
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<template>
<el-container id="nav">
<el-aside width="10%">
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" router :collapse="false" text-color="white" background-color="black" active-text-color="#ffd04b">
<div style="height:20%;text-align:center">
<img src="../assets/logo.png" alt="" style="width:100%;height:26%">
</div>
<el-menu-item index="/nav/search">
<i class="icon i-search"></i>
<span slot="title">检索合同</span>
</el-menu-item>
<el-menu-item index="/nav/contract/0" @click="contract" v-if="contract_show">
<i class="icon i-file"></i>
<span slot="title">合同信息</span>
</el-menu-item>
<el-menu-item index="/nav/user">
<i class="icon i-user"></i>
<span slot="title">个人管理</span>
</el-menu-item>
<el-menu-item index="/nav/manage" v-show="management">
<i class="icon i-setting"></i>
<span slot="title">后台管理</span>
</el-menu-item>
<el-menu-item index="" @click="exit">
<i class="icon i-login"></i>
<span slot="title">退出</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main :style="color">
<keep-alive include="search">
<router-view></router-view>
</keep-alive>
</el-main>
</el-container>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
color: "background-color: lightblue",
management: false,
username: "",
department: "",
collapse: true,
contract_show: true
};
},
methods: {
contract() {
if (sessionStorage.getItem("modify")) {
sessionStorage.removeItem("modify");
}
},
exit() {
this.$confirm("确认退出?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
sessionStorage.clear();
this.$router.push({ path: "/" });
})
.catch(() => {});
}
},
beforeCreate() {
if (!sessionStorage.getItem("login_check")) {
alert("请登录");
this.$router.push({ path: "/" });
}
},
created() {
if (
sessionStorage.getItem("user_roles") != "null" &&
sessionStorage.getItem("user_roles")
) {
var roles = JSON.parse(sessionStorage.getItem("user_roles"));
for (let i = 0; i < roles.length; i++) {
const e = roles[i];
if (e.role_unid == "91d5185d47e3bad099e17570b0dd0ed2") {
}
}
} else {
this.contract_show = false;
}
if (sessionStorage.getItem("user_name") === "Admin") {
this.management = true;
}
if (sessionStorage.getItem("manager")) {
this.management = true;
this.contract_show = true;
}
if (localStorage.getItem("color")) {
var style = {};
switch (localStorage.getItem("color")) {
case "天空蓝":
this.color = "background-color: lightblue";
style.color = "lightblue";
style.image = null;
break;
case "梦幻紫":
this.color =
"background-color:#8ec5fc;background-image:linear-gradient(225deg, #8ec5fc 0%, #e0c3fc 100%)";
style.color = "#8ec5fc";
style.image = "linear-gradient(225deg, #8ec5fc 0%, #e0c3fc 100%)";
break;
case "活力橙":
this.color =
"background-color:#FBAB7E;background-image:linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)";
style.color = "#FBAB7E";
style.image = "linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)";
break;
case "柠檬绿":
this.color =
"background-color:#F4D03F;background-image:linear-gradient(132deg, #F4D03F 0%, #16A085 100%)";
style.color = "#F4D03F";
style.image = "linear-gradient(132deg, #F4D03F 0%, #16A085 100%)";
break;
case "灰灰灰":
this.color = "background-color:#f0f0f0";
style.color = "#f0f0f0";
style.image = null;
break;
case "小清新":
this.color =
"background-color:#FFDEE9;background-image:linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)";
style.color = "#FFDEE9";
style.image = "linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)";
break;
}
localStorage.setItem("style", JSON.stringify(style));
}
}
};
</script>
<style>
.el-container > .el-main {
min-width: 1120px;
text-align: center;
padding: 0;
overflow-y: scroll;
}
.el-container,
.el-aside {
min-width: 167px;
height: 100%;
}
.el-aside > .el-menu {
height: 100%;
}
</style>