refactor(workflow): 使用 useRequest 替换手动数据获取和清理

移除手动 onMounted 数据获取和 shallowRef,改用 alova 的 useRequest hook 以简化代码并自动管理请求生命周期。同时添加 onBeforeUnmount 以在组件卸载时取消请求,避免潜在的内存泄漏。
This commit is contained in:
dap
2026-01-27 21:00:35 +08:00
parent be5af9e991
commit afb7222955

View File

@@ -1,10 +1,9 @@
<script setup lang="tsx"> <script setup lang="tsx">
import type { DescriptionsProps } from 'antdv-next'; import type { DescriptionsProps } from 'antdv-next';
import type { LeaveVO } from '../leave/api/model'; import { computed, onBeforeUnmount } from 'vue';
import { computed, onMounted, shallowRef } from 'vue';
import { useRequest } from 'alova/client';
import { Descriptions, Skeleton } from 'antdv-next'; import { Descriptions, Skeleton } from 'antdv-next';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
@@ -18,11 +17,14 @@ defineOptions({
const props = defineProps<{ businessId: number | string }>(); const props = defineProps<{ businessId: number | string }>();
const data = shallowRef<LeaveVO>(); // const data = shallowRef<LeaveVO>();
onMounted(async () => {
const resp = await leaveInfo(props.businessId); const { data, abort } = useRequest(() => leaveInfo(props.businessId));
data.value = resp; onBeforeUnmount(abort);
}); // onMounted(async () => {
// const resp = await leaveInfo(props.businessId);
// data.value = resp;
// });
const leaveType = computed(() => { const leaveType = computed(() => {
return ( return (