| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <div> |
| 3 | <div class="text-center"> | |
| 4 | <UserAvatar :img="userInfo?.avatar" /> | |
| 5 | </div> | |
| 6 | <ul class="list-group list-group-striped"> | |
| 7 | <li class="list-group-item"> | |
| 8 | <Icon class="mr-5px" icon="ep:user" /> | |
| 9 | {{ t('profile.user.username') }} | |
| 10 | <div class="pull-right">{{ userInfo?.username }}</div> | |
| 11 | </li> | |
| 12 | <li class="list-group-item"> | |
| 13 | <Icon class="mr-5px" icon="ep:phone" /> | |
| 14 | {{ t('profile.user.mobile') }} | |
| 15 | <div class="pull-right">{{ userInfo?.mobile }}</div> | |
| 16 | </li> | |
| 17 | <li class="list-group-item"> | |
| 18 | <Icon class="mr-5px" icon="fontisto:email" /> | |
| 19 | {{ t('profile.user.email') }} | |
| 20 | <div class="pull-right">{{ userInfo?.email }}</div> | |
| 21 | </li> | |
| 22 | <li class="list-group-item"> | |
| 23 | <Icon class="mr-5px" icon="carbon:tree-view-alt" /> | |
| 24 | {{ t('profile.user.dept') }} | |
| 25 | <div v-if="userInfo?.dept" class="pull-right">{{ userInfo?.dept.name }}</div> | |
| 26 | </li> | |
| 27 | <li class="list-group-item"> | |
| 28 | <Icon class="mr-5px" icon="ep:suitcase" /> | |
| 29 | {{ t('profile.user.posts') }} | |
| 30 | <div v-if="userInfo?.posts" class="pull-right"> | |
| 31 | {{ userInfo?.posts.map((post) => post.name).join(',') }} | |
| 32 | </div> | |
| 33 | </li> | |
| 34 | <li class="list-group-item"> | |
| 35 | <Icon class="mr-5px" icon="icon-park-outline:peoples" /> | |
| 36 | {{ t('profile.user.roles') }} | |
| 37 | <div v-if="userInfo?.roles" class="pull-right"> | |
| 38 | {{ userInfo?.roles.map((role) => role.name).join(',') }} | |
| 39 | </div> | |
| 40 | </li> | |
| 41 | <li class="list-group-item"> | |
| 42 | <Icon class="mr-5px" icon="ep:calendar" /> | |
| 43 | {{ t('profile.user.createTime') }} | |
| 44 | <div class="pull-right">{{ formatDate(userInfo.createTime) }}</div> | |
| 45 | </li> | |
| 46 | </ul> | |
| 47 | </div> | |
| 48 | </template> | |
| 49 | <script lang="ts" setup> | |
| 50 | import { formatDate } from '@/utils/formatTime' | |
| 51 | import UserAvatar from './UserAvatar.vue' | |
| 52 | ||
| 53 | import { getUserProfile, ProfileVO } from '@/api/system/user/profile' | |
| 54 | ||
| 55 | defineOptions({ name: 'ProfileUser' }) | |
| 56 | ||
| 57 | const { t } = useI18n() | |
| 58 | const userInfo = ref({} as ProfileVO) | |
| 59 | const getUserInfo = async () => { | |
| 60 | const users = await getUserProfile() | |
| 61 | userInfo.value = users | |
| 62 | } | |
| 63 | onMounted(async () => { | |
| 64 | await getUserInfo() | |
| 65 | }) | |
| 66 | </script> | |
| 67 | ||
| 68 | <style scoped> | |
| 69 | .text-center { | |
| 70 | position: relative; | |
| 71 | height: 120px; | |
| 72 | text-align: center; | |
| 73 | } | |
| 74 | ||
| 75 | .list-group-striped > .list-group-item { | |
| 76 | padding-right: 0; | |
| 77 | padding-left: 0; | |
| 78 | border-right: 0; | |
| 79 | border-left: 0; | |
| 80 | border-radius: 0; | |
| 81 | } | |
| 82 | ||
| 83 | .list-group { | |
| 84 | padding-left: 0; | |
| 85 | list-style: none; | |
| 86 | } | |
| 87 | ||
| 88 | .list-group-item { | |
| 89 | padding: 11px 0; | |
| 90 | margin-bottom: -1px; | |
| 91 | font-size: 13px; | |
| 92 | border-top: 1px solid #e7eaec; | |
| 93 | border-bottom: 1px solid #e7eaec; | |
| 94 | } | |
| 95 | ||
| 96 | .pull-right { | |
| 97 | float: right !important; | |
| 98 | } | |
| 99 | </style> | |
