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

<!-- 切换租户 -->
<template>
  <div class="switchTenantLable-wrapper" v-if="options.length > 0">
    <div class="switchTenantLable">选择租户</div>
    <el-tree-select
      v-model="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 { useUserStore } from '@/store/modules/user';
import { queryListTenant } from '@/api/tenant';
import { useTargetTenantIdSetting } from '@/utils/useTargetTenantIdSetting';
import { replaceParams } from '@/utils/helper/treeHelper';
import { useRoute } from 'vue-router';
import useMiniMap from '@/views/map-config/mini-map/use-mini-map.ts'
import router from '@/router';
const miniMap = useMiniMap();
const  {isInConfigEditor}  = miniMap;

interface TenantOption {
  label: string;
  value: string;
}

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[]>([]);

onMounted(() => {
  queryListTenant().then((res) => {
    if (!res) return;
    options.value = replaceParams(res || [], 'tenantName', 'id')
  });
});
const route = useRoute();
const handleChange = (targetTenantId: string) => {
  setValue(targetTenantId);
  currentTenant.value = Number(targetTenantId);
  window.location.reload();
  /**
   * 如果处于小地图编辑状态，切换租户时候，返回布局列表
   */
  if (isInConfigEditor(route.name)) {
    router.back();
  }
  sessionStorage.removeItem('selectCompanyId'); //切换租户的时候，下拉公司列表清空
};
</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>