UNPKG

fastlion-amis

Version:

一种MIS页面生成工具

398 lines (397 loc) 12.4 kB
import React from 'react'; import { RendererProps } from '../../factory'; import { SchemaNode, Action } from '../../types'; import './ColumnToggler'; import { ITableStore, IColumn, IRow } from '../../store/table'; import Sortable from 'sortablejs'; import { BaseSchema, SchemaApi, SchemaClassName, SchemaObject, SchemaTokenizeableString } from '../../Schema'; import { SchemaPopOver } from '../PopOver'; import { SchemaQuickEdit } from '../QuickEdit'; import { SchemaCopyable } from '../Copyable'; import { SchemaRemark } from '../Remark'; import { Temp } from './ColumnToggler'; import { BadgeSchema } from '../../components/Badge'; /** * 表格列,不指定类型时默认为文本类型。 */ export declare type TableColumnObject = { /** * 列标题 */ label: string; /** * 配置是否固定当前列 */ fixed?: 'left' | 'right' | 'none'; /** * 绑定字段名 */ name?: string; /** * 配置查看详情功能 */ popOver?: SchemaPopOver; /** * 配置快速编辑功能 */ quickEdit?: SchemaQuickEdit; /** * 作为表单项时,可以单独配置编辑时的快速编辑面板。 */ quickEditOnUpdate?: SchemaQuickEdit; /** * 配置点击复制功能 */ copyable?: SchemaCopyable; /** * 配置是否可以排序 */ sortable?: boolean; /** * 是否可快速搜索 */ searchable?: boolean | SchemaObject; /** * 配置是否默认展示 */ toggled?: boolean; /** * 列宽度 */ width?: number | string; /** * 列对齐方式 */ align?: 'left' | 'right' | 'center' | 'justify'; /** * 列样式表 */ className?: string; /** * 单元格样式表达式 */ classNameExpr?: string; /** * 列头样式表 */ labelClassName?: string; /** * todo */ filterable?: boolean | { source?: string; options?: Array<any>; }; /** * 结合表格的 footable 一起使用。 * 填写 *、xs、sm、md、lg指定 footable 的触发条件,可以填写多个用空格隔开 */ breakpoint?: '*' | 'xs' | 'sm' | 'md' | 'lg'; /** * 提示信息 */ remark?: SchemaRemark; /** * 默认值, 只有在 inputTable 里面才有用 */ value?: any; /** * 是否唯一, 只有在 inputTable 里面才有用 */ unique?: boolean; /** * 配置过长是否需要隐藏 */ ellipsis?: boolean; }; export declare type TableColumnWithType = SchemaObject & TableColumnObject; export declare type TableColumn = TableColumnWithType | TableColumnObject; /** * Table 表格渲染器。 * 文档:https://baidu.gitee.io/amis/docs/components/table */ export interface TableSchema extends BaseSchema { /** * 指定为表格渲染器。 */ type: 'mobile-table-horizontal'; /** * 是否固定表头 */ affixHeader?: boolean; /** * 表格的列信息 */ columns?: Array<TableColumn>; /** * 展示列显示开关,自动即:列数量大于或等于5个时自动开启 */ columnsTogglable?: boolean | 'auto'; /** * 是否开启底部展示功能,适合移动端展示 */ footable?: boolean | { expand?: 'first' | 'all' | 'none'; /** * 是否为手风琴模式 */ accordion?: boolean; }; /** * 底部外层 CSS 类名 */ footerClassName?: SchemaClassName; /** * 顶部外层 CSS 类名 */ headerClassName?: SchemaClassName; /** * 占位符 */ placeholder?: string; /** * 是否显示底部 */ showFooter?: boolean; /** * 是否显示头部 */ showHeader?: boolean; /** * 数据源:绑定当前环境变量 */ source?: SchemaTokenizeableString; /** * 表格 CSS 类名 */ tableClassName?: SchemaClassName; /** * 标题 */ title?: string; /** * 工具栏 CSS 类名 */ toolbarClassName?: SchemaClassName; /** * 合并单元格配置,配置数字表示从左到右的多少列自动合并单元格。 */ combineNum?: number; /** * 合并单元格配置,配置从第几列开始合并。 */ combineFromIndex?: number; /** * 顶部总结行 */ prefixRow?: Array<SchemaObject>; /** * 底部总结行 */ affixRow?: Array<SchemaObject>; /** * 是否可调整列宽 */ resizable?: boolean; /** * 行样式表表达式 */ rowClassNameExpr?: string; /** * 行角标 */ itemBadge?: BadgeSchema; /** * 开启查询区域,会根据列元素的searchable属性值,自动生成查询条件表单 */ autoGenerateFilter?: boolean; saveColApi?: SchemaApi; columnInfo?: Record<string, { index: number; hidden: number; }>; /** * 移动端布局方式 */ mobileLayout: 'vertical' | 'horizontal'; } export interface TableProps extends RendererProps { title?: string; header?: SchemaNode; footer?: SchemaNode; statistic?: SchemaNode; actions?: Action[]; className?: string; headerClassName?: string; footerClassName?: string; store: ITableStore; columns?: Array<any>; headingClassName?: string; toolbarClassName?: string; headerToolbarClassName?: string; footerToolbarClassName?: string; tableClassName?: string; source?: string; selectable?: boolean; selected?: Array<any>; maxKeepItemSelectionLength?: number; valueField?: string; draggable?: boolean; columnsTogglable?: boolean | 'auto'; affixHeader?: boolean; affixColumns?: boolean; combineNum?: number | string; combineFromIndex?: number; footable?: boolean | { expand?: 'first' | 'all' | 'none'; expandAll?: boolean; accordion?: boolean; }; expandConfig?: { expand?: 'first' | 'all' | 'none'; expandAll?: boolean; accordion?: boolean; }; itemCheckableOn?: string; itemDraggableOn?: string; itemActions?: Array<Action>; 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, resetOnFailed?: boolean) => void; onSaveOrder?: (moved: Array<object>, items: Array<object>) => void; onQuery: (values: object) => void; onImageEnlarge?: (data: any, target: any) => void; buildItemProps?: (item: any, index: number) => any; checkOnItemClick?: boolean; hideCheckToggler?: boolean; rowClassName?: string; rowClassNameExpr?: string; popOverContainer?: any; canAccessSuperData?: boolean; reUseRow?: boolean; itemBadge?: BadgeSchema; onLoadMore: () => void; setLoading?: (loading: boolean) => void; handleMutilSort?: (orderColumns: Map<string, any>, key: string | null, sort: 'asc' | 'desc' | null) => void; isRequestItem?: boolean; preSortAble?: boolean; infinteLoad?: boolean; renderFilter?: (val?: boolean) => JSX.Element | null; editStatus: boolean; } declare type ExportExcelToolbar = SchemaNode & { api?: SchemaApi; columns?: string[]; filename?: string; }; declare type CheckAllType = 0 | 1 | 2 | 3; interface TableState { position: [rowIndex: number, colIndex: number, colName: string]; contextMenuVisible: boolean; rowEditData: any; rowIndex: number; } export default class Table extends React.Component<TableProps, TableState> { static propsList: Array<string>; static defaultProps: Partial<TableProps>; table?: HTMLTableElement; sortable?: Sortable; dragTip?: HTMLElement; affixedTable?: HTMLTableElement; parentNode?: HTMLElement | Window; lastScrollLeft: number; totalWidth: number; totalHeight: number; outterWidth: number; outterHeight: number; unSensor?: Function; updateTableInfoLazy: () => void; widths: { [propName: string]: number; }; widths2: { [propName: string]: number; }; heights: { [propName: string]: number; }; renderedToolbars: Array<string>; subForms: any; sortCols: any[]; constructor(props: TableProps); handleColumns(columns: any[], options: { sort?: boolean; }): any[]; static syncRows(store: ITableStore, props: TableProps, prevProps?: TableProps): boolean; componentDidMount(): void; updateAutoFillHeight(): void; componentDidUpdate(prevProps: TableProps): void; componentWillUnmount(): void; subFormRef(form: any, x: number, y: number): void; handleAction(e: React.UIEvent<any>, action: Action, ctx: object): void; handleCheck(item: IRow, value: boolean, shift?: boolean): void; handleCheckAll(type: CheckAllType): void; handleQuickChange(item: IRow, values: object, saveImmediately?: boolean | any, savePristine?: boolean, resetOnFailed?: boolean): void; handleSave(): Promise<void>; handleSaveOrder(): void; syncSelected(): void; reset(): void; bulkUpdate(value: any, items: Array<object>): void; getSelected(): any[]; affixDetect(): void; updateTableInfo(): void; handleOutterScroll(): void; tableRef(ref: HTMLTableElement): void; dragTipRef(ref: any): void; affixedTableRef(ref: HTMLTableElement): void; initDragging(): void; destroyDragging(): void; getPopOverContainer(): Element | Text | null; handleMouseMove(e: React.MouseEvent<any>): void; handleMouseLeave(): void; draggingTr: HTMLTableRowElement; originIndex: number; draggingSibling: Array<HTMLTableRowElement>; handleDragStart(e: React.DragEvent): void; handleDragOver(e: any): void; handleDrop(): void; handleDragEnd(): void; handleImageEnlarge(info: any, target: { rowIndex: number; colIndex: number; }): void; resizeLine: HTMLElement; targetTh: HTMLElement; targetThWidth: number; lineStartX: number; resizeColumn: IColumn; handleColResizeMouseDown(e: React.MouseEvent<HTMLElement>, col: IColumn): void; handleColResizeMouseMove(e: MouseEvent): void; handleColResizeMouseUp(e: MouseEvent): void; handleColumnToggle(columns: Array<IColumn> | undefined, saveCols: Record<string, any>, canFetch: boolean, targetTemp?: Temp): void; renderAutoFilterForm(): React.ReactNode; renderHeading(): JSX.Element | null; handleMultiColumnSort(name: string, isMultiple?: boolean): void; renderHeadCell(column: IColumn & { batchEdit?: boolean; }, props?: any): JSX.Element; renderCell(region: string, column: IColumn, item: IRow, props: any, ignoreDrag?: boolean): JSX.Element | null; showContextMenu(rowIndex: number, colIndex: number, colName: string): void; renderAffixHeader(tableClassName: string): JSX.Element | null; renderFixedColumns(rows: Array<any>, columns: Array<IColumn>, headerOnly?: boolean, tableClassName?: string): JSX.Element; renderToolbar(toolbar: SchemaNode): JSX.Element | null | undefined; renderCheckAll(): JSX.Element | null; renderColumnsToggler(config?: any): JSX.Element | null; renderDragToggler(): JSX.Element | null; renderExportExcel(toolbar: ExportExcelToolbar): JSX.Element | null; renderActions(region: string): JSX.Element | null; renderHeader(editable?: boolean): JSX.Element | JSX.Element[] | null; renderStatistic(): JSX.Element | null; renderFooter(): JSX.Element | JSX.Element[] | null; renderTableContent(): JSX.Element; handleEditRow(): any; render(): JSX.Element; } export declare class TableRenderer extends Table { } export {};