auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimize: ♻️ 优化用户信息弹窗

This commit is contained in:
Bunny 2024-10-13 03:06:51 +08:00
parent 73a2e70354
commit 757fb3db9f
3 changed files with 94 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/Table/Userinfo/UserinfoDialog.vue
View File

@ -14,9 +14,12 @@ const loading = ref(false);
* * 获取用户信息
*/
const getUserInfo = async () => {
// 如果没有传入用户ID直接返回
if (!props.userId) return;
loading.value = true;
// 如果没有传入用户ID直接返回
if (!props.userId) {
loading.value = false;
return;
}
// 判断是否是web端
const result = await fetchGetUserinfoById({ id: props.userId });
@ -33,7 +36,9 @@ onMounted(() => {
</script>
<template>
<div>
<div v-if="userId && userinfo" class="list-card-item bg-bg_color">
<!-- 标题内容 -->
<el-row justify="space-between">
<div class="flex flex-row justify-center items-center">
<div class="list-card-item_detail--logo">
@ -46,6 +51,7 @@ onMounted(() => {
</el-tag>
</el-row>
<!-- 用户详情 -->
<el-descriptions border>
<el-descriptions-item :label="$t('avatar')" :width="100" align="center">
<el-image :src="userinfo.avatar" style="width: 100px; height: 100px" />
@ -64,11 +70,66 @@ onMounted(() => {
{{ userinfo.personDescription }}
</el-descriptions-item>
<el-descriptions-item :label="$t('table.createTime')" span="1.5">{{ userinfo.createTime }}</el-descriptions-item>
<el-descriptions-item :label="$t('table.updateTime')" span="1.5">{{ userinfo.updateTime }}</el-descriptions-item>
<el-descriptions-item :label="$t('table.createTime')" span="1.5">{{ userinfo.createTime }} </el-descriptions-item>
<el-descriptions-item :label="$t('table.updateTime')" span="1.5">{{ userinfo.updateTime }} </el-descriptions-item>
</el-descriptions>
</div>
<el-empty v-else :description="$t('no_data')" />
<!-- 加载内容 -->
<div v-if="loading" class="list-card-item bg-bg_color">
<!-- 标题内容 -->
<el-row justify="space-between">
<div class="flex flex-row justify-center items-center">
<div class="list-card-item_detail--logo">
<userAvatarIcon />
</div>
<h1 class="list-card-item_detail--name">{{ $t('user_details') }}</h1>
</div>
<el-tag class="mx-1 list-card-item_detail--operation--tag" color="#00a870" effect="dark"> loading...</el-tag>
</el-row>
<!-- 用户详情 -->
<el-descriptions border>
<el-descriptions-item :label="$t('avatar')" :width="100" align="center">
<el-skeleton animated class="flex justify-center">
<template #template>
<el-skeleton-item style="width: 100px; height: 100px" variant="image" />
</template>
</el-skeleton>
</el-descriptions-item>
<el-descriptions-item :label="$t('username')" :width="100">
<el-skeleton :rows="1" animated />
</el-descriptions-item>
<el-descriptions-item :label="$t('nickName')" :width="100">
<el-skeleton :rows="1" animated />
</el-descriptions-item>
<el-descriptions-item :label="$t('email')">
<el-skeleton :rows="1" animated />
</el-descriptions-item>
<el-descriptions-item :label="$t('phone')">
<el-skeleton :rows="1" animated />
</el-descriptions-item>
<el-descriptions-item :label="$t('sex')">
<el-skeleton :rows="1" animated />
</el-descriptions-item>
<el-descriptions-item :label="$t('personDescription')" span="3">
<el-skeleton :rows="1" animated />
</el-descriptions-item>
<el-descriptions-item :label="$t('table.createTime')" span="1.5">
<el-skeleton :rows="1" animated />
</el-descriptions-item>
<el-descriptions-item :label="$t('table.updateTime')" span="1.5">
<el-skeleton :rows="1" animated />
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 数据为空 -->
<el-empty v-if="(!userId || !userinfo) && !loading" :description="$t('no_data')" />
</div>
</template>
<style lang="scss" scoped>
@ -77,7 +138,6 @@ onMounted(() => {
flex-direction: column;
margin-bottom: 12px;
overflow: hidden;
cursor: pointer;
border-radius: 3px;
&_detail {

20
src/components/Table/Userinfo/columns.tsx
View File

@ -1,25 +1,5 @@
import { $t } from '@/plugins/i18n';
import UserinfoDialog from '@/components/Table/Userinfo/UserinfoDialog.vue';
import { addDialog } from '@/components/BaseDialog/index';
import TableImage from '@/components/Table/TableImage.vue'; // 表格列字段
// 表格列字段
export const columns = [
{ label: $t('id'), prop: 'id' },
{
label: $t('avatar'),
prop: 'avatar',
cellRenderer: ({ row }) => <TableImage image={row.avatar} />,
},
{ label: $t('nickName'), prop: 'nickName' },
{ label: $t('username'), prop: 'username' },
{ label: $t('email'), prop: 'email', width: 180 },
{ label: $t('phone'), prop: 'phone', width: 180 },
{ label: $t('sex'), prop: 'sex' },
{ label: $t('personDescription'), prop: 'personDescription', width: 180 },
{ label: $t('table.createTime'), prop: 'createTime', width: '160' },
{ label: $t('table.updateTime'), prop: 'updateTime', width: '160' },
];
/**
* * 查看用户信息

2
src/views/system/adminUser/utils/columns.tsx
View File

@ -28,8 +28,8 @@ export const columns: TableColumnList = [
{ label: $t('adminUser_summary'), prop: 'summary', width: 460 },
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90, fixed: 'right' },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90, fixed: 'right' },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90, fixed: 'right' },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];