<template>
|
<div class="user-avatar-info">
|
<a-popover title="" :overlayStyle="{width: '250px'}">
|
<template #content>
|
<div style="display: flex;flex-direction: row;align-items: center">
|
<div style="width: 60px;text-align: center">
|
<a-avatar v-if="userAvatar" :src="userAvatar" :size="47"/>
|
<a-avatar v-else :size="47">{{ getAvatarText() }}</a-avatar>
|
</div>
|
<div style="flex: 1;display: flex;flex-direction: column;margin-left: 12px">
|
<div style="color: #000;display: inline-block;font-size: 15px;font-weight: 700;margin-top: 3px;vertical-align: top;width: 170px;">
|
{{ userLabel }}
|
</div>
|
<div style="color: #757575;display: block;margin-top: 4px;">
|
{{ phone }}
|
</div>
|
</div>
|
</div>
|
</template>
|
<span style="cursor: pointer">
|
<a-avatar v-if="userAvatar" :src="userAvatar" :loadError="loadError"/>
|
<a-avatar v-else>{{ getAvatarText() }}</a-avatar>
|
</span>
|
</a-popover>
|
<span class="realname-ellipsis">
|
{{ userLabel }}
|
</span>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { ref, watchEffect, defineComponent } from 'vue';
|
import { defHttp } from '/@/utils/http/axios';
|
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
|
export default defineComponent({
|
name: 'UserAvatar',
|
props: {
|
username: {
|
type: String,
|
default: '',
|
},
|
detail:{
|
type: Object,
|
default: ()=>{},
|
}
|
},
|
setup(props) {
|
const userAvatar = ref('');
|
const userLabel = ref('');
|
const phone = ref('');
|
|
watchEffect(async ()=>{
|
userAvatar.value = '';
|
userLabel.value = '';
|
phone.value = '';
|
let username = props.username;
|
if(username){
|
await initUserInfo(username);
|
}
|
let userInfo = props.detail;
|
if(userInfo){
|
if(userInfo.avatar){
|
userAvatar.value = getFileAccessHttpUrl(userInfo.avatar);
|
}
|
if(userInfo.realname){
|
userLabel.value = userInfo.realname;
|
}
|
if(userInfo.phone){
|
phone.value = userInfo.phone;
|
}
|
}
|
});
|
|
async function initUserInfo(val) {
|
const params = {
|
username: val,
|
};
|
const url = '/sys/user/getMultiUser';
|
const data = await defHttp.get({ url, params }, {isTransformResponse: false});
|
if(data && data.length > 0){
|
let temp = data[0].avatar;
|
if (temp) {
|
userAvatar.value = getFileAccessHttpUrl(temp)
|
}
|
userLabel.value = data[0].realname;
|
phone.value = data[0].phone;
|
}else{
|
console.log(data)
|
}
|
}
|
|
function getAvatarText() {
|
let text = userLabel.value;
|
if (!text) {
|
text = props.username;
|
}
|
if (text) {
|
if (text.length > 2) {
|
return text.substr(0, 2);
|
} else {
|
return text;
|
}
|
}
|
return '';
|
}
|
|
function loadError() {
|
userAvatar.value = '';
|
return true;
|
}
|
|
|
return {
|
userAvatar,
|
userLabel,
|
getAvatarText,
|
phone,
|
loadError
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="less">
|
.user-avatar-info{
|
.ant-avatar-image{
|
cursor: pointer;
|
}
|
.realname-ellipsis {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
vertical-align: top;
|
white-space: nowrap;
|
height: 32px;
|
line-height: 32px;
|
display: inline-block;
|
margin-left: 10px;
|
}
|
}
|
|
</style>
|
