一、導入功能相關代碼分析
相關變量定義
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’
}),