/// import type { ClassValue } from '../../utils/cx'; import { TableModeEnum } from './enum'; import { PdTablePaginationEnum } from './enum'; export interface TableProps { /** * 最外层样式名 */ className?: ClassValue; /** * 是否加载中 */ loading?: boolean; /** * 每一行数据 */ dataSource: any[]; /** * 行的唯一id */ rowKey?: string; /** * 当前选中的行 用来表高亮 */ activeRowKey?: string; /** * 列信息 */ columns: PdTableColumn[]; /** * 查询用的 基础字段配置 （不传同columns） */ filterConfigure?: any[]; /** * 单元格空时候的占位符 默认空 */ cellPlaceholder?: string; /** * 内容区域占满屏幕剩余空间 默认开启 */ autoFillHeight?: boolean; /** * 支持点击一行的触发选中状态切换 */ checkOnItemClick?: boolean; /** * 分页容器样式 */ footerToolbarClassName?: string; /** * 是否显示头部筛选部分 */ showHeader?: boolean; /** * 过滤器默认参数 */ defaultFilter?: { [key: string]: any; }; /** * 表格左上角按钮集合 */ actions?: React.ReactNode[]; /** * 表格详情 */ rowInfo?: React.ReactNode; /** * 是否开启高级筛选 （默认关闭） */ isFilterPlus?: boolean; /** * 是否需要根据配置设置mode （默认关闭） */ needSetMode?: boolean; /** * 高级筛选内部接口 */ filterPlusApi?: { get: string; save: string; add: string; edit: string; getAllProject?: string; } | null; /** * 高级筛选所有的卡片 临时的 包含未保存 */ filterPlusCards?: { [key: string]: any; }[]; PROJECT_ID?: string; filterPlusAllProject?: { [key: string]: any; }[]; /** * 高级筛选所有的卡片 和接口同步 用于将未保存的卡片数据还原 */ filterPlusCardsOriginal?: { [key: string]: any; }[]; /** * 当前显示的卡片id */ curAdCardId?: string; /** * 当前显示的卡片信息 */ curFilterPlusCard?: { [key: string]: any; }; /** * 当前接口选择的卡片id */ curAdFilterId?: string; /** * 表格配置信息 */ controlConfig?: any; /** * 设置当前卡片id * @param id 卡片id */ setCurCardId?: (id: string) => void; /** * 设置当前接口需要的卡片id */ setCurAdFilterId?: (id: string) => void; /** * 设置当前表格需要的布局配置 */ saveControlConfig?: (config: any) => void; /** * 设置 高级筛选卡片 * @param cards */ setFilterPlusCards?: (cards: any[]) => void; /** * 设置 高级筛选卡片 * @param cards */ setFilterPlusCardsOriginal?: (cards: any[]) => void; /** * 是否显示重置 默认开启 */ isReset?: boolean; /** * 是否开启 宽窄模式 默认开启 全等于false 关闭 */ isMode?: boolean; /** * 是否开启排序 */ draggable?: boolean; /** * 表格显示模式 */ mode?: TableModeEnum; /** * 是否开启分组 默认不开启 */ isGroup?: boolean; /** * 当前选中的分组id */ groupKey?: string; /** * 切换分组 */ onChangeGroup?: (key: string) => void; /** * 编辑行/头部，如果没有rowData就是头部统一更改 */ onChange?: (val: object, rowData?: object) => void; /** * 表格和详情宽度设置 （前提是 isMode 开启了详情模式） * 宽窄模式配置 */ modeOptions?: { default: 'table' | 'detail'; minTableWidth?: number; minDetailWidth?: number; detailWidth?: number; }; /** * 是否显示表格控制按钮 默认开启 */ isContrl?: boolean; /** * 过滤器列表 */ filter?: string[]; /** * 表格默认分页 （不传就是 1 50 0） */ pageInfo?: { page: number; size: number; total: number; }; /** * 分页器 没有明确指定 null 或者 false 都是显示 */ pagination?: { /** * 位置 [[左侧配置], [右侧配置]] (默认[[statistics], [pagination, switchPage]]) * statistics 是统计文案 如： 第1/3页 / 当前页50条 / 总共128条 * switchPage 是每页多少条 * pagination 是分页器 */ place?: Array>; /** * 是否开启 跳转到多少页的弹框 (默认开启) */ showPageInput?: boolean; /** * 统计文案的模板 */ statistics?: string; /** * 每页多少条 （默认：[5, 10, 20, 50, 100]） */ switchPage?: number[]; } | null | false; detailOpen?: boolean; rowSelection?: { defaultSelectedRowKeys?: string[] | number[]; selectedRowKeys?: Array; type?: 'checkbox' | 'radio'; onChange?: (selectedRowKeys: Array, selectedRows: any[]) => void; onSelect?: (record: any, selected: boolean, selectedRows: any[]) => void; onSelectAll?: (selected: boolean, selectedRows: any[], changeRows: any[]) => void; onSelectInvert?: (selectedRowKeys: Array) => void; onSelectNone?: () => void; }; /** * 查询方法 */ onSearch: (data: { [key: string]: any; }) => void; /** * 添加行事件 */ onRow?: (record: any) => { onClick?: (event: any) => void; onDoubleClick?: (event: any) => void; onContextMenu?: (event: any) => void; onMouseEnter?: (event: any) => void; onMouseLeave?: (event: any) => void; }; /** * 切换显示行 * @param row */ onSwitchRow?: (row: any) => void; /** * 表头点击事件 */ onHeaderRow?: (columns: any, index: any) => { onClick: () => void; }; onModeChange?: (mode: TableModeEnum) => void; /** * 排序 * @param oldIndex 拖动之前的位置 * @param newIndex 拖动之后的位置 */ onDrag?: (oldIndex: number, newIndex: number) => void; request?: (url: string, data: any) => Promise; } export interface IRow { [key: string]: any; } export interface TableContentProps { tableClassName?: string; rowKey: string; rows: any[]; activeRow: string | null; columns: PdTableColumn[]; tableRef: any; tableHead: React.ReactNode; groupSollapsed: string[]; groupInfo: { key: string; name: string; map: any; }; selectedRowKeys: Array; renderCell: (column: PdTableColumn, item: IRow, index: number) => React.ReactNode; onRowClick: (e: any, item: IRow) => void; onDoubleClick: (e: any, item: IRow) => void; onClickGroup: (row: any) => void; onScroll: () => void; } export interface TableBodyProps { rowKey: string; activeRow: string | null; rows: any[]; columns: PdTableColumn[]; groupSollapsed: string[]; groupInfo: { key: string; name: string; map: any; }; selectedRowKeys: Array; renderCell: (column: PdTableColumn, item: IRow, index: number) => React.ReactNode; onRowClick: (e: any, item: IRow) => void; onClickGroup: (row: any) => void; onDoubleClick: (e: any, item: IRow) => void; } export interface TableRowProps { item: IRow; active: boolean; checked: boolean; itemIndex: number; columns: PdTableColumn[]; rowClassName?: string; renderCell: (column: PdTableColumn, item: IRow, index: number) => React.ReactNode; onRowClick: (e: any, item: IRow) => void; onDoubleClick: (e: any, item: IRow) => void; } export declare type PdTableColumn = { /** * 单元格类型 */ type?: 'date' | 'input-text' | 'select' | 'input-tag' | 'input-date' | 'editor'; /** * list (type = select 才有) */ options?: { value: any; label: string; }[]; /** * dict (type = select 才有) */ map?: { [key: string]: string; }; /** * 绑定字段名 */ name: string; /** * 列名 不填同name */ label?: string; /** * 固定列 */ fixed?: 'left' | 'right' | 'none'; /** * 是否可排序 */ sortable?: boolean; /** * 是否可快速搜索 */ filterable?: boolean; /** * 配置是否默认展示 (只有toggled 明确指定为false 时不显示) */ toggled?: boolean; /** * 列宽度 (用户设置的， 没有设置去最小宽度 minWidth) */ width?: number | string; /** * 列最小宽度 拖拽调整列宽度需要 */ minWidth?: number; /** * 列真实宽度 (最终dom宽度) */ realWidth?: number; /** * 列对齐方式 */ align?: 'left' | 'right' | 'center' | 'justify'; /** * 单元格样式表达式 * eg. "<%= data.version > 5 ? 'text-danger' : '' %>" */ classNameExpr?: string; /** * 列样式表 (不带表头) */ className?: ClassValue; /** * 列头样式表 */ labelClassName?: string; /** * 是否是固定列的 边边 需要加阴影 */ isFixedSide?: boolean; /** * 固定列的位置 */ fixedSpace?: number; /** * 传进来的方法渲染 * record 当前行数据 */ render?: (record: any) => React.ReactNode; [name: string]: any; };