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
      :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, watch } 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 { 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) => {
  ElMessageBox.confirm('是否切换租户？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    setValue(targetTenantId);
    currentTenant.value = Number(targetTenantId);
   
    /**
    * 如果处于小地图编辑状态，切换租户时候，返回布局列表
    */
    if (isInConfigEditor(route.name)) {
      sessionStorage.removeItem('selectCompanyId'); //切换租户的时候，下拉公司列表清空
      router.back();
    } else {
      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>