wms-antdvue/.svn/pristine/9c/9c89fc7bffa1870f862f917ae954e14f5f1a1138.svn-base

<template>
  <div class="header-handle">
    <!-- 搜索 -->
    <div class="header-handle-item">
      <a-tooltip placement="bottom">
        <template #title>搜索</template>
        <SearchOutlined @click="openAppSearch" />
      </a-tooltip>
    </div>
    <!-- LockOutlined -->
    <div class="header-handle-item">
      <a-tooltip placement="bottom">
        <template #title>锁屏</template>
        <LockOutlined @click="openLockOutlined" />
      </a-tooltip>
    </div>
    <!-- 切换全屏 -->
    <div class="header-handle-item">
      <div @click="toggleFullScreen">
        <a-tooltip placement="bottom">
          <template #title>{{ isFullscreen ? '还原' : '全屏' }}</template>
          <FullscreenOutlined v-if="!isFullscreen" />
          <FullscreenExitOutlined v-else />
        </a-tooltip>
      </div>
    </div>
    <!-- 个人中心 -->
    <div class="header-handle-item">
      <a-dropdown placement="bottomRight">
        <div class="avatar">
          <a-avatar :src="userAvatar?userAvatar:schoolboy">
            {{ username }}
            <template #icon><UserOutlined /></template>
          </a-avatar>
        </div>
        <template #overlay>
          <a-menu @click="avatarSelect">
            <a-menu-item :key="1">
              <a-space>
                <UserSwitchOutlined />
                <span>个人中心</span>
              </a-space>
            </a-menu-item>
            <a-menu-item :key="3">
              <a-space>
                <LockOutlined />
                <span>修改密码</span>
              </a-space>
            </a-menu-item>
            <a-menu-item :key="2">
              <a-space>
                <LogoutOutlined />
                <span>退出登录</span>
              </a-space>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <!-- 设置 -->
    <div class="header-handle-item" @click="openSetting">
      <a-tooltip placement="bottomRight">
        <template #title><span>项目配置</span></template>
        <SettingOutlined />
      </a-tooltip>
    </div>
    <!--项目配置-->
    <ProjectSetting ref="drawerSetting" />

    <!-- 搜索 -->
    <AppSearch ref="appSearchRef" />

    <!--修改密码-->
    <AmendPwd ref="amendPwdRef" />
  </div>
</template>

<script lang="ts" setup>
  import { createVNode, ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { TABS_ROUTES,FIRST_ROUTE } from '@/store/mutation-types';
  import { useUserStore } from '@/store/modules/user';
  import { useLockscreenStore } from '@/store/modules/lockscreen';
  import ProjectSetting from './ProjectSetting.vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { Modal, message } from 'ant-design-vue';
  import { AppSearch } from '@/components/Application/index';
  import AmendPwd from './AmendPwd.vue';
  import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
  import { PageEnum } from '@/enums/pageEnum';
  import schoolboy from '@/assets/images/schoolboy.png';
  import {
    SettingOutlined,
    SearchOutlined,
    FullscreenOutlined,
    FullscreenExitOutlined,
    LockOutlined,
    UserOutlined,
    UserSwitchOutlined,
    LogoutOutlined,
  } from '@ant-design/icons-vue';

  const userStore = useUserStore();
  const useLockscreen = useLockscreenStore();

  const { username } = userStore?.info || {};
  const userAvatar = userStore.getAvatar
  const drawerSetting = ref();
  const appSearchRef = ref();
  const amendPwdRef = ref();
  const isFullscreen = ref(false);

  const router = useRouter();
  const route = useRoute();
  const asyncRouteStore = useAsyncRouteStore();
  const tabsViewStore = useTabsViewStore();
  const BASE_LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;

  // 退出登录
  const doLogout = () => {
    Modal.confirm({
      title: '提示',
      icon: createVNode(ExclamationCircleOutlined),
      content: '您确定要退出登录吗',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        userStore.logout().then(() => {
          message.success('成功退出登录');
          tabsViewStore.closeAllTabs();
          localStorage.removeItem(TABS_ROUTES);
          localStorage.removeItem(FIRST_ROUTE);
          asyncRouteStore.setDynamicAddedRoute(false);
          router
            .replace({
              name: BASE_LOGIN_NAME,
              query: {
                redirect: route.fullPath,
              },
            })
            .finally(() => location.reload());
        });
      },
      onCancel() {},
    });
  };

  // 全屏切换
  const toggleFullScreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
      isFullscreen.value = true;
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
        isFullscreen.value = false;
      }
    }
  };

  //头像下拉菜单
  const avatarSelect = ({ key }) => {
    switch (key) {
      case 1:
        openUserCentre();
        break;
      case 2:
        doLogout();
        break;
      case 3:
        amendPwdRef.value.showModal();
        break;
    }
  };

  //锁屏
  function openLockOutlined() {
    useLockscreen.setLock(true);
  }

  function openSetting() {
    const { openDrawer } = drawerSetting.value;
    openDrawer();
  }

  function openUserCentre() {
    router.push({ name: 'setting' });
  }

  function openAppSearch() {
    appSearchRef.value && appSearchRef.value.show();
  }
</script>

<style lang="less" scoped>
  .header-handle {
    display: flex;
    height: 100%;
    flex-shrink: 0;

    &-item {
      padding: 0 12px;
      font-size: 14px;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      &:hover {
        //background: #f9f9f9;
        background: hsla(0, 0%, 100%, 0.08);
      }
    }

    &-item-darkness {
      background: hsla(0, 0%, 100%, 0.08);
    }
  }
</style>