optimize: ♻️ 优化用户信息弹窗
This commit is contained in:
parent
73a2e70354
commit
757fb3db9f
|
|
@ -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,42 +36,100 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<userAvatarIcon />
|
||||
<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">
|
||||
<userAvatarIcon />
|
||||
</div>
|
||||
<h1 class="list-card-item_detail--name">{{ $t('user_details') }}</h1>
|
||||
</div>
|
||||
<h1 class="list-card-item_detail--name">{{ $t('user_details') }}</h1>
|
||||
</div>
|
||||
<el-tag :color="userinfo.status ? '#F67676' : '#00a870'" class="mx-1 list-card-item_detail--operation--tag" effect="dark">
|
||||
{{ $t('user_status') }}：{{ userinfo.status ? $t('disable') : $t('normal') }}
|
||||
</el-tag>
|
||||
</el-row>
|
||||
<el-tag :color="userinfo.status ? '#F67676' : '#00a870'" class="mx-1 list-card-item_detail--operation--tag" effect="dark">
|
||||
{{ $t('user_status') }}：{{ userinfo.status ? $t('disable') : $t('normal') }}
|
||||
</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" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('username')" :width="100">{{ userinfo.username }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('nickName')" :width="100">{{ userinfo.nickName }}</el-descriptions-item>
|
||||
<!-- 用户详情 -->
|
||||
<el-descriptions border>
|
||||
<el-descriptions-item :label="$t('avatar')" :width="100" align="center">
|
||||
<el-image :src="userinfo.avatar" style="width: 100px; height: 100px" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('username')" :width="100">{{ userinfo.username }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('nickName')" :width="100">{{ userinfo.nickName }}</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item :label="$t('email')"> {{ userinfo.email }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('phone')">{{ userinfo.phone }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('sex')">
|
||||
<el-tag v-if="userinfo.sex === 1">男</el-tag>
|
||||
<el-tag v-if="userinfo.sex === 0" type="danger">女</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('email')"> {{ userinfo.email }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('phone')">{{ userinfo.phone }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('sex')">
|
||||
<el-tag v-if="userinfo.sex === 1">男</el-tag>
|
||||
<el-tag v-if="userinfo.sex === 0" type="danger">女</el-tag>
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item :label="$t('personDescription')" span="3">
|
||||
{{ userinfo.personDescription }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('personDescription')" span="3">
|
||||
{{ 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>
|
||||
<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>
|
||||
|
||||
<!-- 加载内容 -->
|
||||
<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>
|
||||
<el-empty v-else :description="$t('no_data')" />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -77,7 +138,6 @@ onMounted(() => {
|
|||
flex-direction: column;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
|
||||
&_detail {
|
||||
|
|
|
|||
|
|
@ -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' },
|
||||
];
|
||||
|
||||
/**
|
||||
* * 查看用户信息
|
||||
|
|
|
|||
|
|
@ -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' },
|
||||
];
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue