问题遇到的现象和发生背景
想自己研究一下若依的头像的更换路径，之前听别人讲过这个应该是从数据库获取的路径，然后先判断当前用户有没有，如果没有就默认设置一个，但是自己研究下来发现，没有找到这个，希望有经验的小伙伴可以理一下思路
问题相关代码，请勿粘贴截图
<div class="user-wrapper">
<img :src="currAvatar" class="user-avatar">
<!-- <span class="nick-name">{{nickName}}</span>
<span class="user-dept">{{deptName}}<i class="el-icon-caret-bottom el-icon--right"></i></span>-->
</div>
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
<div class="right-menu">
<el-tooltip effect="dark" placement="bottom">
<div slot="content"> <span style="white-space: nowrap">
部门：{{ user.dept.deptName }} <span v-if="postGroup"> / </span>{{ postGroup }}
<el-divider direction="vertical"></el-divider>
用户：{{ user.userName }}
<el-divider direction="vertical"></el-divider>
角色：{{ roleGroup }}</span></div>
<div class="right-menu-item btn hover-effect" style="width:700px;text-overflow: ellipsis;overflow: hidden">
<span style="white-space: nowrap">
部门：{{ user.dept.deptName }} <span v-if="postGroup"> / </span>{{ postGroup }}
<el-divider direction="vertical"></el-divider>
用户：{{ user.userName }}
<el-divider direction="vertical"></el-divider>
角色：{{ roleGroup }}</span>
</div>
</el-tooltip>
<!--待办-->
<el-tooltip effect="dark" content="待办" placement="bottom">
<div class="right-menu-item btn hover-effect" @click="goTodos">
<img src="@/assets/images/todo.png" style="width: 23px;margin-top: 13px">
<el-badge v-if="todoCount > 0" :value="todoCount" :max="99" class="item"></el-badge>
</div>
</el-tooltip>
<!--公告-->
<el-tooltip effect="dark" content="公告" placement="bottom">
<div class="right-menu-item btn hover-effect" @click="goNotice">
<img src="@/assets/images/notice.png" style="width: 20px;margin-top: 15px">
<!--<el-badge v-if = "todoCount > 0" is-dot style="margin-top: -18px; margin-right: 5px; margin-left: -10px"></el-badge>-->
</div>
</el-tooltip>
<template v-if="device!=='mobile'">
<el-tooltip content="布局调整" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
<screenfull v-show="!currIE" id="screenfull" class="right-menu-item hover-effect" style="margin-right: 20px;"/>
</template>
<!-- 切岗钮：true显示；false不显示 -->
<el-dropdown class="switch-post-dd right-menu-item hover-effect" size="small"
trigger="click" v-show="enablePostSwitch" @command="switchThisPost">
<el-tooltip content="当前 / 切换" effect="dark" placement="bottom" :hide-after="1300">
<span class="switch-post-span">
{{userInfo.curPostName}}
<i class="el-icon-caret-bottom el-dropdown-link"></i>
</span>
</el-tooltip>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(post, index) in postList" :key="index" :command="post.postId">
{{post.postName}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown class="user-container right-menu-item hover-effect" trigger="click">
<div class="user-wrapper">
<img :src="currAvatar" class="user-avatar">
<!-- <span class="nick-name">{{nickName}}</span>
<span class="user-dept">{{deptName}}<i class="el-icon-caret-bottom el-icon--right"></i></span>-->
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item @click.native="setting = true">
<span>布局设置</span>
</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import { getUserProfile } from "@/api/system/user";
// 切岗相关
import { switchPost } from '@/api/system/post'
export default {
data(){
return{
userInfo: {},
enablePostSwitch: false,
postList: [],
nickName: '',
// 头像
currAvatar: '',
currIE: false,
user: {
dept: {
deptName: '',
}
},
roleGroup: {},
postGroup: {},
overHidde: true,
}
},
components: {
Breadcrumb,
TopNav,
Hamburger,
Screenfull,
SizeSelect,
Search
},
computed: {
...mapGetters([
'sidebar',
'avatar',
'device',
'todoCount'
]),
setting: {
get() {
return this.$store.state.settings.showSettings
},
set(val) {
this.$store.dispatch('settings/changeSetting', {
key: 'showSettings',
value: val
})
}
},
topNav: {
get() {
return this.$store.state.settings.topNav
}
}
},
created() {
this.getThisUser();
this.getUser();
},
mounted() {
this.currAvatar = this.avatar
this.isIE()
this.checkImg()
},
watch: {
avatar(val) {
this.currAvatar = val
this.checkImg()
}
},
methods: {
// 获取用户信息
getThisUser(){
this.userInfo = this.$store.state.user.getUserInfo
this.enablePostSwitch = this.userInfo.enablePostSwitch
this.postList = this.userInfo.posts
this.nickName = this.userInfo.nickName
this.deptName = this.userInfo.dept.deptName
},
// 按钮跳转待办页面
goTodos() {
let todosPath = '/index'
if(this.$route.path === todosPath) {
this.msgInfo('已位于待办页面')
} else {
this.$router.push('/index').catch(()=>{})
}
},
// 跳转公告页面
goNotice() {
let noticePath = '/index'
if(this.$route.path === noticePath) {
this.msgInfo('已位于公告页面')
} else {
this.$router.push('/index').catch(()=>{})
}
},
// 切岗 - 切换限制
switchThisPost(command){
if(this.userInfo.curPostId == command){
this.$message({
message: '所选岗位与当前岗位一致，无法切换！',
type: 'warning'
})
}else{
switchPost(command).then(
location.reload()
)
}
},
// 处理图片格式-IE11
isIE() {
this.currIE = !!window.ActiveXObject || 'ActiveXObject' in window
return this.currIE
},
checkImg() {
if (this.isIE()) {
this.asyncBlobUrl(this.currAvatar).then(resolve => {
this.currAvatar = resolve
})
}
},
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
})
})
},
getUser() {
getUserProfile().then(response => {
this.user = response.data;
this.roleGroup = response.roleGroup;
this.postGroup = response.postGroup;
});
},
}
}
</script>
<style lang="scss" scoped>
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
&:hover {
background: rgba(0, 0, 0, .025)
}
}
.breadcrumb-container {
float: left;
}
.topmenu-container {
position: absolute;
left: 50px;
}
.errLog-container {
display: inline-block;
vertical-align: top;
}
// 右侧菜单
.right-menu {
float: right;
height: 100%;
line-height: 50px;
&:focus {
outline: none;
}
// 菜单项
.right-menu-item {
display: inline-block;
height: 100%;
font-size: 18px;
color: #5a5e66;
padding: 0 8px;
margin: 0 1px;
vertical-align: text-bottom;
// 悬停响应样式
&.hover-effect {
cursor: pointer;
transition: background .3s;
&:hover {
background: rgba(0, 0, 0, .05)
}
}
// 待办/公告按钮项
&.btn {
font-size: 14px;
}
// 用户信息项
&.user-container {
margin: 0 10px;
.user-wrapper {
// 头像
.user-avatar {
cursor: pointer;
width: 35px;
height: 35px;
border-radius: 10px;
position: relative;
top: 5px;
}
// 用户昵称
.nick-name {
font-size: 15px;
margin: 0 4px 0 3px;
position: relative;
top: -10px;
}
// 用户部门
.user-dept {
font-size: 14px;
font-weight: bold;
position: relative;
top: -10px;
}
}
}
}
// 切岗
::v-deep .switch-post-dd{
font-size: 13px;
.switch-post-span{
font-size: 14px;
}
.el-icon-caret-bottom {
font-size: 7px;
}
}
}
//待办数字
.item {
margin-top: -23px;
margin-right: -14px;
margin-left: -11px;
}
}
</style>
