一、整体功能概述
这段代码实现了一个基于 Vue 3 和 Element Plus 组件库的文件导入及预览功能模块。主要包含了一个主导入对话框（用于上传文件、展示文件相关信息、进行导入操作等）以及一个用于预览文件内容的预览对话框。支持导入特定格式（.xlsx、.csv）且大小不超过 10M 的文件，能展示导入数据的统计情况并提供预览功能，方便用户在正式导入前查看文件内容。
二、模板结构分析
部分
主导入对话框（el-dialog）：
标题为 “导入”，通过v-model绑定dialogVisible控制显示隐藏，设置了固定宽度且禁止点击模态框关闭。
内部包含文件上传区域（el-upload组件），可拖放文件，限制了文件类型、自动上传行为等，在文件改变时触发handleFileChange方法。
展示了文件类型提示、下载模板提示及链接（点击调用handleDownloadTemplate方法）。
根据是否有上传文件以及上传进度等情况，动态展示文件预览相关信息、导入数据统计情况等内容。
对话框底部定义了 “取消” 和 “确定” 按钮，“确定” 按钮根据上传进度和文件列表情况控制是否可用，点击分别调用handleClose和handleSubmit方法。
预览对话框（el-dialog）：
通过v-model绑定previewVisible控制显示隐藏，设置了标题、宽度、自定义模态框类等属性。
根据importResult.fileText的值（如’attr’或’alarm’），使用不同的el-table结构来展示预览数据，数据来源于previewData。
对话框底部有 “返回” 按钮，点击调用handlePreviewClose方法关闭预览对话框。
父页面
importVisible：一个ref类型的响应式变量，用于控制导入弹窗的显示与隐藏，初始值为false，当用户点击 “导入” 按钮时，会将其设置为true以显示导入弹窗。
file：同样是ref类型变量，用于存储用户选择要上传的文件对象，在后续的文件上传等操作中会使用到该文件。
importDialogRef：ref类型，用于获取导入对话框组件的引用，方便后续调用组件内的方法来更新导入结果等相关操作。
pre_import：ref类型，作为一个标志位，在文件预览等操作流程中起到控制作用，初始值为false，在特定逻辑中会被修改其值。
三、主要函数分析
handleImport函数
javascript
const handleImport = async () => {
try {
importVisible.value = true;
} catch (error) {
console.error(‘导入组件加载失败:’, error);
ElMessage.error(‘导入功能加载失败，请刷新页面重试’);
}
};
这个函数是用户点击 “导入” 按钮时触发的操作。它的主要目的是尝试显示导入弹窗，即将importVisible的值设为true。如果在这个过程中出现错误（比如导入组件加载异常），会在控制台打印错误信息，并通过ElMessage组件向用户提示导入功能加载失败，让用户刷新页面重试。
handleDownloadTemplate函数
javascript
const handleDownloadTemplate = async () => {
const res = await DeviceModelApi.downloadAlarmTemplate();
const blob = new Blob([res.data], {
type: ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet’
});
const filename = 告警知识库导入模板_${new Date().getTime()}.xlsx;
const url = window.URL.createObjectURL(blob);
downloadFile(url, filename);
ElMessage.success(‘下载成功’);
};
此函数用于处理下载导入模板的操作。它首先调用后端DeviceModelApi的downloadAlarmTemplate方法获取模板数据，将返回的数据包装成Blob对象，设置好对应的文件类型（适用于 Excel 文件格式）。接着生成一个唯一的文件名（包含当前时间戳），创建一个临时的 URL 对象，然后通过downloadFile函数实现文件下载，最后向用户提示下载成功的消息。
handleFileUpload函数
javascript
const handleFileUpload = async (uploadFile) => {
file.value = uploadFile;
try {
const formData = new FormData();
formData.append(‘file’, uploadFile);
formData.append(‘clear_existing’, ‘true’);
formData.append(‘thing_model_id’, props.detailId);
formData.append(‘pre_import’, pre_import.value);
const res = await DeviceModelApi.importAlarms(formData);
let str = res.data.msg || '';
const successCount = Number(str.match(/成功导入(\d+)条/)?.[1] || 0);
const failCount = Number(str.match(/失败(\d+)条/)?.[1] || 0);
const totalCount = successCount + failCount;
let errorList = [];
if (failCount > 0) {
errorList = res.data.data.error;
}
// 更新导入对话框的数据
importDialogRef.value?.updateImportResult({
totalCount,
successCount: Number(successCount),
failCount: Number(failCount),
errorList,
fileText: 'alarm'
});
} catch (error) {
ElMessage.error(error.response?.data?.msg || error.message || ‘上传失败’);
}
};
该函数负责实际的文件上传操作，接收用户选择的文件对象作为参数。首先将传入的文件对象赋值给file.value以便后续使用。然后创建一个FormData对象，将文件以及其他相关参数（如是否清除现有数据、关联的模型 ID、预导入标志等）添加进去。接着调用后端DeviceModelApi的importAlarms方法进行文件上传，并处理返回结果：从返回消息中解析出成功导入和失败的记录数量，根据失败数量获取错误列表（如果有），最后通过导入对话框组件的引用调用updateImportResult方法更新导入对话框中显示的导入结果信息，包括总数、成功数、失败数、错误列表以及文件类型标识等内容。若上传过程出现错误，则向用户提示相应的错误消息。
handlePreview函数
javascript
const handlePreview = () => {
if (file.value) {
pre_import.value = true;
handleFileUpload(file.value)
.then(() => {
// 当handleFileUpload执行成功（Promise状态变为resolved）后，调用fetchList
return fetchList();
})
.catch((error) => {
ElMessage.error(error.response?.data?.msg || error.message || ‘文件上传或数据获取失败’);
});
}
};
这个函数用于文件预览功能。它首先判断是否已经选择了文件（即file.value是否有值），如果有文件，则将pre_import的值设为true，接着调用handleFileUpload函数进行文件上传操作。当handleFileUpload执行成功（Promise 状态变为resolved）后，会继续调用fetchList函数来获取相关数据（可能是用于展示预览内容的数据）。如果在整个过程中出现错误（文件上传或者获取数据失败），会通过ElMessage向用户提示相应的错误信息。
<ImportDialog
ref="importDialogRef"
v-model:visible="importVisible"
@success="handleSearch"
@download-template="handleDownloadTemplate"
@submit="handleFileUpload"
@preview="handlePreview"
/>
<template>
<el-dialog
title="导入"
v-model="dialogVisible"
width="600px"
:close-on-click-modal="false"
@close="handleClose"
>
<div class="upload-area">
<el-upload
class="upload-dragger"
drag
action="#"
:auto-upload="false"
:show-file-list="false"
accept=".xlsx,.csv"
:on-change="handleFileChange"
>
<div class="upload-content">
<el-icon class="upload-icon" :size="80"><upload-filled /></el-icon>
<div class="upload-text">
<p>把文件拖放到此处或 <span class="upload-link">重新上传</span></p>
</div>
</div>
</el-upload>
</div>
<p class="file-type-tip text-left">支持扩展名：.xlsx、.csv，文件大小不超过10M</p>
<div class="download-tip text-left">
下载导入模板，根据模板提示完善内容
<el-link type="primary" @click="handleDownloadTemplate">下载模板</el-link>
</div>
<div v-if="fileList.length" class="file-preview">
<div class="file-item">
<div class="file-info">
<div class="file-icon-wrapper">
<span class="file-type-text">csv</span>
</div>
<span class="file-name">{{ fileList[0].name }}</span>
<div class="file-actions">
<el-icon v-if="uploadProgress === 100" class="success-icon" :size="24" color="#67C23A"
><circle-check
/></el-icon>
<el-link
class="preview-link"
type="primary"
v-if="uploadProgress === 100"
@click="handlePreview"
>文件预览</el-link
>
</div>
</div>
<el-progress :percentage="uploadProgress" :show-text="false" class="upload-progress" />
<div class="import-info" v-if="uploadProgress === 100">
<p>共导入数据{{ importResult.totalCount }}条数据...</p>
<p v-if="importResult.failCount > 0" class="error-text">
错误数据{{ importResult.failCount }}条...错误数据将无法导入！
</p>
<p v-if="importResult.successCount > 0">
是否将本次 {{ importResult.successCount }} 条有效数据导入？
</p>
<p v-if="importResult.successCount == 0">
本次0条有效数据，无有效数据无法导入，请重新上传文件！
</p>
</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button
type="primary"
@click="handleSubmit"
:disabled="uploadProgress === 100 && fileList.length ? false : true"
>确定</el-button
>
</div>
</template>
</el-dialog>
<!-- 预览弹窗 -->
<el-dialog
v-model="previewVisible"
title="文件预览"
width="80%"
:modal-class="'preview-dialog'"
:close-on-click-modal="false"
:before-close="handlePreviewClose"
append-to-body
>
<div class="preview-content">
<template v-if="importResult.fileText == 'attr'">
<el-table
:header-cell-style="{
backgroundColor: '#F2F3F5',
fontSize: '14px'
}"
:data="previewData"
height="calc(100vh - 200px)"
style="width: 100%"
>
<el-table-column prop="identifier" label="属性标识" width="180"></el-table-column>
<el-table-column prop="name" label="属性名称" width="180"></el-table-column>
<el-table-column prop="data_type" label="数据类型" width="180">
<template #default="{ row }">
<span>{{
{
int: '整数',
float: '浮点数',
string: '字符串',
bool: '布尔值',
enum: '枚举'
}[row.data_type]
}}</span>
</template>
</el-table-column>
<el-table-column prop="unit" label="单位" width="180">
<template #default="{ row }">
<span>{{ ['int', 'float'].includes(row.data_type) ? row.unit || '' : '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="precision" label="精度" width="180">
<template #default="{ row }">
<span>{{
row.data_type === 'float'
? row.precision
? `小数点后${row.precision}位`
: ''
: '-'
}}</span>
</template>
</el-table-column>
<el-table-column prop="data_source" label="数据来源" width="180">
<template #default="{ row }">
<span>{{
{
gateway: '数采网关',
rule_engine: '规则引擎'
}[row.data_source]
}}</span>
</template>
</el-table-column>
<el-table-column prop="rw_permission" label="读写权限" width="180">
<template #default="{ row }">
<span>{{
{
r: '只读',
w: '只写',
rw: '读写'
}[row.rw_permission]
}}</span>
</template>
</el-table-column>
<el-table-column prop="description" label="属性描述" width="180"></el-table-column>
<el-table-column label="错误类型" width="180">
<template #default="scope">
<span v-if="scope.row.error && scope.row.error.length > 0">{{
scope.row.error[0].error
}}</span>
<span v-else>无错误</span>
</template>
</el-table-column>
</el-table>
</template>
<template v-if="importResult.fileText == 'alarm'">
<el-table
:header-cell-style="{
backgroundColor: '#F2F3F5',
fontSize: '14px'
}"
:data="previewData"
height="calc(100vh - 200px)"
style="width: 100%"
>
<el-table-column prop="identifier" label="告警编码" ></el-table-column>
<el-table-column prop="name" label="告警信息" ></el-table-column>
<el-table-column prop="physical_name" label="关联部位" ></el-table-column>
<el-table-column label="错误类型">
<template #default="scope">
<span v-if="scope.row.error && scope.row.error.length > 0">{{
scope.row.error[0].error
}}</span>
<span v-else>无错误</span>
</template>
</el-table-column>
</el-table>
</template>
</div>
<template #footer>
<div class="preview-footer">
<el-button @click="handlePreviewClose">返回</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import { Upload, CircleCheck } from '@element-plus/icons-vue'
const props = defineProps({
visible: {
type: Boolean,
default: false
}
})
const importResult = ref({
totalCount: 0,
successCount: 0,
failCount: 0,
errorList: [],
fileText: ''
})
// 更新导入结果
const updateImportResult = (result) => {
importResult.value = result
// 当获取到导入结果时，将进度条设置为 100%
uploadProgress.value = 100
}
// 暴露方法给父组件
defineExpose({
updateImportResult
})
const emit = defineEmits(['update:visible', 'success', 'download-template', 'submit', 'preview'])
const dialogVisible = ref(false)
const fileList = ref([])
// 监听弹窗显示状态
watch(
() => props.visible,
(val) => {
dialogVisible.value = val
},
{ immediate: true } // 添加 immediate 选项确保首次渲染时同步状态
)
const uploadProgress = ref(0)
// 文件变化
const handleFileChange = (file) => {
// 检查文件大小
const isLt10M = file.size / 1024 / 1024 < 10
if (!isLt10M) {
ElMessage.error('文件大小不能超过 10MB!')
return
}
fileList.value = [file]
uploadProgress.value = 0
// 模拟上传进度到 90%
const timer = setInterval(() => {
if (uploadProgress.value < 90) {
uploadProgress.value += 10
} else {
clearInterval(timer)
// 触发父组件的事件，传递原始文件对象
emit('submit', file.raw)
}
}, 500)
}
// 移除文件
const handleRemoveFile = (index) => {
fileList.value.splice(index, 1)
}
// 下载模板
const handleDownloadTemplate = () => {
emit('download-template')
}
// 关闭弹窗
const handleClose = () => {
emit('update:visible', false)
fileList.value = []
uploadProgress.value = 0
importResult.value = {
totalCount: 0,
successCount: 0,
failCount: 0,
errorList: [],
fileText: ''
}
// emit('')
}
// 提交
const handleSubmit = () => {
emit('preview')
handleClose()
}
// 预览相关
const previewVisible = ref(false)
const previewData = ref([])
// 预览方法
const handlePreview = async () => {
if (importResult.value.failCount == 0) return
try {
let data = importResult.value.errorList
let tableData = data.map((item) => ({
...item.row,
error: item.error
}))
previewData.value = tableData
previewVisible.value = true
} catch (error) {
ElMessage.error('文件预览失败')
}
}
// 关闭预览弹窗
const handlePreviewClose = () => {
previewVisible.value = false
}
</script>
<style scoped lang="scss">
.upload-area {
border: 1px dashed #dcdfe6;
border-radius: 6px;
text-align: center;
.upload-dragger {
:deep(.el-upload) {
width: 100%;
}
:deep(.el-upload-dragger) {
width: 100%;
height: auto;
border: none;
}
}
.upload-content {
display: flex;
flex-direction: column;
align-items: center;
:deep(.upload-icon) {
color: #c0c4cc;
margin-bottom: 24px;
svg {
width: 80px;
height: 80px;
}
}
.upload-text {
color: #606266;
font-size: 14px;
.upload-link {
color: #409eff;
cursor: pointer;
}
.upload-tip {
font-size: 12px;
color: #909399;
margin-top: 12px;
}
}
}
}
.text-left {
text-align: left;
}
.file-type-tip {
margin-top: 12px;
font-size: 14px;
color: #909399;
}
.download-tip {
margin-top: 16px;
font-size: 14px;
color: #606266;
}
.file-preview {
margin-top: 20px;
padding: 16px;
.file-item {
.upload-progress {
:deep(.el-progress-bar__outer) {
background-color: #e9ecef;
height: 4px !important;
border-radius: 2px;
}
:deep(.el-progress-bar__inner) {
transition: width 0.3s ease;
border-radius: 2px;
background-color: #409eff;
}
:deep(.el-progress__text) {
font-size: 13px;
color: #606266;
}
}
.file-info {
display: flex;
align-items: center;
gap: 12px;
background: #f5f7fa;
padding: 12px;
border-radius: 4px;
.file-icon-wrapper {
display: flex;
align-items: center;
gap: 4px;
background: #409eff;
padding: 4px 8px;
border-radius: 4px;
color: white;
.file-type-icon {
font-size: 16px;
}
.file-type-text {
font-size: 12px;
text-transform: uppercase;
}
}
.file-name {
flex: 1;
font-size: 14px;
color: #606266;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-actions {
display: flex;
align-items: center;
gap: 12px;
.success-icon {
color: #67c23a;
}
.preview-link {
font-size: 14px;
color: #409eff;
text-decoration: none;
&:hover {
opacity: 0.8;
}
}
}
}
.import-info {
margin-top: 10px;
font-size: 14px;
color: #606266;
line-height: 1.8;
.error-text {
color: #f56c6c;
}
}
}
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.preview-dialog-container {
:deep(.el-dialog) {
position: fixed;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
margin: 0 !important;
height: 100vh;
max-height: 100vh;
display: flex;
flex-direction: column;
}
:deep(.el-dialog__body) {
flex: 1;
overflow: hidden;
padding: 10px;
}
:deep(.el-dialog__footer) {
padding: 10px 20px;
border-width: 1px 0px 0px 0px;
border-style: solid;
border-color: #e5e6eb;
}
}
.preview-content {
height: 100%;
}
.preview-footer {
text-align: right;
}
</style>
扫一扫
2045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
