!99 修复用户管理crud无法显示用户头像问题

Merge pull request !99 from lxy/cherry-pick-1736165358

web/src/stores/userInfo.ts

@@ -2,6 +2,9 @@ import { defineStore } from 'pinia';
 import { UserInfosStates } from './interface';
 import { Session } from '/@/utils/storage';
 import { request } from '../utils/service';
+import { getBaseURL } from '../utils/baseUrl';
+import headerImage from '/@/assets/img/headerImage.png';
+
 /**
  * 用户信息
  * @methods setUserInfos 设置用户信息
@@ -72,7 +75,7 @@ export const useUserInfo = defineStore('userInfo', {
 				method: 'get',
 			}).then((res:any)=>{
 				this.userInfos.username = res.data.name;
-				this.userInfos.avatar = res.data.avatar;
+				this.userInfos.avatar = (res.data.avatar && getBaseURL(res.data.avatar)) || headerImage;
 				this.userInfos.name = res.data.name;
 				this.userInfos.email = res.data.email;
 				this.userInfos.mobile = res.data.mobile;

web/src/views/system/dept/components/DeptUserCom/crud.tsx

@@ -263,10 +263,10 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 					}),
 					column: {
 						minWidth: 200, //最小列宽
-						formatter({value,row,index}){
-							const values = row.role_info.map((item:any) => item.name);
-							return values.join(',')
-						}
+						// formatter({value,row,index}){
+						// 	const values = row.role_info.map((item:any) => item.name);
+						// 	return values.join(',')
+						// }
 					},
 					form: {
 						rules: [
@@ -385,12 +385,12 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 				},
 				avatar: {
 					title: '头像',
-					type: 'avatar-cropper',
+					type: 'avatar-uploader',
 					form: {
 						show: false,
 					},
 					column:{
-						width:150,
+						width:100,
 						showOverflowTooltip: true,
 					}
 				},

web/src/views/system/dept/components/DeptUserCom/index.vue

@@ -42,6 +42,15 @@
 		<template #actionbar-right>
 			<importExcel api="api/system/user/" v-auth="'user:Import'">导入 </importExcel>
 		</template>
+		<template #cell_avatar="scope">
+              <div v-if="scope.row.avatar" style="display: flex; justify-content: center; align-items: center;">
+                <el-image 
+                  style="width: 50px; height: 50px; border-radius: 50%; aspect-ratio: 1 /1 ; " 
+                  :src="getBaseURL(scope.row.avatar)"
+                  :preview-src-list="[getBaseURL(scope.row.avatar)]" 
+                  :preview-teleported="true" />
+              </div>
+            </template>
 	</fs-crud>
 
 	<el-dialog v-model="resetPwdVisible" title="重设密码" width="400px" draggable :before-close="handleResetPwdClose">
@@ -69,6 +78,7 @@ import { ECharts, EChartsOption, init } from 'echarts';
 import { getDeptInfoById, resetPwd } from './api';
 import { warningNotification, successNotification } from '/@/utils/message';
 import { HeadDeptInfoType } from '../../types';
+import {getBaseURL} from '/@/utils/baseUrl';
 
 let deptCountChart: ECharts;
 let deptSexChart: ECharts;

web/src/views/system/personal/index.vue

@@ -32,7 +32,7 @@
 										<el-col :xs="24" :sm="24" class="personal-item mb6">
 											<div class="personal-item-label">角色：</div>
 											<div class="personal-item-value">
-												<el-tag v-for="(item, index) in state.personalForm.role_info" :key="index">{{ item.name }}</el-tag>
+												<el-tag v-for="(item, index) in state.personalForm.role_info" :key="index" style="margin-right: 5px;">{{ item.name }}</el-tag>
 											</div>
 										</el-col>
 									</el-row>

web/src/views/system/user/crud.tsx

@@ -257,10 +257,10 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
                     }),
                     column: {
                         minWidth: 200, //最小列宽
-                        formatter({value,row,index}){
-                            const values = row.role_info.map((item:any) => item.name);
-                            return values.join(',')
-                        }
+                        // formatter({value,row,index}){
+                        //     const values = row.role_info.map((item:any) => item.name);
+                        //     return values.join(',')
+                        // }
                     },
                     form: {
                         rules: [
@@ -382,12 +382,13 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
                 },
                 avatar: {
                     title: '头像',
-                    type: 'avatar-cropper',
+                    type: 'avatar-uploader',
+                    align: 'center',
                     form: {
                         show: false,
                     },
                     column: {
-                        minWidth: 400, //最小列宽
+                        minWidth: 100, //最小列宽
                     },
                 },
                 ...commonCrudConfig({

web/src/views/system/user/index.vue

@@ -33,6 +33,15 @@
             <template #actionbar-right>
               <importExcel api="api/system/user/" v-auth="'user:Import'">导入</importExcel>
             </template>
+            <template #cell_avatar="scope">
+              <div v-if="scope.row.avatar" style="display: flex; justify-content: center; align-items: center;">
+                <el-image 
+                  style="width: 50px; height: 50px; border-radius: 50%; aspect-ratio: 1 /1 ; " 
+                  :src="getBaseURL(scope.row.avatar)"
+                  :preview-src-list="[getBaseURL(scope.row.avatar)]" 
+                  :preview-teleported="true" />
+              </div>
+            </template>
           </fs-crud>
         </el-card>
       </el-col>
@@ -50,6 +59,8 @@ import {ref, onMounted, watch, toRaw, h} from 'vue';
 import XEUtils from 'xe-utils';
 import {getElementLabelLine} from 'element-tree-line';
 import importExcel from '/@/components/importExcel/index.vue'
+import {getBaseURL} from '/@/utils/baseUrl';
+
 
 const ElementTreeLine = getElementLabelLine(h);