refactor(prefetch): 优化预拉取设置表单交互体验

- 调整预拉取起始时间为距离当前时间10分钟
- 移除设置表单内冗余提交按钮区域,改为由父组件统一控制
- 通过defineEmits实现保存成功与失败事件通知父组件
- 在父组件中新增设置弹窗底部操作按钮:取消、重置、保存
- 父组件调用子组件暴露的方法进行表单提交及重置操作
- 增加保存成功后关闭弹窗及错误处理回调逻辑
This commit is contained in:
danial
2025-12-07 01:19:14 +08:00
parent 84265b6076
commit 813d9f0c0e
3 changed files with 66 additions and 34 deletions

View File

@@ -142,7 +142,7 @@ const loadingMore = ref(false);
const generateFormModel = () => {
const now = dayjs();
return {
startTime: now.subtract(1, 'day').toDate(),
startTime: now.subtract(10, 'minute').toDate(),
endTime: now.toDate()
};
};

View File

@@ -4,8 +4,6 @@
:model="formModel"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }"
label-align="left"
@submit="handleSubmit"
>
<!-- 第一部分豪猪平台设置 -->
<a-card title="豪猪平台设置" :bordered="false">
@@ -229,28 +227,6 @@
<a-empty v-else description="暂无面额设置,请添加面额配置" />
</a-card>
<!-- 操作按钮区域 -->
<div class="form-actions">
<a-row justify="end">
<a-col>
<a-space :size="16">
<a-button type="primary" html-type="submit" :loading="loading">
<template #icon>
<icon-save />
</template>
保存设置
</a-button>
<a-button @click="resetForm">
<template #icon>
<icon-refresh />
</template>
重置
</a-button>
</a-space>
</a-col>
</a-row>
</div>
</a-form>
</a-card>
</template>
@@ -263,6 +239,13 @@ import type { KamiApiCamelOilV1DenominationSetting } from '@/api/generated/index
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { jdV2SettingsClient } from '@/api/index.ts';
interface Emits {
(e: 'success'): void;
(e: 'error'): void;
}
const emit = defineEmits<Emits>();
const { loading, setLoading } = useLoading(false);
const formModel = reactive({
@@ -386,9 +369,13 @@ const handleSubmit = async () => {
});
Message.success('设置保存成功');
// 通知父组件保存成功
emit('success');
} catch (error) {
console.error('保存设置失败:', error);
Message.error('保存设置失败');
// 通知父组件保存失败
emit('error');
} finally {
setLoading(false);
}
@@ -415,17 +402,18 @@ const loadSettings = async () => {
}
};
// 暴露方法给父组件
defineExpose({
handleSubmit,
resetForm,
loading
});
// 组件挂载时加载设置
onMounted(loadSettings);
</script>
<style scoped>
.form-actions {
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid var(--color-border-2);
}
/* Arco Design 已经处理了大部分样式,只需要覆盖必要的布局样式 */
:deep(.arco-form-item-content-flex) {
display: block;

View File

@@ -25,10 +25,27 @@
v-model:visible="state.settingsModalVisible"
title="预拉取设置配置"
width="1000px"
:footer="false"
@cancel="state.settingsModalVisible = false"
@cancel="handleCancel"
>
<settings-form />
<template #footer>
<a-space>
<a-button @click="handleCancel">取消</a-button>
<a-button @click="handleReset">重置</a-button>
<a-button
type="primary"
:loading="settingsFormRef?.loading"
@click="handleSave"
>
保存设置
</a-button>
</a-space>
</template>
<settings-form
ref="settingsFormRef"
@success="handleSuccess"
@error="handleError"
/>
</a-modal>
</div>
</template>
@@ -51,9 +68,36 @@ const state = reactive({
settingsModalVisible: false
});
const settingsFormRef = ref();
const showSettingsModal = () => {
state.settingsModalVisible = true;
};
// 取消按钮处理
const handleCancel = () => {
state.settingsModalVisible = false;
};
// 保存按钮处理
const handleSave = () => {
settingsFormRef.value?.handleSubmit();
};
// 重置按钮处理
const handleReset = () => {
settingsFormRef.value?.resetForm();
};
// 保存成功回调
const handleSuccess = () => {
state.settingsModalVisible = false;
};
// 保存失败回调
const handleError = () => {
console.error('设置保存失败');
};
</script>
<style scoped>