refactor(import): 优化批量导入对话框的关闭逻辑和错误显示
- 将 `@closed` 事件处理器从 `closeDialog` 改为 `close` - 添加 `uploadRef` 引用和 `selectedFile` 状态管理 - 在关闭对话框时清除上传文件和重置状态 - 将错误信息从 `<text>` 改为带样式的 `<div>` - 添加 `handleFileChange` 方法处理文件选择
This commit is contained in:
parent
39bfdcea28
commit
d6397bd8bf
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue