import type { ActionObject, RendererProps, SchemaBoolean, SchemaNode } from 'jamis-core'; import type { BadgeObject, BaseSchemaScoped, CRUDBultinToolbarType, CRUDToolbarChild, SchemaApi, SchemaClassName, SchemaCollection, SchemaExpression, SchemaObject, SchemaSlots, SchemaTokenizeableString, SchemaTpl, ScrollEventParam, StaticControlSchemaBase, TableColumnObject, WithWrapperHook } from '../types'; import type { ITableStore } from './store/TableStore'; /** * Table 表格组件。 */ export interface TableSchema extends BaseSchemaScoped, WithWrapperHook, TableSchemaDeprecated { /** * 指定为表格组件。 */ type: 'table'; /** * 关联字段名。 */ name?: string; /** * table的数据域 */ data?: Record | SchemaExpression; /** * 是否固定表头 */ affixHeader?: boolean; hideHeader?: boolean; draggable?: boolean; /** * 表格的列信息 */ columns?: Array<(TableColumnObject & Partial) | TableColumnObject>; /** * 展示列显示开关,自动即:列数量大于或等于5个时自动开启, 且在headerToolbar中启用了`columns-toggle` */ columnsTogglable?: boolean | 'auto'; /** * 是否开启底部展示功能,适合移动端展示 */ footable?: boolean | ExpandConfig; /** * 在使用嵌套模式时, 配置展开项 */ expandConfig?: ExpandConfig; /** * 占位符 */ placeholder?: string | SchemaTpl; placeholderExpr?: SchemaTpl; /** * 是否显示底部 */ showFooter?: boolean; /** * 是否显示头部 */ showHeader?: boolean; /** * 数据源:绑定当前环境变量 */ source?: SchemaTokenizeableString; /** * 顶部工具栏中可配置的内置操作 */ headerToolbar?: ('columns-toggler' | 'drag-toggler')[] | SchemaObject; /** * 合并单元格配置,配置数字表示从左到右的多少列自动合并单元格。 */ combineNum?: number | SchemaExpression; /** * 合并单元格配置,配置从第几列开始合并。 */ combineFromIndex?: number; /** * 顶部总结行 */ prefixRow?: SummaryRow; /** * 底部总结行 */ affixRow?: SummaryRow; /** * 是否可调整列宽 */ resizable?: boolean; /** * 行key生成器, 表达式格式, 可以通过`${row.xxx}`读取到当前行的信息, 如`${row.id}`表示id * 默认值去是取row.id */ rowKeyGenerator?: SchemaExpression; /** * 行角标 */ itemBadge?: BadgeObject; /** * 开启查询区域,会根据列元素的searchable属性值,自动生成查询条件表单 */ autoGenerateFilter?: boolean | AutoGenerateFilterObject; /** * 表格是否可以获取父级数据域值,默认为false */ canAccessSuperData?: boolean; /** * 表格自动计算高度 */ autoFillHeight?: boolean | AutoFillHeightObject; maxKeepItemSelectionLength?: number; /** * 指定主键的字段名,默认为 `id` */ primaryField?: string; /** * 底部工具栏 */ footerToolbar?: (CRUDToolbarChild | CRUDBultinToolbarType)[]; /** * 选择表格的布局方式, 支持auto和fixed, 默认会根据列情况自动计算, 如果指定则优先级最高 */ tableLayout?: 'auto' | 'fixed'; /** * 如果要让 table 滚动, 需要指定的滚动策略, 例如存在fixed列时 */ scroll?: { x?: number | true | string; y?: number | string; }; backTop?: boolean | { /** 滚动最小要超过多少才显示 */ minScrollTop?: number; }; /** 是否支持多选 */ multiple?: SchemaBoolean; selectable?: boolean; itemCheckableOn?: SchemaExpression; itemDraggableOn?: SchemaExpression; /** * 是否展示外边框和列边框 * @default false */ bordered?: boolean; /** * 斑马纹配置 */ striped?: boolean; /** * 懒加载的行数, 默认是100 */ lazyRenderAfter?: number; slots?: SchemaSlots<'Table-beforeRegion' | ('Table-afterRegion' & (string & {}))>; } export interface TableSchemaDeprecated { /** * 选中表格项监听事件 * @deprecated 通过监听selectedChange事件来替代 */ onSelect?: (selectedItems: Record[], unSelectedItems: Record[]) => void; /** @deprecated use `slots.className` */ headerToolbarClassName?: SchemaClassName; /** @deprecated use `slots.className` */ footerToolbarClassName?: SchemaClassName; /** * @deprecated use `slot.Table-header.body` */ header?: SchemaCollection; /** * 表头定制区域 *@deprecated use `slots` */ footer?: SchemaCollection; /** * 底部外层 CSS 类名 * @deprecated use `slots.className` */ footerClassName?: SchemaClassName; /** * 顶部外层 CSS 类名 * @deprecated use `slots.className` */ headerClassName?: SchemaClassName; /** * 表格 CSS 类名 * @deprecated use `slots.className` */ tableClassName?: SchemaClassName; /** * .cxd-Table-content 区域的样式类 * @deprecated use `slots.className` */ tableContentClassName?: SchemaClassName; /** * .cxd-Table-content-head 元素的样式类 * @deprecated use `slots.Table-content-head` */ contentHeadClassName?: SchemaClassName; /** * 工具栏 CSS 类名 * @deprecated use `slots.className` */ toolbarClassName?: SchemaClassName; /** @deprecated use `slots.className` */ rowClassName?: SchemaClassName; /** * 行样式表表达式 * @deprecated use `slots.className` */ rowClassNameExpr?: SchemaExpression; /** * 元素`tr.cxd-Table-placeholder-wrap`的样式类 * @deprecated use `slots.className` */ placeholderWrapClassName?: SchemaClassName; /** * 元素`div.cxd-Table-placeholder`的样式类 * @deprecated use `slots.className` */ placeholderClassName?: SchemaClassName; /** * 表格头部列统一样式类 * @deprecated use `slots.className` */ headerCellClassName?: SchemaClassName; /** * 表格内容列统一样式类 * @deprecated use `slots.className` */ bodyCellClassName?: SchemaClassName; } export interface StaticTableSchema extends Omit, Omit { type: 'static-table'; } export interface AutoGenerateFilterObject { /** * 过滤条件单行列数 */ columnsNum?: number; /** * 是否显示设置查询字段 */ showBtnToolbar?: boolean; /** * 是否显示展开/收起 */ /** * 是否默认收起 * * @default true */ defaultCollapsed?: boolean; } export interface TableProps extends Omit, RendererProps { actions?: ActionObject[]; store: ITableStore; columns?: Array; headerToolbarRender?: (childProps: any, toolbarRenderer?: (toolbar: SchemaNode, index: number) => React.ReactNode) => string | number | boolean | React.ReactFragment | JSX.Element | null; source?: string; selected?: Array; maxKeepItemSelectionLength?: number; valueField?: string; affixHeader?: boolean; affixColumns?: boolean; combineNum?: number | SchemaExpression; combineFromIndex?: number; itemActions?: Array; /** * 父组件透传过来的搜索条件, 如crud和input-table等 */ query?: Record; getEntryId?: (rowData: Record, rowIndex: number) => string; onSelect: (selectedItems: Array, unSelectedItems: Array) => void; onPristineChange?: (data: object, rowIndexe: string) => void; onSave?: (items: Array | object, diff: Array | object, rowIndexes: Array | string, unModifiedItems?: Array, rowOrigins?: Array | object, options?: { resetOnFailed?: boolean; reload?: string; }) => void; onSaveOrder?: (moved: Array, items: Array) => void; onQuery?: (values: object) => void; onImageEnlarge?: (data: any, target: any) => void; buildItemProps?: (item: { data: Record; [key: string]: any; }, index: number) => { className?: string; quickEditEnabled?: boolean; }; onScroll?: (param: ScrollEventParam) => void; checkOnItemClick?: boolean; hideCheckToggler?: boolean; rowClassName?: string; rowClassNameExpr?: string; popOverContainer?: any; canAccessSuperData?: boolean; reUseRow?: boolean; itemBadge?: BadgeObject; loading?: boolean; autoFillHeight?: boolean | AutoFillHeightObject; } export type ExportExcelToolbar = SchemaNode & { api?: SchemaApi; columns?: string[]; exportColumns?: any[]; filename?: string; }; export type TableRendererEvent = 'selectedChange' | 'columnSort' | 'columnFilter' | 'columnSearch' | 'columnToggled' | 'orderChange' | 'rowClick' | 'rowDbClick' | 'rowMouseEnter' | 'rowMouseLeave' | 'rowMouseUp' | 'scroll'; export type TableRendererAction = 'selectAll' | 'clearAll' | 'select' | 'initDrag'; export interface AutoFillHeightObject { height: number; } export interface ExpandConfig { expand?: 'first' | 'all' | 'none'; expandAll?: boolean; accordion?: boolean; } /** * 总结行的类型 */ export type SummaryRow = { visible?: boolean; visibleOn?: SchemaBoolean; className?: SchemaClassName; body: Array | SchemaObject; } | Array;