✨ feat: 添加批量导入功能及文件验证

src/views/language/languageTranslate.vue

@@ -19,7 +19,7 @@
         <div class="add-item">
             <el-button type="success" @click="handleAdd">添加</el-button>
             <!-- 后续需求 -->
-            <!-- <el-button class="add-item-export" @click="handleBatchImport">批量导入</el-button> -->
+            <el-button class="add-item-export" @click="handleBatchImport">批量导入</el-button>
         </div>
 
         <div>
@@ -148,16 +148,9 @@
 
         <!-- 分页组件 -->
         <div style="margin-top: 10px;display: flex;">
-            <el-pagination 
-                background 
-                v-model:current-page="pagination.pageNum" 
-                v-model:page-size="pagination.pageSize"
-                layout="total, sizes, prev, pager, next, jumper" 
-                :total="pagination.total" 
-                style="margin-top: 1vh;"
-                @size-change="handleSizeChange" 
-                @current-change="handleCurrentChange" 
-            />
+            <el-pagination background v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
+                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" style="margin-top: 1vh;"
+                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
         </div>
     </el-card>
 
@@ -167,9 +160,7 @@
 
     <!-- 编辑对话框 -->
     <el-dialog v-model="showEditDialog" :title="editForm.id ? '编辑翻译' : '新增翻译'" width="30vw" draggable
-        :close-on-click-modal="false"
-        style="background-color: rgb(243,250,254);"
-        >
+        :close-on-click-modal="false" style="background-color: rgb(243,250,254);">
         <el-form :model="editForm" label-width="120px">
             <el-form-item label="原文（中文）：">
                 <el-input v-model="editForm.chineseSimplified" placeholder="请输入原文内容" show-word-limit />
@@ -206,21 +197,16 @@
     </el-dialog>
 
     <!-- 批量导入对话框 -->
-    <el-dialog v-model="showImportDialog" title="批量导入" width="40vw" draggable>
-        <div style="margin-bottom: 20px;">
-            <el-text>下载导入模板：</el-text>
-            <el-button type="text" @click="downloadTemplate">中文/英文/泰语/繁体中文/马来语/越南语模板</el-button>
-        </div>
-
-        <el-upload class="upload-demo" drag action="#" :auto-upload="false" :on-change="handleFileChange"
-            :show-file-list="false">
+    <el-dialog v-model="showImportDialog" title="导入" width="40vw" draggable>
+        <el-upload class="upload-demo" drag action="#" :auto-upload="false" :on-change="handleFileChange" limit="1"
+            :on-exceed="handleExceed">
             <el-icon class="el-icon--upload"><upload-filled /></el-icon>
             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         </el-upload>
 
         <template #footer>
             <el-button @click="showImportDialog = false">取消</el-button>
-            <el-button type="primary" @click="handleImport">导入</el-button>
+            <el-button type="primary" :loading="importLoading" @click="handleImport">导入</el-button>
         </template>
     </el-dialog>
 </template>
@@ -273,7 +259,9 @@ const editForm = ref({
     configTime: new Date()
 })
 
-
+// 导入相关变量
+const uploadFile = ref(null)
+const importLoading = ref(false)
 
 // 方法定义 防御性编程：函数内部再次检查可以确保即使在其他调用场景中也能正确处理数据
 const truncateText = (text) => {
@@ -472,22 +460,72 @@ const handleBatchImport = () => {
     showImportDialog.value = true
 }
 
-// 下载模板
-const downloadTemplate = () => {
-    // 这里实现下载模板的逻辑
-    ElMessage.info('模板下载功能待实现')
-}
-
 // 文件变化处理
 const handleFileChange = (file) => {
-    // 这里处理文件上传逻辑
-    console.log('文件变化:', file)
+    // 验证文件类型
+    if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' &&
+        file.raw.type !== 'application/vnd.ms-excel') {
+        ElMessage.error('只能上传Excel文件')
+        return
+    }
+    // 验证文件大小（限制为5MB）
+    if (file.raw.size > 5 * 1024 * 1024) {
+        ElMessage.error('文件大小不能超过5MB')
+        return
+    }
+    // 存储文件
+    uploadFile.value = file.raw
+    ElMessage.success('文件选择成功')
 }
+// 添加文件超出限制的处理函数
+const handleExceed = (files, fileList) => {
+  ElMessage.warning('最多只能上传一个文件');
+};
+
 
 // 导入处理
-const handleImport = () => {
-    // 这里实现导入逻辑
-    ElMessage.info('导入功能待实现')
+const handleImport = async () => {
+    if (!uploadFile.value) {
+        ElMessage.warning('请先选择要导入的文件')
+        return
+    }
+
+    importLoading.value = true
+
+    try {
+        const formData = new FormData()
+        formData.append('file', uploadFile.value)
+
+        const res = await request({
+            url: '/language/batchImport',
+            method: 'POST',
+            data: formData,
+            headers: {
+                'Content-Type': 'multipart/form-data' // 重要：设置正确的请求头
+            }
+        })
+
+        if (res.code === 200) {
+            ElMessage.success(`导入成功`)
+            // 刷新菜单树（与保存、删除操作保持一致）
+            await getMenuTree()
+            // 触发页面刷新以重新加载数据
+            setTimeout(() => {
+                window.location.reload()
+            }, 500)
+            // 关闭导入对话框
+            showImportDialog.value = false
+            // 清空上传文件
+            uploadFile.value = null
+        } else {
+            ElMessage.error(res.msg || '导入失败')
+        }
+    } catch (error) {
+        console.error('导入失败:', error)
+        ElMessage.error('导入失败，请检查网络或文件格式')
+    } finally {
+        importLoading.value = false
+    }
 }
 
 // 分页处理