签入版本

RXThinkCMF_ThinkPhp8_AntdVue/zh/tools/excel.md

@@ -378,25 +378,39 @@ public function export(array $params = []): string
 
 ```vue
 <template>
-  <el-upload
+  <a-upload
     :action="'/api/example/import'"
     :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleImportSuccess"
-    :on-error="handleImportError"
+    :before-upload="beforeUpload"
+    :show-upload-list="false"
     accept=".xls,.xlsx"
+    @change="handleImportChange"
   >
-    <el-button type="primary">导入</el-button>
-  </el-upload>
+    <a-button type="primary">导入</a-button>
+  </a-upload>
 </template>
 
 <script setup>
-const handleImportSuccess = (response) => {
-  if (response.code === 0) {
-    const { count, errors } = response.data;
+import { message } from 'ant-design-vue';
+
+// 文件校验：非 xlsx/xls 直接阻止
+const beforeUpload = (file) => {
+  const isXlsx = /\.(xlsx|xls)$/i.test(file.name);
+  if (!isXlsx) {
+    message.warning('只能上传 xls、xlsx 文件');
+    return false;
+  }
+  return true;
+};
+
+// onChange 回调中从 file.response 取上传结果
+const handleImportChange = ({ file }) => {
+  if (file.response?.code === 0) {
+    const { count, errors } = file.response.data;
     if (errors.length === 0) {
-      ElMessage.success(`成功导入 ${count} 条数据`);
+      message.success(`成功导入 ${count} 条数据`);
     } else {
-      ElMessage.warning(`成功 ${count} 条，失败 ${errors.length} 条`);
+      message.warning(`成功 ${count} 条，失败 ${errors.length} 条`);
       // 可以展示错误详情
     }
     refreshTable(); // 刷新列表