149 lines
2.8 KiB
Vue
149 lines
2.8 KiB
Vue
<script lang="ts" setup>
|
|
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
|
|
|
|
const props = defineProps({
|
|
avatar: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
fullName: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
email: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
position: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
phone: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
physicalAddress: {
|
|
type: String,
|
|
default: '未设置'
|
|
},
|
|
loginIp: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
lastLoginTime: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
createTime: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
modifyTime: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
isLock: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
userId: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
const onlineUser = useMainLayoutStore().OnlineUsers
|
|
const isOnline = computed(() => {
|
|
return onlineUser.map(x => x.id).includes(props.userId)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="user-item-layout">
|
|
<div class="user-start">
|
|
<Avatar :image="avatar" class="mr-2" shape="circle" size="xlarge"/>
|
|
</div>
|
|
<div class="user-item-box">
|
|
<h4>{{ name }}</h4>
|
|
<p>{{ email }}</p>
|
|
</div>
|
|
<div class="user-item-box">
|
|
<h4>{{ fullName }}</h4>
|
|
<p>{{ position }}</p>
|
|
</div>
|
|
<div class="user-item-box">
|
|
<h4>{{ phone }}</h4>
|
|
<p>{{ physicalAddress }}</p>
|
|
</div>
|
|
<div class="user-item-box">
|
|
<h4 v-tooltip="lastLoginTime">{{ lastLoginTime?.split(' ')[0] }}</h4>
|
|
<p>{{ loginIp }}</p>
|
|
</div>
|
|
<div class="user-item-box">
|
|
<h4 v-tooltip="modifyTime">{{ modifyTime?.split(' ')[0] }}</h4>
|
|
<p v-tooltip="createTime">{{ createTime?.split(' ')[0] }}</p>
|
|
</div>
|
|
<div class="user-item-box end">
|
|
<h4 :style="{
|
|
color: isOnline ? '#008000' : '#FF0000'
|
|
}">{{ isOnline ? '在线' : '离线' }}</h4>
|
|
<p>{{ isLock ? '锁定' : '' }}</p>
|
|
</div>
|
|
<div class="user-end">
|
|
<button @click="navigateTo(`userInfo/${userId}`)">
|
|
<p>查看更多</p>
|
|
<Icon name="ChevronRight"></Icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "base";
|
|
|
|
.user-item-layout {
|
|
display: flex;
|
|
background: $light-bg-color;
|
|
min-height: 100px;
|
|
border-radius: $radius;
|
|
align-items: center;
|
|
padding: $padding $padding*2;
|
|
gap: $gap*4;
|
|
}
|
|
|
|
.user-start, .user-end {
|
|
width: $padding*4;
|
|
}
|
|
|
|
|
|
.user-end {
|
|
width: $padding*6;
|
|
|
|
button {
|
|
display: flex;
|
|
align-items: center;
|
|
background: unset;
|
|
border: unset;
|
|
|
|
&:hover {
|
|
color: $primary-color;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-item-box {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
overflow-wrap: break-word;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.user-item-box.end {
|
|
flex: unset;
|
|
}
|
|
|
|
</style> |