@aplus-frontend/ui

import { ComputedRef, CSSProperties, VNode } from 'vue'; import { ApTablePaginationConfig, ApTableValueFields, ApTableValueTypes, CommonFieldReturnType, ExtraProColumnType, FieldPropsType, RequestData, ValueEnum } from '../ap-table/interface'; import { TableProps } from '@aplus-frontend/antdv'; import { ApFormSearchFormPopoverSorterItem, ApFormSearchFormProps } from '../ap-form/interface'; import { Recordable } from '../type'; import { SortOrder, TableRowSelection } from '@aplus-frontend/antdv/es/table/interface'; import { ColDef, GridApi, ICellRendererParams, IRowNode, IsFullWidthRowParams, RedrawRowsParams, RefreshCellsParams, RowClassRules, RowHeightParams, RowPinnedType, ScrollDirection, ThemeDefaultParams } from 'ag-grid-community'; import { InternalPagingType } from '../ap-table/hooks/use-table-paging-ng'; export type AgGridColumnType<RecordType = any, ExtraValueType = 'text', ValueType extends ApTableValueTypes = ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType = ExtraValueType | ValueType> = MergedValueType extends ExtraValueType | ValueType ? Omit<ExtraProColumnType<RecordType>, 'sorter' | 'rowSpan' | 'customCell' | 'customHeaderCell' | 'minWidth' | 'width' | 'maxWidth' | 'className' | 'class' | 'colSpan'> & { children?: AgGridColumnType<RecordType, ExtraValueType, ValueType>[]; /** * 表单项所占据的格子数（1-24格） */ span?: number; tooltip?: string | ((column: AgGridColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>) => VNode); /** * 内容区自定义单元格tooltip */ bodyCellTooltip?: string | ((value: any, record: RecordType) => string); /** * 是否可以复制 * @deprecated 已弃用，请自行实现 */ copyable?: boolean; /** * 配置溢出隐藏的方式 * @description 如果传递数字，则表示需要满足溢出隐藏的行数，此时默认会显示tooltip */ ellipsis?: number | boolean | 'ellipsis' | 'tooltip'; /** * 是否搜索表单中隐藏 */ hideInSearch?: boolean; /** * 是否在表格中隐藏 */ hideInTable?: boolean; /** * 值的枚举，会自动转化把值当成 key 来取出要显示的内容（也会作为select等组件的选项） */ valueEnum?: ValueEnum; /** * 自定义查询表单渲染 */ customRenderFormItem?: (config: AgGridColumnType<RecordType>) => any; /** * 自定义渲染文本，和customRender相比，其必须返回字符串，并且后续的渲染（例如copy/ellipsis）都将使用这个值 */ renderText?: (option: { value: any; text: any; record: RecordType; column: AgGridColumnType<RecordType>; }) => string; /** * 指定值类型（将会用于默认渲染和查询表单生成） */ valueType?: MergedValueType; /** * 值类型额外配置的参数（用于查询表单渲染） */ fieldProps?: FieldPropsType<Extract<MergedValueType, ValueType> extends never ? CommonFieldReturnType : ApTableValueFields[Extract<MergedValueType, ValueType>], RecordType, ExtraValueType, ValueType, MergedValueType>; /** * 用于表单项排序的字段 * @description 值越大，越排在前面，请设置正整数，设置为0或负数将会无效 */ order?: number; /** * 用于表格列排序，设置为`true`表示开启后端排序，传入自定义比较函数表示使用前端排序 */ sorter?: true | ColDef['comparator']; /** * 自定义渲染，添加了`originalNode、originalText` * @param opt * @returns */ customRender?: (opt: { value: any; text: any; record: RecordType; column: AgGridColumnType<RecordType>; originalNode?: VNode; originalText?: any; pinned?: boolean; rowIndex?: number; params?: ICellRendererParams; path?: (string | number)[]; }) => any; width?: number; minWidth?: number; maxWidth?: number; colSpan?: ColDef<RecordType>['colSpan']; spanRows?: ColDef<RecordType>['spanRows']; /** * 为当前单元格添加类名 * @returns */ cellClass?: string | string[] | ((data: RecordType, node: IRowNode<RecordType>) => string | string[] | undefined) | undefined; /** * 自定义单元格样式 */ cellStyle?: ColDef<RecordType>['cellStyle']; /** * 仅用于和接口交互的字段，如果不设置将会尝试使用`dataIndex`和`key` */ field?: string; /** * 是否在表头渲染必填标记 * @description 仅限内部使用 */ _requireMark?: boolean; /** * 自定义列表头样式 */ headerStyle?: ColDef<RecordType>['headerStyle']; /** * 自定表头列类名 */ headerClass?: ColDef<RecordType>['headerClass']; /** * 当单元格可编辑时，记录表单项的namePath * @private 仅限内部使用，请勿传递 */ _path?: (string | number)[]; } : null; export type AgGridRowSelection<RecordType> = Pick<TableRowSelection<RecordType>, 'type' | 'fixed' | 'columnWidth' | 'defaultSelectedRowKeys'> & { /** * 设置禁用的行 * @param row * @returns */ disabled?: (row: RecordType) => boolean; /** * 在后端分页下，是否在网络请求后仍然保留上一次的选中（即使不在当前数据中） */ preserveSelectedRowKeys?: boolean; /** * 行选择列自定义tooltip */ tooltip?: string | ((checked: boolean, disabled: boolean, rowNode: IRowNode) => string | any); /** * 是否隐藏不可选中的元素 */ hideDisabled?: boolean; /** * 默认选中的行数据（如果没有rowKey将会被过滤掉，如果和defaultSelectedRowKeys同时使用，优先级更低） */ defaultSelectedRows?: RecordType[]; }; export type AgGridVirtualConfig = { row?: boolean; col?: boolean; rowBuffer?: number; }; export type AgGridSummaryType<RecordType = any> = { top?: RecordType[]; bottom?: RecordType[]; cellClassName?: string | string[] | ((data: RecordType, column: ColDef<RecordType>, pinned: RowPinnedType, rowIndex: number) => string | string[]); rowClassName?: string | string[] | ((data: RecordType, rowIndex: number, pinned: RowPinnedType) => string | string[]); }; export type AgGridCustomRowConfig<RecordType = any> = { /** * 判断哪些行是自定义渲染行 * @param params * @returns */ isCustomRow: (params: IsFullWidthRowParams<RecordType>) => boolean; /** * 行自定义渲染函数 * @returns */ render: (params: any) => any; }; export type AgGridProps<RecordType = any, ParamsType = any> = Omit<TableProps<RecordType>, 'columns' | 'pagination' | 'dataSource' | 'size' | 'rowSelection' | 'rowClassName' | 'footer' | 'loading' | 'sticky' | 'customRow'> & { /** * 列配置 */ columns?: AgGridColumnType<RecordType, any>[]; /** * 行选中配置 */ rowSelection?: true | AgGridRowSelection<RecordType>; /** * 是否启用卡片样式 */ card?: boolean; /** * request额外请求的参数 * 数据变化后将会重新发起网络请求 */ params?: ParamsType; /** * 请求获取dataSource * @param params * @returns */ request?: (params: Partial<ParamsType> & { pageSize: number; current: number; sort?: Record<string, SortOrder>; filter?: Recordable<any>; }) => Promise<Partial<RequestData<RecordType>>>; /** * 表格的默认数据源，这些数据源将会在第一次请求后被替换 */ defaultData?: RecordType[]; /** * 表格的最终数据源（设置后request和defaultData都不会生效），离线表格的效果 */ dataSource?: RecordType[]; /** * 表格loading状态变更后触发 * @param loading * @returns */ onLoadingChange?: (loading: boolean) => void; /** * 当可显示列变更后触发 * @returns */ onShownColumnsChange?: (columns: AgGridColumnType<RecordType>[]) => void; /** * 查询表单配置，设置为false表示不渲染查询表单 */ searchForm?: false | ApFormSearchFormProps; /** * 查询表单提交之前，一般用于自定义对查询数据进行变更 * @param params * @returns */ beforeSearchSubmit?: (params: Partial<ParamsType>) => any; /** * 是否显示分页器（特定的分页器）或者指定默认的当前页和pageSize */ pagination?: false | ApTablePaginationConfig; /** * 自定义查询表单容器样式 */ searchFormWrapperStyle?: CSSProperties; /** * 自定义表格样式 */ tableWrapperStyle?: CSSProperties; /** * 表格最外层容器自定义样式 */ wrapperStyle?: CSSProperties; /** * 表格(AgGrid*)的自定义样式 */ tableStyle?: CSSProperties; /** * 是否手动发起第一次网络请求 */ manual?: boolean; /** * 表格尺寸（只支持中等大小和小尺寸） */ size?: 'medium' | 'mini'; /** * 表格是否自适应高度 * @deprecated 不支持的属性，仅仅做迁移的兼容 */ adaptive?: boolean; /** * 设置表格列是否可以resize，还可以进行更多可变尺寸配置 */ columnResizable?: boolean; loading?: boolean; /** * 总结栏配置项 */ summary?: AgGridSummaryType<RecordType>; /** * 指定每一行占据的高度（大量数据展示时的性能优化） */ rowHeight?: number; /** * 指定一行占据的高度 * @since 6.38.0 * @param params * @returns */ getRowHeight?: (params: RowHeightParams<RecordType>) => number | null | undefined; /** * 是否使用另外一种渲染器来渲染单元格 */ advanceRenderer?: boolean; /** * 单元格tooltip使用原生实现默认为 `false` */ browserTooltips?: boolean; /** * 虚拟列表配置项 */ virtual?: false | AgGridVirtualConfig; /** * 行点击事件 * @param event 事件 * @param record 行数据 * @returns */ onRowClicked?: (record: RecordType, event?: Event | null) => void; /** * 表格滚动结束后的事件 * @param direction * @returns */ onScrollEnd?: (direction: ScrollDirection) => void; /** * 非固定行的的自定义行样式类 * @description 固定行自定义样式类请使用`summary.rowClassName` */ rowClassName?: string | string[] | ((data: RecordType, rowIndex: number) => string | string[]); /** * 表格行自定义样式规则集 */ rowClassRules?: RowClassRules<RecordType>; /** * 使用由内容撑起的高度来布局 */ autoHeight?: boolean; /** * 当表格数据更新被应用后的回调 * @returns */ onUpdate?: () => void; /** * 自定义行渲染配置 * @since 6.37.0 */ customRow?: AgGridCustomRowConfig; /** * 自定义主题 * @since 6.41.0 */ theme?: Partial<ThemeDefaultParams>; }; export type AgGridExpose<SearchParamsType = Recordable, RecordType = any> = { /** * 表格查询提交（重制页码但查询参数不会重置） * @returns */ submit: () => void; /** * 表格查询重置（重置页码和查询参数） * @returns */ reset: () => void; /** * 表格刷新当页数据 * @returns */ refresh: () => void; /** * 表格查询提交（重制页码但查询参数不会重置） * @param resetCurrent 是否重置当前页码，默认为`false` * @returns */ submitWith: (resetCurrent?: boolean) => void; /** * 设置查询表单数据 * @param values * @returns */ setSearchFormValues: (values: Partial<SearchParamsType>) => void; /** * 获取查询表单数据 * @param transform 是否获取转换后的数据默认为`false` * @returns */ getSearchFormValues: (transform?: boolean) => (Partial<SearchParamsType> & Recordable<any>) | undefined; /** * 获取最终现实的列配置 * @returns */ getShowColumns: () => AgGridColumnType<RecordType>[]; /** * 行选中相关 */ rowSelection: { selectedRows: ComputedRef<RecordType[]>; /** * 通过rowKey来选中行 * 如果是单选模式，只会选择数组中的第一个元素做选中操作 * @param keys * @returns */ setSelectedRowKeys: (keys: (string | number)[]) => void; /** * 通过整行数据来选中行 * 如果是单选模式，只会选择数组中的第一个元素做选中操作 * @param rows * @returns */ setSelectedRows: (rows: RecordType[]) => void; /** * 反选中行 * @param rows * @returns */ unSelectRows: (rows: RecordType[]) => void; clearAll: () => void; }; /** * 滚动到某一行 * @param index 行索引 * @param position * @returns */ scrollToRow: (index: number, position?: 'top' | 'bottom' | 'middle' | null) => void; /** * 滚动到某一列 * @param key 列的唯一标识 * @param position * @returns */ scrollToColumn: (key: string, position?: 'auto' | 'start' | 'middle' | 'end') => void; /** * 获取当前表格数据 * @returns */ getDataSource: () => RecordType[]; /** * 获取分页参数 * @returns */ getPaging: () => InternalPagingType; /** * 设置表格分页参数 * @param nextPaging 新的分页参数 * @param refreshImmediately 是否立刻刷新数据，默认为`true` * @returns */ setPaging: (nextPaging: InternalPagingType, refreshImmediately?: boolean) => void; /** * 获取查询排序 * @returns */ getSearchFormSorterItems: () => ApFormSearchFormPopoverSorterItem[]; /** * 设置查询表单排序 * @param sortedItems * @returns */ setSearchFormSorterItems: (sortedItems: ApFormSearchFormPopoverSorterItem[]) => void; /** * 重设查询表单排序 * @returns */ resetSearchFormSorterItems: () => void; /** * 刷新单元格 * @param params * @returns */ refreshCells: (params?: RefreshCellsParams<RecordType>) => void; /** * 重新绘制行 * @param params * @returns */ redrawRows: (params?: RedrawRowsParams<RecordType>) => void; /** * AgGrid 暴露的Api实例（仅限内部使用） */ _internalGridApi?: GridApi | undefined; }; export type AgGridSlots<RecordType> = { /** * 自定义查询表单额外的区域 */ searchFormExtra?: any; /** * 自定义表格上部查询表单下部分区域的渲染 */ title?: (params: { selectedRows: RecordType[]; selectedRowKeys: (string | number)[]; shownColumns: AgGridColumnType<RecordType>[]; clearAll: () => void; }) => any; };