@skyfox2000/webui 1.3.3 → 1.3.5

package/src/components/content/table/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, Ref, ref, watch, provide, useAttrs, onActivated, computed } from 'vue';
-import { Table, TablePaginationConfig, TableProps } from 'ant-design-vue';
+import { Table, PaginationProps, TableProps } from 'ant-design-vue';
 import {
    AppRouter,
    gridQueryFind,
@@ -17,7 +17,7 @@ import Switch from '../../form/switch/index.vue';
 import { AnyData } from '@skyfox2000/fapi';
 import { ProviderKeys } from '@/index';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
    /**
     * 表格数据控制
     */
@@ -37,7 +37,7 @@ const props = defineProps<{
    /**
     * 自定义分页控制
     */
-   pagination?: TableProps['pagination'];
+   pagination?: false | PaginationProps;
    /**
     * 表格大小配置
     */
@@ -46,7 +46,10 @@ const props = defineProps<{
     * 是否禁用启用状态
     */
    statusDisabled?: Function;
-}>();
+}>(), {
+   pagination: undefined,
+});
+
 // 关闭自动继承属性到根元素
 defineOptions({
    inheritAttrs: false,
@@ -67,7 +70,7 @@ const curPageSize = ref(gridCtrl.pageSize.value);
 const curPageNo = ref(gridCtrl.pageNo.value);
 
 const dataList = ref<Record<string, AnyData>[]>([]);
-const pagination: Ref<false | TablePaginationConfig> = ref<false | TablePaginationConfig>({
+const pagination: Ref<false | PaginationProps> = ref<false | PaginationProps>({
    ...{
       total: 0,
       current: 1,
@@ -89,7 +92,7 @@ const pagination: Ref<false | TablePaginationConfig> = ref<false | TablePaginati
          }
       },
    },
-   ...props.pagination,
+   ...(props.pagination === false ? {} : props.pagination),
 });
 
 if (props.pagination === false) {

package/src/components/form/autoComplete/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onUnmounted, useAttrs, watch, shallowRef, PropType } from 'vue';
-import { AutoComplete } from 'ant-design-vue';
+import { AutoComplete, Input } from 'ant-design-vue';
 import {
    useInputFactory,
    OptionCommProps,
@@ -143,9 +143,10 @@ onUnmounted(() => {
          :options="selectOptions"
          @search="onSearch"
          @select="onSelected"
-         :placeholder="'请输入并选择' + labelText"
          v-bind="attrs"
+         :allow-clear="false"
       >
+         <Input allow-clear :placeholder="'请输入并选择' + labelText" />
          <template #option="{ label }">
             {{ label }}
          </template>
@@ -158,4 +159,9 @@ onUnmounted(() => {
    border-color: #ff4d4f80;
    box-shadow: 0 0 3px 0 #ff4d4f;
 }
-</style>
+
+:deep(input::-webkit-search-cancel-button),
+:deep(input::-webkit-clear-button) {
+   display: none !important;
+}
+</style>

package/src/components/form/cascader/index.vue

@@ -8,6 +8,9 @@ import {
    loadOption,
    unloadOption,
    formValidate,
+   onOptionChanged,
+   getSelectedLabels,
+   SelectValue,
 } from '@/index';
 import { Cascader } from 'ant-design-vue';
 import { DefaultOptionType, ValueType } from 'ant-design-vue/es/vc-cascader/Cascader';
@@ -61,7 +64,7 @@ if (optionCtrl) {
       (newOptions) => {
          selectOptions.value = newOptions || [];
       },
-      { immediate: true, deep: true }
+      { immediate: true, deep: true },
    );
 }
 
@@ -71,13 +74,12 @@ const onChanged = (_: ValueType, selected: DefaultOptionType[]) => {
       emit('update:value', []);
       return;
    }
-   const labels: string[] = selected.map((item) => item.label!);
+   const values = selected.map((item) => item.value);
+   const selectedOptions = onOptionChanged(optionCtrl, props, values as unknown as SelectValue);
+   const labels: string[] = getSelectedLabels(selectedOptions);
 
    emit('update:labels', labels);
-   emit(
-      'update:value',
-      selected.map((item) => item.value),
-   );
+   emit('update:value', values); 
    if (errInfo?.value.errClass && editorCtrl) {
       /// 重新开始验证
       formValidate(editorCtrl);

package/src/index.ts

@@ -162,8 +162,31 @@ export {
 } from '@/utils/form-validate';
 
 // form-excel 工具
-export { validateExcel, checkExcelDuplicates, processExcelFile, appendExcelData } from '@/utils/form-excel';
-export type { ExcelMarkCell, ExcelMarkInfo } from '@/utils/form-excel';
+export {
+   validateExcel,
+   checkExcelDuplicates,
+   processExcelFile,
+   appendExcelData,
+   createMarkedExcelView,
+} from '@/utils/form-excel';
+// ExcelMarkCell, ExcelMarkInfo 已移至 excel-view 统一管理
+
+// form-csv 工具
+export { csvToExcelBlob, processCsvFile } from '@/utils/form-csv';
+
+// excel-view 工具
+export {
+   csvToNormalized,
+   excelToNormalized,
+   toExcel,
+   csvToExcelView,
+   excelToExcelView,
+   normalizedToExcelView,
+   type NormalizedData,
+   type ExcelViewResult,
+   type ExcelMarkCell,
+   type ExcelMarkInfo,
+} from '@/utils/excel-view';
 
 // table 工具
 export {

package/src/typings/option.d.ts

@@ -100,8 +100,8 @@ export const OptionCommProps = {
    },
    /**
     * 输出字段转换控制
-    * - Key：目的字段
-    * - Value：源字段，支持模板 ${}
+    * - Key：目的字段，支持 "." 嵌套
+    * - Value：源字段，支持模板 ${} 或者 ${index} 或者 ${index}.${key}
     */
    outFields: {
       type: Object as PropType<Record<string, string>>,

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 : '未知错误',
+      };
+   }
+};