ele-admin-plus 1.1.9-beta.8 → 1.1.9

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

@@ -1,7 +1,8 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { EleLoadingProps, EleToolbarProps } from '../ele-app/plus';
-import type { DataItem, Columns, TableSize } from '../ele-data-table/types';
-import type { Where, Datasource, RequestOption, ResponseOption, ParseData, DoneParams, TablePagination, TableLocale } from './types';
+import { Where, Datasource, RequestOption, ResponseOption, ParseData, DoneParams, TablePagination, TableLocale, ExportConfig, PrintConfig } from './types';
+import { DataItem, Columns, TableSize } from '../ele-data-table/types';
+import { EleLoadingProps, EleToolbarProps } from '../ele-app/plus';
+import { PropType, ExtractPropTypes } from 'vue';
+
 /**
  * 属性
  */
@@ -64,9 +65,9 @@ export declare const proTableProps: {
     /** 表格全屏状态的高度 */
     maximizedHeight: (StringConstructor | NumberConstructor)[];
     /** 自定义表格样式 */
-    tableStyle: PropType<Partial<import("vue").CSSProperties>>;
+    tableStyle: PropType<Partial<import('vue').CSSProperties>>;
     /** 自定义底部样式 */
-    footerStyle: PropType<Partial<import("vue").CSSProperties>>;
+    footerStyle: PropType<Partial<import('vue').CSSProperties>>;
     /** 分页组件 */
     pagination: {
         type: PropType<boolean | TablePagination>;
@@ -78,18 +79,22 @@ export declare const proTableProps: {
     cacheKey: StringConstructor;
     /** 是否虚拟滚动 */
     virtual: BooleanConstructor;
-    /** 行高 */
+    /** 虚拟滚动表格行高 */
     rowHeight: NumberConstructor;
     /** 国际化 */
     locale: PropType<Partial<TableLocale>>;
-    width: (StringConstructor | NumberConstructor)[];
-    height: (StringConstructor | NumberConstructor)[];
+    /** 导出配置 */
+    exportConfig: PropType<ExportConfig>;
+    /** 打印配置 */
+    printConfig: PropType<PrintConfig>;
     size: {
-        readonly type: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "" | "small" | "default" | "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;
@@ -104,11 +109,8 @@ export declare const proTableProps: {
         type: PropType<Columns>;
         required: boolean;
     };
-    scrollbarAlwaysOn: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showOverflowTooltip: PropType<boolean | Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
+    scrollbarAlwaysOn: BooleanConstructor;
+    showOverflowTooltip: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
     emptyText: StringConstructor;
     indent: {
         type: NumberConstructor;
@@ -128,26 +130,26 @@ export declare const proTableProps: {
     };
     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>;
+    summaryMethod: PropType<import('element-plus').SummaryMethod<any> | undefined>;
+    rowClassName: PropType<import('element-plus').ColumnCls<any> | undefined>;
+    rowStyle: PropType<import('element-plus').ColumnStyle<any> | undefined>;
+    cellClassName: PropType<import('element-plus').CellCls<any> | undefined>;
+    cellStyle: PropType<import('element-plus').CellStyle<any> | undefined>;
+    headerRowClassName: PropType<import('element-plus').ColumnCls<any> | undefined>;
+    headerRowStyle: PropType<import('element-plus').ColumnStyle<any> | undefined>;
+    headerCellClassName: PropType<import('element-plus').CellCls<any> | undefined>;
+    headerCellStyle: PropType<import('element-plus').CellStyle<any> | undefined>;
     highlightCurrentRow: BooleanConstructor;
     currentRowKey: (StringConstructor | NumberConstructor)[];
     expandRowKeys: PropType<any[] | undefined>;
     defaultExpandAll: BooleanConstructor;
-    defaultSort: PropType<import("element-plus/es/components/table/src/table/defaults").Sort | undefined>;
+    defaultSort: PropType<import('element-plus').Sort | undefined>;
     tooltipEffect: StringConstructor;
-    tooltipOptions: PropType<Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
+    tooltipOptions: PropType<Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "showArrow" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter">> | undefined>;
     spanMethod: PropType<((data: {
         row: any;
         rowIndex: number;
-        column: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<any>;
+        column: import('element-plus').TableColumnCtx<any>;
         columnIndex: number;
     }) => number[] | {
         rowspan: number;
@@ -167,9 +169,9 @@ export declare const proTableProps: {
             children: string;
         };
     };
-    load: PropType<((row: any, treeNode: import("element-plus/es/components/table/src/table/defaults").TreeNode, resolve: (data: any[]) => void) => void) | undefined>;
+    load: PropType<((row: any, treeNode: import('element-plus').TreeNode, resolve: (data: any[]) => void) => void) | undefined>;
     tableLayout: {
-        type: PropType<"auto" | "fixed">;
+        type: PropType<"fixed" | "auto">;
         default: string;
     };
     flexible: BooleanConstructor;
@@ -180,19 +182,20 @@ export declare const proTableProps: {
     };
     slotNormalize: {
         type: BooleanConstructor;
-        default: boolean; /** 自定义请求参数名称 */
+        default: boolean;
     };
     bottomLine: {
         type: BooleanConstructor;
+        /** 自定义响应参数名称 */
         default: boolean;
     };
     emptyProps: {
-        type: PropType<import("../ele-data-table/types").TableEmptyProps>;
+        type: PropType<import('../ele-data-table/types').TableEmptyProps>;
         default: () => null;
     };
-    rowClickChecked: PropType<import("../ele-data-table/types").RowClickChecked>;
+    rowClickChecked: PropType<import('../ele-data-table/types').RowClickChecked>;
     reserveCurrent: BooleanConstructor;
-    selectedRowKeys: PropType<import("../ele-data-table/types").DataKey[]>;
+    selectedRowKeys: PropType<import('../ele-data-table/types').DataKey[]>;
 };
 export type ProTableProps = ExtractPropTypes<typeof proTableProps>;
 /**
@@ -216,21 +219,22 @@ export declare const proTableEmits: {
     select: (_selection: DataItem[], _row: DataItem) => boolean;
     selectAll: (_selection: DataItem[]) => boolean;
     selectionChange: (_selection: DataItem[]) => boolean;
-    cellMouseEnter: (_row: DataItem, _column: import("./types").Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
-    cellMouseLeave: (_row: DataItem, _column: import("./types").Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
-    cellClick: (_row: DataItem, _column: import("./types").Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
-    cellDblclick: (_row: DataItem, _column: import("./types").Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
-    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;
+    cellMouseEnter: (_row: DataItem, _column: import('./types').Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellMouseLeave: (_row: DataItem, _column: import('./types').Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellClick: (_row: DataItem, _column: import('./types').Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    cellDblclick: (_row: DataItem, _column: import('./types').Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
+    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;
-    headerDragend: (_width: number, _old: number, _column: import("./types").Column, _e: MouseEvent) => 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 | undefined) => boolean;
+    'update:selectedRowKeys': (_selectedRowKeys?: import('../ele-data-table/types').DataKey[] | undefined) => boolean; /** 数组数据源时刷新按钮点击事件 */
 };

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

@@ -1,6 +1,12 @@
 "use strict";
 require("element-plus/lib/components/checkbox/style/index");
 require("element-plus/lib/components/icon/style/index");
+require("element-plus/lib/components/form/style/index");
+require("element-plus/lib/components/form-item/style/index");
+require("element-plus/lib/components/input/style/index");
+require("element-plus/lib/components/select/style/index");
+require("element-plus/lib/components/option/style/index");
+require("element-plus/lib/components/button/style/index");
 require("../../ele-tooltip/style/index");
 require("../../ele-dropdown/style/index");
 require("../../ele-tool/style/index");
@@ -9,4 +15,7 @@ require("../../ele-loading/style/index");
 require("../../ele-pagination/style/index");
 require("../../ele-data-table/style/index");
 require("../../ele-virtual-table/style/index");
+require("../../ele-modal/style/index");
+require("../../ele-printer/style/index");
+require("../../ele-table/style/index");
 require("./index.scss");

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

@@ -107,7 +107,12 @@
 }
 
 /* 列配置 */
-.ele-tool-column.ele-popover {
+.ele-tool-column-popover.ele-popover {
+  width: eleVar('tool-column', 'width');
+  max-width: 100%;
+}
+
+.ele-tool-column {
   width: eleVar('tool-column', 'width');
   max-width: 100%;
 }
@@ -131,7 +136,8 @@
   }
 }
 
-.ele-tool-column.ele-popover.ele-popper.el-popper {
+.ele-tool-column .ele-tool-column-item .ele-tool-column-item-body,
+.ele-tool-column .ele-tool-column-header .ele-tool-column-label {
   .el-checkbox {
     height: eleVar('tool-column', 'item-height');
     line-height: eleVar('tool-column', 'item-height');
@@ -153,7 +159,7 @@
   box-sizing: border-box;
 }
 
-.ele-popover-body > .ele-tool-column-list {
+.ele-tool-column > .ele-tool-column-list {
   padding: eleVar('tool-column', 'body-padding');
   max-height: eleVar('tool-column', 'max-height');
   box-sizing: border-box;
@@ -182,6 +188,7 @@
 
   &.sortable-chosen {
     background: eleVar('tool-column', 'item-hover-bg');
+    opacity: 1 !important;
 
     & > .ele-tool-column-item-body {
       background: none;
@@ -189,7 +196,7 @@
   }
 
   &.sortable-ghost {
-    opacity: 0;
+    opacity: 0 !important;
   }
 
   & > .ele-tool-column-list {
@@ -230,9 +237,13 @@
     color: eleVar('tool-column', 'btn-active-color');
     background: eleVar('tool-column', 'btn-active-bg');
   }
+
+  & > .el-icon > svg {
+    stroke-width: 5;
+  }
 }
 
-.ele-popover-body.is-sortable {
+.ele-tool-column.is-sortable {
   .ele-tool-column-item-body {
     padding-left: 6px;
   }
@@ -241,3 +252,20 @@
     padding-left: calc(22px - #{eleVar('tool-column', 'item-padding')});
   }
 }
+
+/* 导出和打印的列选择 */
+.ele-tool-export-form,
+.ele-tool-print-form {
+  .ele-tool-column {
+    border: 1px solid elVar('border-color', 'light');
+    border-radius: elVar('border-radius', 'base');
+    line-height: normal;
+    width: 100%;
+  }
+
+  .ele-tool-column-header {
+    background: elVar('fill-color', 'lighter');
+    border-top-left-radius: elVar('border-radius', 'base');
+    border-top-right-radius: elVar('border-radius', 'base');
+  }
+}

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

@@ -1,8 +1,12 @@
 import type {
   EleDataTableInstance,
   EleVirtualTableInstance,
-  ElePaginationProps
+  ElePaginationProps,
+  EleModalProps,
+  ElePrinterProps,
+  EleTableProps
 } from '../ele-app/plus';
+import type { PaginationTotal } from '../ele-pagination/types';
 import type {
   DataItem,
   Column,
@@ -13,6 +17,7 @@ import type {
   TableSize,
   ResolveFunction
 } from '../ele-data-table/types';
+import type { BodyColumns } from '../ele-virtual-table/types';
 export type {
   DataItem,
   Column,
@@ -24,6 +29,11 @@ export type {
   ResolveFunction
 };
 
+/**
+ * 分页参数
+ */
+export type Pages = Record<string, number>;
+
 /**
  * 搜索参数
  */
@@ -47,6 +57,8 @@ export interface DatasourceParams {
   page?: number;
   /** 每页显示数量 */
   limit?: number;
+  /** 分页参数 */
+  pages: Pages;
   /** 搜索参数 */
   where: Where;
   /** 排序参数 */
@@ -116,6 +128,10 @@ export type OrderValue = string | number | boolean | null | undefined;
  * 请求参数设置
  */
 export interface RequestOption {
+  /** 页码参数名称 */
+  pageName?: string;
+  /** 每页数量参数名称 */
+  limitName?: string;
   /** 排序字段参数名称 */
   sortName?: string;
   /** 排序方式参数名称 */
@@ -137,7 +153,7 @@ export interface ResponseOption {
 }
 
 /**
- * 响应数据解析
+ * 响应数据解析方法
  */
 export type ParseData = (data: unknown) => DatasourceResult;
 
@@ -159,10 +175,10 @@ export interface OrderItem {
 export interface DoneParams<T> {
   /** 当前页数据 */
   data: T[];
+  /** 总数量 */
+  total?: PaginationTotal;
   /** 当前页码 */
   page?: number;
-  /** 总数量 */
-  total?: number;
   /** 数据源原始数据 */
   response?: any;
 }
@@ -188,7 +204,14 @@ export interface TablePagination extends ElePaginationProps {
 /**
  * 内置工具按钮
  */
-export type TableTool = 'reload' | 'size' | 'columns' | 'maximized' | string;
+export type TableTool =
+  | 'reload'
+  | 'size'
+  | 'columns'
+  | 'maximized'
+  | 'export'
+  | 'print'
+  | string;
 
 /**
  * 列配置
@@ -211,6 +234,11 @@ export interface ColItem {
  */
 export type FetchCallback = (options: DatasourceParams) => void;
 
+/**
+ * 请求方法
+ */
+export type FetchFunction = (callback: FetchCallback) => void;
+
 /**
  * 前端分页排序方法返回结果
  */
@@ -258,6 +286,122 @@ export type TableViewInstance =
   | EleVirtualTableInstance
   | null;
 
+/**
+ * 导出的数据来源类型
+ */
+export type ExportDataType = 'selections' | 'pageData' | 'data';
+
+/**
+ * 导出的数据每一项
+ */
+export interface ExportDataItem {
+  /** 唯一值 */
+  key?: string;
+  /** 行数据 */
+  row?: DataItem;
+  /** 行索引 */
+  index: number;
+  /** 列配置 */
+  column?: Column;
+  /** 文本 */
+  text?: string;
+  /** 所占列数 */
+  colspan?: number;
+  /** 所占行数 */
+  rowspan?: number;
+}
+
+/**
+ * 导出数据封装返回结果
+ */
+export interface ExportDataResult {
+  /** 表头数据 */
+  headerData: ExportDataItem[][];
+  /** 主体数据 */
+  bodyData: ExportDataItem[][];
+  /** 表尾数据 */
+  footerData: ExportDataItem[][];
+  /** 主体列配置 */
+  bodyCols: BodyColumns;
+}
+
+/**
+ * 导出数据前的钩子函数的参数
+ */
+export interface BeforeExportParams {
+  /** 导出的数据 */
+  data: DataItem[];
+  /** 导出的列配置 */
+  columns?: Columns;
+  /** 导出的表头数据封装 */
+  headerData: ExportDataItem[][];
+  /** 导出的主体数据封装 */
+  bodyData: ExportDataItem[][];
+  /** 导出的页脚数据封装 */
+  footerData: ExportDataItem[][];
+  /** 主体列配置 */
+  bodyCols: BodyColumns;
+  /** 文件名 */
+  fileName?: string;
+  /** 关闭确定按钮的加载状态 */
+  hideLoading: () => void;
+  /** 关闭弹窗 */
+  closeModal: () => void;
+}
+
+/**
+ * 导出数据前的钩子函数
+ */
+export type BeforeExport = (params: BeforeExportParams) => boolean | void;
+
+/**
+ * 导出配置
+ */
+export interface ExportConfig {
+  /** 弹窗参数 */
+  modalProps?: EleModalProps;
+  /** 表格全部数据 */
+  datasource?: Datasource;
+  /** 导出前的钩子函数 */
+  beforeExport?: BeforeExport;
+  /** 默认数据类型 */
+  dataType?: ExportDataType;
+  /** 默认文件名 */
+  fileName?: string;
+}
+
+/**
+ * 打印配置
+ */
+export interface PrintConfig {
+  /** 弹窗参数 */
+  modalProps?: EleModalProps;
+  /** 打印组件参数 */
+  printerProps?: ElePrinterProps;
+  /** 打印表格参数 */
+  tableProps?: EleTableProps;
+  /** 表格全部数据 */
+  datasource?: Datasource;
+  /** 打印前的钩子函数 */
+  beforePrint?: BeforeExport;
+  /** 默认数据类型 */
+  dataType?: ExportDataType;
+}
+
+/**
+ * 打印参数
+ */
+export interface TablePrintOptions extends ExportDataResult {
+  /** 是否开始打印 */
+  printing: boolean;
+  /** 是否有表头 */
+  hasHeader: boolean;
+  /** 是否有表尾 */
+  hasFooter: boolean;
+  /** 打印的数据 */
+  data: DataItem[];
+}
+
 /**
  * 国际化
  */
@@ -266,6 +410,8 @@ export interface TableLocale {
   sizes: string;
   columns: string;
   maximized: string;
+  export: string;
+  print: string;
   sizeLarge: string;
   sizeDefault: string;
   sizeSmall: string;
@@ -274,4 +420,13 @@ export interface TableLocale {
   columnUntitled: string;
   columnFixedLeft: string;
   columnFixedRight: string;
+  exportOk: string;
+  exportCancel: string;
+  exportFileName: string;
+  exportFileNamePlaceholder: string;
+  exportSelectData: string;
+  exportSelectColumn: string;
+  exportDataTypePage: string;
+  exportDataTypeSelected: string;
+  exportDataTypeAll: string;
 }