@skyfox2000/webui 1.3.2 → 1.3.4

package/src/utils/excel-view.ts

@@ -0,0 +1,340 @@
+/**
+ * Excel视图预处理工具
+ * 统一处理Excel和CSV数据的显示预处理，支持错误标记
+ */
+
+/**
+ * Excel错误标记单元格
+ */
+export interface ExcelMarkCell {
+   /** 行号（从1开始） */
+   row: number;
+   /** 列号（从1开始） */
+   col: number;
+   /** 标记颜色，默认红色 */
+   color?: string;
+}
+
+/**
+ * Excel标记信息
+ */
+export interface ExcelMarkInfo {
+   /** 要标记的单元格列表 */
+   markCells: ExcelMarkCell[];
+   /** 要标记的表头字段列表 */
+   markHeaders?: string[];
+}
+
+/**
+ * 规范数组数据格式
+ * @interface NormalizedData
+ * @property {string[]} headers - 表头数组，如: ["姓名", "年龄", "地址"]
+ * @property {(string|number|null)[][]} rows - 数据行数组，每行对应headers的值
+ *
+ * @example
+ * {
+ *   headers: ["姓名", "年龄", "地址"],
+ *   rows: [
+ *     ["张三", 25, "北京市"],
+ *     ["李四", 30, "上海市"],
+ *     ["王五", null, "广州市"]
+ *   ]
+ * }
+ */
+export interface NormalizedData {
+   /** 表头数组 */
+   headers: string[];
+   /** 数据行数组，每行为一个数组，对应headers的顺序 */
+   rows: any[][];
+}
+
+/**
+ * Excel预览结果
+ */
+export interface ExcelViewResult {
+   /** 是否成功 */
+   success: boolean;
+   /** blob URL用于预览 */
+   blobUrl?: string;
+   /** 处理后的文件名 */
+   fileName?: string;
+   /** 错误信息 */
+   error?: string;
+}
+
+/**
+ * 将CSV文本转换为规范数组格式
+ * @param csvContent CSV文本内容
+ * @returns 规范数组数据
+ */
+export const csvToNormalized = (csvContent: string): NormalizedData => {
+   const lines = csvContent.split('\n').filter((line) => line.trim() !== '');
+
+   if (lines.length === 0) {
+      return { headers: [], rows: [] };
+   }
+
+   // 简单的CSV解析，处理逗号分隔
+   const allRows = lines.map((line) => {
+      return line.split(',').map((cell) => {
+         const trimmed = cell.trim();
+         // 尝试转换为数字
+         if (trimmed === '' || trimmed === 'null') return null;
+         const num = Number(trimmed);
+         return isNaN(num) ? trimmed : num;
+      });
+   });
+
+   const headers = allRows[0].map((h) => String(h || ''));
+   const rows = allRows.slice(1);
+
+   return { headers, rows };
+};
+
+/**
+ * 将Excel ArrayBuffer转换为规范数组格式
+ * @param excelBuffer Excel文件的ArrayBuffer
+ * @returns 规范数组数据
+ */
+export const excelToNormalized = async (excelBuffer: ArrayBuffer): Promise<NormalizedData> => {
+   try {
+      // 动态导入 exceljs
+      const ExcelJS = await import('exceljs');
+      const workbook = new ExcelJS.default.Workbook();
+      await workbook.xlsx.load(excelBuffer);
+
+      // 获取第一个工作表
+      const worksheet = workbook.worksheets[0];
+      if (!worksheet) {
+         return { headers: [], rows: [] };
+      }
+
+      const headers: string[] = [];
+      const rows: any[][] = [];
+
+      // 提取表头（第一行）
+      worksheet.getRow(1).eachCell((cell) => {
+         let headerValue = '';
+         if (cell.value !== null && cell.value !== undefined) {
+            if (typeof cell.value === 'object') {
+               // 处理RichText类型
+               if ('richText' in cell.value && Array.isArray(cell.value.richText)) {
+                  headerValue = cell.value.richText.map((rt: any) => rt.text || '').join('');
+               } else if ('text' in cell.value && typeof cell.value.text === 'string') {
+                  headerValue = cell.value.text;
+               } else if (cell.value instanceof Date) {
+                  headerValue = cell.value.toLocaleDateString();
+               } else {
+                  headerValue = String(cell.value);
+               }
+            } else {
+               headerValue = String(cell.value);
+            }
+         }
+         headers.push(headerValue);
+      });
+
+      // 提取数据行
+      worksheet.eachRow((row, rowNumber) => {
+         if (rowNumber > 1) {
+            // 跳过表头
+            const rowData: any[] = [];
+            headers.forEach((_, idx) => {
+               const cell = row.getCell(idx + 1);
+               const cellValue = cell.value;
+
+               if (cellValue !== null && cellValue !== undefined) {
+                  if (typeof cellValue === 'object') {
+                     if ('richText' in cellValue && Array.isArray(cellValue.richText)) {
+                        rowData.push(cellValue.richText.map((rt: any) => rt.text || '').join(''));
+                     } else if ('text' in cellValue && typeof cellValue.text === 'string') {
+                        rowData.push(cellValue.text);
+                     } else if (cellValue instanceof Date) {
+                        rowData.push(cellValue);
+                     } else {
+                        rowData.push(cellValue);
+                     }
+                  } else {
+                     rowData.push(cellValue);
+                  }
+               } else {
+                  rowData.push(null);
+               }
+            });
+            rows.push(rowData);
+         }
+      });
+
+      return { headers, rows };
+   } catch (error) {
+      console.error('Excel解析失败:', error);
+      return { headers: [], rows: [] };
+   }
+};
+
+/**
+ * 将规范数组数据转换为Excel预览，支持错误标记
+ * @param data 规范数组数据
+ * @param fileName 文件名
+ * @param markInfo 可选的标记信息
+ * @returns Excel预览结果
+ */
+export const toExcel = async (
+   data: NormalizedData,
+   fileName: string,
+   markInfo?: ExcelMarkInfo,
+): Promise<ExcelViewResult> => {
+   try {
+      // 动态导入 exceljs
+      const ExcelJS = await import('exceljs');
+      const workbook = new ExcelJS.default.Workbook();
+      const worksheet = workbook.addWorksheet('Sheet1');
+
+      const { headers, rows } = data;
+
+      if (headers.length === 0) {
+         throw new Error('数据为空');
+      }
+
+      // 创建错误单元格映射
+      const cellMarkMap = new Map<string, string>();
+      if (markInfo?.markCells) {
+         markInfo.markCells.forEach(({ row, col, color }) => {
+            const cellKey = `${row}-${col}`;
+            cellMarkMap.set(cellKey, color || 'FFFF0000');
+         });
+      }
+
+      // 添加表头
+      const headerRow = worksheet.getRow(1);
+      headers.forEach((header, index) => {
+         const headerCell = headerRow.getCell(index + 1);
+         headerCell.value = header;
+
+         // 设置默认表头样式
+         headerCell.font = { bold: true };
+         headerCell.fill = {
+            type: 'pattern',
+            pattern: 'solid',
+            fgColor: { argb: 'FFE0E0E0' },
+         };
+
+         // 标记缺失的表头字段
+         if (markInfo?.markHeaders && markInfo.markHeaders.includes(header)) {
+            headerCell.fill = {
+               type: 'pattern',
+               pattern: 'solid',
+               fgColor: { argb: 'FFFF0000' },
+            };
+            headerCell.font = {
+               name: 'Arial',
+               size: 10,
+               bold: true,
+               color: { argb: 'FFFFFFFF' },
+            };
+         }
+      });
+
+      // 添加数据行
+      rows.forEach((row, index) => {
+         const worksheetRow = worksheet.getRow(index + 2);
+         row.forEach((cell, cellIndex) => {
+            const worksheetCell = worksheetRow.getCell(cellIndex + 1);
+            worksheetCell.value = cell;
+
+            // 检查是否需要标记单元格
+            const cellKey = `${index + 2}-${cellIndex + 1}`;
+            if (cellMarkMap.has(cellKey)) {
+               worksheetCell.fill = {
+                  type: 'pattern',
+                  pattern: 'solid',
+                  fgColor: { argb: cellMarkMap.get(cellKey) },
+               };
+            }
+         });
+      });
+
+      // 自动调整列宽
+      worksheet.columns.forEach((column) => {
+         column.width = 15;
+      });
+
+      // 生成Excel文件Buffer
+      const excelBuffer = await workbook.xlsx.writeBuffer();
+
+      // 创建Blob对象
+      const blob = new Blob([excelBuffer], {
+         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      });
+
+      // 创建blob URL
+      const blobUrl = URL.createObjectURL(blob);
+
+      return {
+         success: true,
+         blobUrl,
+         fileName: fileName.replace(/\.(csv|xlsx?)$/i, '.xlsx'),
+      };
+   } catch (error) {
+      console.error('转换Excel失败:', error);
+      return {
+         success: false,
+         error: error instanceof Error ? error.message : '未知错误',
+      };
+   }
+};
+
+/**
+ * CSV文本转Excel预览
+ * @param csvContent CSV文本内容
+ * @param fileName 文件名
+ * @returns Excel预览结果
+ */
+export const csvToExcelView = async (csvContent: string, fileName: string): Promise<ExcelViewResult> => {
+   try {
+      const normalized = csvToNormalized(csvContent);
+      return await toExcel(normalized, fileName);
+   } catch (error) {
+      return {
+         success: false,
+         error: error instanceof Error ? error.message : 'CSV处理失败',
+      };
+   }
+};
+
+/**
+ * Excel ArrayBuffer转Excel预览
+ * @param excelBuffer Excel文件的ArrayBuffer
+ * @param fileName 文件名
+ * @returns Excel预览结果
+ */
+export const excelToExcelView = async (excelBuffer: ArrayBuffer, fileName: string): Promise<ExcelViewResult> => {
+   try {
+      // Excel文件直接创建blob URL
+      const blob = new Blob([excelBuffer], {
+         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      });
+      const blobUrl = URL.createObjectURL(blob);
+
+      return {
+         success: true,
+         blobUrl,
+         fileName,
+      };
+   } catch (error) {
+      return {
+         success: false,
+         error: error instanceof Error ? error.message : 'Excel处理失败',
+      };
+   }
+};
+
+/**
+ * 规范数组转Excel预览
+ * @param data 规范数组数据
+ * @param fileName 文件名
+ * @returns Excel预览结果
+ */
+export const normalizedToExcelView = async (data: NormalizedData, fileName: string): Promise<ExcelViewResult> => {
+   return await toExcel(data, fileName);
+};

package/src/utils/form-csv.ts

@@ -0,0 +1,55 @@
+/**
+ * CSV数据处理工具 - 统一使用excel-view处理
+ */
+import { csvToExcelView } from './excel-view';
+
+/**
+ * 将CSV文本内容转换为Excel blob URL用于预览
+ * @param csvContent CSV文本内容
+ * @param fileName 文件名
+ * @returns blob URL和文件信息
+ * @deprecated 使用 csvToExcelView 替代
+ */
+export const csvToExcelBlob = async (csvContent: string, fileName: string) => {
+   const result = await csvToExcelView(csvContent, fileName);
+   if (result.success) {
+      return {
+         blobUrl: result.blobUrl!,
+         fileName: result.fileName!,
+         blob: null, // 不再返回blob对象，使用URL即可
+      };
+   } else {
+      throw new Error(result.error || 'CSV转Excel失败');
+   }
+};
+
+/**
+ * 处理CSV文件上传前的预览
+ * @param csvBuffer CSV文件的ArrayBuffer
+ * @param fileName 文件名
+ * @returns Promise包含处理结果
+ */
+export const processCsvFile = async (csvBuffer: ArrayBuffer, fileName: string) => {
+   try {
+      // 将ArrayBuffer转换为文本
+      const decoder = new TextDecoder('utf-8');
+      const text = decoder.decode(csvBuffer);
+
+      // 使用excel-view统一处理
+      const result = await csvToExcelView(text, fileName);
+
+      return {
+         success: result.success,
+         blobUrl: result.blobUrl,
+         fileName: result.fileName,
+         error: result.error,
+         csvContent: text, // 保留原始CSV内容
+      };
+   } catch (error) {
+      console.error('CSV文件处理失败:', error);
+      return {
+         success: false,
+         error: error instanceof Error ? error.message : '未知错误',
+      };
+   }
+};

package/src/utils/form-excel.ts

@@ -7,23 +7,9 @@ import message from 'vue-m-message';
 import { ValidateRule } from '@/typings/form';
 import { validMessages } from './form-validate';
 import { UploadFile } from '@/typings/upload';
+import { toExcel, type ExcelMarkInfo } from './excel-view';
 
-/**
- * Excel数据处理需要标记的单元格
- */
-export type ExcelMarkCell = {
-   row: number;
-   col: number;
-   color?: string;
-};
-
-/**
- * Excel标记类型
- */
-export type ExcelMarkInfo = {
-   markCells: ExcelMarkCell[];
-   markHeaders?: string[];
-};
+// ExcelMarkCell 和 ExcelMarkInfo 类型已移至 excel-view.ts 统一管理
 
 /**
  * 处理Excel文件的通用函数，用于提取表头和数据
@@ -133,31 +119,23 @@ export const processExcelFile = async (excelBuffer: ArrayBuffer) => {
 };
 
 /**
- * 生成标记了错误/重复数据的Excel文件
+ * 创建带错误标记的Excel预览
  * @param excelBuffer 原始Excel文件的ArrayBuffer
- * @param markInfo 标记信息，包含要标记的单元格和表头
- * @returns 标记后的Excel文件Blob
+ * @param markInfo 标记信息
+ * @param fileName 文件名
+ * @returns 标记后的Excel预览结果
  */
-export const createMarkedExcelBlob = async (
-   excelBuffer: ArrayBuffer,
-   markInfo: ExcelMarkInfo,
-): Promise<{
-   hasError: boolean;
-   errBlob?: Blob;
-}> => {
-   const ExcelJS = await import('exceljs');
-   // 处理Excel文件
+export const createMarkedExcelView = async (excelBuffer: ArrayBuffer, markInfo: ExcelMarkInfo, fileName: string) => {
+   // 处理Excel文件获取数据
    const excelData = await processExcelFile(excelBuffer);
-   if (!excelData) return { hasError: true };
-
-   const { worksheet, headers: originalHeaders } = excelData;
-   const { markCells, markHeaders } = markInfo;
-
-   if (markCells.length === 0 && (!markHeaders || markHeaders.length === 0)) {
-      return { hasError: false }; // 没有需要标记的内容
+   if (!excelData) {
+      return { success: false, error: 'Excel文件处理失败' };
    }
 
-   // 处理缺失字段，将缺失字段添加到headers中
+   const { headers: originalHeaders, excelRows } = excelData;
+   const { markHeaders } = markInfo;
+
+   // 处理缺失字段，添加到表头
    const headers = [...originalHeaders];
    if (markHeaders && markHeaders.length > 0) {
       markHeaders.forEach((field) => {
@@ -167,158 +145,18 @@ export const createMarkedExcelBlob = async (
       });
    }
 
-   // 创建一个新的工作簿和工作表
-   const newWorkbook = new ExcelJS.default.Workbook();
-   const newWorksheet = newWorkbook.addWorksheet('Sheet1');
-
-   // 默认列宽
-   const defaultColumnWidth = 15;
-
-   // 创建错误单元格位置的查询表，用于快速检查
-   const cellMarkMap = new Map<string, string>();
-   markCells.forEach(({ row, col, color }) => {
-      const cellKey = `${row}-${col}`;
-      cellMarkMap.set(cellKey, color || 'FFFF0000'); // 默认红色
-   });
-
-   // 复制列宽并应用于新工作表
-   for (let i = 0; i < headers.length; i++) {
-      const column = newWorksheet.getColumn(i + 1);
-
-      if (i < worksheet.columnCount && i < originalHeaders.length) {
-         const originalCol = worksheet.getColumn(i + 1);
-         if (originalCol && originalCol.width) {
-            column.width = originalCol.width;
-         } else {
-            column.width = defaultColumnWidth;
-         }
-      } else {
-         column.width = defaultColumnWidth;
-      }
-   }
-
-   // 复制表头行
-   const headerRow = newWorksheet.getRow(1);
-   headers.forEach((header, index) => {
-      const headerCell = headerRow.getCell(index + 1);
-      headerCell.value = header;
-
-      const isOriginalHeader = index < originalHeaders.length;
-      if (isOriginalHeader && index < worksheet.columnCount) {
-         // 复制原表头样式
-         const originalCell = worksheet.getRow(1).getCell(index + 1);
-
-         // 复制样式
-         if (originalCell.style) headerCell.style = JSON.parse(JSON.stringify(originalCell.style));
-         if (originalCell.font) headerCell.font = JSON.parse(JSON.stringify(originalCell.font));
-         if (originalCell.alignment) headerCell.alignment = JSON.parse(JSON.stringify(originalCell.alignment));
-         if (originalCell.border) headerCell.border = JSON.parse(JSON.stringify(originalCell.border));
-         if (originalCell.numFmt) headerCell.numFmt = originalCell.numFmt;
-         if (originalCell.fill) headerCell.fill = JSON.parse(JSON.stringify(originalCell.fill));
-      }
-
-      // 仅标记缺失的表头字段，不标记数据重复的表头
-      if (markHeaders && markHeaders.includes(header) && !isOriginalHeader) {
-         headerCell.fill = {
-            type: 'pattern',
-            pattern: 'solid',
-            fgColor: { argb: 'FFFF0000' }, // 红色背景
-         };
-
-         // 添加白色文字
-         headerCell.font = {
-            name: 'Arial',
-            size: 10,
-            bold: true,
-            color: { argb: 'FFFFFFFF' }, // 白色文字
-         };
+   // 扩展数据行以匹配新的表头长度
+   const rows = excelRows.map((row) => {
+      const newRow = [...row];
+      // 为新增的表头字段添加空值
+      while (newRow.length < headers.length) {
+         newRow.push(null);
       }
+      return newRow;
    });
-   headerRow.commit();
-
-   // 处理数据行
-   worksheet.eachRow((row, rowNumber) => {
-      if (rowNumber > 1) {
-         // 跳过表头行
-         const newRow = newWorksheet.getRow(rowNumber);
-
-         // 使用表头长度来循环每个单元格
-         for (let colIndex = 0; colIndex < headers.length; colIndex++) {
-            const newCell = newRow.getCell(colIndex + 1);
-            const isOriginalHeader = colIndex < originalHeaders.length;
-
-            if (isOriginalHeader && colIndex < worksheet.columnCount) {
-               // 对原始数据中存在的列
-               const originalCell = row.getCell(colIndex + 1);
-
-               // 复制值
-               newCell.value = originalCell.value;
-
-               // 处理对象类型的单元格值，确保正确显示
-               if (newCell.value !== null && newCell.value !== undefined && typeof newCell.value === 'object') {
-                  // 对于RichText，保留原格式
-                  if (
-                     !('richText' in newCell.value) &&
-                     !('formula' in newCell.value) &&
-                     !('hyperlink' in newCell.value) &&
-                     !(newCell.value instanceof Date)
-                  ) {
-                     // 尝试转换为字符串显示
-                     try {
-                        if ('text' in newCell.value && typeof newCell.value.text === 'string') {
-                           newCell.value = newCell.value.text;
-                        } else {
-                           // 其他对象类型尝试JSON序列化
-                           newCell.value = JSON.stringify(newCell.value);
-                        }
-                     } catch {
-                        // 如果转换失败，使用toString
-                        newCell.value = String(newCell.value);
-                     }
-                  }
-               }
 
-               // 复制样式
-               if (originalCell.style) newCell.style = JSON.parse(JSON.stringify(originalCell.style));
-               if (originalCell.font) newCell.font = JSON.parse(JSON.stringify(originalCell.font));
-               if (originalCell.alignment) newCell.alignment = JSON.parse(JSON.stringify(originalCell.alignment));
-               if (originalCell.border) newCell.border = JSON.parse(JSON.stringify(originalCell.border));
-               if (originalCell.numFmt) newCell.numFmt = originalCell.numFmt;
-               if (originalCell.fill) newCell.fill = JSON.parse(JSON.stringify(originalCell.fill));
-
-               // 检查是否为需要标记的单元格
-               const cellKey = `${rowNumber}-${colIndex + 1}`;
-               if (cellMarkMap.has(cellKey)) {
-                  // 设置背景颜色
-                  newCell.fill = {
-                     type: 'pattern',
-                     pattern: 'solid',
-                     fgColor: { argb: cellMarkMap.get(cellKey) },
-                  };
-               }
-            } else {
-               // 为新增列设置空值
-               newCell.value = null;
-            }
-         }
-
-         // 复制行属性
-         if (row.height) newRow.height = row.height;
-         if (row.outlineLevel) newRow.outlineLevel = row.outlineLevel;
-
-         newRow.commit();
-      }
-   });
-
-   // 生成Excel文件Buffer
-   const excelOutput = await newWorkbook.xlsx.writeBuffer();
-
-   // 创建Blob对象
-   const excelBlob = new Blob([excelOutput], {
-      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-   });
-
-   return { hasError: true, errBlob: excelBlob };
+   // 调用excel-view的方法生成带标记的Excel
+   return await toExcel({ headers, rows }, fileName, markInfo);
 };
 
 /**
@@ -374,11 +212,24 @@ export const validateExcel = async (
          color: 'FFFF0000', // 红色
       }));
 
-      // 创建标记过的Excel文件，确保传入所有表头（包括缺失的）
-      return createMarkedExcelBlob(excelBuffer, {
-         markCells,
-         markHeaders: missingFields,
-      });
+      // 使用excel-view统一创建标记Excel
+      const markResult = await createMarkedExcelView(
+         excelBuffer,
+         {
+            markCells,
+            markHeaders: missingFields,
+         },
+         'validation_errors.xlsx',
+      );
+
+      if (markResult.success && markResult.blobUrl) {
+         // 从blob URL创建blob对象
+         const response = await fetch(markResult.blobUrl);
+         const errBlob = await response.blob();
+         return { hasError: true, errBlob };
+      } else {
+         return { hasError: true };
+      }
    }
 
    return { hasError: false }; // 没有错误时返回null
@@ -522,8 +373,24 @@ export const checkExcelDuplicates = async (
          });
       });
 
-      // 创建标记过的Excel文件
-      return createMarkedExcelBlob(excelBuffer, { markCells, markHeaders: missingDuplicateFields });
+      // 使用excel-view统一创建标记Excel
+      const markResult = await createMarkedExcelView(
+         excelBuffer,
+         {
+            markCells,
+            markHeaders: missingDuplicateFields,
+         },
+         'duplicate_errors.xlsx',
+      );
+
+      if (markResult.success && markResult.blobUrl) {
+         // 从blob URL创建blob对象
+         const response = await fetch(markResult.blobUrl);
+         const errBlob = await response.blob();
+         return { hasError: true, errBlob };
+      } else {
+         return { hasError: true };
+      }
    }
 
    return { hasError: false }; // 没有重复数据

package/src/utils/options.ts

@@ -159,7 +159,6 @@ const queryOptions = <T>(
       ...rest,
    };
    optionUrl.loadingText = false;
-   console.log(optionUrl.fieldMap, params);
    if (!params) params = {};
    if (!params.Query) params.Query = {};
    optionCtrl.optionQuery = params;