LoongPanel-Asp/web/components/UserPage/UserItem.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>