Vue3+ element 实现导入导出

一、导入功能相关代码分析
相关变量定义
importVisible：这是一个ref类型的响应式变量，用于控制导入对话框的显示与隐藏，初始值为false。当用户点击 “导入” 按钮时，会尝试将其值设为true来显示导入对话框，若出现异常则提示相应错误信息。
file：同样是ref类型的变量，用于存储用户选择要上传的文件对象，后续在文件上传等操作中会以此文件对象作为基础数据进行处理。
pre_import：ref类型的变量，作为一个标志位，在文件预览及相关流程中起到控制作用，初始值为false，在特定逻辑执行过程中会根据需要改变其值。
importDialogRef：也是ref类型，用于获取导入对话框组件的引用，方便后续调用组件内部的方法（比如更新导入结果的展示等操作）。
主要函数实现及逻辑
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.downloadPropertyTemplate();
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中的downloadPropertyTemplate方法来获取模板数据，然后将返回的数据包装成Blob对象，并指定合适的文件类型（这里是 Excel 文件格式对应的类型）。接着，根据当前时间戳生成一个唯一的文件名，通过window.URL.createObjectURL创建一个临时的 URL 对象，再调用downloadFile函数进行实际的文件下载操作，最后使用ElMessage组件向用户提示下载成功的消息，告知用户模板下载已顺利完成。
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.importProperties(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: 'attr'
});pre_import.value = false;

} catch (error) {
ElMessage.error(error.response?.data?.msg || error.message || ‘上传失败’);
}
};
该函数负责实际的文件上传操作，接收用户选择的文件对象作为参数。首先将传入的文件对象赋值给file.value保存起来。接着创建一个FormData对象，往里面添加了多个关键信息，包括要上传的文件本身、是否清除现有数据的标识、关联的模型 ID 以及pre_import标志位的值等。之后调用后端DeviceModelApi的importProperties方法将FormData对象中的数据发送到后端进行文件上传处理。在获取后端返回的结果后，会从返回消息中解析出成功导入和失败的记录数量，若失败数量大于 0，则从返回数据中获取错误列表。最后通过导入对话框组件的引用（importDialogRef.value）调用updateImportResult方法来更新导入对话框中展示的导入结果相关信息，比如总记录数、成功记录数、失败记录数、错误列表以及文件类型标识（这里标记为’attr’）等内容，并且将pre_import的值重置为false。若在文件上传过程中出现错误，则通过ElMessage组件向用户提示相应的错误消息，告知用户上传失败。
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组件向用户提示相应的错误信息，告知用户是文件上传环节还是数据获取环节出现了问题，方便用户了解情况。
二、导出功能相关代码分析
handleExport函数
javascript
const handleExport = async () => {
const res = await DeviceModelApi.exportProperties({thing_model_id: props.detailId});
if (res.data.size === 0) {
ElMessage.error(‘暂无数据可导出’);
return;
}
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的exportProperties方法，传入关联的模型 ID（通过props.detailId获取）来获取要导出的数据。接着判断返回的数据大小，如果为 0，意味着没有可导出的数据，此时通过ElMessage组件向用户提示暂无数据可导出的消息，并结束函数执行。若有数据，则将返回的数据包装成Blob对象，设置好对应的文件类型（适用于 Excel 文件格式），然后生成一个包含当前时间戳的唯一文件名，创建一个临时的 URL 对象，再通过downloadFile函数实现实际的文件下载操作，最后向用户提示导出成功的消息，告知用户数据已成功导出。
三、整体交互与流程总结
导入流程：用户点击 “导入” 按钮触发handleImport函数显示导入对话框，在对话框内可选择下载模板（通过handleDownloadTemplate函数），选择好文件后点击提交按钮会触发handleFileUpload函数进行文件上传操作，上传完成后根据结果更新导入对话框的展示内容，并且可以通过 “文件预览” 按钮触发handlePreview函数来查看文件相关内容（前提是已经选择了文件且文件上传等操作按流程执行）。
导出流程：用户点击 “导出” 按钮执行handleExport函数，该函数先从后端获取要导出的数据，若有数据则进行文件格式包装、生成文件名、创建临时 URL 等操作后下载文件，并在相应节点通过ElMessage组件向用户反馈操作结果，如提示暂无数据可导出或者导出成功等消息。
与后端交互：在导入功能的handleDownloadTemplate、handleFileUpload以及导出功能的handleExport等函数中，都调用了后端DeviceModelApi提供的对应方法，传递相应的参数（如模型 ID、文件数据等）进行模板下载、文件上传、数据获取等操作，并根据后端返回的数据进行前端界面的相应处理和展示，实现了前后端的数据交互与功能协同。
界面反馈：整个导入导出过程中，充分利用了ElMessage组件在各个关键操作节点（如下载成功、上传失败、无数据可导出、导出成功等）向用户展示相应的提示信息，使得用户能够清晰地了解操作的执行结果情况，保证了良好的用户交互体验。

重点
接口文档参数设置
// 导出数据
exportProperties: (params) =>
axios({
url: genApiPath(‘/api/device/properties/export/’),
method: ‘get’,
params,
responseType: ‘blob’
}),