|
|
<template> <div> <el-dropdown class="avatar-container right-menu-item hidden-sm-and-down" trigger="click" @command="handleCommand" @click.native="onDropdownClick"> <div class="avatar-wrapper"> <img v-if="userInfo && userInfo.headimgurl" class="user-avatar" :src="userInfo.headimgurl"> <img v-else class="user-avatar" src="../../../assets/image/user_img.gif"> <span class="username">{{getTimeStatus}}，<b>{{userInfo.username}}</b></span> <i class="el-icon-caret-bottom"></i> </div> <el-dropdown-menu slot="dropdown" style="width:460px;"> <div class="dropdown"> <div class="topBox"> <div class="topBox_logo" v-if="userInfo.memType!=='0'"> <img v-if="!branchUsersCount || !branchUsersCount.imgUrl" src="../../../assets/image/image_not_found_small.jpg" alt=""> <img v-else :src="branchUsersCount.imgUrl" alt="">
</div> <div class="topBox_logo" v-else> <img v-if="userInfo && userInfo.headimgurl" class="user-avatar" :src="userInfo.headimgurl"> <img v-else class="user-avatar" src="../../../assets/image/user_img.gif"> </div> <div class="topBox_desc"> <p class="topBox_branch">{{userInfo.branchName?userInfo.branchName:''}}</p> <div class="topBox_version"> <span>账户类型 / <b class="version" v-if="userInfo.memType==='0' && userInfo.atype==='1'"> 个人主账户 </b> <b class="version" v-else-if="userInfo.memType==='0' && userInfo.atype==='0'"> 个人子账户 </b> <b class="version" v-else-if="userInfo.memType==='1'"> 企业管理员账户 </b> <b class="version" v-else-if="userInfo.memType==='2'"> 企业员工账户 </b> </span> <span class="level" v-if="userInfo.memType==='0'" @click="upgradeToBranchAccount"> <i class="el-icon-upload2"></i> <span @click="upgradeToBranchAccount">升级</span> </span> </div> <div class="topBox_num"> <span @click="getBranchInterestsDetail">账号数量 <span v-if="branchUsersCount && branchUsersCount.branchId">（ {{branchUsersCount.currUsers }} / {{branchUsersCount.maxUsers}} ）个</span> <i class="el-icon-refresh-right"></i></span> </div> </div> </div>
<div class="middleBox"> <p class="middleBox_username">用户名称：<b>{{userInfo.username}}</b> </p> <div class="middleBox_role"> <span>我的角色：</span> <span class="middleBox_role_name"> <a> {{getMyRoleNames()}} </a> </span> </div> <div class="middleBox_role"> <span>会员等级：</span> <span class="middleBox_role_name"> <a v-if="!userInfo.ilvlId || userInfo.ilvlId=='1'"> {{userInfo.ilvlName?userInfo.ilvlName:'普通会员'}} </a> <a v-else-if="userInfo.ilvlId=='2'"> {{userInfo.ilvlName?userInfo.ilvlName:'青铜会员'}} </a> <a v-else-if="userInfo.ilvlId=='3'"> {{userInfo.ilvlName?userInfo.ilvlName:'白银会员'}} </a> <a v-else-if="userInfo.ilvlId=='4'"> {{userInfo.ilvlName?userInfo.ilvlName:'黄金会员'}} </a> <a v-else-if="userInfo.ilvlId=='5'"> {{userInfo.ilvlName?userInfo.ilvlName:'紫金会员'}} </a> <a v-else-if="userInfo.ilvlId=='6'"> {{userInfo.ilvlName?userInfo.ilvlName:'皇冠会员'}} </a> </span> </div> <div class="middleBox_role"> <span>能力等级：</span> <span class="middleBox_role_name"> <a v-if="!userInfo.gradeId || userInfo.gradeId=='1'"> {{userInfo.ilvlName?userInfo.ilvlName:'普通会员'}} </a> <a v-else-if="userInfo.ilvlId=='2'"> {{userInfo.ilvlName?userInfo.ilvlName:'青铜会员'}} </a> <a v-else-if="userInfo.ilvlId=='3'"> {{userInfo.ilvlName?userInfo.ilvlName:'白银会员'}} </a> <a v-else-if="userInfo.ilvlId=='4'"> {{userInfo.ilvlName?userInfo.ilvlName:'黄金会员'}} </a> <a v-else-if="userInfo.ilvlId=='5'"> {{userInfo.ilvlName?userInfo.ilvlName:'紫金会员'}} </a> <a v-else-if="userInfo.ilvlId=='6'"> {{userInfo.ilvlName?userInfo.ilvlName:'皇冠会员'}} </a> </span> </div> </div>
<div class="bottomBox2"> <!--<p class="el-icon-menu" @click="handleCommand('myWork')">我的工作台</p> --> <p class="el-icon-user" @click="switchUser">切换账户</p> <p class="el-icon-edit" @click="handleCommand('updateUserInfo')">账户明细</p> <p class="el-icon-user-solid" @click="handleCommand('branchSet')">团队管理</p> <p @click="logout" class="el-icon-switch-button">退出登录</p> </div>
</div>
</el-dropdown-menu> </el-dropdown> <el-dialog title="请选择一个账户进行登录" :visible.sync="phonenoUsersVisible" width="600" append-to-body> <el-table :data="phonenoUsers"> <el-table-column prop="displayUserid" label="登录账号"> </el-table-column> <el-table-column prop="username" label="姓名"> </el-table-column> <el-table-column prop="branchName" label="企业"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" @click="toLogin(scope.row)">登录222</el-button> </template> </el-table-column> </el-table> </el-dialog> <el-dialog title="新增机构" :visible.sync="branchAddVisible" width="60%" append-to-body top="20px" :close-on-click-modal="false" > <branch-add :branch="{id:userInfo.branchId,branchName:'',admUserid:userInfo.branchId,admUsername:userInfo.username,luserid:userInfo.userid,lusername:userInfo.username}" op-type="add" :visible="branchAddVisible" @cancel="branchAddVisible=false" @submit="afterAddSubmit" ></branch-add> </el-dialog> </div></template>
<script>
import NProgress from 'nprogress' // progress bar
import config from '../../../common/config'; import { setToken,removeCacheUserInfo} from '@/utils/auth'import { mapGetters } from 'vuex'import dayjs from 'dayjs' import md5 from 'js-md5';import { queryMyUsers,switchUser } from '@/api/login';
import { getBranchInterestsDetail } from '@/api/branch';import BranchAdd from "@/views/mdp/sys/branch/BranchEdit";
export default { data() { return { branchAddVisible:false, phonenoUsers:[], phonenoUsersVisible:false, branchUsersCount:{ branchId:'', currUsers:1, maxUsers:100, imgUrl:'', defalut:1, }
} },
computed: { ...mapGetters([ 'userInfo', 'roles', 'myPosts' ]), getTimeStatus() { let hour = dayjs().hour(); let msg = '早上好'; if(hour >= 13 || hour <= 18) { msg = '下午好'; }else if (hour >= 19 || hour <= 24){ msg = '晚上好'; } return msg; } }, methods: { onDropdownClick(){ if( this.branchUsersCount.defalut||this.branchUsersCount.branchId!=this.userInfo.branchId){ this.getBranchInterestsDetail(); } }, getBranchInterestsDetail(){ getBranchInterestsDetail().then(res=>this.branchUsersCount=res.data.data||this.branchUsersCount) }, getMyRoleNames(){ if(this.roles && this.roles.length>0){ var myRoles=this.roles.filter(i=>i.roleid.indexOf('SCOPE')<0); return myRoles.map(i=>i.rolename).join(",") } }, switchUser(){ queryMyUsers().then(res0=>{ if(res0.data.tips.isOk){ this.phonenoUsers=res0.data.data; if(res0.data.data.length<=1){ this.$notify.warning("当前没有关联的账户，无须切换"); }else{ this.phonenoUsersVisible=true; } }else{ this.$notify.error(res0.data.tips.msg); } }) }, handleCommand(command){ if(process.env.CONTEXT=='sys'){ if(command=='updateUserInfo'){ this.$router.push({path:'/my/work/updateUserInfo'}) } if(command=='myWork'){ this.$router.push({path:'/my/work/index'}) } if(command=='branchSet'){ this.$router.push({path:'/mdp/sys/branch/branchSet'}) } }else{ var prefixUrl=config.getBaseDomainUrl()+'/sys/'+process.env.VERSION+'/#/' if(command=='updateUserInfo'){ window.open(prefixUrl+'my/work/updateUserInfo') NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
} if(command=='myWork'){ this.$router.push({path:'/my/work/index'}) } if(command=='branchSet'){ window.open(prefixUrl+'mdp/sys/branch/branchSet') NProgress.done() } } }, upgradeToBranchAccount(){ //跳转到购买模块页面
this.branchAddVisible=true; }, afterAddSubmit(){
}, toLogin(user) { debugger; this.$prompt('请输入密码', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', }).then(({ value }) => { let params={ password:md5(value), userloginid:user.userid, authType:'password_display_userid' , grantType:"password" } debugger; //userloginid, password,grantType,authType,deptid,userid
switchUser(params.userloginid,params.password,params.grantType,params.authType,'',params.userloginid).then(res => { this.phonenoUsersVisible=false; if(res.data.tips.isOk==true){ setToken( res.data.data.accessToken.tokenValue) removeCacheUserInfo(); this.$store.dispatch('GetUserInfo').then((res2)=>{ this.$router.push({ path: '/' }); }).catch(err=>{ }); }else{ this.$notify.error(res.data.tips.msg); } }).catch((e) => { }) }).catch(() => { this.phonenoUsersVisible=false; }); }, logout() { this.$store.dispatch('LogOut').then(() => { location.replace('/'+process.env.CONTEXT+'/'+process.env.VERSION+'/'); }) },
}, components:{ BranchAdd }, mounted() { }}</script>
<style lang="scss" scoped>
.avatar-container { height: 50px; display: flex; align-items: center; .avatar-wrapper { cursor: pointer; display: flex; flex-direction: row; align-items: center; .user-avatar { height: 34px; width: 34px; border-radius: 50%; margin-right: 12px; } .username{ color: #7D7D7D; font-size: 18px; margin-right: 2px; } .el-icon-caret-bottom { font-size: 22px; } }}
.dropdown { padding: 0 20px 0 20px; .topBox { height: 100px; display: flex; flex-direction: row; border-bottom: 1px solid #f6f6f6; .topBox_logo { display: flex; justify-content: center; align-items: center; img { width: 52px; height: 52px; } } .topBox_desc { display: flex; flex-direction: column; margin-left: 20px; width: 100%; justify-content: center; .topBox_branch { font-size: 18px; margin-bottom: 8px; } .topBox_version { display: flex; flex-direction: row; margin-bottom: 8px; font-size: 14px; .version { display: inline-block; font-weight: normal; color: rgb(69, 196, 186); margin-top: 4px; } .level { background: rgb(64, 158, 255); margin-left: 10px; padding: 4px 11px 4px 8px; border-radius: 2px; color: #fff; cursor: pointer; } } .topBox_num { font-size: 14px; cursor: pointer; } } }
.middleBox { min-height: 60px; border-bottom: 1px solid #f6f6f6; padding: 12px 0; .middleBox_username { margin-bottom: 6px; b { font-weight: normal; color: #606060; } } .middleBox_role { display: flex; flex-direction: row; flex-wrap: wrap; line-height: 28px; .middleBox_role_name { color: #606060; } } }
.bottomBox2 { height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; p { display: flex; cursor: pointer; width: 100%; height: 40px; text-align: left; align-items: center; } p:hover { background: rgb(243, 243, 243); } }}
</style>
|
