feat: 租户抽屉增加骨架屏
- 添加 loading 状态和 Skeleton 组件 - 优化租户信息加载逻辑,与套餐选择初始化并行执行 - 使用骨架屏替代原有的 loading,提升用户体验
This commit is contained in:
parent
7b0bfad877
commit
f5ea147823
@ -5,7 +5,7 @@ import { useVbenDrawer } from '@vben/common-ui';
|
|||||||
import { $t } from '@vben/locales';
|
import { $t } from '@vben/locales';
|
||||||
import { cloneDeep } from '@vben/utils';
|
import { cloneDeep } from '@vben/utils';
|
||||||
|
|
||||||
import { message } from 'ant-design-vue';
|
import { message, Skeleton } from 'ant-design-vue';
|
||||||
|
|
||||||
import { useVbenForm } from '#/adapter/form';
|
import { useVbenForm } from '#/adapter/form';
|
||||||
import { tenantAdd, tenantInfo, tenantUpdate } from '#/api/system/tenant';
|
import { tenantAdd, tenantInfo, tenantUpdate } from '#/api/system/tenant';
|
||||||
@ -69,6 +69,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
const [BasicDrawer, drawerApi] = useVbenDrawer({
|
const [BasicDrawer, drawerApi] = useVbenDrawer({
|
||||||
onBeforeClose,
|
onBeforeClose,
|
||||||
onClosed: handleClosed,
|
onClosed: handleClosed,
|
||||||
@ -78,15 +79,19 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
drawerApi.drawerLoading(true);
|
drawerApi.drawerLoading(true);
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
const { id } = drawerApi.getData() as { id?: number | string };
|
const { id } = drawerApi.getData() as { id?: number | string };
|
||||||
isUpdate.value = !!id;
|
isUpdate.value = !!id;
|
||||||
// 初始化
|
|
||||||
await setupPackageSelect();
|
|
||||||
|
|
||||||
if (isUpdate.value && id) {
|
if (isUpdate.value && id) {
|
||||||
const record = await tenantInfo(id);
|
const [record] = await Promise.all([
|
||||||
|
tenantInfo(id),
|
||||||
|
setupPackageSelect(),
|
||||||
|
]);
|
||||||
await formApi.setValues(record);
|
await formApi.setValues(record);
|
||||||
|
} else {
|
||||||
|
await setupPackageSelect();
|
||||||
}
|
}
|
||||||
|
|
||||||
formApi.updateSchema([
|
formApi.updateSchema([
|
||||||
@ -100,6 +105,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
|
|||||||
await markInitialized();
|
await markInitialized();
|
||||||
|
|
||||||
drawerApi.drawerLoading(false);
|
drawerApi.drawerLoading(false);
|
||||||
|
loading.value = false;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -133,7 +139,8 @@ async function handleClosed() {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<BasicDrawer :title="title" class="w-[600px]">
|
<BasicDrawer :title="title" class="w-[600px]">
|
||||||
<BasicForm />
|
<Skeleton v-if="loading" active />
|
||||||
|
<BasicForm v-show="!loading" />
|
||||||
</BasicDrawer>
|
</BasicDrawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user