hlt_gis_admin/src/layouts/default/header/index.vue

<template>
  <Header :class="getHeaderClass">
    <!-- left start -->
    <div :class="`${prefixCls}-left`">
      <!-- logo -->
      <AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme"
        :style="getLogoWidth" />
      <LayoutTrigger v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile
        " :theme="getHeaderTheme" :sider="false" />
      <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
    </div>
    <!-- left end -->

    <!-- menu start -->
    <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
      <LayoutMenu :isHorizontal="true" :theme="getHeaderTheme" :splitType="getSplitType" :menuMode="getMenuMode" />
    </div>
    <!-- menu-end -->

    <!-- action  -->
    <div :class="`${prefixCls}-action`">
      <!-- <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" /> -->

      <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />

      <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />

      <HelpDoc />

      <div class="header-tips">
        <div @click="openTips" class="tips-icon">
          <div class="icon"></div>
          <div class="msg-num">{{ tipsNum }}</div>
        </div>
        <div id="tips-container" class="tips-container" v-show="ifShowTips"></div>
      </div>

      <!-- <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" /> -->
      <div class="header-setting" @click="gotoSysManage">
        <img :src="settingImg" style="width: 26px;height: 26px;">
      </div>


      <AppLocalePicker v-if="getShowLocalePicker" :reload="true" :showText="false" :class="`${prefixCls}-action__item`" />

      <UserDropDown :theme="getHeaderTheme" />
      <img :src="outSys" alt="" srcset="" class="outSys" @click="outSysWay">
      <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />

    </div>
  </Header>
</template>
<script lang="ts">
import { defineComponent, ref, unref, computed, onMounted, watch } from 'vue';
import { propTypes } from '/@/utils/propTypes';
import { Layout } from 'ant-design-vue';
import { AppLogo } from '/@/components/Application';
import LayoutMenu from '../menu/index.vue';
import LayoutTrigger from '../trigger/index.vue';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useUserStore } from '/@/store/modules/user';
import { useAppStore } from '/@/store/modules/app';
import { useRouter } from 'vue-router';
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { SettingButtonPositionEnum } from '/@/enums/appEnum';
import { AppLocalePicker } from '/@/components/Application';

import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign';

import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useLocale } from '/@/locales/useLocale';
import HelpDoc from './components/HelpDoc.vue';
import outSys from "/@/assets/images/outSys.svg";
import Tips from '/@/views/tips/index.vue';
import { createApp } from 'vue';
import settingImg from '/@/assets/images/headerSet.svg';
import eventBus from '/@/utils/eventBus';

export default defineComponent({
  name: 'LayoutHeader',
  components: {
    Header: Layout.Header,
    AppLogo,
    LayoutTrigger,
    LayoutBreadcrumb,
    LayoutMenu,
    UserDropDown,
    AppLocalePicker,
    FullScreen,
    Notify,
    ErrorAction,
    SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
      loading: true,
    }),
    HelpDoc,
  },
  props: {
    fixed: propTypes.bool,
  },
  setup(props) {
    const { prefixCls } = useDesign('layout-header');
    const {
      getShowTopMenu,
      getShowHeaderTrigger,
      getSplit,
      getIsMixMode,
      getMenuWidth,
      getIsMixSidebar,
    } = useMenuSetting();
    const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } =
      useRootSetting();

    const {
      getHeaderTheme,
      getShowFullScreen,
      getShowNotice,
      getShowContent,
      getShowBread,
      getShowHeaderLogo,
      getShowHeader,
      getShowSearch,
    } = useHeaderSetting();
    const router = useRouter();
    const gotoSysManage = () => {
      router.push('/system/structure');
      eventBus.emit('userSysRemove');
    }

    const { getShowLocalePicker } = useLocale();

    const { getIsMobile } = useAppInject();

    const getHeaderClass = computed(() => {
      const theme = unref(getHeaderTheme);
      return [
        prefixCls,
        {
          [`${prefixCls}--fixed`]: props.fixed,
          [`${prefixCls}--mobile`]: unref(getIsMobile),
          [`${prefixCls}--${theme}`]: theme,
        },
      ];
    });

    const getShowSetting = ref(true)
    // const getShowSetting = computed(() => {
    //   if (!unref(getShowSettingButton)) {
    //     return false;
    //   }
    //   const settingButtonPosition = unref(getSettingButtonPosition);

    //   if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
    //     return unref(getShowHeader);
    //   }
    //   return settingButtonPosition === SettingButtonPositionEnum.HEADER;
    // });

    const getLogoWidth = computed(() => {
      if (!unref(getIsMixMode) || unref(getIsMobile)) {
        return {};
      }
      const width = unref(getMenuWidth) < 180 ? 220 : unref(getMenuWidth);//sjl,之前是180
      return { width: `${width}px` };
    });

    const getSplitType = computed(() => {
      return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
    });

    const getMenuMode = computed(() => {
      return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
    });

    const userStore = useUserStore();

    function outSysWay() {
      userStore.confirmLoginOut();
    }
    const appStore = useAppStore();

    const ifShowTips = ref(appStore.tipsShowFlag)
    const tipsNum = ref(appStore.tipsTotalNum)
    watch(
      () => appStore.tipsShowFlag,
      (val) => {
        ifShowTips.value = val
      },
      {
        immediate: true
      }
    )
    watch(
      () => appStore.tipsTotalNum,
      (val) => {
        tipsNum.value = val
      },
      {
        immediate: true
      }
    )
    const openTips = () => {
      appStore.setTipsShowFlag(!ifShowTips.value)
    }
    onMounted(() => {
      const tips = createApp(Tips)
      // 挂载消息提示组件
      tips.mount('#tips-container')
    })

    return {
      settingImg,
      appStore,
      ifShowTips,
      tipsNum,
      openTips,
      outSysWay,
      outSys,
      prefixCls,
      getHeaderClass,
      getShowHeaderLogo,
      getHeaderTheme,
      getShowHeaderTrigger,
      getIsMobile,
      getShowBread,
      getShowContent,
      getSplitType,
      getSplit,
      getMenuMode,
      getShowTopMenu,
      getShowLocalePicker,
      getShowFullScreen,
      getShowNotice,
      getUseErrorHandle,
      getLogoWidth,
      getIsMixSidebar,
      getShowSettingButton,
      getShowSetting,
      getShowSearch,
      gotoSysManage
    };
  },
});
</script>
<style lang="less">
@import './index.less';

.outSys {
  cursor: pointer;
  border-left: solid 1px #74AFEA;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 6px;
}
</style>
<style lang="less" scoped>
.header-tips {
  height: 48px;
  width: 48px;
  // margin: 0 10px 0;
  overflow: hidden;
  font-size: 12px;
  cursor: pointer;

  &:hover {
    background-color: #1580ec;
  }

  .tips-icon {
    position: relative;
    height: 48px;
    width: 48px;

    .icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 26px;
      height: 26px;
      background: url('/@/assets/images/tip-in-header.png') no-repeat;
      background-size: 100% 100%;
    }

    .msg-num {
      position: absolute;
      top: 4px;
      right: 0px;
      width: 20px;
      height: 20px;
      color: #fff;
      background-color: #f72a2a;
      font-family: Source Han Sans CN;
      font-size: 12px;
      line-height: 17px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid #fff;
      box-sizing: border-box;
    }
  }

  .tips-container {
    transform: translate(-50%, 0);
    position: absolute;
    z-index: 9999;
  }
}

.header-setting {
  height: 48px;
  width: 48px;
  // margin: 0 10px 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: #1580ec;
  }
}
</style>