朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 6ee35e82656a42adf5e1a27a2c59e3bd0157a5ba 1 个父辈 d19a6771

用户头像及菜单栏折叠按钮位置调整 

注：此Home.vue中缺少首页折线图代码
内嵌 并排对比
正在显示 3 个修改的文件 包含 431 行增加 和 229 行删除
1 <template> 1 <template>
2 <el-row class="container darkmenu" style="margin-top: 0px;"> 2 <el-row class="container darkmenu" style="margin-top: 0px;">
3 <el-col :span="24" class="header" style="background-position: center"> 3 <el-col :span="24" class="header" style="background-position: center">
4 - <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'"> 4 + <el-col :span="14" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
5 {{collapsed?'':sysName}} 5 {{collapsed?'':sysName}}
6 </el-col> 6 </el-col>
7 - <el-col :span="10">  
8 - <div class="tools" @click.prevent="collapse" style="width: 380px">  
9 - <i class="fa "></i> 7 + <el-col :span="6">
  8 + <div class="tools" @click.prevent="collapse" style="font-size:24px;width: 15px;margin-top: 80px;z-index:9999;margin-left: 10px;position:absolute;">
  9 +<!-- ;margin-top: 80px;z-index:9999;margin-left: 170px-->
  10 + <i class="el-icon-s-operation" style="color: rgb(38,56,76)"></i>
10 </div> 11 </div>
11 <!-- 标签i的图标 fa-align-justify--> 12 <!-- 标签i的图标 fa-align-justify-->
12 </el-col> 13 </el-col>
13 - <el-col :span="4" class="userinfo">  
14 - <el-dropdown trigger="hover" >  
15 - <span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img :src="this.sysUserAvatar"/></span>  
16 - <el-dropdown-menu slot="dropdown">  
17 - <el-dropdown-item>我的消息</el-dropdown-item>  
18 - <el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>  
19 - <el-dropdown-item @click.native="updateCache">更新缓存</el-dropdown-item>  
20 - <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>  
21 - </el-dropdown-menu>  
22 - </el-dropdown>  
23 - </el-col> 14 +<!-- <el-col :span="4" class="userinfo">-->
  15 +<!-- <el-dropdown trigger="hover" >-->
  16 +<!-- <span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img :src="this.sysUserAvatar"/></span>-->
  17 +<!-- <el-dropdown-menu slot="dropdown">-->
  18 +<!-- <el-dropdown-item>我的消息</el-dropdown-item>-->
  19 +<!-- <el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>-->
  20 +<!-- <el-dropdown-item @click.native="updateCache">更新缓存</el-dropdown-item>-->
  21 +<!-- <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>-->
  22 +<!-- </el-dropdown-menu>-->
  23 +<!-- </el-dropdown>-->
  24 +<!-- </el-col>-->
24 </el-col> 25 </el-col>
25 - <el-col>  
26 - <el-dialog title="修改密码" :visible.sync="dialogFormVisible">  
27 - <el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px">  
28 - <el-form-item label="用户名" prop="name">  
29 - <span>{{sysUserName}}</span>  
30 - </el-form-item>  
31 - <el-form-item label="新密码" prop="newpwd">  
32 - <el-input type="password" v-model="resetForm.newpwd" autocomplete="off" placeholder="8-20位字符在数字、小写、大写字母以及特殊字符中四选三"></el-input>  
33 - </el-form-item>  
34 - <el-form-item label="确认密码" prop="renewpwd">  
35 - <el-input type="password" v-model="resetForm.renewpwd" auto-complete="off"></el-input>  
36 - </el-form-item>  
37 - <el-form-item>  
38 - <el-button type="primary" @click="submitEdit('resetForm')" style="float:right">提 交</el-button>  
39 - </el-form-item> 26 +<!-- <el-col>-->
  27 +<!-- <el-dialog title="修改密码" :visible.sync="dialogFormVisible">-->
  28 +<!-- <el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px">-->
  29 +<!-- <el-form-item label="用户名" prop="name">-->
  30 +<!-- <span>{{sysUserName}}</span>-->
  31 +<!-- </el-form-item>-->
  32 +<!-- <el-form-item label="新密码" prop="newpwd">-->
  33 +<!-- <el-input type="password" v-model="resetForm.newpwd" autocomplete="off" placeholder="8-20位字符在数字、小写、大写字母以及特殊字符中四选三"></el-input>-->
  34 +<!-- </el-form-item>-->
  35 +<!-- <el-form-item label="确认密码" prop="renewpwd">-->
  36 +<!-- <el-input type="password" v-model="resetForm.renewpwd" auto-complete="off"></el-input>-->
  37 +<!-- </el-form-item>-->
  38 +<!-- <el-form-item>-->
  39 +<!-- <el-button type="primary" @click="submitEdit('resetForm')" style="float:right">提 交</el-button>-->
  40 +<!-- </el-form-item>-->
40 41
41 - </el-form>  
42 - </el-dialog>  
43 - </el-col> 42 +<!-- </el-form>-->
  43 +<!-- </el-dialog>-->
  44 +<!-- </el-col>-->
44 <el-col :span="24" class="main"> 45 <el-col :span="24" class="main">
45 <aside :class="collapsed?'menu-collapsed':'menu-expanded'"> 46 <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
46 <!--导航菜单--> 47 <!--导航菜单-->
@@ -99,54 +100,54 @@ @@ -99,54 +100,54 @@
99 }, 100 },
100 components: {ElFormItem,TabMenu}, 101 components: {ElFormItem,TabMenu},
101 data() { 102 data() {
102 - var validatePass = (rule, value, callback) => {  
103 - if (!value) {  
104 - callback(new Error('请输入新密码'));  
105 - }else {  
106 - var ls=0;  
107 - if(value.match(/([a-z])+/)){  
108 - ls++;  
109 - } if(value.match(/([0-9])+/)){  
110 - ls++;  
111 - } if(value.match(/([A-Z])+/)){  
112 - ls++;  
113 - } if((/([\W])+/) && !value.match(/(![\u4E00-\u9FA5])+/)){  
114 - ls++;  
115 - } if (value.toString().length < 8 || value.toString().length > 20) {  
116 - callback(new Error('密码长度为8 - 20个字符'));  
117 - ls=0;  
118 - } if(value.match(/([\u4E00-\u9FA5])+/)){  
119 - callback(new Error('不能包含中文字符'));  
120 - ls=0;  
121 - }  
122 - switch (ls) {  
123 - case 0: this.passwordPercent = 0;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;  
124 - case 1: this.passwordPercent = 33;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;  
125 - case 2: this.passwordPercent = 66;callback(new Error('数字、小写字母 、大写字母以及特殊字符中四选三'));break;  
126 - case 3:  
127 - case 4: this.passwordPercent = 100;break;  
128 - default: this.passwordPercent = 0;break;  
129 - }  
130 - callback();  
131 - }  
132 -  
133 - };  
134 -  
135 - var validatePass2 = (rule, value, callback) => {  
136 - if (value === '') {  
137 - callback(new Error('请再次输入密码'));  
138 - } else if (value !== this.resetForm.newpwd) {  
139 - callback(new Error('两次输入密码不一致!'));  
140 - } else {  
141 - callback();  
142 - }  
143 - }; 103 + // var validatePass = (rule, value, callback) => {
  104 + // if (!value) {
  105 + // callback(new Error('请输入新密码'));
  106 + // }else {
  107 + // var ls=0;
  108 + // if(value.match(/([a-z])+/)){
  109 + // ls++;
  110 + // } if(value.match(/([0-9])+/)){
  111 + // ls++;
  112 + // } if(value.match(/([A-Z])+/)){
  113 + // ls++;
  114 + // } if((/([\W])+/) && !value.match(/(![\u4E00-\u9FA5])+/)){
  115 + // ls++;
  116 + // } if (value.toString().length < 8 || value.toString().length > 20) {
  117 + // callback(new Error('密码长度为8 - 20个字符'));
  118 + // ls=0;
  119 + // } if(value.match(/([\u4E00-\u9FA5])+/)){
  120 + // callback(new Error('不能包含中文字符'));
  121 + // ls=0;
  122 + // }
  123 + // switch (ls) {
  124 + // case 0: this.passwordPercent = 0;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
  125 + // case 1: this.passwordPercent = 33;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
  126 + // case 2: this.passwordPercent = 66;callback(new Error('数字、小写字母 、大写字母以及特殊字符中四选三'));break;
  127 + // case 3:
  128 + // case 4: this.passwordPercent = 100;break;
  129 + // default: this.passwordPercent = 0;break;
  130 + // }
  131 + // callback();
  132 + // }
  133 + //
  134 + // };
  135 + //
  136 + // var validatePass2 = (rule, value, callback) => {
  137 + // if (value === '') {
  138 + // callback(new Error('请再次输入密码'));
  139 + // } else if (value !== this.resetForm.newpwd) {
  140 + // callback(new Error('两次输入密码不一致!'));
  141 + // } else {
  142 + // callback();
  143 + // }
  144 + // };
144 return { 145 return {
145 sysName:'', 146 sysName:'',
146 collapsed:false, 147 collapsed:false,
147 - sysUserName: '', 148 + // sysUserName: '',
148 sysUserId:'', 149 sysUserId:'',
149 - sysUserAvatar: '', 150 + // sysUserAvatar: '',
150 isRouterAlive: true, 151 isRouterAlive: true,
151 form: { 152 form: {
152 name: '', 153 name: '',
@@ -158,19 +159,19 @@ @@ -158,19 +159,19 @@
158 resource: '', 159 resource: '',
159 desc: '' 160 desc: ''
160 }, 161 },
161 - dialogFormVisible:false,  
162 - resetForm: {  
163 - newpwd: '',  
164 - renewpwd: '',  
165 - },  
166 - resetFormRules: {  
167 - newpwd: [  
168 - { required: true, validator: validatePass, trigger: 'blur' }  
169 - ],  
170 - renewpwd: [  
171 - { required: true, validator: validatePass2, trigger: 'blur' }  
172 - ]  
173 - }, 162 + // dialogFormVisible:false,
  163 + // resetForm: {
  164 + // newpwd: '',
  165 + // renewpwd: '',
  166 + // },
  167 + // resetFormRules: {
  168 + // newpwd: [
  169 + // { required: true, validator: validatePass, trigger: 'blur' }
  170 + // ],
  171 + // renewpwd: [
  172 + // { required: true, validator: validatePass2, trigger: 'blur' }
  173 + // ]
  174 + // },
174 editForm: { 175 editForm: {
175 userId: '', 176 userId: '',
176 password: '', 177 password: '',
@@ -188,53 +189,53 @@ @@ -188,53 +189,53 @@
188 }) 189 })
189 }) 190 })
190 }, 191 },
191 - editPass:function(){  
192 - this.dialogFormVisible=true;  
193 - },  
194 - updateCache:function(){  
195 - resetToken().then( res =>{  
196 - let response = res.data;  
197 - if (response.code === '200'){  
198 - this.$notify({  
199 - title: '成功',  
200 - message: '缓存更新成功',  
201 - type: 'success'  
202 - });  
203 - }else{  
204 - this.$notify.error({  
205 - title: '失败',  
206 - message: '缓存更新失败'  
207 - });  
208 - }  
209 - })  
210 - },  
211 - submitEdit(formName){  
212 - this.$refs[formName].validate((valid) => {  
213 - if (valid) {  
214 - this.editForm.userId=this.sysUserId;  
215 - this.editForm.password=this.resetForm.renewpwd;  
216 - editPass(this.editForm).then(res=>{  
217 - let response=res.data;  
218 - if(response.code=='200'){  
219 - this.$notify({  
220 - title: '密码修改成功',  
221 - message: '密码修改成功，退出请重新登录',  
222 - type: 'success'  
223 - });  
224 - this.dialogFormVisible=false;  
225 - }else{  
226 - this.$notify.error({  
227 - title: '密码修改失败',  
228 - message: '密码修改失败！！！'  
229 - });  
230 - }  
231 - });  
232 - } else {  
233 - console.log('error submit!!');  
234 - return false;  
235 - }  
236 - });  
237 - }, 192 + // editPass:function(){
  193 + // this.dialogFormVisible=true;
  194 + // },
  195 + // updateCache:function(){
  196 + // resetToken().then( res =>{
  197 + // let response = res.data;
  198 + // if (response.code === '200'){
  199 + // this.$notify({
  200 + // title: '成功',
  201 + // message: '缓存更新成功',
  202 + // type: 'success'
  203 + // });
  204 + // }else{
  205 + // this.$notify.error({
  206 + // title: '失败',
  207 + // message: '缓存更新失败'
  208 + // });
  209 + // }
  210 + // })
  211 + // },
  212 + // submitEdit(formName){
  213 + // this.$refs[formName].validate((valid) => {
  214 + // if (valid) {
  215 + // this.editForm.userId=this.sysUserId;
  216 + // this.editForm.password=this.resetForm.renewpwd;
  217 + // editPass(this.editForm).then(res=>{
  218 + // let response=res.data;
  219 + // if(response.code=='200'){
  220 + // this.$notify({
  221 + // title: '密码修改成功',
  222 + // message: '密码修改成功，退出请重新登录',
  223 + // type: 'success'
  224 + // });
  225 + // this.dialogFormVisible=false;
  226 + // }else{
  227 + // this.$notify.error({
  228 + // title: '密码修改失败',
  229 + // message: '密码修改失败！！！'
  230 + // });
  231 + // }
  232 + // });
  233 + // } else {
  234 + // console.log('error submit!!');
  235 + // return false;
  236 + // }
  237 + // });
  238 + // },
238 onSubmit() { 239 onSubmit() {
239 console.log('submit!'); 240 console.log('submit!');
240 }, 241 },
@@ -248,31 +249,32 @@ @@ -248,31 +249,32 @@
248 this.reload() 249 this.reload()
249 }, 250 },
250 //退出登录 251 //退出登录
251 - logout: function () {  
252 - var _this = this;  
253 - this.$confirm('确认退出吗?', '提示', {  
254 - //type: 'warning'  
255 - }).then(() => {  
256 - sessionStorage.removeItem('user');  
257 - sessionStorage.removeItem('menu');  
258 - //退出后初始化原来的路由  
259 - let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));  
260 - console.log(sysRoutes);  
261 - _this.$router.options.routes = sysRoutes;  
262 -  
263 - _this.$router.push('/login');  
264 - }).catch(() => {  
265 -  
266 - });  
267 -  
268 -  
269 - }, 252 + // logout: function () {
  253 + // var _this = this;
  254 + // this.$confirm('确认退出吗?', '提示', {
  255 + // //type: 'warning'
  256 + // }).then(() => {
  257 + // sessionStorage.removeItem('user');
  258 + // sessionStorage.removeItem('menu');
  259 + // //退出后初始化原来的路由
  260 + // let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));
  261 + // console.log(sysRoutes);
  262 + // _this.$router.options.routes = sysRoutes;
  263 + //
  264 + // _this.$router.push('/login');
  265 + // }).catch(() => {
  266 + //
  267 + // });
  268 + //
  269 + //
  270 + // },
270 //折叠导航栏 271 //折叠导航栏
271 collapse:function(){ 272 collapse:function(){
272 this.collapsed=!this.collapsed; 273 this.collapsed=!this.collapsed;
273 }, 274 },
274 showMenu(i,status){ 275 showMenu(i,status){
275 - this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none'; 276 + this.$refs.menuColl
  277 + apsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
276 } 278 }
277 }, 279 },
278 mounted() { 280 mounted() {
@@ -282,7 +284,8 @@ @@ -282,7 +284,8 @@
282 user = JSON.parse(user); 284 user = JSON.parse(user);
283 this.sysUserName = user.username || ''; 285 this.sysUserName = user.username || '';
284 this.sysUserId=user.userId||''; 286 this.sysUserId=user.userId||'';
285 - this.sysUserAvatar = user.userface || '/static/images/faceDefault.jpg'; 287 +
  288 + this.sysUserAvatar = user.userface || '~img/faceDefault.jpg';
286 } 289 }
287 //操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由 290 //操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由
288 var userRouters = sessionStorage.getItem('menu'); 291 var userRouters = sessionStorage.getItem('menu');
@@ -312,19 +315,19 @@ @@ -312,19 +315,19 @@
312 .userinfo { 315 .userinfo {
313 text-align: right; 316 text-align: right;
314 padding-right: 125px; 317 padding-right: 125px;
315 - padding-top: 71px; 318 + padding-top: 21px;
316 float: right; 319 float: right;
317 - .userinfo-inner {  
318 - cursor: pointer;  
319 - color:rgb(180,150,121);  
320 - img {  
321 - width: 40px;  
322 - height: 40px;  
323 - border-radius: 20px;  
324 - margin: 10px 0px 10px 10px;  
325 - float: right;  
326 - }  
327 - } 320 + /*.userinfo-inner {*/
  321 + /* cursor: pointer;*/
  322 + /* color:rgb(180,150,121);*/
  323 + /* img {*/
  324 + /* width: 40px;*/
  325 + /* height: 40px;*/
  326 + /* border-radius: 20px;*/
  327 + /* margin: 10px 0px 10px 10px;*/
  328 + /* float: right;*/
  329 + /* }*/
  330 + /*}*/
328 } 331 }
329 .logo { 332 .logo {
330 //width:230px; 333 //width:230px;
@@ -345,14 +348,14 @@ @@ -345,14 +348,14 @@
345 } 348 }
346 } 349 }
347 .logo-width{ 350 .logo-width{
348 - width:230px; 351 + width:380px;
349 } 352 }
350 .logo-collapse-width{ 353 .logo-collapse-width{
351 width:60px 354 width:60px
352 } 355 }
353 .tools{ 356 .tools{
354 - padding: 0px 23px;  
355 - width:14px; 357 + /*padding: 0px 13px;*/
  358 + /*width:14px;*/
356 height: 60px; 359 height: 60px;
357 line-height: 60px; 360 line-height: 60px;
358 cursor: pointer; 361 cursor: pointer;
1 <template> 1 <template>
2 - <el-row id="me">  
3 - <el-col :span="20" id="menu" >  
4 - <ul>  
5 - <li><a href="" class="drop">政府监管服务</a>  
6 - <div class="dropdown_1column">  
7 - <ul class="simple">  
8 - <li><a href="http://10.161.4.23:9004/">货物监管辅助管理</a></li>  
9 - <li><a href="">卡口辅助管理</a></li>  
10 - <li><a href="http://10.161.4.16:8250/cgoalp/index/html/index#/sc/html/list">安检信息服务</a></li>  
11 - <li><a href="http://10.161.4.16:8250/cgoalp/index/html/index#/sc/html/list">特种货物监管</a></li>  
12 - <li><a href="http://10.161.4.16:8250/cgoalp/index/html/index#/sc/html/list">企业信用管理</a></li>  
13 - </ul>  
14 - </div></li>  
15 - <li><a href="" class="drop">综合查询服务</a>  
16 - <div class="dropdown_1column">  
17 - <ul class="simple">  
18 - <li><a href="http://10.161.4.20:8083/seo">企业实时查询服务</a></li>  
19 - <li><a href="http://10.161.4.20:8083/seo">企业综合查询服务</a></li>  
20 - <li style="width: 160px"><a href="http://10.161.4.20:8083/seo">监管部门与机场实时查询</a></li>  
21 - <li style="width: 160px"><a href="http://10.161.4.20:8083/seo">监管部门与机场综合查询</a></li>  
22 - </ul>  
23 - </div></li>  
24 -  
25 - <li> <a href="" class="drop">企业公共服务</a>  
26 - <div class="dropdown_1column">  
27 - <ul class="simple">  
28 - <li><a href="http://10.161.4.20:8083/tb-agent/#/main">舱单申报服务</a> </li>  
29 - <li><a href="">奖励申请服务</a> </li>  
30 - <li><a href="http://10.161.4.20:8083/zz-bs/dashboard/index">卡口服务</a> </li>  
31 - <li><a href="http://10.161.4.16:8250/cgoalp/index/html/index#/sc/html/list">安检申报服务</a></li>  
32 - <li><a href="http://10.161.4.12:8002/">报关服务</a></li>  
33 - <li><a href="http://10.161.4.20:8083/zz-aircraft/dashboard/index">运输工具申报</a></li>  
34 - <li><a href="http://10.161.4.20:8083/portal/">更多</a></li>  
35 - </ul>  
36 - </div>  
37 - </li>  
38 - <li><a href="" class="drop">增值服务</a>  
39 - <div class="dropdown_1column">  
40 - <ul class="simple">  
41 - <li><a href="http://10.161.4.20:8083/portal/bookingIndex">在线订舱服务</a></li>  
42 - <li><a href="">在线约车服务</a> </li>  
43 - <li><a href="http://10.161.4.20:8083/portal/market">物流服务市场</a> </li>  
44 - <li><a href="http://10.161.4.20:8083/zz-awb-operate/">航空货运操作管理</a> </li>  
45 - <li><a href="http://10.161.4.12:8002/">智能通关服务</a></li>  
46 - <li><a href="http://10.161.4.20:8083/zz-uld/">智慧组板服务</a></li>  
47 - <li><a href="http://10.161.4.20:8083/zz-lf/dashboard/index">物流金融服务</a></li>  
48 - </ul>  
49 - </div>  
50 - </li>  
51 -  
52 - </ul>  
53 - </el-col>  
54 - </el-row> 2 + <div>
  3 + <el-row id="me">
  4 +<!-- <el-col :span="3" style="margin-left: 40px;margin-top: 10px">-->
  5 +<!-- <div class="tools" @click.prevent="collapse" style="width: 380px;font-size: 24px">-->
  6 +<!-- <i class="el-icon-s-operation" style="color: rgb(43,47,58)"></i>-->
  7 +<!-- </div>-->
  8 +<!-- &lt;!&ndash; 标签i的图标 fa-align-justify&ndash;&gt;-->
  9 +<!-- </el-col>-->
  10 + <el-col :span="18" id="menu" >
  11 + <ul>
55 12
  13 + <li><a href="" class="drop">政府监管服务</a>
  14 + <div class="dropdown_1column">
  15 + <ul class="simple">
  16 + <li><a href="http://10.161.4.23:9004/">货物监管辅助管理</a></li>
  17 + <li><a href="">卡口辅助管理</a></li>
  18 + <li><a href="http://10.161.4.16:8250/cgoalp/index/html/index#/sc/html/list">安检信息服务</a></li>
  19 + <li><a href="http://10.161.4.16:8250/cgoalp/index/html/index#/sc/html/list">特种货物监管</a></li>
  20 + <li><a href="http://10.161.4.16:8250/cgoalp/index/html/index#/sc/html/list">企业信用管理</a></li>
  21 + </ul>
  22 + </div></li>
  23 + <li><a href="" class="drop">综合查询服务</a>
  24 + <div class="dropdown_1column">
  25 + <ul class="simple">
  26 + <li><a href="http://10.161.4.20:8083/seo">企业实时查询服务</a></li>
  27 + <li><a href="http://10.161.4.20:8083/seo">企业综合查询服务</a></li>
  28 + <li style="width: 160px"><a href="http://10.161.4.20:8083/seo">监管部门与机场实时查询</a></li>
  29 + <li style="width: 160px"><a href="http://10.161.4.20:8083/seo">监管部门与机场综合查询</a></li>
  30 + </ul>
  31 + </div></li>
  32 +
  33 + <li> <a href="" class="drop">企业公共服务</a>
  34 + <div class="dropdown_1column">
  35 + <ul class="simple">
  36 + <li><a href="http://10.161.4.20:8083/tb-agent/#/main">舱单申报服务</a> </li>
  37 + <li><a href="">奖励申请服务</a> </li>
  38 + <li><a href="http://10.161.4.20:8083/zz-bs/dashboard/index">卡口服务</a> </li>
  39 + <li><a href="http://10.161.4.16:8250/cgoalp/index/html/index#/sc/html/list">安检申报服务</a></li>
  40 + <li><a href="http://10.161.4.12:8002/">报关服务</a></li>
  41 + <li><a href="http://10.161.4.20:8083/zz-aircraft/dashboard/index">运输工具申报</a></li>
  42 + <li><a href="http://10.161.4.20:8083/portal/">更多</a></li>
  43 + </ul>
  44 + </div>
  45 + </li>
  46 + <li><a href="" class="drop">增值服务</a>
  47 + <div class="dropdown_1column">
  48 + <ul class="simple">
  49 + <li><a href="http://10.161.4.20:8083/portal/bookingIndex">在线订舱服务</a></li>
  50 + <li><a href="">在线约车服务</a> </li>
  51 + <li><a href="http://10.161.4.20:8083/portal/market">物流服务市场</a> </li>
  52 + <li><a href="http://10.161.4.20:8083/zz-awb-operate/">航空货运操作管理</a> </li>
  53 + <li><a href="http://10.161.4.12:8002/">智能通关服务</a></li>
  54 + <li><a href="http://10.161.4.20:8083/zz-uld/">智慧组板服务</a></li>
  55 + <li><a href="http://10.161.4.20:8083/zz-lf/dashboard/index">物流金融服务</a></li>
  56 + </ul>
  57 + </div>
  58 + </li>
  59 + <li>
  60 + <el-dropdown trigger="hover" style="margin-top: -20px;margin-left: 130px">
  61 + <span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img src="~img/faceDefault.jpg"/></span>
  62 +<!-- ../../assets/img/faceDefault.jpg-->
  63 + <el-dropdown-menu slot="dropdown">
  64 + <el-dropdown-item>我的消息</el-dropdown-item>
  65 + <el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>
  66 + <el-dropdown-item @click.native="updateCache">更新缓存</el-dropdown-item>
  67 + <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
  68 + </el-dropdown-menu>
  69 + </el-dropdown>
  70 + </li>
  71 + </ul>
  72 + </el-col>
  73 + <el-col>
  74 + <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
  75 + <el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px">
  76 + <el-form-item label="用户名" prop="name">
  77 + <span>{{sysUserName}}</span>
  78 + </el-form-item>
  79 + <el-form-item label="新密码" prop="newpwd">
  80 + <el-input type="password" v-model="resetForm.newpwd" autocomplete="off" placeholder="8-20位字符在数字、小写、大写字母以及特殊字符中四选三"></el-input>
  81 + </el-form-item>
  82 + <el-form-item label="确认密码" prop="renewpwd">
  83 + <el-input type="password" v-model="resetForm.renewpwd" auto-complete="off"></el-input>
  84 + </el-form-item>
  85 + <el-form-item>
  86 + <el-button type="primary" @click="submitEdit('resetForm')" style="float:right">提 交</el-button>
  87 + </el-form-item>
  88 + </el-form>
  89 + </el-dialog>
  90 + </el-col>
  91 + </el-row>
  92 +
  93 + </div>
56 </template> 94 </template>
57 95
58 <script> 96 <script>
59 - export default {  
60 - name: "NaBar"  
61 - } 97 +
  98 + import {editPass,resetToken} from "../../api/user";
  99 + export default {
  100 + data(){
  101 + return{
  102 + dialogFormVisible:false,
  103 + sysUserName: '',
  104 + sysUserAvatar: '',
  105 + resetForm: {
  106 + newpwd: '',
  107 + renewpwd: '',
  108 + },
  109 + resetFormRules: {
  110 + newpwd: [
  111 + { required: true, validator: validatePass, trigger: 'blur' }
  112 + ],
  113 + renewpwd: [
  114 + { required: true, validator: validatePass2, trigger: 'blur' }
  115 + ]
  116 + },
  117 + };
  118 + var validatePass = (rule, value, callback) => {
  119 + if (!value) {
  120 + callback(new Error('请输入新密码'));
  121 + }else {
  122 + var ls=0;
  123 + if(value.match(/([a-z])+/)){
  124 + ls++;
  125 + } if(value.match(/([0-9])+/)){
  126 + ls++;
  127 + } if(value.match(/([A-Z])+/)){
  128 + ls++;
  129 + } if((/([\W])+/) && !value.match(/(![\u4E00-\u9FA5])+/)){
  130 + ls++;
  131 + } if (value.toString().length < 8 || value.toString().length > 20) {
  132 + callback(new Error('密码长度为8 - 20个字符'));
  133 + ls=0;
  134 + } if(value.match(/([\u4E00-\u9FA5])+/)){
  135 + callback(new Error('不能包含中文字符'));
  136 + ls=0;
  137 + }
  138 + switch (ls) {
  139 + case 0: this.passwordPercent = 0;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
  140 + case 1: this.passwordPercent = 33;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
  141 + case 2: this.passwordPercent = 66;callback(new Error('数字、小写字母 、大写字母以及特殊字符中四选三'));break;
  142 + case 3:
  143 + case 4: this.passwordPercent = 100;break;
  144 + default: this.passwordPercent = 0;break;
  145 + }
  146 + callback();
  147 + }
  148 +
  149 + };
  150 +
  151 + var validatePass2 = (rule, value, callback) => {
  152 + if (value === '') {
  153 + callback(new Error('请再次输入密码'));
  154 + } else if (value !== this.resetForm.newpwd) {
  155 + callback(new Error('两次输入密码不一致!'));
  156 + } else {
  157 + callback();
  158 + }
  159 + };
  160 +
  161 + },
  162 + methods:{
  163 + // 折叠导航栏
  164 + collapse:function(){
  165 + this.collapsed=!this.collapsed;
  166 + },
  167 + showMenu(i,status){
  168 + this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
  169 + },
  170 + // 用户信息
  171 + editPass:function(){
  172 + this.dialogFormVisible=true;
  173 + },
  174 + updateCache:function(){
  175 + resetToken().then( res =>{
  176 + let response = res.data;
  177 + if (response.code === '200'){
  178 + this.$notify({
  179 + title: '成功',
  180 + message: '缓存更新成功',
  181 + type: 'success'
  182 + });
  183 + }else{
  184 + this.$notify.error({
  185 + title: '失败',
  186 + message: '缓存更新失败'
  187 + });
  188 + }
  189 + })
  190 + },
  191 + //退出登录
  192 + logout: function () {
  193 + var _this = this;
  194 + this.$confirm('确认退出吗?', '提示', {
  195 + //type: 'warning'
  196 + }).then(() => {
  197 + sessionStorage.removeItem('user');
  198 + sessionStorage.removeItem('menu');
  199 + //退出后初始化原来的路由
  200 + let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));
  201 + console.log(sysRoutes);
  202 + _this.$router.options.routes = sysRoutes;
  203 +
  204 + _this.$router.push('/login');
  205 + }).catch(() => {
  206 +
  207 + });
  208 +
  209 +
  210 + },
  211 + submitEdit(formName){
  212 + this.$refs[formName].validate((valid) => {
  213 + if (valid) {
  214 + this.editForm.userId=this.sysUserId;
  215 + this.editForm.password=this.resetForm.renewpwd;
  216 + editPass(this.editForm).then(res=>{
  217 + let response=res.data;
  218 + if(response.code=='200'){
  219 + this.$notify({
  220 + title: '密码修改成功',
  221 + message: '密码修改成功，退出请重新登录',
  222 + type: 'success'
  223 + });
  224 + this.dialogFormVisible=false;
  225 + }else{
  226 + this.$notify.error({
  227 + title: '密码修改失败',
  228 + message: '密码修改失败！！！'
  229 + });
  230 + }
  231 + });
  232 + } else {
  233 + console.log('error submit!!');
  234 + return false;
  235 + }
  236 + });
  237 + },
  238 + },
  239 + }
62 </script> 240 </script>
63 241
64 <style scoped> 242 <style scoped>
@@ -123,6 +301,27 @@ @@ -123,6 +301,27 @@
123 font-size:13px; 301 font-size:13px;
124 line-height:45px; 302 line-height:45px;
125 } 303 }
  304 + .userinfo-inner {
  305 + cursor: pointer;
  306 + color:rgb(180,150,121);
  307 + }
  308 + .userinfo-inner img {
  309 + width: 40px;
  310 + height: 40px;
  311 + margin: 10px 0px 10px 10px;
  312 + float: right;
  313 + }
  314 + .tools{
  315 + /*padding: 0px 23px;*/
  316 + /*width:14px;*/
  317 + /*height: 60px;*/
  318 + /*line-height: 60px;*/
  319 + cursor: pointer;
126 320
  321 + /*padding-left: 180px;*/
  322 + /*padding-top: 60px;*/
  323 + /*color: rgb(111,130,148);*/
  324 +
  325 + }
127 </style> 326 </style>
128 327