<template>
|
<el-button icon="Upload" type="success" @click="dialogVisible = true"
|
>批量导入</el-button
|
>
|
<el-dialog
|
v-model="dialogVisible"
|
title="场景信息批量导入"
|
width="500"
|
:before-close="handleClose"
|
>
|
<el-upload
|
class="upload-demo"
|
drag
|
:limit="1"
|
v-model:file-list="fileList"
|
:auto-upload="false"
|
accept=".xlsx"
|
:on-change="handleChange"
|
:on-exceed="handleExceed"
|
>
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
<div class="el-upload__text">拖动文件或<em>点击上传</em></div>
|
<template #tip>
|
<el-text type="danger" size="small">{{ errMsg }}</el-text>
|
</template>
|
</el-upload>
|
<template #footer>
|
<el-row justify="space-between">
|
<el-button type="primary" plain @click="downloadTemplate"
|
>下载模板</el-button
|
>
|
<div class="dialog-footer">
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button type="primary" @click="uploadFile" :loading="loading"
|
>确定</el-button
|
>
|
</div>
|
</el-row>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import sceneApi from '@/api/fysp/sceneApi';
|
import { ElMessage } from 'element-plus';
|
|
const dialogVisible = ref(false);
|
const fileList = ref([]);
|
const errMsg = ref('');
|
const loading = ref(false);
|
|
function handleChange(file) {
|
console.log(file);
|
const ext = file.name.split('.').pop();
|
if (ext !== 'xlsx') {
|
ElMessage.error('请上传Excel文件');
|
fileList.value.splice(0, 1);
|
return;
|
}
|
fileList.value = [file];
|
}
|
|
function handleExceed(files, fileList) {
|
ElMessage.error('最多只能上传一个文件');
|
}
|
|
function uploadFile() {
|
if (fileList.value.length === 0) {
|
ElMessage.error('请上传文件');
|
return;
|
}
|
const formData = new FormData();
|
loading.value = true;
|
formData.append('file', fileList.value[0].raw);
|
errMsg.value = '';
|
sceneApi
|
.importScene(formData)
|
.then((res) => {
|
dialogVisible.value = false;
|
fileList.value = [];
|
})
|
.catch((err) => {
|
errMsg.value = err;
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
|
function downloadTemplate() {
|
// 创建下载链接
|
const link = document.createElement('a');
|
// 设置public目录下的文件路径
|
link.href = '/现场监管场景信息导入模板.xlsx';
|
// 设置下载文件名
|
link.download = '现场监管场景信息导入模板.xlsx';
|
// 将链接添加到页面
|
document.body.appendChild(link);
|
// 触发点击下载
|
link.click();
|
// 下载完成后移除链接
|
document.body.removeChild(link);
|
}
|
|
function handleClose() {
|
dialogVisible.value = false;
|
fileList.value = [];
|
errMsg.value = '';
|
}
|
</script>
|
