mky-vent-base/src/layouts/default/header/index.vue

<template>
  <Header
    v-if="
      ((!getShowFullHeader && !currentRoute.path.endsWith('home')) || currentRoute.path.startsWith('/micro-vent-3dModal/modelchannel/')) &&
      !noHeadeLink.includes(currentRoute.path)
    "
    :class="[
      ...getHeaderClass,
      {
        'vent-header': currentRoute.path.startsWith('/monitorChannel/monitor-'),
        'normal-header': !currentRoute.path.startsWith('/monitorChannel/monitor-'),
        'no-header': currentRoute.path.endsWith('home'),
      },
    ]"
    style="z-index: 1"
  >
    <!-- left start -->
    <div :class="`${prefixCls}-left`">
      <!-- logo -->
      <!-- <AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" /> -->
      <AppLogo :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" />
      <div v-if="!currentRoute.path.startsWith('/monitorChannel/monitor-')" style="margin-top: 5px; color: #aaa; margin-left: 10px; font-weight: 600"
        >/{{ currentRoute.meta.title }}</div
      >
      <!-- <LayoutTrigger
        v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile"
        :theme="getHeaderTheme"
        :sider="false"
      />
      <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
      <span v-if="getShowContent && getShowBreadTitle" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`, 'headerIntroductionClass']">
        欢迎进入 {{ title }}
      </span> -->
    </div>
    <!-- left end -->

    <!-- menu start -->
    <div v-if="currentRoute.path.startsWith('/monitorChannel/monitor-')" :class="`${prefixCls}-vent`">
      <!-- <div>主通风机监测控制</div> -->
      <div class="header-nav-title">{{ currentRoute.meta.title }} </div>
    </div>
    <div :class="`${prefixCls}-menu`" v-else-if="getShowTopMenu && !getIsMobile">
      <LayoutMenu :isHorizontal="true" :theme="getHeaderTheme" :splitType="getSplitType" :menuMode="getMenuMode" />
    </div>
    <!-- menu-end -->

    <!-- action  -->
    <div :class="`${prefixCls}-action`">
      <!-- <div class="right-position">
        <VoiceBroadcast />
        <UserDropDown v-if="showUserDropdown" :theme="getHeaderTheme" />
      </div>
      <LoginSelect ref="loginSelectRef" @success="loginSelectOk" /> -->
    </div>
  </Header>
  <div :class="`${prefixCls}-action`" style="position: fixed; top: 30px; right: 20px; z-index: 999999">
    <div class="right-position">
      <VoiceBroadcast />
      <UserDropDown v-if="showUserDropdown" :theme="getHeaderTheme" />
      <LoginSelect ref="loginSelectRef" @success="loginSelectOk" />
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue';
  import { useGlobSetting } from '/@/hooks/setting';
  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 { AppSearch } from '/@/components/Application';

  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';

  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
  import { AppLocalePicker } from '/@/components/Application';

  import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction, LockScreen } 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 VoiceBroadcast from './components/VoiceBroadcast.vue';

  import LoginSelect from '/@/views/sys/login/LoginSelect.vue';
  import { useUserStore } from '/@/store/modules/user';
  import { useRouter } from 'vue-router';

  import { noHeadeLink } from '../layout.data';

  export default defineComponent({
    name: 'LayoutHeader',
    components: {
      Header: Layout.Header,
      AppLogo,
      LayoutTrigger,
      LayoutBreadcrumb,
      LayoutMenu,
      UserDropDown,
      AppLocalePicker,
      FullScreen,
      Notify,
      AppSearch,
      ErrorAction,
      LockScreen,
      LoginSelect,
      VoiceBroadcast,
      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
        loading: true,
      }),
    },
    props: {
      fixed: propTypes.bool,
    },
    setup(props) {
      const { prefixCls } = useDesign('layout-header');
      const userStore = useUserStore();
      const { currentRoute } = useRouter();
      console.log(currentRoute);

      const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
      const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
      const { title } = useGlobSetting();

      const {
        getHeaderTheme,
        getShowFullScreen,
        getShowNotice,
        getShowContent,
        getShowBread,
        getShowHeaderLogo,
        getShowHeader,
        getShowSearch,
        getUseLockPage,
        getShowBreadTitle,
        getShowFullHeaderRef,
      } = useHeaderSetting();

      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 getShowFullHeader = computed(() => {
        const route = unref(currentRoute);
        return getShowFullHeaderRef && route.path.startsWith('/micro-');
      });

      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 ? 180 : unref(getMenuWidth);
        return { width: `${width}px` };
      });

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

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

      // /**
      //  * 首页多租户部门弹窗逻辑
      //  */
      const loginSelectRef = ref();

      function showLoginSelect() {
        //update-begin---author:liusq  Date:20220101  for：判断登录进来是否需要弹窗选择租户----
        //判断是否是登陆进来
        const loginInfo = toRaw(userStore.getLoginInfo) || {};
        if (!!loginInfo.isLogin) {
          loginSelectRef.value.show(loginInfo);
        }
        //update-end---author:liusq  Date:20220101  for：判断登录进来是否需要弹窗选择租户----
      }

      function loginSelectOk() {
        console.log('成功。。。。。');
      }

      // 用户下拉框应该在以下情况中隐藏：
      // 1. 本页面是由其他页面的 iframe 嵌入的页面
      const showUserDropdown = computed(() => {
        return window.self === window.top;
      });

      onMounted(() => {
        showLoginSelect();
      });

      return {
        prefixCls,
        getHeaderClass,
        getShowHeaderLogo,
        getHeaderTheme,
        getShowHeaderTrigger,
        getIsMobile,
        getShowBreadTitle,
        getShowBread,
        getShowContent,
        getSplitType,
        getSplit,
        getMenuMode,
        getShowTopMenu,
        getShowLocalePicker,
        getShowFullScreen,
        getShowNotice,
        getUseErrorHandle,
        getLogoWidth,
        getIsMixSidebar,
        getShowSettingButton,
        getShowSetting,
        getShowSearch,
        getUseLockPage,
        loginSelectOk,
        loginSelectRef,
        currentRoute,
        title,
        getShowFullHeader,
        noHeadeLink,
        showUserDropdown,
      };
    },
  });
</script>
<style lang="less">
  @import './index.less';
  //update-begin---author:scott ---date:2022-09-30  for：默认隐藏顶部菜单面包屑-----------
  //顶部欢迎语展示样式
  @prefix-cls: ~'@{namespace}-layout-header';

  .@{prefix-cls} {
    display: flex;
    padding: 0 8px;
    // align-items: center;

    .headerIntroductionClass {
      margin-right: 4px;
      margin-bottom: 2px;
      border-bottom: 0px;
      border-left: 0px;
    }

    &--light {
      .headerIntroductionClass {
        color: @breadcrumb-item-normal-color;
      }
    }

    &--dark {
      .headerIntroductionClass {
        color: rgba(255, 255, 255, 0.6);
      }
      .anticon {
        color: rgba(255, 255, 255, 0.8);
      }
    }
    //update-end---author:scott ---date::2022-09-30  for：默认隐藏顶部菜单面包屑--------------
  }
  // background: linear-gradient(#003f77, #0a134c);
  //   // background: linear-gradient(#02050c 0%, #03114c 100%);
  //   // border: none;
  //   border-bottom: 1px solid #81aabf01;
  //   padding-bottom: 2px;
  //   box-shadow: 0 0 20px #44caff55 inset;
  .normal-header {
    height: 52px !important;
    line-height: 52px !important;
    background: var(--vent-header-bg-color) !important;
    // background: linear-gradient(#005177,#0a344c) !important;
    border-bottom: 1px solid #81aabf01 !important;
    padding-bottom: 2px !important;
    box-shadow: 0 0 20px #44caff55 inset !important;
    padding: 0 8px !important;
  }
  .no-header {
    height: 0px !important;
    display: none !important;
  }
  .header-nav-title {
    background-image: linear-gradient(#ffffff 50%, #60f4ff);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 600;
  }
</style>