@skyfox2000/webui 1.3.4 → 1.3.6

package/src/components/content/dialog/excelForm.vue

@@ -1,24 +1,124 @@
+<!--
+ExcelForm 组件功能说明
+====================
+
+功能概述：
+---------
+ExcelForm是一个用于Excel文件上传、预览、验证和批量数据处理的Vue组件。
+支持Excel和CSV文件格式，提供完整的文件验证、错误标记和数据上传功能。
+
+主要功能：
+---------
+1. 文件上传
+   - 支持Excel(.xlsx/.xls)和CSV文件上传
+   - 可配置允许的文件类型(excel/csv/both)
+   - 文件类型自动检测和验证
+
+2. Excel预览
+   - 实时预览上传的Excel文件内容
+   - 支持Excel和CSV文件的预览显示
+   - 使用VueOfficeExcel组件进行渲染
+
+3. 数据验证
+   - 格式验证：根据配置的验证规则检查数据格式
+   - 重复验证：检查指定字段的重复数据
+   - 本地验证：在客户端进行基础验证
+   - 服务器验证：调用后端API进行深度验证
+
+4. 错误标记
+   - 格式错误：用红色标记异常单元格
+   - 重复错误：用黄橙色标记重复数据
+   - 双重错误：用深红色标记同时存在格式和重复问题的单元格
+   - 生成带标记的Excel文件供用户查看
+
+5. 批量数据处理
+   - 将Excel数据转换为JSON格式
+   - 支持字段映射和数据转换
+   - 批量上传到服务器
+
+组件属性：
+----------
+- title: 对话框标题
+- gridCtrl: 表格控制器，用于数据管理
+- excelCtrl: Excel表单控制器，管理表单状态
+- enableUpload: 是否启用文件上传功能
+- uploadParams: 文件上传参数配置
+- excelFieldMap: Excel字段映射配置
+- fileField: 文件信息字段名
+- excelBatchField: Excel批量数据字段名
+- saveText: 确认按钮文字
+- cancelText: 取消按钮文字
+- previewUrl: 外部预览地址
+- fileType: 允许的文件类型(excel/csv/both)
+
+验证规则：
+----------
+- 格式验证：支持多种验证规则(required, email, phone等)
+- 重复验证：支持单字段或多字段组合的重复检查
+- 服务器验证：可配置后端API进行远程重复检查
+
+使用示例：
+----------
+<ExcelForm
+  title="批量导入用户"
+  :gridCtrl="userGridCtrl"
+  :excelCtrl="userExcelCtrl"
+  :uploadParams="{
+    uploadUrl: '/api/users/import',
+    duplicateRules: ['email', 'phone'],
+    duplicateUrl: '/api/users/check-duplicate'
+  }"
+  :excelFieldMap="{
+    '姓名': 'name',
+    '邮箱': 'email',
+    '电话': 'phone'
+  }"
+  fileType="both"
+/>
+
+技术实现：
+----------
+- 基于Vue 3 Composition API开发
+- 使用Ant Design Vue组件库
+- 集成VueOfficeExcel进行Excel预览
+- 支持CSV到Excel的格式转换
+- 异步验证和错误处理
+- 响应式状态管理
+
+错误处理：
+----------
+- 文件格式错误提示
+- 验证失败详细说明
+- 网络请求异常处理
+- 用户友好的错误信息显示
+
+状态管理：
+----------
+- 文件上传状态
+- 验证进度状态
+- 错误状态管理
+- 加载状态控制
+-->
+
 <script setup lang="ts">
 import { watch, ref, onMounted, computed } from 'vue';
-import { Button, Loading } from '../../common';
-import { Modal, Space, Upload, Alert } from 'ant-design-vue';
+import { Button, Loading, Alert } from '../../common';
+import { Modal, Space, Upload } from 'ant-design-vue';
 import {
    EditorControl,
    GridControl,
-   validateExcel,
    getRuleTexts,
-   checkExcelDuplicates,
    AsyncUploader,
    UploadStatus,
    doSave,
-   doQuery,
    ExcelFileParams,
    processExcelFile,
    path,
    UploadFile,
 } from '@/index';
-import { csvToExcelView } from '@/utils/excel-view';
-import { AnyData, ResStatus, IUrlInfo, httpGet, ApiResponse } from '@skyfox2000/fapi';
+import { validateExcelUnified } from '@/utils/form-excel';
+import { loadPreviewFile } from '@/utils/excel-preview';
+import { AnyData, ResStatus, IUrlInfo } from '@skyfox2000/fapi';
 import message from 'vue-m-message';
 //引入相关样式
 import type { UploadProps } from 'ant-design-vue';
@@ -28,63 +128,77 @@ import '@vue-office/excel/lib/index.css';
 type AlertType = 'success' | 'info' | 'warning' | 'error';
 type FileType = 'excel' | 'csv' | 'both';
 
-const props = defineProps<{
-   /**
-    * 标题
-    */
-   title: String;
-   /**
-    * 来源表格控制器
-    */
-   gridCtrl?: GridControl<AnyData>;
-   /**
-    * 当前表单控制器
-    */
-   excelCtrl: EditorControl<AnyData>;
-   /**
-    * 文件上传参数
-    */
-   uploadParams?: ExcelFileParams;
-   /**
-    * 表格字段映射
-    * - 表头映射字段
-    */
-   excelFieldMap?: Record<string, string>;
-   /**
-    * Excel文件信息字段
-    */
-   fileField?: string;
-   /**
-    * Excel批量数据字段
-    * - Excel数据列表转换后的上传字段
-    */
-   excelBatchField?: string;
-   /**
-    * 确认按钮文字，空字符串则不显示
-    */
-   saveText?: string;
-   /**
-    * 取消按钮文字，空字符串则不显示
-    */
-   cancelText?: string;
-   /**
-    * 外部预览地址
-    */
-   previewUrl?: IUrlInfo;
-   /**
-    * 允许的文件类型：excel(仅Excel) | csv(仅CSV) | both(都允许)
-    */
-   fileType?: FileType;
-}>();
+const props = withDefaults(
+   defineProps<{
+      /**
+       * 标题
+       */
+      title: String;
+      /**
+       * 来源表格控制器
+       */
+      gridCtrl?: GridControl<AnyData>;
+      /**
+       * 当前表单控制器
+       */
+      excelCtrl: EditorControl<AnyData>;
+      /**
+       * 是否启用文件上传
+       */
+      enableUpload?: boolean;
+      /**
+       * 文件上传参数
+       */
+      uploadParams?: ExcelFileParams;
+      /**
+       * 表格字段映射
+       * - 表头映射字段
+       */
+      excelFieldMap?: Record<string, string>;
+      /**
+       * Excel文件信息字段
+       */
+      fileField?: string;
+      /**
+       * Excel批量Record数据字段名
+       * - Excel数据列表转换后的上传字段
+       */
+      excelRecordsKey?: string;
+      /**
+       * Excel批量Row数据字段
+       */
+      excelRowsKey?: string;
+      /**
+       * 确认按钮文字，空字符串则不显示
+       */
+      saveText?: string;
+      /**
+       * 取消按钮文字，空字符串则不显示
+       */
+      cancelText?: string;
+      /**
+       * 外部预览地址
+       */
+      previewUrl?: IUrlInfo;
+      /**
+       * 允许的文件类型：excel(仅Excel) | csv(仅CSV) | both(都允许)
+       */
+      fileType?: FileType;
+   }>(),
+   {
+      enableUpload: true,
+   },
+);
 
 const excelCtrl = props.excelCtrl;
 const open = ref<boolean>(false);
 const excelUrl = ref('');
 const fileList = ref<any[]>([]);
 const fileName = ref('');
-const validating = ref(true); // 表示正在验证状态
+
 // 是否为预览模式 - 改为计算属性
 const isPreviewMode = computed(() => !!props.previewUrl);
+const enableUpload = computed(() => props.enableUpload);
 
 // 计算文件类型限制
 const fileAccept = computed(() => {
@@ -126,20 +240,12 @@ watch(
       open.value = excelCtrl.visible.value;
       // 当对话框打开时，先清空表格内容
       if (open.value) {
-         // 清空之前的数据
-         excelUrl.value = '';
-         fileName.value = '';
-         validating.value = true;
-         validationMsg.value = '待验证数据规则';
-         validationType.value = 'warning';
-         duplicateMsg.value = '待验证重复数据';
-         duplicateType.value = 'warning';
-         excelError.value = false;
-         duplicateError.value = false;
+         // 使用clearAll方法初始化
+         clearAll();
 
          // 然后检查是否有预览地址
          if (props.previewUrl) {
-            loadPreviewFile();
+            loadPreviewFileLocal();
          }
       }
    },
@@ -148,6 +254,11 @@ watch(
    () => open.value,
    () => {
       excelCtrl.visible.value = open.value;
+      // 当对话框关闭时，重置所有状态
+      if (!open.value) {
+         // 使用clearAll方法初始化
+         clearAll();
+      }
    },
 );
 
@@ -156,140 +267,42 @@ watch(
    () => {
       // 当预览地址变化且对话框是打开状态时，重新加载预览文件
       if (open.value && props.previewUrl) {
-         loadPreviewFile();
+         loadPreviewFileLocal();
       }
    },
    { deep: true },
 );
 
 const uploadParams = ref(props.uploadParams);
-const uploadUrl = ref(uploadParams.value?.uploadUrl);
-const duplicateRules = ref(uploadParams.value?.duplicateRules);
-const duplicateUrl = ref(uploadParams.value?.duplicateUrl);
+const uploadUrl = computed(() => uploadParams.value?.uploadUrl);
+const duplicateRules = computed(() => uploadParams.value?.duplicateRules);
+const duplicateUrl = computed(() => uploadParams.value?.duplicateUrl);
 
 // 加载预览文件
-const loadPreviewFile = async () => {
+const loadPreviewFileLocal = async () => {
    if (!props.previewUrl || !excelCtrl) return;
 
+   excelCtrl.isFormLoading.value = true;
    try {
-      let result: ApiResponse<AnyData> | null = null;
-      excelCtrl.isFormLoading.value = true;
-
-      // 根据请求方法选择不同的处理方式
-      if (props.previewUrl.method === 'GET') {
-         // 使用 httpGet 方法处理 GET 请求
-         const getUrl: IUrlInfo = {
-            ...props.previewUrl,
-            method: 'GET' as const,
-            api: props.previewUrl.api || excelCtrl.page.api,
-            authorize: props.previewUrl.authorize ?? excelCtrl.page.authorize,
-         };
-
-         result = await httpGet(getUrl);
-      } else {
-         // 使用 doQuery 处理 POST 请求
-         const queryParams = props.previewUrl.params;
-         result = await doQuery(excelCtrl, {
-            url: props.previewUrl,
-            urlKey: 'preview',
-            params: queryParams,
-            hideErrorToast: true,
-         });
-      }
-
-      // 原始模式下，result 就是原始数据，不是 ApiResponse 格式
-      if (props.previewUrl.raw) {
-         // 原始模式：直接处理返回的数据
-         await handleFileData(result);
-      } else {
-         // 标准模式：检查 ApiResponse 格式
-         if (result?.status === ResStatus.SUCCESS && result.data) {
-            const data = result.data;
-            // 处理返回的文件数据
-            await handleFileData(data);
-         } else {
-            throw new Error(result?.msg || '文件加载失败');
-         }
+      const result = await loadPreviewFile(props.previewUrl, excelCtrl);
+      if (result.success) {
+         excelUrl.value = result.blobUrl!;
+         fileName.value = result.fileName!;
       }
    } catch (error: any) {
       console.error('预览文件加载错误:', error);
       message.error('文件加载失败：' + (error?.message || '未知错误'));
    } finally {
-      excelCtrl.isFormLoading.value = false;
-   }
-};
-
-// CSV内容处理的公共方法
-const processCsvContent = async (content: string, filename: string = 'preview.csv') => {
-   const csvResult = await csvToExcelView(content, filename);
-   if (csvResult.success) {
-      excelUrl.value = csvResult.blobUrl!;
-      fileName.value = csvResult.fileName!;
-   } else {
-      throw new Error(csvResult.error || 'CSV格式处理失败');
-   }
-};
-
-// Excel内容处理的公共方法
-const processExcelContent = (content: string, mimeType?: string, filename: string = '预览文件.xlsx') => {
-   const type = mimeType || 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
-   excelUrl.value = `data:${type};base64,${content}`;
-   fileName.value = filename;
-};
-
-// 判断是否为CSV格式的内容
-const isCsvContent = (data: string) => data.includes(',') || data.includes('\n');
-
-// 判断是否为CSV类型
-const isCsvType = (type?: string, filename?: string) => 
-   type === 'text/csv' || filename?.toLowerCase().includes('.csv');
-
-// 判断是否为Excel类型  
-const isExcelType = (type?: string, filename?: string) => 
-   type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
-   type === 'application/vnd.ms-excel' ||
-   filename?.toLowerCase().match(/\.(xlsx|xls)$/);
-
-// 处理文件数据的统一方法
-const handleFileData = async (data: any) => {
-   // 原始模式：直接处理文件内容
-   if (props.previewUrl?.raw) {
-      if (typeof data === 'string') {
-         if (isCsvContent(data)) {
-            await processCsvContent(data);
-         } else {
-            processExcelContent(data);
-         }
-      } else if (data instanceof ArrayBuffer || data instanceof Uint8Array) {
-         const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
-         excelUrl.value = URL.createObjectURL(blob);
-         fileName.value = '预览文件.xlsx';
-      } else {
-         throw new Error('不支持的原始文件格式');
-      }
-      return;
-   }
-
-   // 标准模式：处理结构化数据
-   if (data.Content && data.Type) {
-      if (isCsvType(data.Type, data.FileName)) {
-         await processCsvContent(data.Content, data.FileName || 'preview.csv');
-      } else if (isExcelType(data.Type, data.FileName)) {
-         processExcelContent(data.Content, data.Type, data.FileName || '预览文件.xlsx');
-      } else {
-         processExcelContent(data.Content);
-      }
-   } else if (data.url) {
-      excelUrl.value = data.url;
-      fileName.value = data.fileName || '预览文件.xlsx';
-   } else if (typeof data === 'string') {
-      await processCsvContent(data);
-   } else {
-      throw new Error('不支持的文件格式');
+      setTimeout(() => {
+         excelCtrl.isFormLoading.value = false;
+      }, 1000);
    }
 };
 
 const dialogUpload = async () => {
+   // 确保使用最新的uploadParams
+   uploadParams.value = props.uploadParams;
+
    const url = uploadUrl.value;
    if (!url) {
       message.error('未配置文件上传地址！');
@@ -332,18 +345,13 @@ const dialogUpload = async () => {
 
       // 使用上传器的 uploadFile 方法上传文件
       const abortController = new AbortController();
-      try {
-         await uploader.uploadFile(uploadFile, abortController.signal, (percent) => {
-            uploadFile.percent = percent;
-         });
-
+      const uploadRes = await uploader.uploadFile(uploadFile, abortController.signal, (percent) => {
+         uploadFile.percent = percent;
+      });
+      if (uploadRes.status === UploadStatus.Success) {
          // 上传成功后调用 dialogSave 方法
          message.success('文件上传成功，开始业务处理！');
          dialogSave(uploadFile);
-      } catch (uploadError: any) {
-         console.error('文件上传错误：', uploadError);
-         message.error(uploadError?.message || '文件上传失败，请稍后再试！');
-         throw uploadError; // 向外层抛出错误
       }
    } catch (error: any) {
       console.error('上传处理错误：', error);
@@ -356,11 +364,11 @@ const dialogUpload = async () => {
 const dialogSave = async (uploadFile: UploadFile) => {
    if (excelCtrl.formData.value) {
       // 使用 doSave 方法保存数据
-      if (props.excelBatchField) {
+      if (props.excelRecordsKey || props.excelRowsKey) {
          // 获取Excel数据，并转换成指定数据对象结构
          const excelFileData = await processExcelFile(excelBuffer.value!);
          if (!excelFileData) return null;
-         const { excelData } = excelFileData;
+         const { excelData, excelRows } = excelFileData;
          const excelDataList = excelData.map((row: Record<string, AnyData>) => {
             const result: Record<string, AnyData> = {};
             for (const key in row) {
@@ -371,29 +379,37 @@ const dialogSave = async (uploadFile: UploadFile) => {
             }
             return result;
          });
-         excelCtrl.formData.value[props.excelBatchField] = excelDataList;
+         if (props.excelRecordsKey) excelCtrl.formData.value[props.excelRecordsKey] = excelDataList;
+         if (props.excelRowsKey) excelCtrl.formData.value[props.excelRowsKey] = excelRows;
       }
 
       const fileField = props.fileField ?? 'FileInfo';
       excelCtrl.formData.value[fileField] = uploadFile;
 
-      if (excelCtrl.beforeSave) {
-         excelCtrl.beforeSave();
+      // 构建Query对象，如果未配置primaryKey则Query为空对象
+      const query: Record<string, any> = {};
+      if (excelCtrl.primaryKey && excelCtrl.formData.value[excelCtrl.primaryKey] !== undefined) {
+         query[excelCtrl.primaryKey] = excelCtrl.formData.value[excelCtrl.primaryKey];
       }
 
-      const postData = {
+      const saveData = {
          Data: {
             ...excelCtrl.formData.value,
          },
-         Query: {
-            [props.excelCtrl.primaryKey]: excelCtrl.formData.value[props.excelCtrl.primaryKey],
-         },
+         Query: query,
       };
 
+      if (excelCtrl.beforeSave) {
+         const result = excelCtrl.beforeSave(saveData);
+         if (result === false) {
+            return;
+         }
+      }
+
       excelCtrl.isFormSaving.value = true;
       try {
          const result = await doSave(props.excelCtrl, {
-            params: postData,
+            params: saveData,
             urlKey: 'save',
             url: props.excelCtrl.saveUrl,
          });
@@ -424,64 +440,57 @@ const originalFileType = ref<string>(''); // 跟踪原始文件类型
 /**
  * 执行数据验证逻辑
  * @param buffer 要验证的ArrayBuffer
- * @returns 验证是否通过
  */
-const performDataValidation = async (buffer: ArrayBuffer): Promise<boolean> => {
+const performDataValidation = async (buffer: ArrayBuffer): Promise<void> => {
    const gridCtrl = props.gridCtrl;
-   if (!gridCtrl) return false;
-
-   // 先进行数据验证
-   const { hasError, errBlob } = await validateExcel(buffer, excelCtrl.formRules.value);
-
-   // 有验证错误
-   if (hasError) {
-      if (errBlob) {
-         excelError.value = true;
-         validating.value = false;
-         validationMsg.value = '数据验证失败';
-         validationType.value = 'error';
-         const blobUrl = URL.createObjectURL(errBlob);
-         excelUrl.value = blobUrl;
-      }
-      return false; // 验证失败则结束
-   } else {
-      // 验证成功
-      validationMsg.value = '数据验证成功';
-      validationType.value = 'success';
-   }
+   if (!gridCtrl) return;
 
-   // 无验证错误，继续验证重复数据
-   if (duplicateRules.value && duplicateRules.value.length > 0 && duplicateUrl.value) {
-      try {
-         // 检测重复数据
+   // 确保使用最新的uploadParams
+   uploadParams.value = props.uploadParams;
+
+   try {
+      // 配置重复检查URL
+      if (duplicateUrl.value) {
          if (!duplicateUrl.value.api) duplicateUrl.value.api = gridCtrl.page.api;
          if (duplicateUrl.value.authorize === undefined) duplicateUrl.value.authorize = gridCtrl.page.authorize;
+      }
 
-         const { hasError, errBlob } = await checkExcelDuplicates(buffer, duplicateRules.value, duplicateUrl.value);
-         if (hasError) {
-            // 有重复数据
-            if (errBlob) {
-               duplicateError.value = true;
-               duplicateMsg.value = '检测到重复数据';
-               duplicateType.value = 'error';
-               const blobUrl = URL.createObjectURL(errBlob);
-               excelUrl.value = blobUrl;
-            }
-            return false;
-         } else {
-            // 无重复数据
-            duplicateError.value = false;
-            duplicateMsg.value = '数据验证通过';
-            duplicateType.value = 'success';
+      // 统一验证（格式验证和重复验证）
+      const {
+         hasError,
+         errBlob,
+         validationMsg: valMsg,
+         duplicateMsg: dupMsg,
+      } = await validateExcelUnified(buffer, excelCtrl.formRules.value, duplicateRules.value, duplicateUrl.value);
+
+      // 更新验证状态
+      validationMsg.value = valMsg;
+      duplicateMsg.value = dupMsg;
+
+      if (hasError) {
+         // 有验证错误
+         if (errBlob) {
+            excelError.value = true;
+            duplicateError.value = true;
+            validationType.value = 'error';
+            duplicateType.value = 'error';
+            const blobUrl = URL.createObjectURL(errBlob);
+            excelUrl.value = blobUrl;
          }
-      } catch (error) {
-         duplicateMsg.value = '重复检测异常';
-         duplicateType.value = 'error';
-         return false;
+      } else {
+         // 验证成功
+         excelError.value = false;
+         duplicateError.value = false;
+         validationType.value = 'success';
+         duplicateType.value = 'success';
+         // 验证成功时，excelUrl会在beforeUpload中设置
       }
+   } catch (error) {
+      validationMsg.value = '验证异常';
+      duplicateMsg.value = '验证异常';
+      validationType.value = 'error';
+      duplicateType.value = 'error';
    }
-
-   return true; // 验证通过
 };
 
 // 上传前处理函数
@@ -492,6 +501,9 @@ const beforeUpload: UploadProps['beforeUpload'] = async (file) => {
       return;
    }
 
+   // 更新uploadParams引用，确保使用最新参数
+   uploadParams.value = props.uploadParams;
+
    const isExcel =
       file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
       file.type === 'application/vnd.ms-excel';
@@ -524,19 +536,13 @@ const beforeUpload: UploadProps['beforeUpload'] = async (file) => {
    }
 
    try {
-      // 设置文件名和原始文件类型
+      // 重新选择文件后，初始化显示内容
+      clearAll();
+
+      // 在清理后重新设置文件相关信息
       fileName.value = file.name;
       originalFileType.value = isCsv ? 'text/csv' : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
 
-      // 清除之前的错误状态并设置为验证中
-      excelError.value = false;
-      duplicateError.value = false;
-      validating.value = true;
-      validationMsg.value = '待验证数据规则';
-      validationType.value = 'warning';
-      duplicateMsg.value = '待验证重复数据';
-      duplicateType.value = 'warning';
-
       if (isCsv) {
          // 处理CSV文件 - 完整验证流程同Excel
          const csvBuffer = await file.arrayBuffer();
@@ -558,15 +564,14 @@ const beforeUpload: UploadProps['beforeUpload'] = async (file) => {
          excelBuffer.value = convertedExcelBuffer;
 
          // 执行统一的验证流程
-         const isValidationPassed = await performDataValidation(convertedExcelBuffer);
-         if (!isValidationPassed) {
-            return false; // 验证失败则结束
-         }
+         await performDataValidation(convertedExcelBuffer);
 
-         // 所有验证通过，使用已生成的Excel预览
-         excelUrl.value = excelResult.blobUrl!;
+         // 验证完成后显示Excel预览（只有在验证成功时才显示原始文件）
+         if (!excelError.value && !duplicateError.value) {
+            excelUrl.value = excelResult.blobUrl!;
+         }
          fileName.value = excelResult.fileName!;
-         validating.value = false;
+         excelCtrl.isFormLoading.value = false;
          return false;
       }
 
@@ -579,14 +584,13 @@ const beforeUpload: UploadProps['beforeUpload'] = async (file) => {
       reader.onload = async (loadEvent) => {
          if (loadEvent.target) {
             // 执行统一的验证流程
-            const isValidationPassed = await performDataValidation(buffer);
-            if (!isValidationPassed) {
-               return; // 验证失败则结束
-            }
+            await performDataValidation(buffer);
 
-            // 验证通过，显示原始Excel文件
-            excelUrl.value = loadEvent.target.result as string;
-            validating.value = false;
+            // 验证完成后显示Excel预览（只有在验证成功时才显示原始文件）
+            if (!excelError.value && !duplicateError.value) {
+               excelUrl.value = loadEvent.target.result as string;
+            }
+            excelCtrl.isFormLoading.value = false;
          } else {
             message.error('加载文件失败，请检查文件格式！');
          }
@@ -594,7 +598,7 @@ const beforeUpload: UploadProps['beforeUpload'] = async (file) => {
    } catch (error) {
       console.error('文件处理错误:', error);
       message.error('文件处理失败，请检查文件格式！');
-      validating.value = false;
+      excelCtrl.isFormLoading.value = false;
       validationMsg.value = '文件处理错误';
       validationType.value = 'error';
    }
@@ -608,7 +612,6 @@ const validationRules: { field: string; rules: string[] }[] = getRuleTexts(excel
 onMounted(() => {
    const pageCtrl = props.gridCtrl?.page;
    if (pageCtrl && !isPreviewMode.value) {
-      uploadUrl.value = uploadUrl.value ?? pageCtrl.urls.upload;
       // 只有在非预览模式下才检查上传地址
       if (!uploadUrl.value) {
          message.error('未配置文件上传地址！');
@@ -627,56 +630,87 @@ onMounted(() => {
 
    // 如果在挂载时对话框已经是打开状态且是预览模式，则立即加载预览
    if (open.value && props.previewUrl) {
-      loadPreviewFile();
+      loadPreviewFileLocal();
    }
 });
 
+/**
+ * 清空文件选择和表格预览显示内容
+ * 可以从外部调用此方法来重置组件状态
+ */
+const clearAll = () => {
+   // 清空文件相关数据
+   excelUrl.value = '';
+   fileName.value = '';
+   fileList.value = [];
+   excelBuffer.value = null;
+   originalFileType.value = '';
+
+   // 重置验证状态
+   excelCtrl.isFormLoading.value = false;
+   validationMsg.value = '待验证数据规则';
+   validationType.value = 'warning';
+   duplicateMsg.value = '待验证重复数据';
+   duplicateType.value = 'warning';
+   excelError.value = false;
+   duplicateError.value = false;
+
+   // 清空表单数据（如果需要）
+   if (excelCtrl.formData.value) {
+      const fileField = props.fileField ?? 'FileInfo';
+      const batchField = props.excelRecordsKey;
+      const rowField = props.excelRowsKey;
+
+      // 只清空文件相关字段
+      delete excelCtrl.formData.value[fileField];
+      if (batchField) delete excelCtrl.formData.value[batchField];
+      if (rowField) delete excelCtrl.formData.value[rowField];
+   }
+};
+
 const dialogClose = () => {
    excelCtrl.visible.value = false;
 };
+
 const handleError = () => {
-   console.error('渲染失败');
+   // console.error('渲染失败', e);
 };
+
+// 暴露给外部的方法
+defineExpose({
+   clearAll,
+});
 </script>
 <template>
-   <Modal
-      :title="title ?? '文件上传'"
-      v-model:open="open"
-      :wrapClassName="['modal', 'mx-auto', $attrs.width ? 'w-[' + $attrs.width + ']' : ''].join(' ')"
-      :width="940"
-      @close="dialogClose"
-   >
+   <Modal :title="title ?? '文件上传'" v-model:open="open"
+      :wrapClassName="['modal', 'mx-auto', $attrs.width ? 'w-[' + $attrs.width + ']' : ''].join(' ')" :width="940"
+      @close="dialogClose">
       <slot></slot>
       <div v-if="!isPreviewMode" class="mb-4 flex items-center">
-         <Upload :file-list="fileList" :before-upload="beforeUpload" :accept="fileAccept" :showUploadList="true">
-            <Button type="primary">{{ fileTypeTip }}</Button>
+         <slot name="file-before"></slot>
+         <Upload :file-list="fileList" :before-upload="beforeUpload" :accept="fileAccept" :showUploadList="true"
+            :disabled="!enableUpload">
+            <Button type="primary" :disabled="!enableUpload">{{ fileTypeTip }}</Button>
          </Upload>
          <div v-if="excelUrl && fileName" class="ml-3 text-gray-600">
-            <span>{{ fileName }}</span>
+            <Alert :message="fileName" type="info" :show-icon="false" />
          </div>
+         <slot name="file-after"></slot>
       </div>
 
-      <div class="flex gap-4">
+      <div class="flex gap-4 relative">
          <!-- 左侧Excel显示区域 -->
-         <Loading v-if="excelCtrl.isFormLoading" />
-         <div
-            class="flex-shrink-0 relative border border-gray-200 rounded-md overflow-hidden"
-            :class="[validationRules.length === 0 ? 'w-[100%]' : 'w-[80%]']"
-            style="height: 430px"
-         >
-            <VueOfficeExcel
-               :src="excelUrl"
-               @error="handleError"
-               style="width: 100%; height: 100%"
-               :options="{
-                  styles: true,
-                  formatCells: true,
-                  skipStyles: false,
-                  autoStyle: true,
-                  keepOriginalFormat: true,
-                  renderingStyle: 'svg',
-               }"
-            />
+         <Loading size="large" v-if="excelCtrl.isFormLoading.value" />
+         <div class="flex-shrink-0 relative border border-gray-200 rounded-md overflow-hidden"
+            :class="[validationRules.length === 0 ? 'w-[100%]' : 'w-[80%]']" style="height: 430px">
+            <VueOfficeExcel :src="excelUrl" @error="handleError" style="width: 100%; height: 100%" :options="{
+               styles: true,
+               formatCells: true,
+               skipStyles: false,
+               autoStyle: true,
+               keepOriginalFormat: true,
+               renderingStyle: 'svg',
+            }" />
          </div>
 
          <!-- 右侧验证条件和错误信息 -->
@@ -719,13 +753,9 @@ const handleError = () => {
       <template #footer>
          <Space>
             <Button @click="dialogClose">{{ cancelText ?? (isPreviewMode ? '关闭' : '取消') }}</Button>
-            <Button
-               v-if="!isPreviewMode"
-               @click="dialogUpload"
-               type="primary"
+            <Button v-if="!isPreviewMode" @click="dialogUpload" type="primary"
                :loading="excelCtrl?.isFormSaving.value ?? false"
-               :disabled="!excelUrl || excelError || duplicateError || validating"
-            >
+               :disabled="!excelUrl || excelError || duplicateError || excelCtrl.isFormLoading.value">
                {{ saveText ?? '上传文件' }}
             </Button>
          </Space>