kd-aiot-frontend-wt/src/layout/components/header-tools.vue

<!-- 顶栏右侧区域 -->
<template>
  <div class="ele-admin-header-tool">
    <!-- 全屏切换 -->
    <div
      class="ele-admin-header-tool-item hidden-xs-only"
      @click="toggleFullscreen"
    >
      <i v-if="fullscreen" class="el-icon-_screen-restore"></i>
      <i v-else class="el-icon-_screen-full"></i>
    </div>
    <!-- 语言切换 -->
    <div class="ele-admin-header-tool-item">
      <i18n-icon />
    </div>
    <!-- 消息通知 -->
    <div class="ele-admin-header-tool-item">
      <header-notice />
    </div>
    <div class="ele-admin-header-tool-item">
      <el-select v-model="groupId" @change="groupIdChange">
        <el-option
          v-for="item in loginChangeGroupVOList"
          :key="item.groupId"
          :label="item.groupName"
          :value="item.groupId"
        >
        </el-option>
      </el-select>
    </div>
    <div class="ele-admin-header-tool-item">
      <el-select v-model="roleId" @change="roleChange">
        <el-option
          v-for="item in loginChangeRoleVOList"
          :key="item.roleId"
          :label="item.roleName"
          :value="item.roleId"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 用户信息 -->
    <div class="ele-admin-header-tool-item">
      <el-dropdown @command="onUserDropClick">
        <div class="ele-admin-header-avatar">
          <el-avatar
            :src="
              loginUser && loginUser.avatarAddress
                ? loginUser.avatarAddress
                : xyy
            "
          />
          <span class="hidden-xs-only">{{
            loginUser && loginUser.nickname ? loginUser.nickname : ''
          }}</span>
          <i class="el-icon-arrow-down"></i>
        </div>
        <template v-slot:dropdown>
          <el-dropdown-menu>
            <!--            <router-link to="/user/profile">-->
            <!--              <el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>-->
            <!--            </router-link>-->
            <el-dropdown-item command="profile" icon="el-icon-user">
              {{ $t('layout.header.profile') }}
            </el-dropdown-item>
            <el-dropdown-item command="password" icon="el-icon-key">
              {{ $t('layout.header.password') }}
            </el-dropdown-item>
            <el-dropdown-item
              command="logout"
              icon="el-icon-switch-button"
              divided
            >
              {{ $t('layout.header.logout') }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- 主题设置 -->
    <div class="ele-admin-header-tool-item" @click="openSetting">
      <i class="el-icon-_more"></i>
    </div>
    <!-- 修改密码弹窗 -->
    <password-modal :visible.sync="passwordVisible" />
    <!-- 主题设置抽屉 -->
    <setting-drawer :visible.sync="settingVisible" />
  </div>
</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 xyy from '@/assets/xyy.jpg';
import router from '@/router/index';
import { getCurrentUser,setCurrentUser } from '@/utils/token-util';

export default {
  components: { HeaderNotice, PasswordModal, SettingDrawer, I18nIcon },
  props: {
    // 是否是全屏
    fullscreen: Boolean
  },
  data() {
    return {
      xyy,
      // 是否显示修改密码弹窗
      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;
    },
    // 部门下拉
    loginChangeGroupVOList() {
      return this.$store.state.user?.info?.loginChangeGroupVOList;
    },
    // 角色下拉
    loginChangeRoleVOList() {
      return this.$store.state.user?.info?.loginChangeGroupVOList.find(
        (item) => item.groupId == this.groupId
      )?.loginChangeRoleVOList;
    }
  },
  methods: {
    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(() => {});
      }
    },
    /* 全屏切换 */
    toggleFullscreen() {
      this.$emit('fullscreen');
    },
    /* 打开设置抽屉 */
    openSetting() {
      this.settingVisible = true;
    }
  }
};
</script>