签入版本

RXThinkCMF_Laravel13_AntdVue/zh/frontend/excel-components.md

@@ -8,7 +8,7 @@
 
 ```vue
 <template>
-  <el-button @click="handleImport">导入</el-button>
+  <a-button @click="handleImport">导入</a-button>
   <ImportExcel @success="onImportSuccess" />
 </template>
 
@@ -24,32 +24,38 @@ const onImportSuccess = (data) => {
 
 :::tip 前端解析 vs 后端导入
 - **前端解析（本组件）**：`xlsx` 库本地解析，适合导入前预览、无业务校验的场景；
-- **后端导入（推荐）**：`el-upload` 直传 `/api/{module}/import`，由 Service 逐行 `add()`（字典反查、唯一校验、事务隔离、错误行明细），见 [7.4 数据导入导出](/zh/tools/excel.html)。
+- **后端导入（推荐）**：`a-upload` 直传 `/api/{module}/import`，由 Service 逐行 `add()`（字典反查、唯一校验、事务隔离、错误行明细），见 [7.4 数据导入导出](/zh/tools/excel.html)。
 :::
 
 ### 后端导入对接
 
 ```vue
 <template>
-  <el-upload
+  <a-upload
     :action="'/api/example/import'"
     :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleImportSuccess"
+    :show-upload-list="false"
     accept=".xls,.xlsx"
+    @change="handleChange"
   >
-    <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;
-    if (errors.length === 0) {
-      ElMessage.success(`成功导入 ${count} 条数据`);
-    } else {
-      ElMessage.warning(`成功 ${count} 条，失败 ${errors.length} 条`);
-      // errors: [{ row: 3, name: '...', reason: '...' }]
+import { message } from 'ant-design-vue';
+
+const handleChange = ({ file }) => {
+  if (file.status === 'done') {
+    const response = file.response;
+    if (response.code === 0) {
+      const { count, errors } = response.data;
+      if (errors.length === 0) {
+        message.success(`成功导入 ${count} 条数据`);
+      } else {
+        message.warning(`成功 ${count} 条，失败 ${errors.length} 条`);
+        // errors: [{ row: 3, name: '...', reason: '...' }]
+      }
     }
   }
 };