<template>
|
<el-dialog :title="title" v-model="visible" width="520px" append-to-body @close="handleClose">
|
<div v-if="templateUrl" class="template-tip">
|
<el-icon><InfoFilled /></el-icon>
|
<span>第一次导入请先下载模板，按模板格式填写后再上传。</span>
|
<el-button link type="primary" @click="handleDownloadTemplate">下载导入模板</el-button>
|
</div>
|
|
<el-upload
|
ref="uploadRef"
|
drag
|
name="file"
|
:action="action"
|
:headers="headers"
|
:accept="accept"
|
:limit="1"
|
:multiple="false"
|
:auto-upload="false"
|
:on-change="handleFileChange"
|
:on-remove="handleFileRemove"
|
:on-exceed="handleExceed"
|
:on-success="handleSuccess"
|
:on-error="handleError"
|
>
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击选择文件</em></div>
|
</el-upload>
|
|
<div class="upload-tips">
|
<div>支持格式：{{ acceptText }}</div>
|
<div>单个文件不超过 {{ maxSizeMb }}MB，一次只能上传一个文件。</div>
|
<div v-for="(tip, index) in tips" :key="index">{{ tip }}</div>
|
</div>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="visible = false">取 消</el-button>
|
<el-button type="primary" :loading="uploading" @click="handleSubmit">开始导入</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, getCurrentInstance, nextTick, ref } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import { InfoFilled, UploadFilled } from '@element-plus/icons-vue'
|
|
const { proxy } = getCurrentInstance()
|
|
const props = defineProps({
|
title: {
|
type: String,
|
default: '数据导入'
|
},
|
// 上传接口完整地址
|
action: {
|
type: String,
|
required: true
|
},
|
// 允许的文件后缀，如 '.xls,.xlsx'
|
accept: {
|
type: String,
|
default: '.xls,.xlsx'
|
},
|
// 模板文件地址（放在 public 下，如 /import-templates/xxx.xlsx）
|
templateUrl: {
|
type: String,
|
default: ''
|
},
|
templateName: {
|
type: String,
|
default: '导入模板'
|
},
|
// 文件大小上限（MB）
|
maxSizeMb: {
|
type: Number,
|
default: 10
|
},
|
// 额外填写说明
|
tips: {
|
type: Array,
|
default: () => []
|
}
|
})
|
|
const emit = defineEmits(['success'])
|
|
const uploadRef = ref(null)
|
const visible = ref(false)
|
const selectedFile = ref(null)
|
const uploading = ref(false)
|
|
const headers = computed(() => proxy.uploadHeader || {})
|
const acceptText = computed(() => props.accept.split(',').map(item => item.trim()).join('、'))
|
|
function open() {
|
visible.value = true
|
uploading.value = false
|
nextTick(() => {
|
selectedFile.value = null
|
uploadRef.value?.clearFiles()
|
})
|
}
|
|
function handleClose() {
|
uploading.value = false
|
selectedFile.value = null
|
uploadRef.value?.clearFiles()
|
}
|
|
function handleDownloadTemplate() {
|
const link = document.createElement('a')
|
link.href = props.templateUrl
|
link.download = props.templateName
|
document.body.appendChild(link)
|
link.click()
|
document.body.removeChild(link)
|
}
|
|
function handleFileChange(file) {
|
selectedFile.value = file
|
}
|
|
function handleFileRemove() {
|
selectedFile.value = null
|
}
|
|
function handleExceed() {
|
ElMessage.warning('一次只能上传一个文件，请先移除已选择的文件')
|
}
|
|
function validateFile(file) {
|
const name = (file.name || '').toLowerCase()
|
const allowed = props.accept.split(',').map(item => item.trim().toLowerCase()).filter(Boolean)
|
if (allowed.length && !allowed.some(ext => name.endsWith(ext))) {
|
ElMessage.error(`请选择 ${acceptText.value} 格式的文件`)
|
uploadRef.value?.clearFiles()
|
selectedFile.value = null
|
return false
|
}
|
if (file.size && file.size > props.maxSizeMb * 1024 * 1024) {
|
ElMessage.error(`上传文件不超过${props.maxSizeMb}M`)
|
uploadRef.value?.clearFiles()
|
selectedFile.value = null
|
return false
|
}
|
return true
|
}
|
|
function handleSubmit() {
|
const file = selectedFile.value
|
if (!file) {
|
ElMessage.warning('请先选择要导入的文件')
|
return
|
}
|
if (!validateFile(file)) {
|
return
|
}
|
uploading.value = true
|
uploadRef.value.submit()
|
}
|
|
function handleSuccess(response) {
|
uploading.value = false
|
if (response && response.code != null && response.code !== 200) {
|
ElMessage.error(response.msg || '导入失败')
|
return
|
}
|
ElMessage.success('导入成功')
|
visible.value = false
|
uploadRef.value?.clearFiles()
|
selectedFile.value = null
|
emit('success', response)
|
}
|
|
function handleError() {
|
uploading.value = false
|
ElMessage.error('导入失败，请检查文件格式和内容后重试')
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style scoped>
|
.template-tip {
|
display: flex;
|
align-items: center;
|
flex-wrap: nowrap;
|
gap: 4px;
|
margin-bottom: 12px;
|
padding: 8px 12px;
|
border-radius: 4px;
|
background: var(--el-color-primary-light-9);
|
color: var(--el-text-color-regular);
|
font-size: 13px;
|
}
|
|
.template-tip > span {
|
white-space: nowrap;
|
}
|
|
.template-tip .el-button {
|
flex-shrink: 0;
|
margin-left: 0;
|
}
|
|
.upload-tips {
|
margin-top: 10px;
|
color: var(--el-text-color-secondary);
|
font-size: 12px;
|
line-height: 20px;
|
}
|
</style>
|
