🚀 设置系统头像

src/store/modules/user.ts

@@ -18,6 +18,9 @@ import { router } from '/@/router';
 import { usePermissionStore } from '/@/store/modules/permission';
 import { RouteRecordRaw } from 'vue-router';
 import defaultAvatar from '/@/assets/images/defaultAvatar.svg';
+import { isUrl } from '/@/utils/is';
+import { useGlobSetting } from '/@/hooks/setting';
+const { apiUrl } = useGlobSetting();
 
 interface UserState {
   userInfo: Nullable<User>;
@@ -134,7 +137,7 @@ export const useUserStore = defineStore({
     /** 获取用户信息 */
     async getUserInfoAction(): Promise<User> {
       const userInfo = await getUserInfo().catch(()=> this.resetState());
-      userInfo.avatar || (userInfo.avatar = defaultAvatar);
+      userInfo.avatar ? (userInfo.avatar = isUrl(userInfo.avatar) ? userInfo.avatar : apiUrl + userInfo.avatar) : (userInfo.avatar = defaultAvatar);
       userInfo.tenantIds = String(userInfo.tenantId).split(',');
       // 存储用户扩展信息,便于鉴权
       this.setUserInfo(userInfo);

src/views/system/user/user.data.ts

@@ -122,6 +122,13 @@ export const userFormSchema: FormSchema[] = [
       span: 12
     }
   },
+  {
+    field: 'avatar',
+    label: '头像',
+    component: 'Input',
+    defaultValue: 'https://godolphinx.org/dolphin1024x1024.png',
+    show: false
+  },
   {
     field: 'deptId',
     label: '归属机构',

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

@@ -12,7 +12,7 @@
         <div class="user-info-top">
           <AAvatar draggable
                    width="32px"
-                   src="https://godolphinx.org/dolphin1024x1024.png"
+                   :src="getUserInfo.avatar"
                    :size="80"
           />
           <h2>{{ getUserInfo.nickName }}</h2>
@@ -80,17 +80,16 @@
           <AForm v-show="state.currentCardKey === 'uploadAvatar'"
                  ref="formElRef"
                  class="upload-avatar-form"
-                 :model="state.userInfo"
                  :scrollToFirstError="true"
                  @keypress.enter="handleSubmit"
           >
-            <AFormItem name="avatar">
+            <AFormItem>
               <AUpload list-type="picture-card"
                        class="avatar-uploader"
                        accept="image/*"
                        :multiple="false"
-                       :customRequest="handleUploadAvatar"
                        :show-upload-list="false"
+                       :customRequest="handleUploadAvatar"
                        :before-upload="handleBeforeUpload"
               >
                 <img v-if="state.imageUrl" :src="state.imageUrl">
@@ -105,6 +104,7 @@
               <a-button preIcon="fa-regular:save"
                         :loading="state.uploadAvatarBtnLoading"
                         type="primary"
+                        @click="handleAvatarSubmit"
               >保存</a-button>
             </AFormItem>
           </AForm>
@@ -129,6 +129,7 @@
   import {useUserStore} from '/@/store/modules/user';
   import {commonUpload} from '/@/api/platform/core/controller/upload';
   import {useGlobSetting} from '/@/hooks/setting';
+  import {isUrl} from '/@/utils/is';
 
   interface InfoState {
     currentCardKey: string;
@@ -170,7 +171,7 @@
       }
     ]
   });
-
+  const defaultAvatarUrl = 'https://godolphinx.org/dolphin1024x1024.png';
   const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
     labelWidth: 100,
     schemas: userFormSchema,
@@ -194,18 +195,40 @@
     try {
       const formData = await validate();
       state.baseInfoBtnLoading = true;
-      editUser(formData).then(async () => {
-        createMessage.success('保存成功!');
-        const result = await getUser(userInfo.id);
-        state.userInfo = result.result;
-        await setFieldsValue(result.result);
-      });
+      await editUser(formData);
+      createMessage.success('保存成功!');
+      const result = await getUser(userInfo.id);
+      state.userInfo = result.result;
+      await setFieldsValue(result.result);
     } finally {
       state.baseInfoBtnLoading = false;
     }
   }
 
-  const getUserInfo = computed((): User & any => state.userInfo ? state.userInfo : {});
+  async function handleAvatarSubmit() {
+    try {
+      state.uploadAvatarBtnLoading = true;
+      await editUser({
+        id: userInfo.id,
+        avatar: state.imageUrl
+      });
+      createMessage.success('保存成功!');
+      const result = await getUser(userInfo.id);
+      state.userInfo = result.result;
+      await setFieldsValue(result.result);
+    } finally {
+      state.uploadAvatarBtnLoading = false;
+    }
+  }
+
+  const getUserInfo = computed((): User & any => {
+    let userInfo = state.userInfo ? state.userInfo : {};
+    if (userInfo.avatar) {
+      userInfo.avatar ? (userInfo.avatar = isUrl(userInfo.avatar) ? userInfo.avatar : apiUrl + userInfo.avatar) : (userInfo.avatar = defaultAvatarUrl);
+      state!.imageUrl = userInfo.avatar;
+    }
+    return userInfo;
+  });
 
   const getLabelStyle = computed((): CSSProperties => ({
     fontSize: '14px',