refactor(prefetch): 优化预拉取设置表单交互体验
- 调整预拉取起始时间为距离当前时间10分钟 - 移除设置表单内冗余提交按钮区域,改为由父组件统一控制 - 通过defineEmits实现保存成功与失败事件通知父组件 - 在父组件中新增设置弹窗底部操作按钮:取消、重置、保存 - 父组件调用子组件暴露的方法进行表单提交及重置操作 - 增加保存成功后关闭弹窗及错误处理回调逻辑
This commit is contained in:
@@ -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()
|
||||
};
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user