Skip to content

H
haoban-3
Commit 7c63b49a by caoyanzhi
Options

update: 账号信息

parent 06b39e80
Showing with 149 additions and 20 deletions
index.html
...@@ -14,11 +14,13 @@ ...@@ -14,11 +14,13 @@
<link rel="shortcut icon" href="./favicon.ico" /> <link rel="shortcut icon" href="./favicon.ico" />
<title>好办管理平台</title> <title>好办管理平台</title>
<link rel="stylesheet" type="text/css" href="//web-1251519181.file.myqcloud.com/custom-element/custom-element.1.0.69.css" /> <link rel="stylesheet" type="text/css" href="//web-1251519181.file.myqcloud.com/custom-element/custom-element.1.0.69.css" />
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1628375_5ghlvsafe8j.css" /> <!--好办后台3.0--> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1628375_vcg1gtmx7lb.css" /> <!--好办后台3.0-->
<script src="//at.alicdn.com/t/font_1628375_5ghlvsafe8j.js"></script> <script src="//at.alicdn.com/t/font_1628375_vcg1gtmx7lb.js"></script>
<!-- 3.0组件库图标 -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_2859043_udehp133w1.css">
</head> </head>
<body style="min-width: 1400px;" class="damolish"> <body class="damolish">
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<!-- 公共库引用 cdn --> <!-- 公共库引用 cdn -->
......
src/components/layout/components/change-store.vue
...@@ -91,11 +91,7 @@ export default { ...@@ -91,11 +91,7 @@ export default {
location.reload(); location.reload();
} }
}) })
.finally(() => { .finally(() => this.$emit('changeStore', false));
setTimeout(() => {
this.$emit('changeStore', false);
}, 500);
});
}, },
onShow() { onShow() {
this.changeStore.show = true; this.changeStore.show = true;
......
src/components/layout/components/user-info.vue 0 → 100644
<template>
<el-dropdown @command="handleCommand">
<span class="user-info">
<img v-if="userInfo.headImg" :src="userInfo.headImg" alt="" class="logo-img" />
<img v-else src="../images/user-default.png" alt="" class="logo-img" />
<span class="realname-box">
<span class="realname">{{ userInfo.staffName }}</span>
<i class="el-icon-arrow-down user-info-arrow"></i>
</span>
</span>
<el-dropdown-menu slot="dropdown" class="user-info-menu">
<!-- <el-dropdown-item command="info">账户信息</el-dropdown-item>
<el-dropdown-item command="modify-password">修改密码</el-dropdown-item> -->
<!-- <el-dropdown-item divided command="logout">退出登录</el-dropdown-item> -->
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
import { postRequest } from '@/api/api.js';
import errorMsg from '@/common/js/error.js';
export default {
name: 'UserInfo',
data() {
return {
userInfo: {
headImg: '',
staffName: ''
}
};
},
created() {
const userInfo = JSON.parse(sessionStorage.getItem('userInfos') || '{ staffDTO: {} }');
this.userInfo.headImg = userInfo.staffDTO.headImg;
this.userInfo.staffName = userInfo.staffDTO.staffName;
},
methods: {
handleCommand(command) {
switch (command) {
case 'info':
break;
case 'modify-password':
break;
case 'logout':
this.$confirm('确认退出吗?', '提示', { type: 'warning' }).then(this.logout);
break;
}
},
logout() {
this.$emit('showLoading', true);
postRequest('/haoban-manage3-web/login-out', {})
.then(res => {
const { errorCode } = res.data || {};
if (errorCode != 1) {
errorMsg.errorMsg(res.data);
return;
}
this.$message.success('退出成功');
this.$router.push('/login');
})
.finally(() => this.$emit('showLoading', false));
}
}
};
</script>
<style lang="scss" scoped>
.user-info {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 24px;
padding-right: 20px;
&:hover {
.user-info-arrow {
transform: rotateZ(180deg);
}
}
.logo-img {
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 50%;
overflow: hidden;
}
.realname-box {
font-size: 14px;
color: #303133;
cursor: pointer;
.realname {
margin-right: 5px;
font-size: 14px;
}
.user-info-arrow {
transition: all 0.3s;
}
}
}
</style>
<style lang="scss">
.user-info {
.el-icon-arrow-down {
font-family: 'iconfont-hb3' !important;
&::before {
content: '\E9E9';
}
}
}
.user-info-menu {
width: 119px;
text-align: center;
z-index: 2000000000 !important;
}
</style>
src/components/layout/index.vue
<template> <template>
<div class="hb-layout" v-loading="changeStoreLoading"> <div class="hb-layout" v-loading="fullLoading.visible">
<main-menu :menu-list="menuList" :actived-code="activedMenu.length > 0 ? activedMenu[0].menuCode : ''" @changeStore="loading => (changeStoreLoading = loading)"></main-menu> <main-menu :menu-list="menuList" :actived-code="activedMenu.length > 0 ? activedMenu[0].menuCode : ''" @showLoading="onShowLoading"></main-menu>
<aside-menu :menu-list="activedMenu.length > 0 ? activedMenu[0].childList : []" :actived-code="activedMenu.length > 2 ? activedMenu[2].menuCode : ''"></aside-menu> <aside-menu :menu-list="activedMenu.length > 0 ? activedMenu[0].childList : []" :actived-code="activedMenu.length > 2 ? activedMenu[2].menuCode : ''"></aside-menu>
<div class="hb-layout-content"> <div class="hb-layout-content">
<bread-menu v-if="activedMenu.length > 3" :menu-list="activedMenu.slice(2)"></bread-menu> <bread-menu v-if="activedMenu.length > 3" :menu-list="activedMenu.slice(2)"></bread-menu>
...@@ -34,7 +34,10 @@ export default { ...@@ -34,7 +34,10 @@ export default {
asideMenu: [], asideMenu: [],
// 激活的菜单 // 激活的菜单
activedMenu: [], activedMenu: [],
changeStoreLoading: false fullLoading: {
visible: false,
timer: null
}
}; };
}, },
created() { created() {
...@@ -99,6 +102,20 @@ export default { ...@@ -99,6 +102,20 @@ export default {
return path; return path;
}); });
this.$router.addRoutes([{ path: '/', redirect: '/' + path }]); this.$router.addRoutes([{ path: '/', redirect: '/' + path }]);
},
onShowLoading(loading) {
if (loading) {
this.fullLoading.visible = true;
if (this.timer) {
clearTimeout(this.fullLoading.timer);
this.fullLoading.timer = null;
}
} else {
// loading取消时，延迟半秒钟
this.fullLoading.timer = setTimeout(() => {
this.fullLoading.visible = false;
}, 500);
}
} }
} }
}; };
......
src/components/layout/main-menu.vue
...@@ -7,18 +7,20 @@ ...@@ -7,18 +7,20 @@
</div> </div>
</div> </div>
<div class="main-info"> <div class="main-info">
<change-store @changeStore="loading => $emit('changeStore', loading)"></change-store> <change-store @showLoading="loading => $emit('showLoading', loading)"></change-store>
<div>消息中心</div> <message-center></message-center>
<dm-user-info user-name-class="hb-layout-user-name"></dm-user-info> <user-info @showLoading="loading => $emit('showLoading', loading)"></user-info>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ChangeStore from './components/change-store.vue'; import ChangeStore from './components/change-store.vue';
import MessageCenter from './components/message-center.vue';
import UserInfo from './components/user-info.vue';
export default { export default {
name: 'main-menu', name: 'main-menu',
components: { ChangeStore }, components: { ChangeStore, MessageCenter, UserInfo },
provide: { provide: {
projectName: 'haoban-manage-web' projectName: 'haoban-manage-web'
}, },
...@@ -124,8 +126,3 @@ export default { ...@@ -124,8 +126,3 @@ export default {
} }
} }
</style> </style>
<style lang="scss">
.hb-layout-user-name {
color: #303133 !important;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment