Browse Source

[Feat 0000]首页顶部小组件隐藏

bobo04052021@163.com 6 days ago
parent
commit
d87a82f0e2
1 changed files with 260 additions and 258 deletions
  1. 260 258
      src/layouts/default/header/index.vue

+ 260 - 258
src/layouts/default/header/index.vue

@@ -58,8 +58,8 @@
   <div :class="`${prefixCls}-action`" style="position: fixed; top: 30px; right: 20px; z-index: 999999">
     <div class="right-position">
       <!-- 公司端不显示语音播报功能 weatherBroadcast.vue-->
-      <WeatherBroadcast v-if="sysOrgCode != 'sdmtjtgsd' && isShowQy" />
-      <VoiceBroadcast v-if="sysOrgCode != 'sdmtjtgsd'" />
+      <WeatherBroadcast v-if="sysOrgCode != 'sdmtjtgsd' && isShowQy && portValue != '8062'" />
+      <VoiceBroadcast v-if="sysOrgCode != 'sdmtjtgsd' && portValue != '8062'" />
       <VoiceBroadcastGsd v-if="sysOrgCode == 'sdmtjtgsd'" />
       <UserDropDown v-if="showUserDropdown" :theme="getHeaderTheme" />
       <LoginSelect ref="loginSelectRef" @success="loginSelectOk" />
@@ -67,277 +67,279 @@
   </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 WeatherBroadcast from './components/weatherBroadcast.vue';
-  import VoiceBroadcast from './components/VoiceBroadcast.vue';
-  import VoiceBroadcastGsd from './components/VoiceBroadcastGsd.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';
-  import { usePermission } from '/@/hooks/web/usePermission';
-
-  export default defineComponent({
-    name: 'LayoutHeader',
-    components: {
-      Header: Layout.Header,
-      AppLogo,
-      LayoutTrigger,
-      LayoutBreadcrumb,
-      LayoutMenu,
-      UserDropDown,
-      AppLocalePicker,
-      FullScreen,
-      Notify,
-      AppSearch,
-      ErrorAction,
-      LockScreen,
-      LoginSelect,
-      VoiceBroadcast,
-      VoiceBroadcastGsd,
-      WeatherBroadcast,
-      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 { hasPermission } = usePermission();
-      const isShowQy = VENT_PARAM['isShowQy'];
-      const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
-      const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
-      const { title, sysOrgCode, homePath } = 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:判断登录进来是否需要弹窗选择租户----
+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 WeatherBroadcast from './components/weatherBroadcast.vue';
+import VoiceBroadcast from './components/VoiceBroadcast.vue';
+import VoiceBroadcastGsd from './components/VoiceBroadcastGsd.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';
+import { usePermission } from '/@/hooks/web/usePermission';
+
+export default defineComponent({
+  name: 'LayoutHeader',
+  components: {
+    Header: Layout.Header,
+    AppLogo,
+    LayoutTrigger,
+    LayoutBreadcrumb,
+    LayoutMenu,
+    UserDropDown,
+    AppLocalePicker,
+    FullScreen,
+    Notify,
+    AppSearch,
+    ErrorAction,
+    LockScreen,
+    LoginSelect,
+    VoiceBroadcast,
+    VoiceBroadcastGsd,
+    WeatherBroadcast,
+    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 { hasPermission } = usePermission();
+    const isShowQy = VENT_PARAM['isShowQy'];
+    const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
+    const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
+    const { title, sysOrgCode, homePath } = 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);
 
-      function loginSelectOk() {
-        console.log('成功。。。。。');
+      if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
+        return unref(getShowHeader);
       }
+      return settingButtonPosition === SettingButtonPositionEnum.HEADER;
+    });
 
-      // 用户下拉框应该在以下情况中隐藏:
-      // 1. 本页面是由其他页面的 iframe 嵌入的页面
-      const showUserDropdown = computed(() => {
-        return window.self === window.top;
-      });
+    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();
+    const portValue = ref('');
+    portValue.value = window.location.port;
+    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:判断登录进来是否需要弹窗选择租户----
+    }
 
-      onMounted(() => {
-        showLoginSelect();
-      });
+    function loginSelectOk() {
+      console.log('成功。。。。。');
+    }
 
-      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,
-        sysOrgCode,
-        homePath,
-        hasPermission,
-        isShowQy,
-      };
-    },
-  });
+    // 用户下拉框应该在以下情况中隐藏:
+    // 1. 本页面是由其他页面的 iframe 嵌入的页面
+    const showUserDropdown = computed(() => {
+      return window.self === window.top;
+    });
+
+    onMounted(() => {
+      showLoginSelect();
+    });
+
+    return {
+      portValue,
+      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,
+      sysOrgCode,
+      homePath,
+      hasPermission,
+      isShowQy,
+    };
+  },
+});
 </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;
+@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 {
-      margin-right: 4px;
-      margin-bottom: 2px;
-      border-bottom: 0px;
-      border-left: 0px;
+      color: @breadcrumb-item-normal-color;
     }
+  }
 
-    &--light {
-      .headerIntroductionClass {
-        color: @breadcrumb-item-normal-color;
-      }
+  &--dark {
+    .headerIntroductionClass {
+      color: rgba(255, 255, 255, 0.6);
     }
 
-    &--dark {
-      .headerIntroductionClass {
-        color: rgba(255, 255, 255, 0.6);
-      }
-
-      .anticon {
-        color: rgba(255, 255, 255, 0.8);
-      }
+    .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;
-  }
-  .zaihai-header {
-    position: absolute;
-    background: transparent !important;
-  }
-
-  .header-nav-title {
-    background-image: linear-gradient(#ffffff 50%, #60f4ff);
-    -webkit-background-clip: text;
-    color: transparent;
-    font-weight: 600;
-  }
+  //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;
+}
+.zaihai-header {
+  position: absolute;
+  background: transparent !important;
+}
+
+.header-nav-title {
+  background-image: linear-gradient(#ffffff 50%, #60f4ff);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: 600;
+}
 </style>