多租户前端修改提交

src/components/Application/index.ts

@@ -6,6 +6,7 @@ import appSearch from './src/search/AppSearch.vue';
 import appLocalePicker from './src/AppLocalePicker.vue';
 import appDarkModeToggle from './src/AppDarkModeToggle.vue';
 import userPostChange from './src/UserPostChange.vue';
+import userTenantChange from './src/UserTenantChange.vue';
 export { useAppProviderContext } from './src/useAppContext';
 
 export const AppLogo = withInstall(appLogo);
@@ -14,3 +15,4 @@ export const AppSearch = withInstall(appSearch);
 export const AppLocalePicker = withInstall(appLocalePicker);
 export const AppDarkModeToggle = withInstall(appDarkModeToggle);
 export const UserPostChange = withInstall(userPostChange);
+export const UserTenantChange = withInstall(userTenantChange);

src/components/Application/src/UserTenantChange.vue

@@ -0,0 +1,116 @@
+<template>
+  <Tooltip placement="bottom" :mouseEnterDelay="0.5">
+    <Dropdown v-if="formInfo.tenants.length>1"
+      placement="bottom"
+      :trigger="['click']"
+      :dropMenuList="formInfo.tenants"
+      :selectedKeys="selectedKeys"
+      @menu-event="handleMenuEvent"
+      overlayClassName="app-locale-picker-overlay"
+    >
+      <span class="cursor-pointer flex items-center" style="margin-left: 10px;">
+        <Icon icon="ant-design:apartment-outlined" size="18" style="color:#222222"/>
+        <span style="color: rgba(0, 0, 0, 0.85);margin-left: 5px;">{{formInfo.tenantName}}</span>
+      </span>
+    </Dropdown>
+      <span v-else class="flex items-center" style="margin-left: 10px;">
+        <Icon icon="ant-design:apartment-outlined" size="18" style="color:#222222"/>
+        <span style="color: rgba(0, 0, 0, 0.85);margin-left: 5px;">{{formInfo.tenantName}}</span>
+      </span>
+  </Tooltip>
+</template>
+<script lang="ts" setup>
+  import type { DropMenu } from '/@/components/Dropdown';
+  import { ref, watchEffect, watch, h } from 'vue';
+  import { Dropdown } from '/@/components/Dropdown';
+  import { Icon } from '/@/components/Icon';
+  import { storeToRefs } from 'pinia';
+  import { Tooltip } from 'ant-design-vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { changeTenant } from '/@/api/system/tenant';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import {useMessage} from "/@/hooks/web/useMessage";
+  import {useTabs} from "/@/hooks/web/useTabs";
+  import {router} from "/@/router";
+  import {setupRouterGuard} from "/@/router/guard";
+  import {usePermissionStore} from "/@/store/modules/permission";
+  import {useMenuSetting} from "/@/hooks/setting/useMenuSetting";
+  import {useAppInject} from "/@/hooks/web/useAppInject";
+  import {useAppStore} from "/@/store/modules/app";
+
+  const userStore = useUserStore();
+  const { t } = useI18n();
+  const { userInfo } = storeToRefs(userStore);
+  const { closeAll } = useTabs(router);
+  const permissionStore = usePermissionStore();
+  const { getShowTopMenu } = useMenuSetting();
+  const { getIsMobile } = useAppInject();
+  const appStore = useAppStore();
+  const formInfo: any = ref({
+    tenants: [],
+      tenantId: '',
+      tenantCode: '',
+      tenantName: '',
+  });
+  getDropMenuList();
+  watch(
+    () => userInfo.value,
+    (val) => {
+      if (val) getDropMenuList();
+    },
+  );
+  const selectedKeys = ref<string[]>([]);
+
+  watchEffect(() => {
+    selectedKeys.value = [formInfo.value.tenantCode];
+  });
+  function getDropMenuList() {
+    if (userInfo.value?.tenants) {
+      formInfo.value = userInfo.value;
+      formInfo.value.tenants.forEach((o) => {
+        o.text = o.name;
+        o.event = o.code;
+      });
+    }
+  }
+  async function toggleLocale(lang: string) {
+      appStore.setPageLoadingAction(true);
+    let res = await changeTenant(lang);
+      await userStore.afterLoginAction(true);
+      closeAll();
+      await setupRouterGuard(router);
+      await permissionStore.changeSubsystem(getShowTopMenu.value, getIsMobile.value);
+      if(permissionStore.getSubSysList.length>0){
+          permissionStore.setSubSystem(permissionStore.getSubSysList[0].id);
+      }else{
+          permissionStore.setSubSystem("");
+      }
+      //appStore.setPageLoadingAction(false);
+    //location.reload();
+  }
+
+  function handleMenuEvent(menu: DropMenu) {
+    if (formInfo.value.tenantCode === menu.event) {
+      return;
+    }
+      const { createConfirm } = useMessage();
+      createConfirm({
+          iconType: 'warning',
+          title: () => h('span', t('温馨提醒')),
+          content: () => h('span', t('是否确认切换租户？未保存的数据可能会丢失！')),
+          onOk: async () => {
+              toggleLocale(menu.event as string);
+          },
+          okText: () => t('确认'),
+          cancelText: () => t('取消'),
+      });
+  }
+</script>
+
+<style lang="less">
+  .app-locale-picker-overlay {
+    .ant-dropdown-menu-item {
+      min-width: 160px;
+    }
+  }
+</style>