<template>
<div>
<el-row id="me">
<!-- <el-col :span="3" style="margin-left: 40px;margin-top: 10px">-->
<!-- <div class="tools" @click.prevent="collapse" style="width: 380px;font-size: 24px">-->
<!-- <i class="el-icon-s-operation" style="color: rgb(43,47,58)"></i>-->
<!-- </div>-->
<!-- <!– 标签i的图标 fa-align-justify–>-->
<!-- </el-col>-->
<el-col :span="18" id="menu" >
<ul>
<li><a href="" class="drop">政府监管服务</a>
<div class="dropdown_1column">
<ul class="simple">
<li><a href="http://8.131.245.248:9004/">货物监管辅助管理</a></li>
<li><a href="http://8.131.245.248:9005/">卡口辅助管理</a></li>
<li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">安检信息服务</a></li>
<li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">特种货物监管</a></li>
<li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">企业信用管理</a></li>
</ul>
</div></li>
<li><a href="" class="drop">综合查询服务</a>
<div class="dropdown_1column">
<ul class="simple">
<li><a href="http://8.131.245.248:8083/zz-sso">企业实时查询服务</a></li>
<li><a href="http://8.131.245.248:8083/zz-sso">企业综合查询服务</a></li>
<li style="width: 160px"><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场实时查询</a></li>
<li style="width: 160px"><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场综合查询</a></li>
</ul>
</div></li>
<li> <a href="" class="drop">企业公共服务</a>
<div class="dropdown_1column">
<ul class="simple">
<li><a href="http://8.131.245.248:8083/tb-agent/">舱单申报服务</a> </li>
<li><a href="http://8.131.245.248:9001/">奖励申请服务</a> </li>
<li><a href="http://8.131.245.248:8083/zz-bs">卡口服务</a> </li>
<li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">安检申报服务</a></li>
<li><a href="http://8.131.245.248:8002/home">报关服务</a></li>
<li><a href="http://8.131.245.248:8083/zz-aircraft/dashboard/index">运输工具申报</a></li>
<li><a href="http://8.131.245.248:8083/portal/enterpriseService">更多</a></li>
</ul>
</div>
</li>
<li><a href="" class="drop">增值服务</a>
<div class="dropdown_1column">
<ul class="simple">
<li><a href="http://8.131.245.248:8083/portal/bookingIndex">在线订舱服务</a></li>
<li><a href="http://8.131.245.248:9003/index/bookList">在线约车服务</a> </li>
<li><a href="http://8.131.245.248:8083/portal/market">物流服务市场</a> </li>
<li><a href="http://8.131.245.248:8083/zz-awb-operate/">航空货运操作管理</a> </li>
<li><a href="http://8.131.245.248:8002/home">智能通关服务</a></li>
<li><a href="http://8.131.245.248:8083/zz-uld/">智慧组板服务</a></li>
<li><a href="http://8.131.245.248:8083/zz-lf/dashboard/index">物流金融服务</a></li>
</ul>
</div>
</li>
<li>
<el-dropdown trigger="hover" style="margin-top: -20px;margin-left: 100px">
<span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img style="border-radius:50%;" src="~img/faceDefault.jpg"/></span>
<!-- ../../assets/img/faceDefault.jpg-->
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>我的消息</el-dropdown-item>
<el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>
<el-dropdown-item @click.native="updateCache">更新缓存</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
</ul>
</el-col>
<el-col>
<el-dialog title="修改密码" :visible.sync="dialogFormVisible">
<el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px">
<el-form-item label="用户名" prop="name">
<span>{{sysUserName}}</span>
</el-form-item>
<el-form-item label="新密码" prop="newpwd">
<el-input type="password" v-model="resetForm.newpwd" autocomplete="off" placeholder="8-20位字符在数字、小写、大写字母以及特殊字符中四选三"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="renewpwd">
<el-input type="password" v-model="resetForm.renewpwd" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitEdit('resetForm')" style="float:right">提 交</el-button>
</el-form-item>
</el-form>
</el-dialog>
</el-col>
</el-row>
</div>
</template>
<script>
import {editPass,resetToken} from "../../api/user";
export default {
data(){
return{
dialogFormVisible:false,
sysUserName: '',
sysUserAvatar: '',
resetForm: {
newpwd: '',
renewpwd: '',
},
resetFormRules: {
newpwd: [
{ required: true, validator: validatePass, trigger: 'blur' }
],
renewpwd: [
{ required: true, validator: validatePass2, trigger: 'blur' }
]
},
};
var validatePass = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入新密码'));
}else {
var ls=0;
if(value.match(/([a-z])+/)){
ls++;
} if(value.match(/([0-9])+/)){
ls++;
} if(value.match(/([A-Z])+/)){
ls++;
} if((/([\W])+/) && !value.match(/(![\u4E00-\u9FA5])+/)){
ls++;
} if (value.toString().length < 8 || value.toString().length > 20) {
callback(new Error('密码长度为8 - 20个字符'));
ls=0;
} if(value.match(/([\u4E00-\u9FA5])+/)){
callback(new Error('不能包含中文字符'));
ls=0;
}
switch (ls) {
case 0: this.passwordPercent = 0;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
case 1: this.passwordPercent = 33;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
case 2: this.passwordPercent = 66;callback(new Error('数字、小写字母 、大写字母以及特殊字符中四选三'));break;
case 3:
case 4: this.passwordPercent = 100;break;
default: this.passwordPercent = 0;break;
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.resetForm.newpwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
},
methods:{
// 折叠导航栏
collapse:function(){
this.collapsed=!this.collapsed;
},
showMenu(i,status){
this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
},
// 用户信息
editPass:function(){
this.dialogFormVisible=true;
},
updateCache:function(){
resetToken().then( res =>{
let response = res.data;
if (response.code === '200'){
this.$notify({
title: '成功',
message: '缓存更新成功',
type: 'success'
});
}else{
this.$notify.error({
title: '失败',
message: '缓存更新失败'
});
}
})
},
//退出登录
logout: function () {
var _this = this;
this.$confirm('确认退出吗?', '提示', {
//type: 'warning'
}).then(() => {
sessionStorage.removeItem('user');
sessionStorage.removeItem('menu');
//退出后初始化原来的路由
let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));
console.log(sysRoutes);
_this.$router.options.routes = sysRoutes;
_this.$router.push('/login');
}).catch(() => {
});
},
submitEdit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
this.editForm.userId=this.sysUserId;
this.editForm.password=this.resetForm.renewpwd;
editPass(this.editForm).then(res=>{
let response=res.data;
if(response.code=='200'){
this.$notify({
title: '密码修改成功',
message: '密码修改成功，退出请重新登录',
type: 'success'
});
this.dialogFormVisible=false;
}else{
this.$notify.error({
title: '密码修改失败',
message: '密码修改失败！！！'
});
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
},
}
</script>
<style scoped>
/*去除序列点*/
li{
list-style-type: none;
}
a{font-size: 12px;}
/*菜单栏底层div*/
#menu,#menu2 {
height: 48px;
border-bottom: 2px solid #6f8294;
position:relative;
z-index: 999;
margin-top: -10px;
float: right;
width: 730px;
}
/*一级菜单栏样式*/
#menu li{
/*float: right;*/
width: 117px;
/*height: 50px;*/
text-align: center;
/*position:relative;*/
border:none;
float: left;
}
/*一级菜单栏字体*/
#menu li a {
font-size:12px;
display:block;
/*outline:0;*/
/*删除下划线*/
text-decoration:none;
}
/*鼠标放一级菜单时显示二级菜单样式(横向效果)*/
#menu li:hover .dropdown_1column {
left: -150px;
right: auto;
top:30px;
font-size:13px;
color:#ffffff;
width: 1000px;
}
/*二级菜单栏样式*/
.dropdown_1column{
position: absolute;
left: -999em;
background: rgb(14,119,238);
display: table;
text-align: center;
}
/*鼠标移至二级菜单栏颜色改变*/
#menu li:hover div li:hover{background-color: rgb(18,170,255)}
/*二级菜单栏样式*/
#menu li ul li {
font-size:12px;
line-height:45px;
}
.userinfo-inner {
cursor: pointer;
color:rgb(180,150,121);
}
.userinfo-inner img {
width: 40px;
height: 40px;
margin: 10px 0px 10px 10px;
float: right;
}
.tools{
/*padding: 0px 23px;*/
/*width:14px;*/
/*height: 60px;*/
/*line-height: 60px;*/
cursor: pointer;
/*padding-left: 180px;*/
/*padding-top: 60px;*/
/*color: rgb(111,130,148);*/
}
</style>