签入版本

RXThinkCMF_ThinkPhp8_NaiveVue/zh/tools/excel.md

@@ -378,28 +378,37 @@ public function export(array $params = []): string
 
 ```vue
 <template>
-  <el-upload
+  <n-upload
     :action="'/api/example/import'"
-    :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleImportSuccess"
-    :on-error="handleImportError"
+    :headers="uploadHeaders"
+    @change="handleImportChange"
     accept=".xls,.xlsx"
   >
-    <el-button type="primary">导入</el-button>
-  </el-upload>
+    <n-button type="primary">导入</n-button>
+  </n-upload>
 </template>
 
 <script setup>
-const handleImportSuccess = (response) => {
+import { useMessage } from 'naive-ui';
+
+const message = useMessage();
+const token = localStorage.getItem('access_token');
+const uploadHeaders = { Authorization: `Bearer ${token}` };
+
+const handleImportChange = (data) => {
+  if (data.file.status !== 'finished') return;
+  const response = JSON.parse(data.file.event.target.response);
   if (response.code === 0) {
     const { count, errors } = response.data;
     if (errors.length === 0) {
-      ElMessage.success(`成功导入 ${count} 条数据`);
+      message.success(`成功导入 ${count} 条数据`);
     } else {
-      ElMessage.warning(`成功 ${count} 条，失败 ${errors.length} 条`);
+      message.warning(`成功 ${count} 条，失败 ${errors.length} 条`);
       // 可以展示错误详情
     }
     refreshTable(); // 刷新列表
+  } else {
+    message.error(response.msg || '导入失败');
   }
 };
 </script>