ele-admin-plus 1.0.0-beta.1 → 1.0.0-beta.3

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

@@ -1,17 +1,117 @@
 import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
-import type { ToolbarTheme } from '../ele-toolbar/types';
-import type { Column, Columns, DataItem, Where, Datasource, RequestOption, ResponseOption, ParseData, Sorter, Filter, Pagination, DoneParams, TableTool, TableSize, RowClickChecked, TableLocale } from './types';
+import tableProps from 'element-plus/es/components/table/src/table/defaults';
+import type { Column, Columns, DataItem, Where, Datasource, RequestOption, ResponseOption, ParseData, Sorter, Filter, DoneParams, TablePagination, TableToolbar, TableTool, TableSize, RowClickChecked, TableLocale } from './types';
+/**
+ * 表格组件属性
+ */
+export declare const tableViewProps: {
+    columns: {
+        type: PropType<Columns>;
+        required: boolean;
+    };
+    loading: BooleanConstructor;
+    pageIndex: NumberConstructor;
+    data: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
+    size: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    width: (StringConstructor | NumberConstructor)[];
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    fit: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stripe: BooleanConstructor;
+    border: BooleanConstructor;
+    rowKey: PropType<string | ((row: any) => string) | undefined>;
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showSummary: BooleanConstructor;
+    sumText: StringConstructor;
+    summaryMethod: PropType<import("element-plus/es/components/table/src/table/defaults").SummaryMethod<any> | undefined>;
+    rowClassName: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnCls<any> | undefined>;
+    rowStyle: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnStyle<any> | undefined>;
+    cellClassName: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<any> | undefined>;
+    cellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<any> | undefined>;
+    headerRowClassName: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnCls<any> | undefined>;
+    headerRowStyle: PropType<import("element-plus/es/components/table/src/table/defaults").ColumnStyle<any> | undefined>;
+    headerCellClassName: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<any> | undefined>;
+    headerCellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<any> | undefined>;
+    highlightCurrentRow: BooleanConstructor;
+    currentRowKey: (StringConstructor | NumberConstructor)[];
+    emptyText: StringConstructor;
+    expandRowKeys: PropType<any[] | undefined>;
+    defaultExpandAll: BooleanConstructor;
+    defaultSort: PropType<import("element-plus/es/components/table/src/table/defaults").Sort | undefined>;
+    tooltipEffect: StringConstructor;
+    tooltipOptions: PropType<Partial<Pick<import("element-plus").ElTooltipProps, "showArrow" | "effect" | "enterable" | "popperClass" | "offset" | "placement" | "popperOptions" | "showAfter" | "hideAfter">> | undefined>;
+    spanMethod: PropType<((data: {
+        row: any;
+        rowIndex: number;
+        column: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<any>;
+        columnIndex: number;
+    }) => number[] | {
+        rowspan: number;
+        colspan: number;
+    } | undefined) | undefined>;
+    selectOnIndeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    treeProps: {
+        type: PropType<{
+            hasChildren?: string | undefined;
+            children?: string | undefined;
+        } | undefined>;
+        default: () => {
+            hasChildren: string;
+            children: string;
+        };
+    };
+    lazy: BooleanConstructor;
+    load: PropType<((row: any, treeNode: import("element-plus/es/components/table/src/table/defaults").TreeNode, resolve: (data: any[]) => void) => void) | undefined>;
+    style: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    tableLayout: {
+        type: PropType<"fixed" | "auto">;
+        default: string;
+    };
+    scrollbarAlwaysOn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flexible: BooleanConstructor;
+};
 /**
  * 属性
  */
 export declare const proTableProps: {
-    border: {
+    stripe: {
         type: BooleanConstructor;
-        default: boolean;
+        default: null;
     };
-    columns: {
-        type: PropType<Columns>;
-        required: boolean;
+    border: {
+        type: BooleanConstructor;
+        default: null;
     };
     datasource: {
         type: PropType<Datasource>;
@@ -21,8 +121,6 @@ export declare const proTableProps: {
     request: PropType<RequestOption>;
     response: PropType<ResponseOption>;
     parseData: PropType<ParseData>;
-    ascendingValue: StringConstructor;
-    descendingValue: StringConstructor;
     loadOnCreated: {
         type: BooleanConstructor;
         default: boolean;
@@ -31,21 +129,15 @@ export declare const proTableProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    loading: BooleanConstructor;
     selections: PropType<DataItem[]>;
     current: PropType<DataItem | null>;
     toolbar: {
-        type: BooleanConstructor;
+        type: PropType<boolean | TableToolbar>;
         default: boolean;
     };
-    toolbarTheme: PropType<ToolbarTheme>;
-    toolbarStyle: PropType<CSSProperties>;
-    toolbarForm: BooleanConstructor;
-    title: StringConstructor;
-    subtitle: StringConstructor;
     tools: {
-        type: PropType<TableTool[]>;
-        default: () => TableTool[];
+        type: PropType<boolean | TableTool[]>;
+        default: () => null;
     };
     columnSortable: {
         type: BooleanConstructor;
@@ -55,10 +147,7 @@ export declare const proTableProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    maximizedIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
+    maximizedIndex: NumberConstructor;
     maximizedHeight: (StringConstructor | NumberConstructor)[];
     headerEllipsis: {
         type: BooleanConstructor;
@@ -68,11 +157,18 @@ export declare const proTableProps: {
     tableStyle: PropType<CSSProperties>;
     footerStyle: PropType<CSSProperties>;
     pagination: {
-        type: PropType<boolean | Pagination>;
-        default: boolean;
+        type: PropType<boolean | TablePagination>;
+        default: () => null;
     };
+    sticky: BooleanConstructor;
     cacheKey: StringConstructor;
     locale: PropType<TableLocale>;
+    columns: {
+        type: PropType<Columns>;
+        required: boolean;
+    };
+    loading: BooleanConstructor;
+    pageIndex: NumberConstructor;
     data: {
         type: PropType<any[]>;
         default: () => never[];
@@ -90,7 +186,6 @@ export declare const proTableProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    stripe: BooleanConstructor;
     rowKey: PropType<string | ((row: any) => string) | undefined>;
     showHeader: {
         type: BooleanConstructor;
@@ -163,6 +258,7 @@ export declare const proTableProps: {
     flexible: BooleanConstructor;
 };
 export type ProTableProps = ExtractPropTypes<typeof proTableProps>;
+export type TableViewProps = ExtractPropTypes<typeof tableViewProps>;
 /**
  * 事件
  */
@@ -187,12 +283,19 @@ export declare const tableEmits: {
     expandChange: (_row: DataItem, _expanded: boolean) => boolean;
 };
 export declare const proTableEmits: {
+    /** 表格数据请求完成事件 */
     done: (_result: DoneParams<DataItem>, _parent?: DataItem) => boolean;
+    /** 更新多选选中数据 */
     'update:selections': (_selections: DataItem[]) => boolean;
+    /** 更新单选选中数据 */
     'update:current': (_current?: DataItem | null) => boolean;
+    /** 列配置改变事件 */
     columnsChange: (_columns: Columns) => boolean;
+    /** 表格尺寸改变事件 */
     sizeChange: (_size: TableSize) => boolean;
+    /** 表格最大化切换事件 */
     maximizedChange: (_maximized: boolean) => boolean;
+    /** 数组数据源时刷新按钮点击事件 */
     refresh: () => boolean;
     select: (_selection: DataItem[], _row: DataItem) => boolean;
     selectAll: (_selection: DataItem[]) => boolean;
@@ -213,3 +316,8 @@ export declare const proTableEmits: {
     headerDragend: (_width: number, _old: number, _column: Column, _e: MouseEvent) => boolean;
     expandChange: (_row: DataItem, _expanded: boolean) => boolean;
 };
+export type TablePropKeys = Array<keyof typeof tableProps>;
+/**
+ * 表格组件属性名
+ */
+export declare const tablePropKeys: TablePropKeys;

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

@@ -1,17 +1,28 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tableProps = require("element-plus/es/components/table/src/table/defaults");
-const proTableProps = {
+const tableViewProps = {
   ...tableProps,
-  border: {
-    type: Boolean,
-    default: true
-  },
   // 列配置
   columns: {
     type: Array,
     required: true
   },
+  // 数据请求状态
+  loading: Boolean,
+  // 起始编号
+  pageIndex: Number
+};
+const proTableProps = {
+  ...tableViewProps,
+  stripe: {
+    type: Boolean,
+    default: null
+  },
+  border: {
+    type: Boolean,
+    default: null
+  },
   // 数据源
   datasource: {
     type: [Array, Function],
@@ -25,10 +36,6 @@ const proTableProps = {
   response: Object,
   // 自定义响应数据解析
   parseData: Function,
-  // 升序的排序值
-  ascendingValue: String,
-  // 降序的排序值
-  descendingValue: String,
   // 初始是否请求数据
   loadOnCreated: {
     type: Boolean,
@@ -39,32 +46,20 @@ const proTableProps = {
     type: Boolean,
     default: true
   },
-  // 数据请求状态
-  loading: Boolean,
   // 多选选中的数据
   selections: Array,
   // 单选选中的数据
   current: Object,
   // 是否开启顶部工具栏
   toolbar: {
-    type: Boolean,
+    type: [Boolean, Object],
     default: true
   },
-  // 表头工具栏主题
-  toolbarTheme: String,
-  // 表头工具栏样式
-  toolbarStyle: Object,
-  // 表头工具栏是否是表单
-  toolbarForm: Boolean,
-  // 标题
-  title: String,
-  // 副标题
-  subtitle: String,
   // 表头工具按钮布局
   tools: {
-    type: Array,
+    type: [Boolean, Array],
     default: () => {
-      return ["reload", "size", "columns", "maximized"];
+      return null;
     }
   },
   // 列配置是否可拖拽排序
@@ -78,10 +73,7 @@ const proTableProps = {
     default: true
   },
   // 表格全屏时的层级
-  maximizedIndex: {
-    type: Number,
-    default: 999
-  },
+  maximizedIndex: Number,
   // 表格全屏状态的高度
   maximizedHeight: [String, Number],
   // 表头内容超出省略
@@ -98,8 +90,12 @@ const proTableProps = {
   // 分页组件
   pagination: {
     type: [Boolean, Object],
-    default: true
+    default: () => {
+      return null;
+    }
   },
+  // 设置粘性头部
+  sticky: Boolean,
   // 列配置缓存名称
   cacheKey: String,
   // 国际化
@@ -127,14 +123,24 @@ const tableEmits = {
 };
 const proTableEmits = {
   ...tableEmits,
+  /** 表格数据请求完成事件 */
   done: (_result, _parent) => true,
+  /** 更新多选选中数据 */
   "update:selections": (_selections) => true,
+  /** 更新单选选中数据 */
   "update:current": (_current) => true,
+  /** 列配置改变事件 */
   columnsChange: (_columns) => true,
+  /** 表格尺寸改变事件 */
   sizeChange: (_size) => true,
+  /** 表格最大化切换事件 */
   maximizedChange: (_maximized) => true,
+  /** 数组数据源时刷新按钮点击事件 */
   refresh: () => true
 };
+const tablePropKeys = Object.keys(tableProps);
 exports.proTableEmits = proTableEmits;
 exports.proTableProps = proTableProps;
 exports.tableEmits = tableEmits;
+exports.tablePropKeys = tablePropKeys;
+exports.tableViewProps = tableViewProps;

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

@@ -3,61 +3,25 @@
 
 @include set-pro-table-var($ele);
 
+/* 表格变量替换 */
+.ele-pro-table div.el-table {
+  #{elVarName('table', 'border-color')}: eleVar('table', 'border-color');
+  #{elVarName('table', 'text-color')}: eleVar('table', 'color');
+  #{elVarName('table', 'header-text-color')}: eleVar('table', 'th-color');
+  #{elVarName('table', 'header-bg-color')}: eleVar('table', 'th-bg');
+  #{elVarName('table', 'bg-color')}: eleVar('table', 'bg');
+  #{elVarName('table', 'tr-bg-color')}: eleVar('table', 'tr-bg');
+  #{elVarName('table', 'expanded-cell-bg-color')}: eleVar('table', 'tr-bg');
+  #{elVarName('bg-color')}: eleVar('table', 'bg');
+}
+
 .ele-pro-table {
-  /* 顶部工具栏 */
+  // 工具栏
   & > .ele-toolbar {
     border-bottom: none;
   }
 
-  /* 底部 */
-  .ele-pro-table-footer {
-    padding-top: 2px;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-
-    & > .ele-pagination {
-      margin: 0 auto;
-    }
-  }
-
-  /* 全屏 */
-  &.is-maximized {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    overflow: auto;
-    padding: 0 0 16px 0;
-    box-sizing: border-box;
-    background-color: elVar('bg-color');
-
-    .ele-toolbar.is-plain {
-      padding: 0 16px;
-    }
-  }
-
-  /* 变量修改 */
-  div.el-table {
-    #{elVarName('table', 'border-color')}: eleVar('table', 'border-color');
-    #{elVarName('table', 'header-text-color')}: eleVar('table', 'th-color');
-    #{elVarName('table', 'header-bg-color')}: eleVar('table', 'th-bg');
-    #{elVarName('table', 'bg-color')}: eleVar('table', 'bg');
-    #{elVarName('table', 'tr-bg-color')}: eleVar('table', 'tr-bg');
-    #{elVarName('table', 'expanded-cell-bg-color')}: eleVar('table', 'tr-bg');
-    #{elVarName('bg-color')}: eleVar('table', 'bg');
-  }
-
-  /* loading */
-  .el-table--border > .el-loading-mask {
-    top: 1px;
-    left: 1px;
-    right: 1px;
-    bottom: 1px;
-  }
-
-  /* 表头 */
+  // 表头
   th {
     font-weight: normal;
   }
@@ -76,23 +40,44 @@
     font-size: 12px;
   }
 
-  /* 选中行 */
+  // 选中行
   .el-table__body tr.current-row.hover-row > td.el-table__cell {
     background-color: elVar('table', 'current-row-bg-color');
   }
 
-  /* 表头超出隐藏 */
-  &.is-header-ellipsis th.el-table__cell > .cell {
-    white-space: nowrap;
+  // 展开按钮
+  .el-table__expand-icon {
+    vertical-align: -2px;
+
+    & > .el-icon {
+      font-size: 13px;
+    }
+  }
+
+  // 边框线
+  .el-table--border::after {
+    width: 0.8px;
+  }
+
+  .el-table__inner-wrapper::before {
+    height: 0.8px;
+  }
+
+  // loading
+  .el-table--border > .el-loading-mask {
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
   }
 
-  /* 空状态 */
+  // 空状态
   .el-table__empty-text {
     color: elVar('text-color', 'placeholder');
   }
 
   .el-empty {
-    padding: 16px 0;
+    padding: 58px 0;
   }
 
   .el-empty__description {
@@ -110,7 +95,61 @@
   }
 }
 
-/* 密度 */
+/* 底栏 */
+.ele-pro-table-footer {
+  padding-top: 2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+
+  & > .ele-pagination {
+    margin: 0 auto;
+  }
+}
+
+/* 表头超出隐藏 */
+.ele-pro-table.is-header-ellipsis th.el-table__cell > .cell {
+  white-space: nowrap;
+}
+
+/* 粘性头部 */
+.ele-pro-table.is-sticky > .el-table {
+  overflow: visible;
+
+  & > .el-table__inner-wrapper > .el-table__header-wrapper {
+    position: sticky;
+    top: eleVar('table', 'sticky-top');
+    z-index: var(#{eleVarName('layout', 'index')}, 2);
+  }
+}
+
+.ele-admin-fixed-header:not(.ele-admin-maximized) .ele-pro-table.is-sticky {
+  #{eleVarName('table', 'sticky-top')}: 94px;
+}
+
+.ele-admin-maximized:not(.ele-admin-expanded) .ele-pro-table.is-sticky {
+  #{eleVarName('table', 'sticky-top')}: 40px;
+}
+
+/* 全屏 */
+.ele-pro-table.is-maximized {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  padding: 0 0 16px 0;
+  box-sizing: border-box;
+  background: elVar('bg-color');
+  z-index: calc(var(#{eleVarName('layout', 'index')}, 0) + 99);
+
+  .ele-toolbar.is-plain {
+    padding: 0 16px;
+  }
+}
+
+/* 密度设置 */
 .ele-tool-size-popper {
   min-width: 80px;
 }

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

@@ -1,8 +1,9 @@
-import type { CSSProperties, ExtractPropTypes } from 'vue';
+import type { CSSProperties, ExtractPropTypes, Slot } from 'vue';
 import type { TableProps } from 'element-plus';
 import type { Sort } from 'element-plus/es/components/table/src/table/defaults';
 import type ColumnProps from 'element-plus/es/components/table/src/table-column/defaults';
 import type { PaginationProps } from '../../ele-pagination/props';
+import type { ToolbarProps } from '../../ele-toolbar/props';
 /**
  * 数据
  */
@@ -14,7 +15,7 @@ export type Where = Record<keyof any, any>;
 /**
  * 排序参数
  */
-export type Orders = Record<string, string>;
+export type Orders = Record<string, OrderValue>;
 /**
  * 筛选参数
  */
@@ -86,6 +87,10 @@ export interface ReloadParams {
  * @param resolve 树表格懒加载方法
  */
 export type ReloadFunction = (option?: ReloadParams, parent?: DataItem, resolve?: ResolveFunction) => void;
+/**
+ * 排序的值
+ */
+export type OrderValue = string | number | boolean | null | undefined;
 /**
  * 请求参数设置
  */
@@ -94,6 +99,10 @@ export interface RequestOption {
     sortName?: string;
     /** 排序方式参数名称 */
     orderName?: string;
+    /** 升序的排序值 */
+    ascValue?: OrderValue;
+    /** 降序的排序值 */
+    descValue?: OrderValue;
 }
 /**
  * 响应参数设置
@@ -107,7 +116,7 @@ export interface ResponseOption {
 /**
  * 响应数据解析
  */
-export type ParseData = (data: unknown) => unknown;
+export type ParseData = (data: unknown) => DatasourceResult;
 /**
  * 排序方式封装
  */
@@ -172,12 +181,19 @@ export type TableSize = TableProps<DataItem>['size'];
 /**
  * 分页组件属性
  */
-export interface Pagination extends Partial<PaginationProps> {
+export interface TablePagination extends Partial<PaginationProps> {
     /** 是否自动修正页码 */
     autoAmend?: boolean;
     /** 自定义样式 */
     style?: CSSProperties;
 }
+/**
+ * 工具栏组件属性
+ */
+export interface TableToolbar extends Partial<ToolbarProps> {
+    /** 自定义样式 */
+    style?: CSSProperties;
+}
 /**
  * 内置工具按钮
  */
@@ -248,6 +264,10 @@ export type TableLoad = TableProps<DataItem>['load'];
  * 多选时行点击选中
  */
 export type RowClickChecked = boolean | 'smart';
+/**
+ * 获取插槽方法
+ */
+export type GetSlotFunc = (name: string) => Slot | undefined;
 /**
  * 表格实例数据
  */

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

@@ -1,18 +1,40 @@
-import type { Ref, SetupContext } from 'vue';
+import type { SetupContext } from 'vue';
 import type { ElTable } from 'element-plus';
-import type { TableGlobalConfig } from '../ele-config-provider/types';
+import type { PaginationProps } from '../ele-pagination/props';
 import type { tableEmits } from './props';
-import type { DataItem, Column, Columns, Sorter, Filter, Filters, OrderItem, Pagination, ReloadDataResult, TableSize, ColItem, CacheResult } from './types';
+import type { DataItem, Column, Columns, Sorter, Filter, Filters, OrderItem, RequestOption, ResponseOption, TablePagination, ReloadDataResult, TableSize, ColItem, CacheResult } from './types';
 /**
  * 获取默认页码
  * @param opt 分页组件属性
  */
-export declare function getDefaultPage(opt: boolean | Pagination): number | undefined;
+export declare function getTablePage(pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined): number;
 /**
  * 获取默认每页数量
  * @param opt 分页组件属性
  */
-export declare function getDefaultLimit(opt: boolean | Pagination): number | undefined;
+export declare function getTableLimit(pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined): number;
+/**
+ * 获取分页组件默认属性
+ * @param opt 分页组件属性
+ */
+export declare function getPaginationProps(size: TableSize, pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined, pageProps?: Pick<PaginationProps, 'total' | 'pageSize' | 'currentPage'>): Partial<PaginationProps> | null;
+/**
+ * 获取请求参数名称
+ * @param globalRequest 全局配置
+ * @param request 当前配置
+ */
+export declare function getRequestName(globalRequest?: RequestOption, request?: RequestOption): RequestOption;
+/**
+ * 获取响应参数名称
+ * @param globalRequest 全局配置
+ * @param request 当前配置
+ */
+export declare function getResponseName(globalResponse?: ResponseOption, response?: ResponseOption): ResponseOption;
+/**
+ * 获取表格默认尺寸
+ * @param globalProps 全局配置
+ */
+export declare function getTableSize(cacheKey?: string, size?: TableSize, globalSize?: TableSize): TableSize;
 /**
  * 获取数据某字段值
  * @param data 数据
@@ -96,11 +118,6 @@ export declare function getSizeCacheKey(cacheKey: string): string;
  * @param cacheKey 缓存的名称
  */
 export declare function getCacheSize(cacheKey?: string): TableSize;
-/**
- * 获取表格默认尺寸
- * @param globalProps 全局配置
- */
-export declare function getDefaultSize(size: TableSize, globalProps: Ref<TableGlobalConfig>): TableSize;
 /**
  * 判断行是否被禁用
  * @param row 行数据