ele-admin-plus 1.2.1-beta.2 → 1.2.1-beta.3

package/lib/ele-pro-table/props.cjs

@@ -40,7 +40,9 @@ const proTableProps = {
   /** 是否开启顶部工具栏 */
   toolbar: {
     type: [Boolean, Object],
-    default: true
+    default: () => {
+      return null;
+    }
   },
   /** 表头工具按钮布局 */
   tools: {

package/lib/ele-pro-table/props.d.ts

@@ -1,14 +1,15 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
 import { EleLoadingProps, EleToolbarProps } from '../ele-app/plus';
-import { DataItem, Columns, TableSize } from '../ele-data-table/types';
-import { Where, Datasource, RequestOption, ResponseOption, ParseData, DoneParams, TablePagination, TableLocale, ExportConfig, PrintConfig } from './types';
+import { DataItem, Columns, TableSize, RowKey } from '../ele-data-table/types';
+import { Where, Datasource, RequestOption, ResponseOption, ParseData, DoneParams, TablePagination, TableTool, TableLocale, ExportConfig, PrintConfig } from './types';
 
 /**
  * 属性
  */
 export declare const proTableProps: {
     rowKey: {
-        type: PropType<string | ((row: DataItem) => string) | undefined>;
+        type: PropType<RowKey>;
         required: boolean;
     };
     /** 数据请求状态 */
@@ -43,11 +44,11 @@ export declare const proTableProps: {
     /** 是否开启顶部工具栏 */
     toolbar: {
         type: PropType<boolean | EleToolbarProps>;
-        default: boolean;
+        default: () => null;
     };
     /** 表头工具按钮布局 */
     tools: {
-        type: PropType<boolean | string[]>;
+        type: PropType<TableTool[] | boolean>;
         default: () => null;
     };
     /** 列配置是否可拖拽排序 */
@@ -65,9 +66,9 @@ export declare const proTableProps: {
     /** 表格全屏状态的高度 */
     maximizedHeight: (StringConstructor | NumberConstructor)[];
     /** 自定义表格样式 */
-    tableStyle: PropType<Partial<import('vue').CSSProperties>>;
+    tableStyle: PropType<StyleValue>;
     /** 自定义底部样式 */
-    footerStyle: PropType<Partial<import('vue').CSSProperties>>;
+    footerStyle: PropType<StyleValue>;
     /** 分页组件 */
     pagination: {
         type: PropType<boolean | TablePagination>;
@@ -98,14 +99,14 @@ export declare const proTableProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    width: (StringConstructor | NumberConstructor)[];
-    maxHeight: (StringConstructor | NumberConstructor)[];
+    width: (NumberConstructor | StringConstructor)[];
+    maxHeight: (NumberConstructor | StringConstructor)[];
     lazy: BooleanConstructor;
     className: {
         type: StringConstructor;
         default: string;
     };
-    height: (StringConstructor | NumberConstructor)[];
+    height: (NumberConstructor | StringConstructor)[];
     stripe: {
         type: BooleanConstructor;
         default: null;
@@ -130,13 +131,13 @@ export declare const proTableProps: {
     headerCellClassName: PropType<import('element-plus').CellCls<any> | undefined>;
     headerCellStyle: PropType<import('element-plus').CellStyle<any> | undefined>;
     highlightCurrentRow: BooleanConstructor;
-    currentRowKey: (StringConstructor | NumberConstructor)[];
+    currentRowKey: (NumberConstructor | StringConstructor)[];
     emptyText: StringConstructor;
     expandRowKeys: PropType<any[] | undefined>;
     defaultExpandAll: BooleanConstructor;
     defaultSort: PropType<import('element-plus').Sort | undefined>;
     tooltipEffect: StringConstructor;
-    tooltipOptions: PropType<Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    tooltipOptions: PropType<Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperClass" | "showAfter" | "hideAfter" | "popperOptions" | "enterable" | "appendTo" | "transition" | "showArrow">> | undefined>;
     spanMethod: PropType<((data: {
         row: any;
         rowIndex: number;
@@ -170,7 +171,7 @@ export declare const proTableProps: {
     };
     scrollbarAlwaysOn: BooleanConstructor;
     flexible: BooleanConstructor;
-    showOverflowTooltip: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    showOverflowTooltip: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperClass" | "showAfter" | "hideAfter" | "popperOptions" | "enterable" | "appendTo" | "transition" | "showArrow">> | undefined>;
     columns: {
         type: PropType<Columns>;
         required: boolean;
@@ -186,7 +187,6 @@ export declare const proTableProps: {
     };
     bottomLine: {
         type: BooleanConstructor;
-        /** 自定义响应参数名称 */
         default: boolean;
     };
     emptyProps: {
@@ -226,15 +226,14 @@ export declare const proTableEmits: {
     cellContextmenu: (_row: DataItem, _column: import('./types').Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
     rowClick: (_row: DataItem, _column: import('./types').Column, _e: MouseEvent) => boolean;
     rowContextmenu: (_row: DataItem, _column: import('./types').Column, _e: MouseEvent) => boolean;
-    /** 导出配置 */
     rowDblclick: (_row: DataItem, _column: import('./types').Column, _e: MouseEvent) => boolean;
     headerClick: (_column: import('./types').Column, _e: MouseEvent) => boolean;
     headerContextmenu: (_column: import('./types').Column, _e: MouseEvent) => boolean;
     sortChange: (_sorter: import('./types').Sorter) => boolean;
     filterChange: (_filter: import('./types').Filter) => boolean;
-    currentChange: (_current?: DataItem | null | undefined, _old?: DataItem | null | undefined) => boolean;
+    currentChange: (_current?: DataItem | null, _old?: DataItem | null) => boolean;
     headerDragend: (_width: number, _old: number, _column: import('./types').Column, _e: MouseEvent) => boolean;
     expandChange: (_row: DataItem, _expanded: boolean) => boolean;
-    'update:currentRowKey': (_currentRowKey?: import('../ele-data-table/types').DataKey | undefined) => boolean;
-    'update:selectedRowKeys': (_selectedRowKeys?: import('../ele-data-table/types').DataKey[] | undefined) => boolean;
+    'update:currentRowKey': (_currentRowKey?: import('../ele-data-table/types').DataKey) => boolean;
+    'update:selectedRowKeys': (_selectedRowKeys?: import('../ele-data-table/types').DataKey[]) => boolean;
 };

package/lib/ele-pro-table/style/index.scss

@@ -119,6 +119,10 @@
 /* 密度设置 */
 .ele-tool-size-popper {
   min-width: 88px;
+
+  &.ele-dropdown .el-dropdown-menu__item > .el-icon {
+    font-size: elVar('font-size', 'base');
+  }
 }
 
 /* 列配置 */
@@ -144,6 +148,7 @@
 .ele-tool-column-link {
   color: elVar('color-primary');
   transition: color $transition-base;
+  user-select: none;
   cursor: pointer;
 
   &:hover {
@@ -199,6 +204,7 @@
 }
 
 .ele-tool-column-item {
+  user-select: none;
   border-radius: eleVar('tool-column', 'item-radius');
 
   &.sortable-chosen {
@@ -220,25 +226,53 @@
 }
 
 .ele-tool-column-handle {
+  flex-shrink: 0;
   display: flex;
-  font-size: 12px;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('tool-column', 'btn-size');
+  height: eleVar('tool-column', 'btn-size');
+  margin-right: eleVar('tool-column', 'btn-space');
+  margin-left: eleVar('tool-column', 'btn-offset');
   color: elVar('text-color', 'placeholder');
-  margin-right: 4px;
+  font-size: 12px;
   cursor: move;
 }
 
+.ele-tool-column-input {
+  flex-shrink: 0;
+  width: 60px;
+  background: elVar('bg-color', 'overlay');
+  border-radius: elVar('border-radius', 'base');
+  margin-left: eleVar('tool-column', 'btn-space');
+  margin-right: eleVar('tool-column', 'btn-offset');
+
+  .el-input__inner {
+    height: 20px;
+    line-height: 20px;
+  }
+}
+
 .ele-tool-column-fixed {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
+
+  &:last-child {
+    margin-right: eleVar('tool-column', 'btn-offset');
+  }
 }
 
 .ele-tool-column-fixed-item {
   display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('tool-column', 'btn-size');
+  height: eleVar('tool-column', 'btn-size');
+  border-radius: eleVar('tool-column', 'btn-radius');
   font-size: 12px;
   color: eleVar('tool-column', 'btn-color');
-  padding: eleVar('tool-column', 'btn-padding');
   margin-left: eleVar('tool-column', 'btn-space');
-  border-radius: eleVar('tool-column', 'btn-radius');
   transition: (color $transition-base, background-color $transition-base);
   box-sizing: border-box;
   cursor: pointer;
@@ -258,14 +292,11 @@
   }
 }
 
-.ele-tool-column.is-sortable {
-  .ele-tool-column-item-body {
-    padding-left: 6px;
-  }
-
-  .ele-tool-column-header .ele-tool-column-label {
-    padding-left: calc(22px - #{eleVar('tool-column', 'item-padding')});
-  }
+.ele-tool-column.is-sortable .ele-tool-column-header .ele-tool-column-label {
+  $size: eleVar('tool-column', 'btn-size');
+  $space: eleVar('tool-column', 'btn-space');
+  $offset: eleVar('tool-column', 'btn-offset');
+  padding-left: calc(#{$size} + #{$space} + #{$offset});
 }
 
 /* 导出和打印的列选择 */

package/lib/ele-pro-table/types.d.ts

@@ -229,6 +229,8 @@ export interface ColItem {
   children?: ColItem[];
   /** 列类型 */
   type?: string;
+  /** 列宽 */
+  width?: number | string;
 }
 
 /**
@@ -361,6 +363,8 @@ export interface ExportDataResult {
 export interface BeforeExportParams {
   /** 导出的数据 */
   data: DataItem[];
+  /** 导出的数据来源类型 */
+  dataType: ExportDataType;
   /** 导出的列配置 */
   columns?: Columns;
   /** 导出的表头数据封装 */
@@ -377,6 +381,14 @@ export interface BeforeExportParams {
   hideLoading: () => void;
   /** 关闭弹窗 */
   closeModal: () => void;
+  /** 导出的列配置(含未勾选的列) */
+  tableColumns?: Columns;
+  /** 是否导出表头 */
+  showHeader?: boolean;
+  /** 是否导出表尾 */
+  showFooter?: boolean;
+  /** 是否展示层级序号 */
+  showTreeIndex?: boolean;
 }
 
 /**
@@ -398,6 +410,14 @@ export interface ExportConfig {
   dataType?: ExportDataType;
   /** 默认文件名 */
   fileName?: string;
+  /** 重设导出的列 */
+  columns?: Columns;
+  /** 默认是否导出表头 */
+  showHeader?: boolean;
+  /** 默认是否导出表尾 */
+  showFooter?: boolean;
+  /** 默认是否展示层级序号 */
+  showTreeIndex?: boolean;
 }
 
 /**
@@ -416,6 +436,14 @@ export interface PrintConfig {
   beforePrint?: BeforeExport;
   /** 默认数据类型 */
   dataType?: ExportDataType;
+  /** 重设打印的列 */
+  columns?: Columns;
+  /** 默认是否打印表头 */
+  showHeader?: boolean;
+  /** 默认是否打印表尾 */
+  showFooter?: boolean;
+  /** 默认是否展示层级序号 */
+  showTreeIndex?: boolean;
 }
 
 /**
@@ -432,6 +460,31 @@ export interface TablePrintOptions extends ExportDataResult {
   data: DataItem[];
 }
 
+/**
+ * 导出方法参数
+ */
+export interface TableExportParams {
+  /** 打印的数据 */
+  data?: DataItem[];
+  /** 打印的列 */
+  columns?: Columns;
+  /** 是否打印表头 */
+  showHeader?: boolean;
+  /** 是否打印表尾 */
+  showFooter?: boolean;
+  /** 是否展示层级序号 */
+  showTreeIndex?: boolean;
+  /** 数据的来源类型 */
+  dataType?: ExportDataType;
+  /** 导出的文件名 */
+  fileName?: string;
+}
+
+/**
+ * 缓存的名称
+ */
+export type CacheKey = string | undefined;
+
 /**
  * 国际化
  */
@@ -452,6 +505,7 @@ export interface TableLocale {
   columnExpand: string;
   columnFixedLeft: string;
   columnFixedRight: string;
+  columnWidth: string;
   exportOk: string;
   exportCancel: string;
   exportFileName: string;

package/lib/ele-pro-table/util.cjs

@@ -24,7 +24,7 @@ function getPaginationProps(size, pagination, globalPagination, pageProps) {
     return null;
   }
   const defaultProps = {
-    small: size !== "large",
+    size: size !== "large" ? "small" : "default",
     pagerCount: 5,
     layout: "total, prev, pager, next, sizes, jumper",
     pageSizes: [10, 20, 30, 40, 50, 100],
@@ -225,36 +225,40 @@ function getColId(column) {
   }
   return column.columnKey;
 }
-function getInitColumns(columns) {
+function getInitColumns(columns, cacheColsWidth) {
   const data = [];
   columns.forEach((d) => {
     var _a;
     if (!d.hideInTable) {
+      const width = getCacheColWidth(cacheColsWidth, d) ?? d.width;
       if ((_a = d.children) == null ? void 0 : _a.length) {
         const children = getInitColumns(d.children);
         if (children.length) {
-          data.push({ ...d, children });
+          data.push({ ...d, width, children });
         }
       } else {
-        data.push({ ...d });
+        data.push({ ...d, width });
       }
     }
   });
   return data;
 }
 function getInitCacheColumns(columns, cacheKey, sortable) {
-  const cacheCols = getCacheCols(cacheKey);
+  const cacheCols = getCacheCols(getColsCacheKey(cacheKey));
   if (!cacheCols) {
-    return getInitColumns(columns);
+    return getInitColumns(columns, getCacheColsWidth(cacheKey));
   }
   return getCheckedColumns(
     columns,
     cacheCols,
     sortable,
-    (item) => item.hideInSetting
+    (item) => item.hideInSetting,
+    void 0,
+    false,
+    getCacheColsWidth(cacheKey)
   );
 }
-function getCheckedColumns(columns, cols, sortable, isHideInCol, filter, reserveUnchecked) {
+function getCheckedColumns(columns, cols, sortable, isHideInCol, filter, reserveUnchecked, cacheColsWidth) {
   const data = [];
   if (!columns || !columns.length) {
     return data;
@@ -265,10 +269,11 @@ function getCheckedColumns(columns, cols, sortable, isHideInCol, filter, reserve
       return;
     }
     const temp = colId == null ? null : core.findTree(cols, (t) => t.uid === colId);
-    const isUnchecked = temp ? !temp.checked : d.hideInTable;
-    if (!reserveUnchecked && isUnchecked) {
+    const hideInTable = temp ? !temp.checked : d.hideInTable;
+    if (!reserveUnchecked && hideInTable) {
       return;
     }
+    const width = getCacheColWidth(cacheColsWidth, d) ?? d.width;
     const fixed = (temp == null ? void 0 : temp.fixed) ?? d.fixed;
     const uid = core.uuid(8);
     if (d.children && d.children.length) {
@@ -278,14 +283,15 @@ function getCheckedColumns(columns, cols, sortable, isHideInCol, filter, reserve
         sortable,
         isHideInCol,
         filter,
-        reserveUnchecked
+        reserveUnchecked,
+        cacheColsWidth
       );
       if (children.length) {
-        data.push({ ...d, fixed, hideInTable: isUnchecked, children, uid });
+        data.push({ ...d, width, fixed, hideInTable, children, uid });
       }
       return;
     }
-    data.push({ ...d, fixed, hideInTable: isUnchecked, uid });
+    data.push({ ...d, width, fixed, hideInTable, uid });
   });
   if (!sortable || !data.length) {
     return data;
@@ -305,7 +311,7 @@ function getCheckedColumns(columns, cols, sortable, isHideInCol, filter, reserve
       }
       i++;
     });
-    if (ai == null && isHideInCol(a) && a.fixed === "right") {
+    if (ai == null && (isHideInCol == null ? void 0 : isHideInCol(a)) && a.fixed === "right") {
       ai = i;
     }
     if (ai == null) {
@@ -313,10 +319,10 @@ function getCheckedColumns(columns, cols, sortable, isHideInCol, filter, reserve
     }
     if (a.fixed === true || a.fixed === "left") {
       ai -= i;
-    } else if (a.fixed === "right" || isHideInCol(a) && !a.fixed) {
+    } else if (a.fixed === "right" || (isHideInCol == null ? void 0 : isHideInCol(a)) && !a.fixed) {
       ai += i;
     }
-    if (bi == null && isHideInCol(b) && b.fixed === "right") {
+    if (bi == null && (isHideInCol == null ? void 0 : isHideInCol(b)) && b.fixed === "right") {
       bi = i;
     }
     if (bi == null) {
@@ -324,14 +330,14 @@ function getCheckedColumns(columns, cols, sortable, isHideInCol, filter, reserve
     }
     if (b.fixed === true || b.fixed === "left") {
       bi -= i;
-    } else if (b.fixed === "right" || isHideInCol(b) && !b.fixed) {
+    } else if (b.fixed === "right" || (isHideInCol == null ? void 0 : isHideInCol(b)) && !b.fixed) {
       bi += i;
     }
     return ai - bi;
   });
   return data;
 }
-function getColItems(columns, locale, filter, cacheCols, sortFixed, cancelFixed) {
+function getColItems(columns, locale, filter, cacheCols, sortFixed, cancelFixed, cacheColsWidth) {
   const temp = columns == null ? [] : [...columns];
   if (sortFixed) {
     temp.sort(
@@ -349,7 +355,8 @@ function getColItems(columns, locale, filter, cacheCols, sortFixed, cancelFixed)
       type: d.type,
       label: d.label || (d.type === "index" ? locale.columnIndex : d.type === "expand" ? locale.columnExpand : locale.columnUntitled),
       checked: (old == null ? void 0 : old.checked) ?? !d.hideInTable,
-      fixed: cancelFixed || parent != null ? false : (old == null ? void 0 : old.fixed) ?? d.fixed
+      fixed: cancelFixed || parent != null ? false : (old == null ? void 0 : old.fixed) ?? d.fixed,
+      width: getCacheColWidth(cacheColsWidth, d) ?? d.width
     };
     return item;
   });
@@ -396,9 +403,18 @@ function getColItems(columns, locale, filter, cacheCols, sortFixed, cancelFixed)
     indeterminate: !checkAll && indeterminate
   };
 }
+function getSizeCacheKey(cacheKey) {
+  return `${cacheKey}Size`;
+}
+function getColsCacheKey(cacheKey) {
+  return cacheKey ? `${cacheKey}Cols` : void 0;
+}
+function getColsWidthCacheKey(cacheKey) {
+  return `${cacheKey}ColsWidth`;
+}
 function getCacheCols(cacheKey) {
   if (cacheKey) {
-    const oldJSON = localStorage.getItem(getColsCacheKey(cacheKey));
+    const oldJSON = localStorage.getItem(cacheKey);
     if (oldJSON) {
       try {
         const old = JSON.parse(oldJSON);
@@ -409,12 +425,6 @@ function getCacheCols(cacheKey) {
     }
   }
 }
-function getColsCacheKey(cacheKey) {
-  return `${cacheKey}Cols`;
-}
-function getSizeCacheKey(cacheKey) {
-  return `${cacheKey}Size`;
-}
 function getCacheSize(cacheKey) {
   if (cacheKey) {
     const size = localStorage.getItem(getSizeCacheKey(cacheKey));
@@ -423,6 +433,52 @@ function getCacheSize(cacheKey) {
     }
   }
 }
+function getCacheColsWidth(cacheKey) {
+  if (cacheKey) {
+    const oldJSON = localStorage.getItem(getColsWidthCacheKey(cacheKey));
+    if (oldJSON) {
+      try {
+        const old = JSON.parse(oldJSON);
+        return old && Array.isArray(old) ? old : void 0;
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+}
+function getCacheColWidth(cacheColsWidth, column) {
+  if (cacheColsWidth == null || column == null) {
+    return;
+  }
+  const colId = getColId(column);
+  const c = core.findTree(cacheColsWidth, (d) => d.uid === colId);
+  if (!c || c.width == null) {
+    return;
+  }
+  if (c.width === "" || typeof c.width === "string" && !c.width.trim()) {
+    return "";
+  }
+  const width = Number(c.width);
+  return isNaN(width) ? c.width : width;
+}
+function cacheColWidth(width, column, cacheKey) {
+  if (cacheKey && column) {
+    const colId = getColId(column);
+    if (colId) {
+      const colsWidth = getCacheColsWidth(cacheKey) || [];
+      const old = colsWidth.find((d) => d.uid === colId);
+      if (!old) {
+        colsWidth.push({ uid: colId, width });
+      } else {
+        old.width = width;
+      }
+      localStorage.setItem(
+        getColsWidthCacheKey(cacheKey),
+        JSON.stringify(colsWidth)
+      );
+    }
+  }
+}
 function getRowKey(rowKey) {
   if (rowKey != null) {
     return rowKey;
@@ -438,7 +494,7 @@ function getCellText(column, row, index, pageIndex) {
   if (column.type === "index") {
     return util$1.getIndexValue(index, column.index, pageIndex);
   }
-  const propValue = core.getValue(row, column.prop);
+  const propValue = column.prop == null ? void 0 : core.getValue(row, column.prop);
   if (typeof column.formatter === "function") {
     return column.formatter(row, column, propValue, index);
   }
@@ -627,7 +683,8 @@ function exportCSV(fileName, headerData, bodyData, footerData) {
   const csvRows = [];
   [...headerData, ...bodyData, ...footerData].forEach((item) => {
     const cells = item.map((d) => {
-      const text = (d.text ?? "").replace(/,/g, "，").replace(/\n/g, "    ");
+      const str = d.text ?? "";
+      const text = typeof str === "string" ? str.replace(/,/g, "，").replace(/\n/g, "    ") : str;
       if (!d.isTreeCell || !d.indent) {
         return text;
       }
@@ -663,17 +720,21 @@ function columnsSettingFilter(item) {
   }
   return !item.type || !["selection", "index", "expand"].includes(item.type);
 }
+exports.cacheColWidth = cacheColWidth;
 exports.columnsExportFilter = columnsExportFilter;
 exports.columnsPrintFilter = columnsPrintFilter;
 exports.columnsSettingFilter = columnsSettingFilter;
 exports.exportCSV = exportCSV;
+exports.getCacheColWidth = getCacheColWidth;
 exports.getCacheCols = getCacheCols;
+exports.getCacheColsWidth = getCacheColsWidth;
 exports.getCacheSize = getCacheSize;
 exports.getCellText = getCellText;
 exports.getCheckedColumns = getCheckedColumns;
 exports.getColId = getColId;
 exports.getColItems = getColItems;
 exports.getColsCacheKey = getColsCacheKey;
+exports.getColsWidthCacheKey = getColsWidthCacheKey;
 exports.getDefaultFilter = getDefaultFilter;
 exports.getExportBodyNode = getExportBodyNode;
 exports.getExportData = getExportData;