feat(jd-order): 添加批量导入失败详情展示功能
- 新增失败详情弹窗,展示具体失败行号、账户名称和错误原因 - 优化错误提示逻辑,区分全部失败和部分失败的情况 - 调整cookie验证结果展示方式,改善用户体验 - 重构手动提交逻辑,支持表单验证后控制模态框关闭时机 - 修复提交成功后模态框未正确关闭的问题
This commit is contained in:
@@ -268,6 +268,67 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -317,6 +378,8 @@ const validationSummary = ref<{
|
|||||||
hasValid: boolean;
|
hasValid: boolean;
|
||||||
text: string;
|
text: string;
|
||||||
} | null>(null);
|
} | null>(null);
|
||||||
|
const showErrorModal = ref(false);
|
||||||
|
const failedItemsList = ref<any[]>([]);
|
||||||
|
|
||||||
// 表单数据
|
// 表单数据
|
||||||
const formModel = reactive({
|
const formModel = reactive({
|
||||||
@@ -489,6 +552,8 @@ const handleCancel = (): void => {
|
|||||||
isFullscreen.value = false;
|
isFullscreen.value = false;
|
||||||
validating.value = false;
|
validating.value = false;
|
||||||
validationSummary.value = null;
|
validationSummary.value = null;
|
||||||
|
showErrorModal.value = false;
|
||||||
|
failedItemsList.value = [];
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = async (): Promise<boolean> => {
|
const handleSubmit = async (): Promise<boolean> => {
|
||||||
@@ -545,22 +610,17 @@ const handleSubmit = async (): Promise<boolean> => {
|
|||||||
message = `${failedCount} 个Cookie添加失败`;
|
message = `${failedCount} 个Cookie添加失败`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果有具体的失败原因,显示详细信息
|
// 如果有具体的失败原因,准备显示详细信息
|
||||||
if (failedItems.length > 0) {
|
if (failedItems.length > 0) {
|
||||||
const errorDetails = failedItems
|
// 准备失败详情数据
|
||||||
.map(item => {
|
failedItemsList.value = failedItems.map(item => ({
|
||||||
const lineNumber = (item.index || 0) + 1;
|
lineNumber: (item.index || 0) + 1,
|
||||||
const accountName = item.accountName || `账号${lineNumber}`;
|
accountName: item.accountName || `账号${(item.index || 0) + 1}`,
|
||||||
const errorMsg = item.errorMsg || '未知错误';
|
errorMsg: item.errorMsg || '未知错误'
|
||||||
return `${accountName}(第${lineNumber}行): ${errorMsg}`;
|
}));
|
||||||
})
|
|
||||||
.join('\n');
|
|
||||||
|
|
||||||
// 显示错误详情弹窗
|
// 修改提示消息,引导用户查看详情
|
||||||
console.error('批量添加失败详情:', errorDetails);
|
message += `,点击查看失败详情`;
|
||||||
|
|
||||||
// 可以考虑显示一个更友好的错误提示,这里先简单处理
|
|
||||||
message += `。失败原因请查看控制台`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -568,10 +628,23 @@ const handleSubmit = async (): Promise<boolean> => {
|
|||||||
if (successCount > 0 && failedCount === 0) {
|
if (successCount > 0 && failedCount === 0) {
|
||||||
Message.success(message);
|
Message.success(message);
|
||||||
} else if (successCount === 0 && failedCount > 0) {
|
} else if (successCount === 0 && failedCount > 0) {
|
||||||
Message.error(message);
|
// 全部失败,显示错误消息并引导查看详情
|
||||||
|
Message.error({
|
||||||
|
content: message,
|
||||||
|
duration: 5000,
|
||||||
|
closable: true
|
||||||
|
});
|
||||||
|
// 显示失败详情弹窗
|
||||||
|
showErrorModal.value = true;
|
||||||
} else {
|
} else {
|
||||||
|
// 部分成功,显示警告消息
|
||||||
Message.warning(message);
|
Message.warning(message);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 如果有失败项,显示详情弹窗
|
||||||
|
if (failedItems.length > 0) {
|
||||||
|
showErrorModal.value = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 只要有成功的就触发success事件
|
// 只要有成功的就触发success事件
|
||||||
@@ -881,6 +954,18 @@ const handleSubmit = async (): Promise<boolean> => {
|
|||||||
display: flex;
|
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 {
|
:deep(.arco-modal-fullscreen) .batch-import-container {
|
||||||
height: calc(100vh - 100px);
|
height: calc(100vh - 100px);
|
||||||
|
|||||||
@@ -31,8 +31,7 @@
|
|||||||
<div v-if="validateResult" class="validate-result">
|
<div v-if="validateResult" class="validate-result">
|
||||||
<a-alert
|
<a-alert
|
||||||
:type="validateResult.isValid ? 'success' : 'error'"
|
:type="validateResult.isValid ? 'success' : 'error'"
|
||||||
:message="validateResult.isValid ? 'Cookie有效' : 'Cookie无效'"
|
:title="validateResult.isValid ? 'Cookie有效' : 'Cookie无效'"
|
||||||
:description="validateResult.message"
|
|
||||||
show-icon
|
show-icon
|
||||||
:closable="false"
|
:closable="false"
|
||||||
>
|
>
|
||||||
@@ -40,6 +39,7 @@
|
|||||||
<icon-check-circle v-if="validateResult.isValid" />
|
<icon-check-circle v-if="validateResult.isValid" />
|
||||||
<icon-close-circle v-else />
|
<icon-close-circle v-else />
|
||||||
</template>
|
</template>
|
||||||
|
{{ validateResult.message }}
|
||||||
</a-alert>
|
</a-alert>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -64,12 +64,7 @@
|
|||||||
<a-button
|
<a-button
|
||||||
type="primary"
|
type="primary"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
@click="
|
@click="handleManualSubmit"
|
||||||
() =>
|
|
||||||
formRef.value
|
|
||||||
?.validate()
|
|
||||||
.then(res => !res && handleSubmit(() => {}))
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
{{ cookieId ? '修改' : '添加' }}
|
{{ cookieId ? '修改' : '添加' }}
|
||||||
</a-button>
|
</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) => {
|
const handleSubmit = (done: (closed: boolean) => void) => {
|
||||||
formRef.value?.validate().then(async (res: any) => {
|
formRef.value?.validate().then(async (res: any) => {
|
||||||
@@ -249,7 +257,6 @@ const handleSubmit = (done: (closed: boolean) => void) => {
|
|||||||
Message.success(props.cookieId ? '修改成功' : '添加成功');
|
Message.success(props.cookieId ? '修改成功' : '添加成功');
|
||||||
emit('success');
|
emit('success');
|
||||||
done(true);
|
done(true);
|
||||||
emit('update:visible', false);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('提交失败:', error);
|
console.error('提交失败:', error);
|
||||||
Message.error(props.cookieId ? '修改失败' : '添加失败');
|
Message.error(props.cookieId ? '修改失败' : '添加失败');
|
||||||
|
|||||||
Reference in New Issue
Block a user