feat: 切换企业

src/components/_base/navbar/index.vue

@@ -5,6 +5,7 @@ import { useEnterpriseStore } from '@/stores/modules/enterprise';
 // import { handleUserLogout } from '@/utils/user';
 // import { fetchLogOut } from '@/api/all/login';
 import { useSidebarStore } from '@/stores/modules/side-bar';
+import { useUserStore } from '@/stores';
 import { MENU_GROUP_IDS } from '@/router/constants';
 import router from '@/router';
 // import { useRoute } from 'vue-router';
@@ -13,7 +14,9 @@ import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
 // import { MENU_LIST } from './constants';
 
 const sidebarStore = useSidebarStore();
-// const enterpriseStore = useEnterpriseStore();
+const enterpriseStore = useEnterpriseStore();
+const userStore = useUserStore();
+
 // const route = useRoute();
 const exitAccountModalRef = ref(null);
 // const selectedKey = ref([]);
@@ -24,6 +27,9 @@ const selectedKey = computed(() => {
 const menuList = computed(() => {
   return sidebarStore.menuList;
 });
+const enterprises = computed(() => {
+  return userStore.userInfo?.enterprises ?? [];
+});
 
 const clickExit = async () => {
   exitAccountModalRef.value?.open();
@@ -38,6 +44,10 @@ const setServerMenu = () => {
 const handleDopdownClick = (item) => {
   router.push({ name: item.routeName });
 };
+const onEnterpriseItemClick = async (item) => {
+  enterpriseStore.setEnterpriseInfo(item);
+  window.location.reload();
+};
 </script>
 
 <template>
@@ -90,15 +100,31 @@ const handleDopdownClick = (item) => {
                   <icon-right size="12" />
                 </a-space>
               </a-doption>
-              <!-- <a-doption>
-                <a-space class="flex justify-between w-100%">
-                  <div class="flex items-center">
-                    <img src="@/assets/change.svg" class="w-16px h-16px mr-8px" />
-                    <span>切换企业账号</span>
-                  </div>
-                  <icon-right size="12" />
-                </a-space>
-              </a-doption> -->
+              <a-dsubmenu value="option-1" position="lt" trigger="hover" class="enterprises-dsubmenu">
+                <a-doption class="enterprises-doption">
+                  <a-space class="flex justify-between w-100%">
+                    <div class="flex items-center">
+                      <img src="@/assets/change.svg" class="w-16px h-16px mr-8px" />
+                      <span>切换企业账号</span>
+                    </div>
+                    <icon-right size="12" />
+                  </a-space>
+                </a-doption>
+                <template #content>
+                  <a-doption
+                    v-for="(item, index) in enterprises"
+                    :key="index"
+                    class="rounded-8px hover:bg-#F2F3F5"
+                    :class="enterpriseStore.enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
+                    @click="onEnterpriseItemClick(item)"
+                  >
+                    <div class="flex items-center w-100% justify-between">
+                      <span>{{ item.name }}</span>
+                      <icon-check v-if="enterpriseStore.enterpriseInfo?.id === item.id" size="16" />
+                    </div>
+                  </a-doption>
+                </template>
+              </a-dsubmenu>
               <a-doption>
                 <a-space class="flex justify-between w-100%" @click="clickExit">
                   <div class="flex items-center">
@@ -208,7 +234,8 @@ const handleDopdownClick = (item) => {
 
 <style lang="scss">
 .layout-menu-item-dropdown,
-.layout-avatar-dropdown {
+.layout-avatar-dropdown,
+.enterprises-dsubmenu {
   .arco-dropdown {
     border-radius: 8px;
     border: 1px solid var(--BG-300, #e6e6e8);
@@ -232,17 +259,21 @@ const handleDopdownClick = (item) => {
           line-height: 22px; /* 137.5% */
         }
       }
+      .arco-dropdown-option-content {
+        border-radius: 8px !important;
+      }
       &:not(.arco-dropdown-option-disabled):hover {
         background-color: transparent;
         .arco-dropdown-option-content {
-          border-radius: 8px;
+          // border-radius: 8px;
           background: var(--BG-200, #f2f3f5);
         }
       }
     }
   }
 }
-.layout-avatar-dropdown {
+.layout-avatar-dropdown,
+.enterprises-dsubmenu {
   width: 200px;
   .arco-dropdown {
     padding: 12px 4px;
@@ -253,5 +284,20 @@ const handleDopdownClick = (item) => {
       }
     }
   }
+  .arco-dropdown-option-suffix {
+    display: none;
+  }
+  .enterprises-doption {
+    .arco-dropdown-option-content {
+      padding: 0 !important;
+      border-radius: 8px;
+    }
+    &:not(.arco-dropdown-option-disabled):hover {
+      background-color: transparent;
+      .arco-dropdown-option-content {
+        background: var(--BG-200, #f2f3f5);
+      }
+    }
+  }
 }
 </style>