user-info-modal.vue
3.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<script setup lang="ts">
import type { User } from '#/api/system/user/model';
import { computed, shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Avatar, Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
import { findUserInfo } from '#/api/system/user';
const [BasicModal, modalApi] = useVbenModal({
onOpenChange: handleOpenChange,
onClosed() {
currentUser.value = null;
},
});
const currentUser = shallowRef<null | User>(null);
async function handleOpenChange(open: boolean) {
if (!open) {
return null;
}
modalApi.modalLoading(true);
const { userId } = modalApi.getData() as { userId: number | string };
const response = await findUserInfo(userId);
// 新接口直接返回完整的用户数据，包含posts和roles数组
currentUser.value = response as User;
modalApi.modalLoading(false);
}
const sexLabel = computed(() => {
if (!currentUser.value) {
return '-';
}
const { sex } = currentUser.value;
if (sex === 'Man') return '男';
if (sex === 'Woman') return '女';
return '-';
});
</script>
<template>
<BasicModal :footer="false" :fullscreen-button="false" title="用户信息">
<Descriptions v-if="currentUser" size="small" :column="1" bordered>
<DescriptionsItem label="用户ID">
{{ currentUser.id }}
</DescriptionsItem>
<DescriptionsItem label="头像">
<Avatar v-if="currentUser.icon" :src="currentUser.icon" :size="48" />
<span v-else>-</span>
</DescriptionsItem>
<DescriptionsItem label="姓名">
{{ currentUser.name || '-' }}
</DescriptionsItem>
<DescriptionsItem label="昵称">
{{ currentUser.nick || '-' }}
</DescriptionsItem>
<DescriptionsItem label="用户名">
{{ currentUser.userName || '-' }}
</DescriptionsItem>
<DescriptionsItem label="年龄">
{{ currentUser.age || '-' }}
</DescriptionsItem>
<DescriptionsItem label="性别">
{{ sexLabel }}
</DescriptionsItem>
<DescriptionsItem label="用户状态">
<Tag :color="currentUser.state ? 'success' : 'error'">
{{ currentUser.state ? '启用' : '禁用' }}
</Tag>
</DescriptionsItem>
<DescriptionsItem label="手机号">
{{ currentUser.phone || '-' }}
</DescriptionsItem>
<DescriptionsItem label="邮箱">
{{ currentUser.email || '-' }}
</DescriptionsItem>
<DescriptionsItem label="地址">
{{ currentUser.address || '-' }}
</DescriptionsItem>
<DescriptionsItem label="IP地址">
{{ currentUser.ip || '-' }}
</DescriptionsItem>
<DescriptionsItem label="个人简介">
{{ currentUser.introduction || '-' }}
</DescriptionsItem>
<DescriptionsItem label="岗位">
<div
v-if="currentUser.posts && currentUser.posts.length > 0"
class="flex flex-wrap gap-0.5"
>
<Tag v-for="item in currentUser.posts" :key="item.postId">
{{ item.postName }}
</Tag>
</div>
<span v-else>-</span>
</DescriptionsItem>
<DescriptionsItem label="角色">
<div
v-if="currentUser.roles && currentUser.roles.length > 0"
class="flex flex-wrap gap-0.5"
>
<Tag v-for="item in currentUser.roles" :key="item.roleId">
{{ item.roleName }}
</Tag>
</div>
<span v-else>-</span>
</DescriptionsItem>
<DescriptionsItem label="创建时间">
{{ currentUser.creationTime }}
</DescriptionsItem>
<DescriptionsItem label="备注">
{{ currentUser.remark || '-' }}
</DescriptionsItem>
</Descriptions>
</BasicModal>
</template>