end7less
/
program_xm_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
976 Commits
1 Branch
0 Tags
56 MiB
 
 
 
 
Tree: e805a1bf39
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e805a1bf39'
${ noResults }
program_xm_vue/src/views/layout/components/UserInfo.vue

414 lines
16 KiB
Raw Blame History

<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>