jamis
Version:
一种支持通过JSON配置方式生成页面的组件库
319 lines (318 loc) • 9.88 kB
TypeScript
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<string, any> | SchemaExpression;
/**
* 是否固定表头
*/
affixHeader?: boolean;
hideHeader?: boolean;
draggable?: boolean;
/**
* 表格的列信息
*/
columns?: Array<(TableColumnObject & Partial<SchemaObject>) | 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<string, any>[], unSelectedItems: Record<string, any>[]) => 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<TableSchema, 'type'>, Omit<StaticControlSchemaBase, 'slots'> {
type: 'static-table';
}
export interface AutoGenerateFilterObject {
/**
* 过滤条件单行列数
*/
columnsNum?: number;
/**
* 是否显示设置查询字段
*/
showBtnToolbar?: boolean;
/**
* 是否显示展开/收起
*/
/**
* 是否默认收起
*
* @default true
*/
defaultCollapsed?: boolean;
}
export interface TableProps extends Omit<TableSchema, 'className' | 'data'>, RendererProps {
actions?: ActionObject[];
store: ITableStore;
columns?: Array<any>;
headerToolbarRender?: (childProps: any, toolbarRenderer?: (toolbar: SchemaNode, index: number) => React.ReactNode) => string | number | boolean | React.ReactFragment | JSX.Element | null;
source?: string;
selected?: Array<any>;
maxKeepItemSelectionLength?: number;
valueField?: string;
affixHeader?: boolean;
affixColumns?: boolean;
combineNum?: number | SchemaExpression;
combineFromIndex?: number;
itemActions?: Array<ActionObject>;
/**
* 父组件透传过来的搜索条件, 如crud和input-table等
*/
query?: Record<string, any>;
getEntryId?: (rowData: Record<string, any>, rowIndex: number) => string;
onSelect: (selectedItems: Array<object>, unSelectedItems: Array<object>) => void;
onPristineChange?: (data: object, rowIndexe: string) => void;
onSave?: (items: Array<object> | object, diff: Array<object> | object, rowIndexes: Array<string> | string, unModifiedItems?: Array<object>, rowOrigins?: Array<object> | object, options?: {
resetOnFailed?: boolean;
reload?: string;
}) => void;
onSaveOrder?: (moved: Array<object>, items: Array<object>) => void;
onQuery?: (values: object) => void;
onImageEnlarge?: (data: any, target: any) => void;
buildItemProps?: (item: {
data: Record<string, any>;
[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> | SchemaObject;
} | Array<SchemaObject>;