♻️ Refactoring code. 客户端管理显示昵称和头像字段

src/views/app/appuser/i18n/en.ts

@@ -11,6 +11,7 @@ export default {
 		password: 'password',
 		dept: 'dept',
 		email: 'email',
+		avatar: 'avatar',
 		nickname: 'nickname',
 		inputNameTip: 'input name',
 		inputRoleTip: 'input role',

src/views/app/appuser/i18n/zh-cn.ts

@@ -12,6 +12,7 @@ export default {
 		dept: '部门',
 		email: '邮箱',
 		nickname: '昵称',
+		avatar: '头像',
 		inputNameTip: '请输入姓名',
 		inputRoleTip: '请选择角色',
 		inputUserNameTip: '请输入用户名',

src/views/app/appuser/index.vue

@@ -48,8 +48,14 @@
 				<el-table-column align="center" type="selection" width="40" />
 				<el-table-column :label="$t('appuser.index')" type="index" width="60" />
 				<el-table-column :label="$t('appuser.username')" prop="username" show-overflow-tooltip></el-table-column>
-				<el-table-column :label="$t('appuser.name')" prop="name" show-overflow-tooltip></el-table-column>
-				<el-table-column :label="$t('appuser.phone')" prop="phone" show-overflow-tooltip></el-table-column>
+				<el-table-column :label="$t('appuser.nickname')" prop="nickname" show-overflow-tooltip></el-table-column>
+				<el-table-column :label="$t('appuser.avatar')" prop="avatar" show-overflow-tooltip>
+					<template #default="scope">
+						<div style="display: flex; justify-content: center">
+							<ImageUpload v-model:imageUrl="scope.row.avatar" height="50px" width="50px" disabled />
+						</div>
+					</template>
+				</el-table-column>
 				<el-table-column :label="$t('appuser.role')" show-overflow-tooltip>
 					<template #default="scope">
 						<el-tag :key="index" v-for="(item, index) in scope.row.roleList">{{ item.roleName }} </el-tag>
@@ -96,6 +102,7 @@ import { useI18n } from 'vue-i18n';
 
 // 动态引入组件
 const UserForm = defineAsyncComponent(() => import('./form.vue'));
+const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));
 
 const { lock_flag } = useDict('lock_flag');
 const { t } = useI18n();