/** * ProTable 类型定义 */ import { ColumnProps, TableProps } from '@alicloudfe/components/types/table'; import { ProFieldType, ProFieldRenderProps, ProFieldDataSourceItem, EmptyContentProps } from '../field'; import { QueryFilterProps, ProFormType } from '../form'; import { ProActionGroupProps, ProActionButtonProps } from '../actions'; import { PaginationProps } from '@alicloudfe/components/types/pagination'; import { HeaderProps as ProTableHeaderProps } from '../field'; import { Method, AxiosRequestConfig } from 'axios'; import React from 'react'; import { ProCardProps } from '../card'; declare type IFieldRenderProps = keyof ProFieldRenderProps; /** 列record函数 */ declare type ProTableCellFunProp = (value: any, index: number, record: any, ...others: any) => any; export declare type ITableCellRender = { [key in IFieldRenderProps]?: ProFieldRenderProps[key] | ProTableCellFunProp; } | ((...other: any) => React.ReactNode); declare type TDataService = { /** 翻页器总数 */ total?: string | number; /** 表格数据 */ data?: any; }; export declare type responsivePaginationType = 'mini' | 'small' | 'simple' | 'normal'; export declare type ProTableColumnProps = { /** 是否强制刷新 */ forcedUpdate?: boolean; /** 是否开启了自动计算宽度 */ isAutoWidth?: boolean; /** 自动计算宽度时的被挤占的情况 */ shrink?: number; /** 是否自动适应该列宽度 */ autoWidth?: boolean; /** * 会在 title 之后展示一个 icon,hover 之后提示一些信息 */ tooltip?: string; /** * title 之后展示一个 icon 设置,可传 TeamixIcon 对应的 type,也可以是自定义 Icon */ tooltipIcon?: React.ReactNode; /** 对应 ProField 里面的 type */ valueType?: ProFieldType; /** 是否隐藏表格列,列配置也不显示 */ hidden?: boolean; /** 【列配置】是否默认隐藏表格列,但列配置显示 */ columnFilters?: boolean; /** 【列配置】是否禁用隐藏列 */ columnFiltersDisabled?: boolean; /** 渲染单元格内容字段 */ render?: ITableCellRender; /** 枚举值 */ dataSource?: ProFieldDataSourceItem[] | ProTableCellFunProp; /** 表头的过滤菜单项,当值为 true 时,自动使用 dataSource 生成 */ filters?: boolean | ProTableColumnsFilterItemProps[]; /** 表头的过滤菜单项过滤方式 single 单选 multiple 多选 */ filtersMode?: 'single' | 'multiple'; /** 表头的过滤菜单项默认值 */ defaultFilterSelectedKeys?: string[]; /** 表头的过滤菜单项在搜索之前的参数操作 */ beforeFilter?: (rules: string[]) => string; /** 表头的过滤菜单宽度 */ filtersWidth?: string | number; /** 操作组配置 */ actionSchema?: ProActionGroupProps; /** 指定列对应的字段,支持`a.b`形式的快速取值 和 数组取值 */ dataIndex?: string | string[]; /** 指定 valueType 为日期时间格式时,可以格式化日期时间 */ format?: string; /** 多级表头 **/ children?: ProTableColumnProps[]; /** ProField 其他配置项 */ props?: any; } & Omit; export declare type ProColumnProps = ProTableColumnProps; export declare type ProTableProps = { /** 表格是否自适应宽度 */ autoWidth?: boolean; /** ProColums 定义,取代 Table 的 columns */ columns: ProTableColumnProps[]; /** 请求地址 */ url?: string; /** 请求方法 */ method?: Method; /** 请求参数 */ params?: { [propName: string]: any; }; /** sort 排序请求参数处理函数 */ formatSort?: (sort: object) => object; /** 如需自定义调用参数格式,则可以设定此值在请求前对 params 进行自定义,如果返回false则可以阻止请求 */ formatParams?: ((params: any) => typeof params) | string; /** 对返回值的 data,total 进行映射处理 */ formatResult?: TDataService | ((res: any) => TDataService) | string; /** 请求成功后经过 formatResult 转换后的回调 */ onFormatResult?: (data: any[]) => void; /** 是否第一次加载时就发起请求 */ requestWhenMount?: boolean; /** 内部请求每次成功后的回调 */ onSuccess?: (res: any) => void; /** 内部请求失败时的回调 */ onError?: (error: Error) => void; /** 自定义的请求配置 */ requestConfig?: AxiosRequestConfig; /** 翻页页数的请求参数名 */ pageKey?: string; /** 翻页器页数对应字段 */ pageSizeKey?: string; /** 翻页器每页显示的条数 */ pageSize?: number; /** 每页显示选择器可选值 */ pageSizeList?: PaginationProps['pageSizeList']; /** 透传给翻页器的属性 */ paginationProps?: PaginationProps; /** 是否显示翻页器 */ showPagination?: boolean; /** 手动指定响应式翻页器的 type */ responsivePaginationType?: responsivePaginationType; /** 是否使用内置的 rowSelection */ useRowSelection?: boolean; /** 内置 rowSelection 变化时的回调 */ onChangeRowSelection?: (selectedRowKeys: string[]) => void; /** 获取内置 rowSelection */ getRowSelection?: (rowSelection: innerRowSelectionType) => void; /** 表格底部(左侧)配置 */ footerAction?: ProActionGroupProps | React.ReactNode; /** 表格底部(右层)配置 */ footer?: React.ReactNode; /** * @deprecated 已废弃 建议用 dataFilter 中的 filterDebounce 代替 * 筛选区自动搜索的防抖时间(毫秒) */ filterDebounce?: number; /** ProTable action 的引用,便于手动触发一些方法 */ actionRef?: React.MutableRefObject; /** 是否首次加载渲染骨架屏 */ showSkeleton?: boolean; /** 渲染骨架屏条数 */ skeletonSize?: number; /** 表格主题 className */ tableClassName?: string; /** 非全屏模式下是否吸底 默认状态下取用 ProPageContainer 作为参照物。如果传入了 Dom,则取用 Dom 作为参照物 */ footerSuction?: boolean | Element; /** 当满足条件时开启自动刷新,返回值为自动刷新间隔时间,如果返回 0 或 false 则停止自动刷新,每次触发翻页、搜索都将重置时间 */ autoRefresh?: ((dataSource: any[]) => number | boolean) | boolean; /** 自动刷新配置 */ autoRefreshProps?: { /** 可选间隔列表 **/ dataSource?: { label?: React.ReactNode; value?: number; }[]; }; /** 自定义请求方法,必需返回 success,data 字段,如果需要手动分页 total 也是必需的 */ customRequest?: (params: any) => Promise<{ success: boolean; data: any[]; total?: number; }>; /** 翻页时是否保留之前批量选择数据 */ reserveSelectedRecords?: boolean; /** 默认漏斗过滤条件 */ defaultFilterParams?: { [key: string]: any[] | any; }; /** 禁用掉批量选择中的全选 */ disableSelectAll?: boolean; /** 接收外部传来的 context,eg: dialog-table */ context?: any; /** 是否固定表格主体(开启后横向滚动条会固定在底部) */ fixedTableBody?: boolean; /** 用于埋点 */ 'data-teamix-spm'?: string; /** 是否切换卡片视角 **/ switchCardView?: boolean; /** 卡片视角配置 **/ cardViewProps?: ProTableCardProps; /** 默认展示维度 **/ defaultView?: 'table' | 'card'; /** 空状态配置 **/ emptyProps?: EmptyContentProps; /** 是否绑定 url **/ bindUrl?: boolean; /** 绑定 url 配置 **/ bindUrlProps?: ProTableBindUrlProps; /** 当前页数据被删除完后,是否跳转回第一页 **/ autoRedirect?: boolean; /** 使用超大数据模式 **/ useMaxData?: boolean; rowSelection?: rowSelectionType; /** React Key **/ key?: React.Key | null; } & Omit & ProTableTopAreaProps; export declare type rowSelectionType = { getProps?: (record: any, index: number) => any; onChange?: (selectedRowKeys: Array, records: Array) => void; onSelect?: (selected: boolean, record: any, records: Array) => void; onSelectAll?: (selected: boolean, records: Array) => void; selectedRowKeys?: Array; selectedRecords?: any[]; mode?: 'single' | 'multiple'; titleProps?: () => any; columnProps?: () => any; titleAddons?: () => any; /** 默认选中的 Key 值 **/ defaultSelectedRowKeys?: any[]; /** 默认选中的 record 值 **/ defaultSelectedRecords?: any[]; } & TableProps['rowSelection']; export declare type innerRowSelectionType = { rowSelection: rowSelectionType; selectedRowKeys: string[]; setSelectedRowKeys: (selectedRowKeys: string[]) => void; selectedRecords: any[]; setSelectedRecords: (selectedRecords: any[]) => void; }; export declare type ProTableActionType = { /** 全屏展示 */ fullScreen?: () => boolean; /** 设置显示列 */ setColumn?: (newColumns: ProColumnProps[], update?: boolean) => void; /** 表格尺寸 */ size?: 'small' | 'medium'; /** 设置表格大小 */ setSize?: (mode: 'small' | 'medium') => void; /** 刷新表格 */ refresh?: (params?: any) => void; /*** 表格内部请求方法 */ request?: (params?: any) => void; /** 重置表格 */ reset?: () => void; /** 表格选择相关属性 */ rowSelection?: innerRowSelectionType | rowSelectionType; /** 清空表格选择 */ clearRowSelection?: () => void; /** 过滤 DataSource */ filterDataSource?: (dataIndex: string) => void; /** 翻页器当前信息 */ pageInfo?: { /** 总数 */ total?: number; /** 当前页 */ current?: number; /** 每页数据量 */ pageSize?: number; /** 翻页页数的请求参数名*/ targetPageKey?: string; /** 翻页单页数量的请求参数名 */ targetPageSizeKey?: string; }; /** 重置翻页器为1,不发送请求 */ resetPage?: () => void; nextPage?: () => void; /** 获取数据过滤区表单实例 */ dataFilterForm?: ProFormType; /** 用于在 mount 的时候获取到表单 ref */ dataFilterFormRef?: React.MutableRefObject; normalDataFilterForm?: ProFormType; fullscreenDataFilterForm?: ProFormType; filterEnableRef?: any; /** 表格当前的数据 */ data?: any[]; /** 切换视角 **/ switchView?: (view: 'card' | 'table') => void; /** 设置数据源 **/ setData?: (data: any[]) => void; setCardViewScrollPosition?: (scrollTop: number) => void; /** 刷新定时器间隔时间 */ setAutoRefreshTimers?: (timers: number) => void; /** 清除刷新定时器 */ clearAutoRefreshTimers?: () => void; } & ProTableActionTypeMutations; /** action State 定义 */ export declare type ProTableActionTypeMutations = { /** 获取state 状态 */ getState?: () => ProTableActionTypeState; /** 设置state 状态 */ setState?: (key: string, value: any) => void; /** 设置全屏状态 */ setFullScreenState?: (state: boolean) => void; /** 绑定state监听事件 */ on?: (...args: any) => void; /** 销毁监听事件 */ off?: (...args: any) => void; /** 设置 列 过滤规则 */ setFilterRules?: (rules: ProTableColumnsFilterRulesItem) => void; /** 获取 列 过滤规则 */ getFilterRules?: () => object; /** 重新计算表格maxHeight高度 */ resetTableMaxBodyHeight?: (offset: number) => void; /** 列筛选规则 */ filterColumns?: any[]; /** 获取所有 on 监听事件 */ getCallback?: () => any; }; /** action Mutations 定义 */ export declare type ProTableActionTypeState = { fullScreenState: boolean; filterRules: ProTableColumnsFilterRulesItem; filterColumns: ProTableColumnProps[]; [key: string]: any; }; export declare type ProTableDataFilterProps = { searchUndefined?: boolean; /** 搜索时是否传入值为空字符串的参数,默认不传 */ searchEmptyString?: boolean; /** 自定义内容 */ content?: React.ReactNode; } & QueryFilterProps; export declare type dataFilterProps = ProTableDataFilterProps; export declare type ProTableTopAreaProps = { /** 标题区 */ header?: ProTableHeaderProps; /** 主操作区 */ mainAction?: ProActionGroupProps | React.ReactNode; /** 工具栏区 */ toolBar?: boolean | ProTableToolBarItem[]; /** 是否开启工具栏自适应 */ toolBarAutoWidth?: boolean; /** 快捷操作区 */ extra?: ProActionButtonProps | React.ReactNode | React.ReactNode[]; /** 数据过滤区 */ dataFilter?: ProTableDataFilterProps; /** 数据过滤区下方自定义区域 */ afterDataFilter?: React.ReactNode; /** 传给 QueryFilter 的 formRef */ dataFilterFormRef?: any; /** 排序、筛选列展示状态 */ filterColumnType?: 'dialog' | 'dropdown' | 'auto'; }; /** 单个工具栏 */ export declare type ProTableToolBarItem = React.ReactNode | 'refresh' | 'density' | 'filterColumn' | 'fullscreen'; export declare type toolBarItem = ProTableToolBarItem; export declare type ProTableLayoutProps = { actionRef: React.MutableRefObject; columns?: ProTableColumnProps[]; rowSelection?: innerRowSelectionType | rowSelectionType; fullScreenState?: boolean; dataTeamixSpm?: string; switchCardView?: boolean; defaultView?: 'table' | 'card'; autoRefresh?: ProTableProps['autoRefresh']; autoRefreshProps?: ProTableProps['autoRefreshProps']; bindUrl?: ProTableProps['bindUrl']; bindUrlProps?: ProTableProps['bindUrlProps']; } & ProTableTopAreaProps; /** columns 列过滤 */ export declare type ProTableColumnsFilterItemProps = { /** 绑定值 */ value?: string | boolean | number; /** 显示值 */ label?: React.ReactNode; }; /** columns 列过滤规则 item (action ref state用) */ export declare type ProTableColumnsFilterRulesItem = { [key: string]: { /** 原始规则 */ rules: string[]; /** 处理过后的作为params的规则 */ params: string; }; }; /** 非全屏模式下的吸底 useState类型定义 */ export declare type parentPositionProps = { offsetLeft: number; offsetRight: number; }; /** card props **/ export declare type ProTableCardProps = { /** 标题 dataIndex **/ title?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps) | ((index: number, record: any) => ProTableColumnProps['dataIndex'] | ProTableColumnProps); /** 副标题 dataIndex **/ subTitle?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps) | ((index: number, record: any) => ProTableColumnProps['dataIndex'] | ProTableColumnProps); /** 内容区域 dataIndex **/ content?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[] | ((index: number, record: any) => (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[]); /** extra 区域 **/ extra?: (ProActionGroupProps | React.ReactNode | ProTableColumnProps['dataIndex'])[] | ((index: number, record: any) => (ProActionGroupProps | React.ReactNode | ProTableColumnProps['dataIndex'])[]); /** 标签区域 **/ tags?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[] | ((index: number, record: any) => (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[]); /** 分页器条数 **/ pageSize?: 12 | 24 | 48 | 96 | number; /** 卡片区域滚动高度 **/ scrollHeight?: number | string; /** 自动加载下一页 **/ autoLoadNextPage?: boolean; /** 滚动容器 用于监听触底事件 **/ scrollDom?: HTMLElement; /** 触底事件 **/ onScrollBottom?: () => void; /** 使用表格分页 **/ useTablePagination?: boolean; /** 使用响应式 **/ cardResponsiveProps?: { xxs?: number; xs?: number; s?: number; m?: number; l?: number; xl?: number; }; /** 卡片配置 **/ cardProps?: { [key in keyof ProCardProps]?: ProCardProps[key] | ((index: number, record: any) => ProCardProps[key]); }; /** 是否展示卡片骨架 **/ showSkeleton?: boolean; }; /** card 视角 Props (内部组件) **/ export declare type ProTableCardViewProps = { /** 卡片视角配置 **/ cardViewProps?: ProTableCardProps; /** 数据源 **/ dataSource?: any[]; /** 原始 columns **/ originColumns?: any[]; /** 处理过后的 columns **/ columns?: any[]; /** 加载动画 **/ loading?: boolean; /** 上下文 **/ context?: any; actionRef?: React.MutableRefObject; /** 卡片区域滚动高度 **/ scrollHeight?: number | string; /** 骨架屏状态 **/ showSkeleton?: boolean; /** ProCard 卡片配置 **/ cardProps?: ProTableCardProps['cardProps']; /** 表格分页器参数 **/ tablePaginationProps?: PaginationProps; /** 空数据配置 **/ emptyProps?: ProTableProps['emptyProps']; /** 自定义渲染空数据 **/ emptyContent?: ProTableProps['emptyContent']; }; export declare type ProTableBindUrlProps = { /** 翻页器区域 **/ pagination?: boolean; /** 搜索区域 **/ filters?: boolean; /** 表格标题过滤器区域 **/ headerFilters?: boolean; }; export {};