ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,278 @@
+import type { CSSProperties, ExtractPropTypes } 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';
+/**
+ * 数据
+ */
+export type DataItem = Record<keyof any, any>;
+/**
+ * 搜索参数
+ */
+export type Where = Record<keyof any, any>;
+/**
+ * 排序参数
+ */
+export type Orders = Record<string, string>;
+/**
+ * 筛选参数
+ */
+export type Filters = Record<string, any>;
+/**
+ * 排序方式
+ */
+export interface Sorter extends Partial<Sort> {
+    /** 列配置 */
+    column?: Column;
+}
+/**
+ * 筛选条件
+ */
+export type Filter = Record<string, any>;
+/**
+ * 数据源方法参数
+ */
+export interface DatasourceParams {
+    /** 页码 */
+    page?: number;
+    /** 每页显示数量 */
+    limit?: number;
+    /** 搜索参数 */
+    where: Where;
+    /** 排序参数 */
+    orders: Orders;
+    /** 筛选参数 */
+    filters: Filters;
+    /** 排序方式 */
+    sorter: Sorter;
+    /** 筛选条件 */
+    filter: Filter;
+    /** 树表懒加载父级数据 */
+    parent?: DataItem;
+}
+/**
+ * 数据源方法返回结果
+ */
+export type DatasourceResult = DataItem[] | Record<string, any> | undefined;
+/**
+ * 数据源方法
+ * @param params 参数
+ */
+export type DatasourceFunction = (params: DatasourceParams) => Promise<DatasourceResult>;
+/**
+ * 数据源
+ */
+export type Datasource = DataItem[] | DatasourceFunction;
+/**
+ * 刷新方法参数
+ */
+export interface ReloadParams {
+    /** 页码 */
+    page?: number;
+    /** 每页数量 */
+    limit?: number;
+    /** 搜索参数 */
+    where?: Where;
+    /** 排序方式 */
+    sorter?: Sorter;
+    /** 筛选条件 */
+    filter?: Filter;
+}
+/**
+ * 刷新方法
+ * @param option 刷新参数
+ * @param parent 树表格父级数据
+ * @param resolve 树表格懒加载方法
+ */
+export type ReloadFunction = (option?: ReloadParams, parent?: DataItem, resolve?: ResolveFunction) => void;
+/**
+ * 请求参数设置
+ */
+export interface RequestOption {
+    /** 排序字段参数名称 */
+    sortName?: string;
+    /** 排序方式参数名称 */
+    orderName?: string;
+}
+/**
+ * 响应参数设置
+ */
+export interface ResponseOption {
+    /** 数据列表字段名称 */
+    dataName?: string;
+    /** 数据总数字段名称 */
+    countName?: string;
+}
+/**
+ * 响应数据解析
+ */
+export type ParseData = (data: unknown) => unknown;
+/**
+ * 排序方式封装
+ */
+export interface OrderItem {
+    /** 排序字段名 */
+    field: string;
+    /** 是否是降序 */
+    descend: boolean;
+    /** 自定义排序方法 */
+    sortMethod?: (a: DataItem, b: DataItem) => number;
+}
+/**
+ * 原始列数据
+ */
+export type TableColumn = Partial<ExtractPropTypes<typeof ColumnProps>>;
+/**
+ * 列数据
+ */
+export interface Column extends TableColumn {
+    /** 唯一标识 */
+    id?: string;
+    /** 插槽名称 */
+    slot?: string;
+    /** 表头插槽名称 */
+    headerSlot?: string;
+    /** 是否隐藏 */
+    hideInTable?: boolean;
+    /** 是否不显示在列配置中 */
+    hideInSetting?: boolean;
+    /** 子级 */
+    children?: Columns;
+}
+/**
+ * 列数据
+ */
+export type Columns = Column[];
+/**
+ * 渲染完成事件参数
+ */
+export interface DoneParams<T> {
+    /** 当前页数据 */
+    data: T[];
+    /** 当前页码 */
+    page?: number;
+    /** 总数量 */
+    total?: number;
+    /** 数据源原始数据 */
+    response?: any;
+}
+/**
+ * 渲染完成事件
+ */
+export type DoneFunction<T> = (
+/** 返回结果 */
+result: DoneParams<T>, 
+/** 树形表格时父级数据 */
+parent?: T) => void;
+/**
+ * 表格尺寸
+ */
+export type TableSize = TableProps<DataItem>['size'];
+/**
+ * 分页组件属性
+ */
+export interface Pagination extends Partial<PaginationProps> {
+    /** 是否自动修正页码 */
+    autoAmend?: boolean;
+    /** 自定义样式 */
+    style?: CSSProperties;
+}
+/**
+ * 内置工具按钮
+ */
+export type TableTool = 'reload' | 'size' | 'columns' | 'maximized';
+/**
+ * 列配置
+ */
+export interface ColItem {
+    /** 列配置标识 */
+    id: string;
+    /** 字段名称 */
+    prop?: string;
+    /** 列数据标识 */
+    columnKey?: string;
+    /** 标题 */
+    label?: string;
+    /** 是否选中 */
+    checked?: boolean;
+    /** 是否固定 */
+    fixed?: boolean | string;
+}
+/**
+ * 请求回调参数
+ */
+export type FetchCallback = (options: DatasourceParams) => void;
+/**
+ * 树表格懒加载方法
+ */
+export type ResolveFunction = (data: DataItem[]) => void;
+/**
+ * 缓存结果
+ */
+export interface CacheResult {
+    /** 缓存的列配置 */
+    data: ColItem[];
+    /** 选中展示的列配置 */
+    checkedIds: string[];
+    /** 是否是全部选中 */
+    isChecked: boolean;
+    /** 是否是半选状态 */
+    isIndeterminate: boolean;
+}
+/**
+ * 前端分页排序方法返回结果
+ */
+export interface ReloadDataResult {
+    /** 当前数据 */
+    data: DataItem[];
+    /** 当前页码 */
+    page: number;
+    /** 总数量 */
+    total: number;
+}
+/**
+ * 请求结果
+ */
+export interface ResponseResult {
+    /** 当前数据 */
+    data?: DataItem[];
+    /** 总数量 */
+    total?: number;
+}
+/**
+ * 表格懒加载方法
+ */
+export type TableLoad = TableProps<DataItem>['load'];
+/**
+ * 多选时行点击选中
+ */
+export type RowClickChecked = boolean | 'smart';
+/**
+ * 表格实例数据
+ */
+export interface TableCurrent {
+    /** 当前排序参数 */
+    sorter: Sorter | null;
+    /** 当前筛选参数 */
+    filter: Filter | null;
+    /** 当前搜索参数 */
+    where: Where;
+}
+/**
+ * 国际化
+ */
+export interface TableLocale {
+    refresh: string;
+    sizes: string;
+    columns: string;
+    maximized: string;
+    sizeLarge: string;
+    sizeDefault: string;
+    sizeSmall: string;
+    columnTitle: string;
+    columnReset: string;
+    columnUntitled: string;
+    columnFixedLeft: string;
+    columnFixedRight: string;
+}

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

@@ -0,0 +1,153 @@
+import type { Ref, SetupContext } from 'vue';
+import type { ElTable } from 'element-plus';
+import type { TableGlobalConfig } from '../ele-config-provider/types';
+import type { tableEmits } from './props';
+import type { DataItem, Column, Columns, Sorter, Filter, Filters, OrderItem, Pagination, ReloadDataResult, TableSize, ColItem, CacheResult } from './types';
+/**
+ * 获取默认页码
+ * @param opt 分页组件属性
+ */
+export declare function getDefaultPage(opt: boolean | Pagination): number | undefined;
+/**
+ * 获取默认每页数量
+ * @param opt 分页组件属性
+ */
+export declare function getDefaultLimit(opt: boolean | Pagination): number | undefined;
+/**
+ * 获取数据某字段值
+ * @param data 数据
+ * @param field 字段, 可嵌套a.b.c
+ */
+export declare function getValue<T>(data: unknown, field?: string | ((d: unknown) => T)): T | undefined;
+/**
+ * 获取排序方式封装
+ * @param sorter 排序方式
+ */
+export declare function getOrderItems(sorter: Sorter): OrderItem[];
+/**
+ * 前端分页排序
+ * @param datasource 数据源
+ * @param sorter 排序方式
+ * @param page 页码
+ * @param limit 每页数量
+ * @param pagination 是否分页
+ */
+export declare function reloadData(datasource: DataItem[], sorter: Sorter, page?: number, limit?: number): ReloadDataResult;
+/**
+ * 排序数据
+ * @param datasource 数据源
+ * @param sorter 排序方式
+ */
+export declare function sortData(datasource: DataItem[], sorter: Sorter): DataItem[];
+export declare function getRequestFilters(filter: Filter): Filters;
+/**
+ * 判断选中的数据是否改变
+ * @param rows 选中的数据
+ * @param selections 当前选中的数据
+ */
+export declare function selectionIsChange(rows: DataItem[], selections?: DataItem[]): boolean;
+/**
+ * 获取列配置标识
+ * @param column 列数据
+ */
+export declare function getColId(column?: Column): string | undefined;
+/**
+ * 获取初始显示的列数据
+ * @param columns 列数据
+ */
+export declare function getInitColumns(columns: Columns): Columns;
+/**
+ * 获取初始显示的列数据
+ * @param columns 列数据
+ * @param cacheKey 缓存名称
+ * @param sortable 是否可排序
+ */
+export declare function getInitCacheColumns(columns: Columns, cacheKey?: string, sortable?: boolean): Columns;
+/**
+ * 获取显示的列配置
+ * @param columns 原始列数据
+ * @param cols 列配置数据
+ * @param checkedIds 选中数据的标识
+ * @param sortable 是否进行排序
+ */
+export declare function getCheckedColumns(columns: Columns | undefined, cols: ColItem[], checkedIds: string[], sortable?: boolean): Columns;
+/**
+ * 获取列配置
+ * @param columns 列数据
+ * @param untitledText 未命名列文字
+ * @param cacheKey 缓存的名称
+ */
+export declare function getSettingCols(columns?: Columns, untitledText?: string, cacheKey?: string): CacheResult;
+/**
+ * 获取缓存的列配置下拉列表数据
+ * @param cacheKey 缓存的名称
+ */
+export declare function getCacheCols(cacheKey?: string): CacheResult | undefined;
+/**
+ * 获取列配置缓存的名称
+ */
+export declare function getColsCacheKey(cacheKey: string): string;
+/**
+ * 获取表格密度缓存的名称
+ */
+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 行数据
+ * @param index 行索引
+ * @param columns 列配置
+ */
+export declare function isDisableRow(row: DataItem, index: number, columns?: Columns): boolean;
+/**
+ * 表格默认实例方法
+ * @param getIns 获取表格实例
+ */
+export declare function useTableMethods(getIns: () => InstanceType<typeof ElTable> | null | undefined): {
+    clearSelection: () => void;
+    getSelectionRows: () => DataItem[] | undefined;
+    toggleRowSelection: (row: DataItem, selected?: boolean) => void;
+    toggleAllSelection: () => void;
+    toggleRowExpansion: (row: DataItem, expanded?: boolean) => void;
+    setCurrentRow: (row?: DataItem | null) => void;
+    clearSort: () => void;
+    clearFilter: (columnKeys?: string[]) => void;
+    doLayout: () => void;
+    sort: (prop: string, order: string) => void;
+    scrollTo: (options: number | ScrollToOptions, yCoord?: number | undefined) => void;
+    setScrollTop: (top?: number) => void;
+    setScrollLeft: (left?: number) => void;
+};
+/**
+ * 表格默认事件
+ * @param emit 事件触发对象
+ */
+export declare function useTableEvents(emit: SetupContext<typeof tableEmits>['emit']): {
+    onSelect: (selection: DataItem[], row: DataItem) => void;
+    onSelectAll: (selection: DataItem[]) => void;
+    onCellMouseEnter: (row: DataItem, column: Column, cell: HTMLTableCellElement, event: MouseEvent) => void;
+    onCellMouseLeave: (row: DataItem, column: Column, cell: HTMLTableCellElement, event: MouseEvent) => void;
+    onCellClick: (row: DataItem, column: Column, cell: HTMLTableCellElement, event: MouseEvent) => void;
+    onCellDblclick: (row: DataItem, column: Column, cell: HTMLTableCellElement, event: MouseEvent) => void;
+    onCellContextmenu: (row: DataItem, column: Column, cell: HTMLTableCellElement, event: MouseEvent) => void;
+    onRowClick: (row: DataItem, column: Column, event: MouseEvent) => void;
+    onRowContextmenu: (row: DataItem, column: Column, event: MouseEvent) => void;
+    onRowDblclick: (row: DataItem, column: Column, event: MouseEvent) => void;
+    onHeaderClick: (column: Column, event: MouseEvent) => void;
+    onHeaderContextmenu: (column: Column, event: MouseEvent) => void;
+    onHeaderDragend: (newWidth: number, oldWidth: number, column: Column, event: MouseEvent) => void;
+    onExpandChange: (row: DataItem, expanded: boolean) => void;
+    onSelectionChange: (selection: DataItem[]) => void;
+    onSortChange: (sorter: Sorter) => void;
+    onFilterChange: (filter: Filter) => void;
+    onCurrentChange: (currentRow: DataItem, oldCurrentRow: DataItem) => void;
+};