refactor(import): 优化批量导入对话框的关闭逻辑和错误显示

- 将 `@closed` 事件处理器从 `closeDialog` 改为 `close`
- 添加 `uploadRef` 引用和 `selectedFile` 状态管理
- 在关闭对话框时清除上传文件和重置状态
- 将错误信息从 `<text>` 改为带样式的 `<div>`
- 添加 `handleFileChange` 方法处理文件选择
This commit is contained in:
34701892@qq.com 2025-12-15 09:55:48 +08:00
parent 39bfdcea28
commit d6397bd8bf
1 changed files with 47 additions and 4 deletions

View File

@ -1,13 +1,14 @@
<template> <template>
<div class="index"> <div class="index">
<el-dialog v-model="dialogTableVisible" title="批量导入" width="600" @closed="closeDialog"> <el-dialog v-model="dialogTableVisible" title="批量导入" width="600" @closed="close">
<div style="display: flex; flex-direction: column"> <div style="display: flex; flex-direction: column">
<el-button @click="downloadTemplate" style="width: 120px">下载标准模版</el-button> <el-button @click="downloadTemplate" style="width: 120px">下载标准模版</el-button>
<text v-if="errorMsg" style="color: red; margin-top: 10px">{{ errorMsg }}</text> <div v-if="errorMsg" class="error-message">{{ errorMsg }}</div>
</div> </div>
<!-- :http-request="uploadAction" --> <!-- :auto-upload="false"
<!-- :action="baseUrl + '/jnh/accounts/import'" --> :on-change="handleFileChange" -->
<el-upload <el-upload
ref="uploadRef"
class="upload" class="upload"
drag drag
:action="baseUrl + '/jnh/accounts/import'" :action="baseUrl + '/jnh/accounts/import'"
@ -45,6 +46,8 @@ const rules = reactive({
const form = ref({}); const form = ref({});
const dialogTableVisible = ref(false); const dialogTableVisible = ref(false);
const uploadRef = ref(null);
const selectedFile = ref(null);
const uploadHeader = ref({ const uploadHeader = ref({
'auth-token': `${Session.get('token')}`, 'auth-token': `${Session.get('token')}`,
@ -56,11 +59,39 @@ function open(data) {
form.value = data; form.value = data;
} }
} }
function close() { function close() {
//
if (uploadRef.value) {
uploadRef.value.clearFiles();
}
//
selectedFile.value = null;
errorMsg.value = '';
dialogTableVisible.value = false; dialogTableVisible.value = false;
emit('close'); emit('close');
} }
//
function handleFileChange(file, fileList) {
selectedFile.value = file;
//
errorMsg.value = '';
}
//
function submit() {
// if (!selectedFile.value) {
// errorMsg.value = '';
// return;
// }
close();
// //
// if (uploadRef.value) {
// uploadRef.value.submit();
// }
}
function downloadTemplate() { function downloadTemplate() {
window.open('https://cankao.obs.cn-east-3.myhuaweicloud.com/%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx'); window.open('https://cankao.obs.cn-east-3.myhuaweicloud.com/%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx');
} }
@ -71,6 +102,11 @@ function handleSuccess(res) {
if (res.code === 200) { if (res.code === 200) {
ElMessage.success('导入成功'); ElMessage.success('导入成功');
errorMsg.value = res.data; errorMsg.value = res.data;
//
// dialogTableVisible.value = false;
emit('close');
} else {
errorMsg.value = res.msg || '导入失败';
} }
} }
@ -101,4 +137,11 @@ defineExpose({
color: #606266; color: #606266;
margin-top: 10px; margin-top: 10px;
} }
.error-message {
color: red;
margin-top: 10px;
white-space: pre-line;
font-size: 14px;
}
</style> </style>