<template>
|
<div class="top-nav">
|
<!-- <el-menu
|
:default-active="activeIndex"
|
mode="horizontal"
|
@select="handleSelect"
|
background-color="#1C1A60"
|
text-color="#303133"
|
active-text-color="#409EFF"
|
:router="true"
|
> -->
|
|
<div class="top-nav-user">
|
<el-dropdown
|
placement="top"
|
trigger="hover"
|
:popper-append-to-body="false"
|
:hide-on-click="true"
|
>
|
<div class="el-dropdown-link" style="cursor: point;">
|
<i
|
class="iconfont iconyonghu2"
|
style="background-color: rgb(61, 68, 225);
|
font-size: 30px;
|
position: relative;
|
top: 5px;
|
border-radius: 45px;"
|
></i>
|
{{loginName}}
|
<i
|
class="el-icon-caret-bottom el-icon--right"
|
style="color:#94979B"
|
></i>
|
</div>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item @click.native="showPasswdForm = true">修改密码</el-dropdown-item>
|
<el-dropdown-item @click.native="toLogout">安全退出</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
|
<el-dialog title="修改密码" :visible.sync="showPasswdForm" width="500px">
|
<el-form :model="passwdForm" ref="ruleForm" :rules="rules" label-width="90px">
|
<el-form-item label="旧密码" prop="oldPwd">
|
<el-input show-password v-model="passwdForm.oldPwd" autocomplete="off" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码" prop="newPwd">
|
<el-input show-password v-model="passwdForm.newPwd" autocomplete="off" size="small"></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="checkPwd">
|
<el-input show-password v-model="passwdForm.checkPwd" autocomplete="off" size="small"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="info" @click="showPasswdForm = false" size="small">取 消</el-button>
|
<el-button type="primary" @click="submitForm('ruleForm')" size="small">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import bus from "../main";
|
// import fTemplate from '@/components/common/fTemplate'
|
import { getMenuListData, findButtonAuthoritys, findInArr } from "@/api/utils";
|
import { logout, updatePwd } from "@/api/login";
|
export default {
|
components: {
|
// fTemplate
|
},
|
computed: {
|
activeIndex() {
|
return this.$route.name;
|
},
|
isAdmin() {
|
if (
|
sessionStorage.getItem("userInfo") &&
|
sessionStorage.getItem("userInfo") !== ""
|
) {
|
let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
|
return loginName === "superadmin" || loginName === "basic";
|
}
|
return false;
|
}
|
},
|
data() {
|
var validatePass = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入密码'));
|
} else {
|
if (this.passwdForm.checkPwd !== '') {
|
this.$refs.ruleForm.validateField('checkPwd');
|
}
|
callback();
|
}
|
};
|
var validatePass2 = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请再次输入密码'));
|
} else if (value !== this.passwdForm.newPwd) {
|
callback(new Error('两次输入密码不一致!'));
|
} else {
|
callback();
|
}
|
};
|
return {
|
menuListData: [
|
{
|
id: "1",
|
name: "实时监控",
|
icon: "iconfont iconxshishijiankong",
|
index: "Video",
|
authority: "videoMonitor"
|
},
|
{
|
id: "2",
|
name: "检索",
|
icon: "iconfont iconjiansuox",
|
index: "Searching",
|
authority: "videoSearch"
|
},
|
{
|
id: "3",
|
name: "视频源管理",
|
icon: "iconfont iconshipinyuanguanlix",
|
index: "VideoManage",
|
authority: "videoCamera"
|
},
|
{
|
id: "4",
|
name: "底库管理",
|
icon: "iconfont iconjuxingx",
|
index: "DataManage",
|
authority: "videoTable"
|
},
|
{
|
id: "5",
|
name: "算法管理",
|
icon: "iconfont iconrenrenwuguanlix",
|
index: "TaskManage",
|
authority: "videoTask"
|
},
|
{
|
id: "6",
|
name: "系统管理",
|
icon: "iconfont iconxitongguanlix",
|
index: "SystemManage",
|
authority: "videoSystem"
|
}
|
],
|
buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
|
loginName: JSON.parse(sessionStorage.getItem("userInfo")).username || "用户名",
|
showTreeCtlBtn: true,
|
showPasswdForm: false,
|
passwdForm: {
|
oldPwd: "",
|
newPwd: "",
|
checkPwd: ""
|
},
|
rules: {
|
oldPwd: [
|
{required: true, message: '请输入旧密码', trigger: 'blur'}
|
],
|
newPwd: [
|
{ required: true, validator: validatePass, trigger: 'blur' }
|
],
|
checkPwd: [
|
{ required: true, validator: validatePass2, trigger: 'blur' }
|
]
|
}
|
};
|
},
|
watch: {
|
$route(to, from) {
|
this.treeCtl(to.path)
|
},
|
'TreeDataPool.showTreeBox': function (newVal, oldVal) {
|
this.treeCtl(this.$route.path)
|
}
|
},
|
methods: {
|
treeCtl(path) {
|
switch (path) {
|
case "/Layout/TaskManage": break;
|
case "/Layout/SystemManage": break;
|
case "/Layout/DataManage":
|
this.showTreeCtlBtn = true;
|
break;
|
case "/Layout/Searching":
|
this.showTreeCtlBtn = this.TreeDataPool.showTreeBox
|
this.TreeDataPool.filterLocalVideoWell()
|
break;
|
case "/Layout/Video":
|
this.showTreeCtlBtn = this.TreeDataPool.showTreeBox
|
this.TreeDataPool.filterLocalVideoWell()
|
break;
|
default:
|
this.showTreeCtlBtn = this.TreeDataPool.showTreeBox
|
break;
|
}
|
},
|
isShow(authority) {
|
if (this.isAdmin) {
|
return true;
|
} else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
handleSelect(key, keyPath) { },
|
slideLeft() {
|
bus.$emit("slideLeft");
|
},
|
/* 获取菜单数据 */
|
async getMenuList() {
|
let results = await getMenuListData({
|
module: this.state.menuName
|
});
|
// console.log(results,'获取菜单权限')
|
if (results && results.success) {
|
/* 菜单数据赋值 permission权限 */
|
this.menuListData = results.data;
|
// this.$router.replace(results && results[0].url)
|
/* 存储权限 */
|
let buttonAuthoritys = results.data;
|
// console.log(this.$route.query.is_loginsss)
|
if (results && results.length && this.$route.query.is_login) {
|
this.$router.replace(results[0].url);
|
}
|
// findButtonAuthoritys(results.data, authority => {
|
// if (findInArr(authority, buttonAuthoritys) === -1) {
|
// buttonAuthoritys.push(authority);
|
// }
|
// });
|
sessionStorage.setItem(
|
"buttonAuthoritys",
|
"," + buttonAuthoritys + ","
|
);
|
this.$forceUpdate();
|
sessionStorage.setItem("menuInfo", JSON.stringify(results));
|
} else {
|
this.$toast({
|
type: "error",
|
message: "菜单获取失败"
|
});
|
}
|
},
|
toLogout(msg) {
|
msg = msg === '修改密码成功，请重新登录！'? msg: "提示：确定退出吗？";
|
// console.log(msg,'toLogout')
|
this.$confirm("提示：确定退出吗？", {
|
center: true,
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure"
|
}).then(_ => {
|
logout().then(res => {
|
if (res === "退出成功") {
|
sessionStorage.removeItem("menuInfo");
|
sessionStorage.removeItem("loginedInfo");
|
sessionStorage.removeItem("expires_in");
|
sessionStorage.removeItem("userInfo");
|
sessionStorage.removeItem("buttonAuthoritys");
|
sessionStorage.removeItem("menuInfo");
|
|
this.$router.push({
|
path: "/"
|
});
|
this.$notify({
|
title: "提示",
|
type: "success",
|
message: "退出成功！"
|
});
|
} else {
|
this.$notify({
|
title: "提示",
|
type: "success",
|
message: "退出失败!"
|
});
|
}
|
});
|
})
|
.catch(_ => {
|
console.log("退出失败");
|
});
|
},
|
visibleChange() {
|
// console.log(event, '用户信息')
|
if (event) {
|
var content = document.getElementsByClassName("top-nav-user")
|
var element = document.getElementsByClassName("el-popover")
|
content[0].appendChild(element[0])
|
}
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
let json = {
|
oldPwd: this.passwdForm.oldPwd,
|
newPwd: this.passwdForm.checkPwd
|
}
|
updatePwd(json).then(res=>{
|
console.log(res,'修改密码')
|
this.$notify({
|
type:res.success?'success':'error',
|
message:res.msg
|
})
|
if(res.success){
|
this.showPasswdForm = false
|
// this.$nextTick(_=>{
|
// this.toLogout('修改密码成功，请重新登录！')
|
// })
|
}
|
})
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
}
|
},
|
created() {
|
// this.getMenuList();
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.top-nav {
|
width: 100%;
|
height: 72px;
|
background: url('../assets/img/top.png') no-repeat 100%;
|
background-size: 100% 100%;
|
ul {
|
height: 100%;
|
li {
|
height: 100% !important;
|
width: 150px !important;
|
color: white !important;
|
font-size: 16px !important;
|
box-sizing: border-box;
|
span {
|
display: block;
|
width: 100%;
|
height: 35px;
|
font-size: 33px !important;
|
line-height: 50px;
|
background-image: linear-gradient(to top, #ffffff, #ffffff);
|
background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
div {
|
display: block;
|
line-height: 22px;
|
margin-top: 5px;
|
font-family: "PingFangSC-Regular";
|
font-size: 15px;
|
color: #ffffff;
|
text-align: center;
|
}
|
}
|
.is-active {
|
background-image: linear-gradient(-90deg, #3d44e1 0%, #3d68e1 100%);
|
border-bottom: none !important;
|
span {
|
background-image: linear-gradient(-90deg, #fff 0%, #fff 100%);
|
color: white !important;
|
}
|
}
|
}
|
.fontFamily {
|
padding-right: 10px;
|
}
|
.top-nav-log {
|
width: 299px;
|
float: left;
|
height: 100%;
|
line-height: 72px;
|
padding: 2px 52px 4px 27px;
|
outline: none;
|
color: white;
|
box-sizing: border-box;
|
i {
|
left: -20px;
|
bottom: -20px;
|
position: relative;
|
font-size: 24px;
|
color: #3d68e1;
|
cursor: pointer;
|
}
|
img {
|
width: 50px;
|
vertical-align: middle;
|
}
|
h1,
|
h2,
|
h3 {
|
display: inline;
|
padding-left: 20px;
|
}
|
}
|
.top-nav-user {
|
float: right;
|
margin-top: 20px;
|
padding-right: 40px;
|
cursor: pointer;
|
.el-dropdown {
|
color: white !important;
|
}
|
.el-dropdown-menu__item {
|
list-style: none;
|
line-height: 36px;
|
padding: 0 20px;
|
margin: 0;
|
font-size: 14px;
|
color: #606266;
|
cursor: pointer;
|
outline: 0;
|
}
|
.el-dropdown-menu__item:hover {
|
color: #606266;
|
background: #f0f0f0;
|
}
|
}
|
}
|
</style>
|
