geg-gas-web/src/layouts/default/header/components/childSystem.vue

<template>
  <AMenu
    v-if="getShowContent && getShowBread"
    :selectedKeys="cur"
    mode="horizontal"
    :class="[prefixCls, `${prefixCls}--${theme}`]"
  >
    <MenuItem v-for="item in system" @click="changeSystem(item.id)" :key="item.id" class="item-system">
      {{ item.name }}
    </MenuItem>
  </AMenu>
  <Tooltip title="子系统" :mouseEnterDelay="0.5">
    <Dropdown
      v-if="getShowTopMenu && !getIsMobile"
      placement="bottom"
      :trigger="['click']"
      :dropMenuList="system"
      :selectedKeys="cur"
      @menu-event="handleMenuEvent"
      overlayClassName="app-locale-picker-overlay"
    >
      <template #overlay>
        <a-menu>
          <a-menu-item :key="item.event" v-for="item in system">
            <Icon
              :icon="item.icon || 'ant-design:appstore-outlined'"
              color="#DEDFFF"
              size="26"
              style="vertical-align: -7px"
            />
            {{ item.text }}
          </a-menu-item>
        </a-menu>
      </template>
      <span class="cursor-pointer flex items-center p-2">
        <Icon icon="icon-park-outline:system" size="22" />
      </span>
    </Dropdown>
  </Tooltip>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, watch } from 'vue';
  import type { MenuTheme } from 'ant-design-vue';
  import { Breadcrumb, Tooltip, Menu } from 'ant-design-vue';
  import Icon from '/@/components/Icon';
  import { Dropdown } from '/@/components/Dropdown';
  import type { DropMenu } from '/@/components/Dropdown';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useAppInject } from '/@/hooks/web/useAppInject';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { propTypes } from '/@/utils/propTypes';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { storeToRefs } from 'pinia';
  import { usePermissionStore } from '/@/store/modules/permission';
  export default defineComponent({
    name: 'LayoutBreadcrumb',
    components: {
      Icon,
      [Breadcrumb.name]: Breadcrumb,
      Tooltip,
      AMenu: Menu,
      MenuItem: Menu.Item,
      Dropdown,
    },
    props: {
      theme: propTypes.oneOf(['dark', 'light']),
    },
    setup() {
      const permissionStore = usePermissionStore();
      const { subSystemList } = storeToRefs(permissionStore);
      const Mtheme = ref<MenuTheme>('dark');
      const cur = ref<string[]>([permissionStore.getSubSystem]);

      const { prefixCls } = useDesign('layout-breadcrumb');
      const { getIsMobile } = useAppInject();
      const system = ref<any[]>([]);
      const { t } = useI18n();
      const { getShowTopMenu } = useMenuSetting();
      const { getShowContent, getShowBread } = useHeaderSetting();
      watch(
        () => subSystemList.value,
        (v) => {
          system.value = v;
        },
        { deep: true },
      );
      onMounted(async () => {
        await permissionStore.changeSubsystem(getShowTopMenu.value, getIsMobile.value);
        system.value = permissionStore.getSubSysList;
          if(system.value.length>0){
              changeSystem(system.value[0].id);
          }
      });

      //切换系统
      function changeSystem(systemId: string) {
        permissionStore.setSubSystem(systemId);
        cur.value = [systemId];
      }

      function handleMenuEvent(menu: DropMenu) {
        if (cur.value[0] === menu.event) {
          return;
        }
        cur.value = [menu.event as string];

        permissionStore.setSubSystem(menu.event as string);
      }

      return {
        t,
        prefixCls,
        cur,
        changeSystem,
        system,
        Mtheme,
        getShowContent,
        getShowTopMenu,
        getShowBread,
        getIsMobile,
        handleMenuEvent,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-layout-breadcrumb';

  .@{prefix-cls} {
    &.ant-menu {
      background: none;
      border: 0;

      .ant-menu-item {
        padding: 0 10px;

        &:hover {
          background: none;
        }

        .ant-menu-item-icon {
          background: rgb(171 170 205 / 30%);
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid rgb(171 170 205 / 30%);
          margin: 0 5px;
          padding: 6px;
        }
      }

      .ant-menu-item-selected {
        background: none;

        .ant-menu-item-icon {
          border: 1px solid rgb(222 223 255);
        }

        &::after {
          border: 0;
        }
      }
    }
  }
</style>