feat(jd-order): 添加批量导入失败详情展示功能
- 新增失败详情弹窗,展示具体失败行号、账户名称和错误原因 - 优化错误提示逻辑,区分全部失败和部分失败的情况 - 调整cookie验证结果展示方式,改善用户体验 - 重构手动提交逻辑,支持表单验证后控制模态框关闭时机 - 修复提交成功后模态框未正确关闭的问题
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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 ? '修改失败' : '添加失败');
|
||||
|
||||
Reference in New Issue
Block a user