update: 租户切换Select增加loading

CHANGELOG.md

@@ -25,6 +25,7 @@
 - **文件上传/图片上传不再支持url用法 强制使用ossId**
 - TableSwitch组件重构
 - 管理员租户切换不再返回首页 直接刷新当前页(除特殊页面外会回到首页)
+- 租户切换Select增加loading
 - modalLoading/drawerLoading改为调用内部的lock/unlock方法
 - 登录验证码 增加loading
 - DictEnum使用const代替enum

apps/web-antd/src/components/tenant-toggle/src/index.vue

@@ -11,7 +11,7 @@ import { useAccess } from '@vben/access';
 import { useTabs } from '@vben/hooks';
 import { $t } from '@vben/locales';
 
-import { message, Select } from 'ant-design-vue';
+import { message, Select, Spin } from 'ant-design-vue';
 import { storeToRefs } from 'pinia';
 
 import { tenantDynamicClear, tenantDynamicToggle } from '#/api/system/tenant';
@@ -35,6 +35,7 @@ const showToggle = computed<boolean>(() => {
 });
 
 onMounted(async () => {
+  // 没有超级管理员权限 不会调用接口
   if (!hasAccessByRoles(['superadmin'])) {
     return;
   }
@@ -42,10 +43,8 @@ onMounted(async () => {
 });
 
 const route = useRoute();
-
-const messageInstance = shallowRef<MessageType | null>();
-
 const { closeOtherTabs, refreshTab, closeAllTabs } = useTabs();
+
 async function close(checked: boolean) {
   // store设置状态
   setChecked(checked);
@@ -64,6 +63,11 @@ async function close(checked: boolean) {
 }
 
 const dictStore = useDictStore();
+// 用于清理上一条message
+const messageInstance = shallowRef<MessageType | null>();
+// loading加载中效果
+const loading = ref(false);
+
 /**
  * 选中租户的处理
  * @param tenantId tenantId
@@ -74,31 +78,46 @@ const onSelected: SelectHandler = async (tenantId: string, option: any) => {
     // createMessage.info('选择一致');
     return;
   }
-  await tenantDynamicToggle(tenantId);
+  try {
-  lastSelected.value = tenantId;
+    loading.value = true;
 
-  // 关闭之前的message 只保留一条
+    await tenantDynamicToggle(tenantId);
-  messageInstance.value?.();
+    lastSelected.value = tenantId;
-  messageInstance.value = message.success(
-    `${$t('component.tenantToggle.switch')} ${option.companyName}`,
-  );
 
-  close(true);
+    // 关闭之前的message 只保留一条
-  // 需要放在宏队列处理 直接清空页面由于没有字典会有样式问题(标签变成unknown)
+    messageInstance.value?.();
-  setTimeout(() => dictStore.resetCache());
+    messageInstance.value = message.success(
+      `${$t('component.tenantToggle.switch')} ${option.companyName}`,
+    );
+
+    close(true);
+    // 需要放在宏队列处理 直接清空页面由于没有字典会有样式问题(标签变成unknown)
+    setTimeout(() => dictStore.resetCache());
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
 };
 
 async function onDeselect() {
-  await tenantDynamicClear();
+  try {
+    loading.value = true;
 
-  // 关闭之前的message 只保留一条
+    await tenantDynamicClear();
-  messageInstance.value?.();
+    // 关闭之前的message 只保留一条
-  messageInstance.value = message.success($t('component.tenantToggle.reset'));
+    messageInstance.value?.();
+    messageInstance.value = message.success($t('component.tenantToggle.reset'));
 
-  lastSelected.value = '';
+    lastSelected.value = '';
-  close(false);
+    close(false);
-  // 需要放在宏队列处理 直接清空页面由于没有字典会有样式问题(标签变成unknown)
+    // 需要放在宏队列处理 直接清空页面由于没有字典会有样式问题(标签变成unknown)
-  setTimeout(() => dictStore.resetCache());
+    setTimeout(() => dictStore.resetCache());
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
 }
 
 /**
@@ -115,6 +134,7 @@ function filterOption(input: string, option: TenantOption) {
   <div v-if="showToggle" class="mr-[8px] hidden md:block">
     <Select
       v-model:value="selected"
+      :disabled="loading"
       :field-names="{ label: 'companyName', value: 'tenantId' }"
       :filter-option="filterOption"
       :options="tenantList"
@@ -124,7 +144,11 @@ function filterOption(input: string, option: TenantOption) {
       show-search
       @deselect="onDeselect"
       @select="onSelected"
-    />
+    >
+      <template v-if="loading" #suffixIcon>
+        <Spin size="small" spinning />
+      </template>
+    </Select>
   </div>
 </template>