feat(jd-order): 添加批量导入失败详情展示功能

- 新增失败详情弹窗,展示具体失败行号、账户名称和错误原因
- 优化错误提示逻辑,区分全部失败和部分失败的情况
- 调整cookie验证结果展示方式,改善用户体验
- 重构手动提交逻辑,支持表单验证后控制模态框关闭时机
- 修复提交成功后模态框未正确关闭的问题
This commit is contained in:
danial
2025-10-28 17:36:30 +08:00
parent d4d2d52e18
commit 50e147087a
2 changed files with 116 additions and 24 deletions

View File

@@ -268,6 +268,67 @@
</div>
</div>
</a-modal>
<!-- 失败详情弹窗 -->
<a-modal
v-model:visible="showErrorModal"
title="批量添加失败详情"
:footer="false"
width="800px"
@cancel="showErrorModal = false"
>
<div class="error-modal-content">
<a-alert
type="error"
message="部分Cookie添加失败"
:description="`共 ${failedItemsList.length} 个Cookie添加失败请查看具体原因`"
show-icon
:closable="false"
style="margin-bottom: 16px"
/>
<a-table
:data="failedItemsList"
:pagination="{ pageSize: 10 }"
size="small"
:columns="[
{
title: '行号',
dataIndex: 'lineNumber',
width: 80
},
{
title: '账户名称',
dataIndex: 'accountName',
width: 150,
ellipsis: true,
tooltip: true
},
{
title: '失败原因',
dataIndex: 'errorMsg',
ellipsis: true,
tooltip: true
}
]"
>
<template #lineNumber="{ record }">
{{ record.lineNumber }}
</template>
<template #errorMsg="{ record }">
<a-tag color="red" size="small">
{{ record.errorMsg }}
</a-tag>
</template>
</a-table>
<div class="error-actions">
<a-button type="primary" @click="showErrorModal = false">
我知道了
</a-button>
</div>
</div>
</a-modal>
</template>
<script lang="ts" setup>
@@ -317,6 +378,8 @@ const validationSummary = ref<{
hasValid: boolean;
text: string;
} | null>(null);
const showErrorModal = ref(false);
const failedItemsList = ref<any[]>([]);
// 表单数据
const formModel = reactive({
@@ -489,6 +552,8 @@ const handleCancel = (): void => {
isFullscreen.value = false;
validating.value = false;
validationSummary.value = null;
showErrorModal.value = false;
failedItemsList.value = [];
};
const handleSubmit = async (): Promise<boolean> => {
@@ -545,22 +610,17 @@ const handleSubmit = async (): Promise<boolean> => {
message = `${failedCount} 个Cookie添加失败`;
}
// 如果有具体的失败原因,显示详细信息
// 如果有具体的失败原因,准备显示详细信息
if (failedItems.length > 0) {
const errorDetails = failedItems
.map(item => {
const lineNumber = (item.index || 0) + 1;
const accountName = item.accountName || `账号${lineNumber}`;
const errorMsg = item.errorMsg || '未知错误';
return `${accountName}(第${lineNumber}行): ${errorMsg}`;
})
.join('\n');
// 准备失败详情数据
failedItemsList.value = failedItems.map(item => ({
lineNumber: (item.index || 0) + 1,
accountName: item.accountName || `账号${(item.index || 0) + 1}`,
errorMsg: item.errorMsg || '未知错误'
}));
// 显示错误详情弹窗
console.error('批量添加失败详情:', errorDetails);
// 可以考虑显示一个更友好的错误提示,这里先简单处理
message += `。失败原因请查看控制台`;
// 修改提示消息,引导用户查看详情
message += `,点击查看失败详情`;
}
}
@@ -568,10 +628,23 @@ const handleSubmit = async (): Promise<boolean> => {
if (successCount > 0 && failedCount === 0) {
Message.success(message);
} else if (successCount === 0 && failedCount > 0) {
Message.error(message);
// 全部失败,显示错误消息并引导查看详情
Message.error({
content: message,
duration: 5000,
closable: true
});
// 显示失败详情弹窗
showErrorModal.value = true;
} else {
// 部分成功,显示警告消息
Message.warning(message);
}
// 如果有失败项,显示详情弹窗
if (failedItems.length > 0) {
showErrorModal.value = true;
}
}
// 只要有成功的就触发success事件
@@ -881,6 +954,18 @@ const handleSubmit = async (): Promise<boolean> => {
display: flex;
}
.error-modal-content {
padding: 16px 0;
}
.error-actions {
display: flex;
justify-content: flex-end;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--color-border-2);
}
/* 全屏模式样式调整 */
:deep(.arco-modal-fullscreen) .batch-import-container {
height: calc(100vh - 100px);

View File

@@ -31,8 +31,7 @@
<div v-if="validateResult" class="validate-result">
<a-alert
:type="validateResult.isValid ? 'success' : 'error'"
:message="validateResult.isValid ? 'Cookie有效' : 'Cookie无效'"
:description="validateResult.message"
:title="validateResult.isValid ? 'Cookie有效' : 'Cookie无效'"
show-icon
:closable="false"
>
@@ -40,6 +39,7 @@
<icon-check-circle v-if="validateResult.isValid" />
<icon-close-circle v-else />
</template>
{{ validateResult.message }}
</a-alert>
</div>
@@ -64,12 +64,7 @@
<a-button
type="primary"
:loading="loading"
@click="
() =>
formRef.value
?.validate()
.then(res => !res && handleSubmit(() => {}))
"
@click="handleManualSubmit"
>
{{ cookieId ? '修改' : '添加' }}
</a-button>
@@ -215,6 +210,19 @@ const handleValidate = async (): Promise<void> => {
}
};
// 手动提交表单(用于底部按钮)
const handleManualSubmit = (): void => {
formRef.value?.validate().then((res: any) => {
if (res) return;
// 调用原有的提交逻辑,但不关闭模态框
handleSubmit(closed => {
if (closed) {
emit('update:visible', false);
}
});
});
};
// 提交表单
const handleSubmit = (done: (closed: boolean) => void) => {
formRef.value?.validate().then(async (res: any) => {
@@ -249,7 +257,6 @@ const handleSubmit = (done: (closed: boolean) => void) => {
Message.success(props.cookieId ? '修改成功' : '添加成功');
emit('success');
done(true);
emit('update:visible', false);
} catch (error) {
console.error('提交失败:', error);
Message.error(props.cookieId ? '修改失败' : '添加失败');