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>
<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">
<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>
<!-- :http-request="uploadAction" -->
<!-- :action="baseUrl + '/jnh/accounts/import'" -->
<!-- :auto-upload="false"
:on-change="handleFileChange" -->
<el-upload
ref="uploadRef"
class="upload"
drag
:action="baseUrl + '/jnh/accounts/import'"
@ -45,6 +46,8 @@ const rules = reactive({
const form = ref({});
const dialogTableVisible = ref(false);
const uploadRef = ref(null);
const selectedFile = ref(null);
const uploadHeader = ref({
'auth-token': `${Session.get('token')}`,
@ -56,11 +59,39 @@ function open(data) {
form.value = data;
}
}
function close() {
//
if (uploadRef.value) {
uploadRef.value.clearFiles();
}
//
selectedFile.value = null;
errorMsg.value = '';
dialogTableVisible.value = false;
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() {
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) {
ElMessage.success('导入成功');
errorMsg.value = res.data;
//
// dialogTableVisible.value = false;
emit('close');
} else {
errorMsg.value = res.msg || '导入失败';
}
}
@ -101,4 +137,11 @@ defineExpose({
color: #606266;
margin-top: 10px;
}
.error-message {
color: red;
margin-top: 10px;
white-space: pre-line;
font-size: 14px;
}
</style>