LoongPanel-Asp/web/pages/user.vue

62 lines
1.5 KiB
Vue

<script lang="ts" setup>
import UserItem from "~/components/UserPage/UserItem.vue";
import type {UserInfoListType} from "~/types/UserType";
definePageMeta({
layout: 'main',
middleware: ['auth']
})
const userList = ref<UserInfoListType | null>(null)
onMounted(() => {
$fetch("/Api/User/GetUserInfoList", {
method: "GET",
headers: {
"Authorization": "Bearer " + useCookie("token").value
},
baseURL: useRuntimeConfig().public.baseUrl
}).then(res => {
userList.value = res as UserInfoListType
})
})
</script>
<template>
<div class="user-layout">
<UserPageBar :userNumber="userList?.length??0"/>
<UserPageIndicator/>
<div class="user-content">
<UserItem v-for="user in userList" :avatar="user.avatar" :create-time="user.createDate"
:email="user.email" :full-name="user.nickName" :isLock="user.isLock"
:last-login-time="user.lastLoginTime"
:login-ip="user.address??':: 0'"
:modify-time="user.modifiedDate"
:name="user.userName"
:phone="user.phoneNumber"
:physical-address="user.physicalAddress??'未设置'"
:position="user.posts"
:user-id="user.id"/>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "base";
.user-layout {
width: 100%;
height: 100%;
min-height: 1200px;
display: flex;
flex-direction: column;
gap: $gap*2;
*{
@include SC_Font;
}
}
.user-content {
display: flex;
flex-direction: column;
gap: $gap*2;
}
</style>