大良网站设计,杨振峰网站开发,网页编辑用什么软件好,东营网站制作一、导入功能相关代码分析 相关变量定义 importVisible#xff1a;这是一个ref类型的响应式变量#xff0c;用于控制导入对话框的显示与隐藏#xff0c;初始值为false。当用户点击 “导入” 按钮时#xff0c;会尝试将其值设为true来显示导入对话框#xff0c;若出现异常则…一、导入功能相关代码分析 相关变量定义 importVisible这是一个ref类型的响应式变量用于控制导入对话框的显示与隐藏初始值为false。当用户点击 “导入” 按钮时会尝试将其值设为true来显示导入对话框若出现异常则提示相应错误信息。 file同样是ref类型的变量用于存储用户选择要上传的文件对象后续在文件上传等操作中会以此文件对象作为基础数据进行处理。 pre_importref类型的变量作为一个标志位在文件预览及相关流程中起到控制作用初始值为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’ }),
