Browse Source

feat: 优化用户头像获取逻辑,支持字符串和字符串数组

xieyong 19 giờ trước cách đây
mục cha
commit
aa3cb0fa51
1 tập tin đã thay đổi với 97 bổ sung94 xóa
  1. 97 94
      src/layout/components/header-tools.vue

+ 97 - 94
src/layout/components/header-tools.vue

@@ -43,9 +43,7 @@
     <div class="ele-admin-header-tool-item">
       <el-dropdown @command="onUserDropClick">
         <div class="ele-admin-header-avatar">
-          <el-avatar
-          :src="loginUser && loginUser.avatar ? loginUser.avatar : ''"
-          />
+          <el-avatar :src="getAvatar(loginUser && loginUser.avatar)" />
           <span class="hidden-xs-only">{{
             loginUser && loginUser.nickname ? loginUser.nickname : ''
           }}</span>
@@ -85,102 +83,107 @@
 </template>
 
 <script>
-import HeaderNotice from './header-notice.vue';
-import PasswordModal from './password-modal.vue';
-import SettingDrawer from './setting-drawer.vue';
-import I18nIcon from './i18n-icon.vue';
-import { logout } from '@/utils/page-tab-util';
-import { userLogout } from '@/api/system/user';
-import router from '@/router/index';
-import { getCurrentUser,setCurrentUser } from '@/utils/token-util';
-export default {
-  components: { HeaderNotice, PasswordModal, SettingDrawer, I18nIcon },
-  props: {
-    // 是否是全屏
-    fullscreen: Boolean
-  },
-  data() {
-    return {
-      // 是否显示修改密码弹窗
-      passwordVisible: false,
-      // 是否显示主题设置抽屉
-      settingVisible: false,
-      groupId: '',
-      roleId: '',
-      currentUser:{
-        currentGroupId:'',
-        currentRoleId:''
-      }
-    };
-  },
-  created() {
-    this.currentUser = getCurrentUser()
-    this.groupId =  this.currentUser.currentGroupId;
-    this.roleId =  this.currentUser.currentRoleId;
-  },
-  computed: {
-    // 当前用户信息
-    loginUser() {
-      return this.$store.state.user.info;
+  import HeaderNotice from './header-notice.vue';
+  import PasswordModal from './password-modal.vue';
+  import SettingDrawer from './setting-drawer.vue';
+  import I18nIcon from './i18n-icon.vue';
+  import { logout } from '@/utils/page-tab-util';
+  import { userLogout } from '@/api/system/user';
+  import router from '@/router/index';
+  import { getCurrentUser, setCurrentUser } from '@/utils/token-util';
+  export default {
+    components: { HeaderNotice, PasswordModal, SettingDrawer, I18nIcon },
+    props: {
+      // 是否是全屏
+      fullscreen: Boolean
     },
-    // 部门下拉
-    loginChangeGroupVOList() {
-      return this.$store.state.user?.info?.loginChangeGroupVOList;
+    data() {
+      return {
+        // 是否显示修改密码弹窗
+        passwordVisible: false,
+        // 是否显示主题设置抽屉
+        settingVisible: false,
+        groupId: '',
+        roleId: '',
+        currentUser: {
+          currentGroupId: '',
+          currentRoleId: ''
+        }
+      };
     },
-    // 角色下拉
-    loginChangeRoleVOList() {
-      return this.$store.state.user?.info?.loginChangeGroupVOList.find(
-        (item) => item.groupId == this.groupId
-      )?.loginChangeRoleVOList;
-    }
-  },
-  methods: {
-    groupIdChange(val) {
-      this.roleChange(this.loginChangeRoleVOList[0].roleId);
+    created() {
+      this.currentUser = getCurrentUser();
+      this.groupId = this.currentUser.currentGroupId;
+      this.roleId = this.currentUser.currentRoleId;
     },
-    roleChange(val) {
-      this.roleId = val;
-      this.currentUser.currentGroupId = this.groupId;
-      this.currentUser.currentRoleId = val;
-      setCurrentUser(this.currentUser)
-      this.$store
-        .dispatch('user/fetchUserInfo')
-        .then(({ menus, homePath, authoritiesRouter }) => {
-          router.roleChange({ menus, homePath, authoritiesRouter });
-        });
+    computed: {
+      // 当前用户信息
+      loginUser() {
+        return this.$store.state.user.info;
+      },
+      // 部门下拉
+      loginChangeGroupVOList() {
+        return this.$store.state.user?.info?.loginChangeGroupVOList;
+      },
+      // 角色下拉
+      loginChangeRoleVOList() {
+        return this.$store.state.user?.info?.loginChangeGroupVOList.find(
+          (item) => item.groupId == this.groupId
+        )?.loginChangeRoleVOList;
+      }
     },
-    /* 用户信息下拉点击事件 */
-    onUserDropClick(command) {
-      if (command === 'password') {
-        this.passwordVisible = true;
-      } else if (command === 'profile') {
-        if (this.$route.fullPath !== '/user/profile') {
-          this.$router.push('/user/profile');
+    methods: {
+      /* 头像兜底:avatar 可能为字符串或字符串数组 */
+      getAvatar(avatar) {
+        if (Array.isArray(avatar)) return avatar[0] || '';
+        return avatar || '';
+      },
+      groupIdChange(val) {
+        this.roleChange(this.loginChangeRoleVOList[0].roleId);
+      },
+      roleChange(val) {
+        this.roleId = val;
+        this.currentUser.currentGroupId = this.groupId;
+        this.currentUser.currentRoleId = val;
+        setCurrentUser(this.currentUser);
+        this.$store
+          .dispatch('user/fetchUserInfo')
+          .then(({ menus, homePath, authoritiesRouter }) => {
+            router.roleChange({ menus, homePath, authoritiesRouter });
+          });
+      },
+      /* 用户信息下拉点击事件 */
+      onUserDropClick(command) {
+        if (command === 'password') {
+          this.passwordVisible = true;
+        } else if (command === 'profile') {
+          if (this.$route.fullPath !== '/user/profile') {
+            this.$router.push('/user/profile');
+          }
+        } else if (command === 'logout') {
+          // 退出登录
+          this.$confirm(
+            this.$t('layout.logout.message'),
+            this.$t('layout.logout.title'),
+            { type: 'warning' }
+          )
+            .then(() => {
+              userLogout().then((res) => {
+                localStorage.removeItem('userId');
+                logout();
+              });
+            })
+            .catch(() => {});
         }
-      } else if (command === 'logout') {
-        // 退出登录
-        this.$confirm(
-          this.$t('layout.logout.message'),
-          this.$t('layout.logout.title'),
-          { type: 'warning' }
-        )
-          .then(() => {
-            userLogout().then((res) => {
-              localStorage.removeItem('userId');
-              logout();
-            });
-          })
-          .catch(() => {});
+      },
+      /* 全屏切换 */
+      toggleFullscreen() {
+        this.$emit('fullscreen');
+      },
+      /* 打开设置抽屉 */
+      openSetting() {
+        this.settingVisible = true;
       }
-    },
-    /* 全屏切换 */
-    toggleFullscreen() {
-      this.$emit('fullscreen');
-    },
-    /* 打开设置抽屉 */
-    openSetting() {
-      this.settingVisible = true;
     }
-  }
-};
+  };
 </script>