HeadNav.vue
8 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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<template>
<header class="head-nav">
<el-row>
<el-col :span="4" class='logo-container'>
<img src="../../../assets/logo-sm.png" class='logo' alt="">
</el-col>
<el-col :span="16">
<el-menu theme="dark" :default-active="$store.state.router.headerCurRouter" class="el-menu-demo" mode="horizontal" unique-opened router>
<!-- <el-submenu index="1">
<template slot="title">向导中心</template>
<el-menu-item index="1-1">快捷方式1</el-menu-item>
<el-menu-item index="1-2">快捷方式2</el-menu-item>
<el-menu-item index="1-3">快捷方式3</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">商城中心</template>
<el-menu-item index="2-1">订单统计</el-menu-item>
<el-menu-item index="2-2">其他</el-menu-item>
</el-submenu> -->
<!-- <el-menu-item index="2">商城中心</el-menu-item>
<el-menu-item index="3">系统设置</el-menu-item> -->
<!-- v-if='!item.hidden && $store.state.user.userinfo.access.indexOf(item.path)===-1' -->
<el-menu-item
:index="item.path"
v-for='(item,index) in $router.options.routes'
v-if='!item.hidden'>
{{item.name}}<!-- {{item.path}} -->
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="4" class="userinfo">
<!-- <span class='username'><i class='fa fa-user'></i>{{this.$store.state.user.userinfo.username}}</span> -->
<span class='username'>
<el-dropdown
trigger="click"
@command='setDialogInfo'>
<span class="el-dropdown-link">
{{this.$store.state.user.userinfo.username}}<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command='info'>修改信息</el-dropdown-item>
<el-dropdown-item
command='pass'
v-if='$store.state.user.userinfo.is_update_pass'>修改密码</el-dropdown-item>
<el-dropdown-item
command='set'
v-if='$store.state.user.userinfo.pid==0'>系统设置</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<i class="fa fa-sign-out logout" @click='logout'></i>
</el-col>
</el-row>
<el-dialog size="tiny" :title="dialog.title"
v-model="dialog.show_pass">
<el-form style="margin:20px;width:80%;"
label-width="100px"
:model="dialog.user_info"
:rules="dialog.user_info_rules"
ref='user_info'>
<el-form-item class='edit-form'
label="邮箱"
prop='email'>
<el-input v-model="dialog.user_info.email" disabled placeholder='常用邮箱'></el-input>
</el-form-item>
<el-form-item class='edit-form'
label="用户名称"
prop='username'>
<el-input v-model="dialog.user_info.username" disabled placeholder='用户名'></el-input>
</el-form-item>
<el-form-item class='edit-form'
label="当前密码"
prop='old_password'>
<el-input
type='password'
placeholder='当前密码'
auto-complete='off'
v-model="dialog.user_info.old_password"></el-input>
</el-form-item>
<el-form-item class='edit-form'
label="新密码"
prop='password'>
<el-input
type='password'
placeholder='新密码'
auto-complete='off'
v-model="dialog.user_info.password"></el-input>
</el-form-item>
<el-form-item class='edit-form'
label="确认密码"
prop='password_confirm'>
<el-input
type='password'
placeholder='确认密码'
auto-complete='off'
v-model="dialog.user_info.password_confirm"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog.show_pass = false">取 消</el-button>
<el-button type="primary" @click="updUserPass('user_info')">确 定</el-button>
</span>
</el-dialog>
<el-dialog size="small" :title="dialog.title"
v-model="dialog.show_set">
<el-form style="margin:20px;width:80%;"
label-width="100px"
v-model='dialog.set_info'
ref='set_info'>
<el-form-item label="登录方式">
<el-select placeholder="请选择登录方式"
v-model='dialog.set_info.login_style'>
<el-option label="单一登录" value="1"></el-option>
<el-option label="多点登录" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="禁止修改密码">
<el-select placeholder="请选择用户"
multiple
v-model='dialog.set_info.disabled_update_pass'>
<!-- value的值的ID是number，disabled_update_pass的元素中的是字符串，
所以在value上，需要拼装一个空串，来转化
因为elementUI内部用了===
-->
<el-option
v-for='user in dialog.set_info.select_users'
:label='user.username'
:value='user.id+""'></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialog.show_set = false">取 消</el-button>
<el-button type="primary" @click="onUpdateSetting">确 定</el-button>
</span>
</el-dialog>
</header>
</template>
<script>
import HeadNavJs from './HeadNav.js';
export default HeadNavJs;
</script>
<style scoped lang='less'>
.logo-container{
height: 60px;
}
.logo{
height: 50px;
width: auto;
margin-left: 10px;
margin-top: 5px;
}
.fa-user{
position: relative;
top:-2px;
margin-right: 4px;
}
.head-nav{
width:100%;
height: 60px;
background: #324057;
position: fixed;
top:0px;
left:0px;
z-index: 999;
color:#FFF;
border-bottom: 1px solid #1F2D3D;
.logout{
width:60px;
height: 60px;
line-height: 60px;
text-align: center;
float: right;
cursor: pointer;
}
}
.userinfo{
text-align: right;
}
.username{
height: 60px;
line-height: 60px;
cursor: pointer;
.el-dropdown{
color:#FFF;
}
}
</style>