sl-sfy-safety/src/layout/components/Header/SwitchTenant.vue

<!-- 切换租户 -->
<template>
  <div class="switchTenantLable-wrapper" v-if="optionsShown">
    <div class="switchTenantLable">选择租户</div>
    <el-tree-select
      :model-value="currentTenant"
      :data="options"
      check-strictly
      show-all-levels
      default-expand-all
      placeholder="请选择租户"
      @change="handleChange"
    />
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { useUserStore } from '@/store/modules/user';
  import { queryListTenant } from '@/api/tenant';
  import { useTargetTenantIdSetting } from '@/utils/useTargetTenantIdSetting';
  import { replaceParams } from '@/utils/helper/treeHelper';
  import router from '@/router';
  import { useRoute } from 'vue-router';

  interface TenantOption {
    label: string;
    value: string;
    children?: TenantOption[];
  }

  const userStore = useUserStore();
  const { setValue, getValue } = useTargetTenantIdSetting();
  const localTId = getValue();
  const tenantId = computed(() => {
    return userStore.info.tenantId;
  });
  const currentTenant = ref(localTId ? Number(localTId) : Number(tenantId.value));
  const options = ref<TenantOption[]>([]);

  const route = useRoute();

  const optionsShown = computed(() => {
    // 列表空
    if (!options.value.length) return false;
    // 当前租户本身，且没有子租户
    if (options.value.length === 1 && !options.value[0].children?.length) return false;
    return true;
  });

  onMounted(() => {
    const routeTenantId = route.query.targetTenantId as string;
    if (routeTenantId) {
      const nextTenantId = Number(routeTenantId);
      currentTenant.value = nextTenantId;
      setValue(routeTenantId);
    }
    queryListTenant().then((res) => {
      if (!res) return;
      options.value = replaceParams(res || [], 'tenantName', 'id');
    });
  });

  /* 选择租户添加二次确认弹窗 */
  const handleChange = (targetTenantId: string) => {
    ElMessageBox.confirm('是否切换租户？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        setValue(targetTenantId);
        currentTenant.value = Number(targetTenantId);
        // 统一返回首页
        await router.push({ name: 'DashboardConsole' });
        window.location.reload();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消切换',
        });
      });
  };
</script>
<style scoped>
  .switchTenantLable {
    margin-right: 15px;
    display: inline-block;
    width: 100px;
  }

  .switchTenantWrapper {
    margin-right: 20px;
  }

  .switchTenantLable-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
  }
</style>