UNPKG

@fe6/water-pro

Version:

An enterprise-class UI design language and Vue-based implementation

444 lines (393 loc) 12 kB
/** @format */ import type { VNodeChild } from 'vue'; import type { Options } from 'sortablejs'; import type { ColumnProps, TableRowSelection as ITableRowSelection, } from '../../../table/interface'; import type { FormProps } from '../../../form'; import { VueNode } from '../../../_util/type'; import type { PaginationProps } from './pagination'; import { SortOrder } from './column'; import { ComponentType } from './component-type'; export interface TableCurrentDataSource<T = Recordable> { currentDataSource: T[]; } export interface TableRowSelection<T = any> extends ITableRowSelection { /** * Callback executed when selected rows change * @type Function */ onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any; /** * Callback executed when select/deselect one row * @type FunctionT */ onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any; /** * Callback executed when select/deselect all rows * @type Function */ onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => any; /** * Callback executed when row selection is inverted * @type Function */ onSelectInvert?: (selectedRows: string[] | number[]) => any; } export interface TableCustomRecord<T> { record?: T; index?: number; } export interface ExpandedRowRenderRecord<T> extends TableCustomRecord<T> { indent?: number; expanded?: boolean; } export interface TableCustomRecord<T = Recordable> { record?: T; index?: number; } export interface SorterResult { column: ColumnProps; order: SortOrder; field: string; columnKey: string; } export interface FetchParams { searchInfo?: Recordable; page?: number; sortInfo?: Recordable; filterInfo?: Recordable; api?: (...arg: any[]) => Promise<any>; params?: Recordable; } export interface GetColumnsParams { ignoreIndex?: boolean; ignoreAction?: boolean; sort?: boolean; } export type SizeType = 'default' | 'middle' | 'small' | 'large'; export interface LocaleParams { filterConfirm: string; filterReset: string; emptyText: string; } export interface TableActionType { reload: (opt?: FetchParams) => Promise<void>; getSelectRows: <T = Recordable>() => T[]; clearSelectedRowKeys: () => void; getSelectRowKeys: () => string[] | number[]; deleteSelectRowByKey: (key: string) => void; setPagination: (info: Partial<PaginationProps>) => void; setTableData: <T = Recordable>(values: T[]) => void; getColumns: (opt?: GetColumnsParams) => BasicColumn[]; setColumns: (columns: BasicColumn[] | string[]) => void; getDataSource: <T = Recordable>() => T[]; setLoading: (loading: boolean) => void; getLoading?: undefined | boolean; setProps: (props: Partial<TableProProps>) => void; redoHeight: () => void; setSelectedRowKeys: (rowKeys: string[] | number[]) => void; getPaginationRef: () => PaginationProps | boolean; getSize: () => SizeType; getRowSelection: () => TableRowSelection<Recordable>; getCacheColumns: () => BasicColumn[]; emit?: EmitType; updateTableData: (index: number, key: string, value: any) => Recordable; setShowPagination: (show: boolean) => Promise<void>; getShowPagination: () => boolean; setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void; } export interface FetchSetting { // 请求接口当前页数 pageField: string; // 每页显示多少条 sizeField: string; // 请求结果列表字段 支持 a.b.c listField: string; // 请求结果总数字段 支持 a.b.c totalField: string; } export interface TableSetting { reload?: boolean; setting?: boolean; } export interface TableProProps<T = any> { // 点击行选中 clickToRowSelect?: boolean; isTreeTable?: boolean; // 自定义排序方法 sortFn?: (sortInfo: SorterResult) => any; // 排序方法 filterFn?: (data: Partial<Recordable<string[]>>) => any; // 取消表格的默认padding inset?: boolean; // 显示表格设置 showTableSetting?: boolean; tableSetting?: TableSetting; // TODO 斑马纹 暂时样式规避了 striped?: boolean; // 是否自动生成key autoCreateKey?: boolean; // 计算合计行的方法 summaryFunc?: (...arg: any) => Recordable[]; // 自定义合计表格内容 summaryData?: Recordable[]; // 是否显示合计行 showSummary?: boolean; // TODO 是否可拖拽列 // canColDrag?: boolean; // 接口请求对象 api?: (...arg: any) => Promise<any>; // 请求之前处理参数 beforeFetch?: Fn; // 自定义处理接口返回参数 afterFetch?: Fn; // 查询条件请求之前处理 handleSearchInfoFn?: Fn; // 请求接口配置 fetchSetting?: FetchSetting; // 立即请求接口 immediate?: boolean; // 在开起搜索表单的时候,如果没有数据是否显示表格 emptyDataIsShowTable?: boolean; // 额外的请求参数 searchInfo?: Recordable; // 使用搜索表单 useSearchForm?: boolean; // 表单配置 formConfig?: Partial<FormProps>; // 列配置 columns: BasicColumn[]; // 卡片使用 cardable?: boolean; cardTitle?: string; // 是否显示序号列 showIndexColumn?: boolean; // 序号列配置 indexColumnProps?: BasicColumn; actionColumn?: BasicColumn; // 文本超过宽度是否显示。。。 ellipsis?: boolean; // 是否拖拽改变顺序 draggable?: boolean; // 是否可以自适应高度 canResize?: boolean; // 自适应高度偏移, 计算结果-偏移量 resizeHeightOffset?: number; // 在分页改变的时候清空选项 clearSelectOnPageChange?: boolean; // rowKey?: string | ((record: Recordable) => string); // 数据 dataSource?: Recordable[]; // 标题右侧提示 titleHelpMessage?: string | string[]; // 表格滚动最大高度 maxHeight?: number; // 是否显示边框 bordered?: boolean; // 分页配置 pagination?: PaginationProps | boolean; // 总数的配置 totalRender?: (total: number, range: [number, number]) => any; // loading加载 loading?: boolean; /** * The column contains children to display * @default 'children' * @type string | string[] * TODO */ childrenColumnName?: string | string[]; /** * Override default table elements * @type object */ // components?: object; /** * Expand all rows initially * @default false * @type boolean */ defaultExpandAllRows?: boolean; /** * Initial expanded row keys * @type string[] */ defaultExpandedRowKeys?: string[]; /** * Current expanded row keys * @type string[] */ expandedRowKeys?: string[]; /** * Expanded container render for each row * @type Function */ expandedRowRender?: (record?: ExpandedRowRenderRecord<T>) => VNodeChild | JSX.Element; /** * Customize row expand Icon. * @type Function | VNodeChild */ expandIcon?: Function | VNodeChild | JSX.Element; /** * Whether to expand row by clicking anywhere in the whole row * @default false * @type boolean */ expandRowByClick?: boolean; /** * The index of `expandIcon` which column will be inserted when `expandIconAsCell` is false. default 0 */ expandIconColumnIndex?: number; /** * Table footer renderer * @type Function | VNodeChild */ footer?: Function | VNodeChild | JSX.Element; /** * Indent size in pixels of tree data * @default 15 * @type number */ indentSize?: number; dragOtions?: Options; /** * i18n text including filter, sort, empty text, etc * @default { filterConfirm: 'Ok', filterReset: 'Reset', emptyText: 'No Data' } * @type object */ // locale?: object; /** * Row's className * @type Function */ rowClassName?: (record: TableCustomRecord<T>, index?: number) => string; /** * Row selection config * @type object */ rowSelection?: TableRowSelection; /** * Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area. * It is recommended to set a number for x, if you want to set it to true, * you need to add style .ant-table td { white-space: nowrap; }. * @type object */ scroll?: { x?: number | true; y?: number }; /** * Whether to show table header * @default true * @type boolean */ showHeader?: boolean; /** * Size of table * @default 'default' * @type string */ size?: SizeType; /** * Table title renderer * @type Function | ScopedSlot */ title?: VNodeChild | JSX.Element | string | ((data: Recordable) => string); /** * Set props on per header row * @type Function */ // customHeaderRow?: (column: ColumnProps, index: number) => object; /** * Set props on per row * @type Function */ customRow?: (record: T, index: number) => object; /** * `table-layout` attribute of table element * `fixed` when header/columns are fixed, or using `column.ellipsis` * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout * @version 1.5.0 */ tableLayout?: 'auto' | 'fixed' | string; /** * the render container of dropdowns in table * @param triggerNode * @version 1.5.0 */ getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement; /** * Data can be changed again before rendering. * The default configuration of general user empty data. * You can configured globally through [ConfigProvider](https://antdv.com/components/config-provider-cn/) * * @version 1.5.4 */ transformCellText?: Function; /** * Callback executed when pagination, filters or sorter is changed * @param pagination * @param filters * @param sorter * @param currentDataSource */ // TODO [fix] vite 是数组 onChange?: (pagination: any, filters: any, sorter: any, extra: any) => void; // | onChange | 分页,筛选,排序改变的时候触发 | `(pagination: any, filters: any, sorter: any, extra: any) => void` | - | | /** * Callback executed when the row expand icon is clicked * * @param expanded * @param record */ // TODO [fix] vite 是数组 onExpand?: (expande: boolean, record: T) => void; // | onChange | 展开收起 form 的时候触发 | `(expande: boolean, record: T) => void` | - | | /** * Callback executed when the expanded rows change * @param expandedRows */ // TODO [fix] vite 是数组 onExpandedRowsChange?: (expandedRows: string[] | number[]) => void; // | onChange | 展开收起表格行的时候触发 | `(expandedRows: string[] | number[]) => void` | - | | } export type CellFormatMap = Map<string | number, any>; export type CellFormatFn = (text: string, record: Recordable, index: number) => string | number; export type CellFormat = string | CellFormatFn | CellFormatMap; // @ts-ignore // ColumnProps 为表格默认参数 // http://water.chjgo.com/components/table-cn export interface BasicColumn extends ColumnProps { // 子集表头 children?: BasicColumn[]; // 表头筛选 filters?: { text: string; value: string; children?: | unknown[] | (((props: Record<string, unknown>) => unknown[]) & (() => unknown[]) & (() => unknown[])); }[]; // 设置标致 flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION'; // 自定义表头的名字,当与 title 同时存在,那么优先 customTitle customTitle?: VueNode; // 自定义 slot 插槽,对应 a-table-pro 内部的 slot 名字 slots?: Indexable; // 默认情况下是否隐藏列,可以在列配置中显示 defaultHidden?: boolean; // 感叹号的文字提示 helpMessage?: string | string[]; // 格式化当前列的显示 format?: CellFormat; // Editable edit?: boolean; editRow?: boolean; editable?: boolean; editComponent?: ComponentType; editComponentProps?: Recordable; editRule?: boolean | ((text: string, record: Recordable) => Promise<string>); editValueMap?: (value: any) => string; onEditRow?: () => void; }