@aplus-frontend/ui

import { ApFormSearchFormPopoverSorterItem, ApFormSearchFormProps } from '../ap-form/interface'; import { ApTablePaginationConfig, ApTableValueFields, ApTableValueTypes, CommonFieldReturnType, ExtraProColumnType, FieldPropsType, RequestData, ValueEnum } from '../ap-table/interface'; import { Recordable } from '../type'; import { TableProps } from '@aplus-frontend/antdv'; import { ColumnFilterItem, SortOrder, TableRowSelection } from '@aplus-frontend/antdv/es/table/interface'; import { ComputedRef, CSSProperties, VNode } from 'vue'; import { VxeTablePropTypes, VxeColumnPropTypes, VxeTableProps, VxeTableDefines, VxeColumnSlots, VxeColumnProps } from 'vxe-table'; import { InternalPagingType } from '../ap-table/hooks/use-table-paging-ng'; export type ColConfigType = VxeTableDefines.ColumnOptions; export type ApGridColumnType<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' | 'className' | 'class'> & { children?: ApGridColumnType<RecordType, ExtraValueType, ValueType>[]; /** * 表单项所占据的格子数（1-24格） */ span?: number; /** * 列的最小宽度 */ minWidth?: string | number; /** * 在title之后展示一个icon并触发tooltip */ tooltip?: string | ((column: ApGridColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>) => VNode); /** * 是否可以复制 */ copyable?: boolean; /** * 配置溢出隐藏的方式 * @description 如果传递数字，则表示需要满足溢出隐藏的行数，此时默认会显示tooltip */ ellipsis?: VxeTablePropTypes.ShowOverflow | number; /** * 是否搜索表单中隐藏 */ hideInSearch?: boolean; /** * 是否在表格中隐藏 */ hideInTable?: boolean; /** * 值的枚举，会自动转化把值当成 key 来取出要显示的内容（也会作为select等组件的选项） */ valueEnum?: ValueEnum; /** * 自定义查询表单渲染 */ customRenderFormItem?: (config: ApGridColumnType<RecordType>) => any; /** * 自定义渲染文本，和customRender相比，其必须返回字符串，并且后续的渲染（例如copy/ellipsis）都将使用这个值 */ renderText?: (option: { value: any; text: any; record: RecordType; index: number; renderIndex: number; column: ApGridColumnType<RecordType>; }) => string; /** * 指定值类型（将会用于默认渲染和查询表单生成） */ valueType?: MergedValueType; /** * 指定渲染内容是否为html */ html?: boolean; /** * 指定当前列是否是VxeTable内置的序号列 */ seq?: boolean; /** * 指定当前列为树节点 */ treeNode?: boolean; /** * 值类型额外配置的参数（用于查询表单渲染） */ fieldProps?: FieldPropsType<Extract<MergedValueType, ValueType> extends never ? CommonFieldReturnType : ApTableValueFields[Extract<MergedValueType, ValueType>], RecordType, ExtraValueType, ValueType, MergedValueType>; /** * 用于表单项排序的字段 * @description 值越大，越排在前面，请设置正整数，设置为0或负数将会无效 */ order?: number; /** * 用于指定列排序，设置为true表示后端排序，否则为前端排序 * Table同时只能设置一种排序类型，当至少有一个后端排序列时，显式设置为前端排序的列将不会生效 */ sorter?: true | { type?: VxeColumnPropTypes.SortType; by?: VxeColumnPropTypes.SortBy; }; /** * 表头的菜单筛选项，设置为true后会尝试使用valueEnum生成filters */ filters?: Omit<ColumnFilterItem, 'children'>[] | true; /** * 自定义渲染，添加了`originalNode、originalText` * @param opt * @returns */ customRender?: (opt: { value: any; text: any; record: RecordType; index: number; renderIndex: number; column: ApGridColumnType<RecordType>; originalNode?: VNode; originalText?: any; }) => any; } & Pick<VxeColumnProps, 'className' | 'headerClassName' | 'footerClassName'> : never; export type ApGridRowSelection<RecordType> = Pick<TableRowSelection<RecordType>, 'defaultSelectedRowKeys' | 'type' | 'preserveSelectedRowKeys' | 'onChange' | 'fixed' | 'columnWidth' | 'columnTitle'> & { /** * 设置禁用的列 * @param row * @returns */ disabled?: (row: RecordType) => boolean; /** * 是否显示选择框的方法，返回false将显示 * @param row * @returns */ shown?: (row: RecordType) => boolean; /** * 是否开启鼠标滑动的范围选择（仅复选有效） */ range?: boolean; }; export type ApGridProps<RecordType = any, ParamsType = any> = Omit<TableProps<RecordType>, 'columns' | 'pagination' | 'dataSource' | 'size' | 'rowSelection' | 'rowKey' | 'rowClassName' | 'footer' | 'loading'> & Pick<VxeTableProps<RecordType>, 'rowClassName' | 'stripe' | 'headerRowClassName' | 'footerRowClassName' | 'cellClassName' | 'headerCellClassName' | 'footerCellClassName' | 'rowStyle' | 'headerRowStyle' | 'footerRowStyle' | 'cellStyle' | 'headerCellStyle' | 'footerCellStyle' | 'height' | 'minHeight' | 'maxHeight' | 'mergeCells' | 'mergeFooterItems' | 'cellConfig' | 'loading' | 'loadingConfig' | 'headerCellConfig' | 'footerCellConfig' | 'round'> & { /** * 列配置 */ columns?: ApGridColumnType<RecordType, any>[]; /** * 行选中配置 */ rowSelection?: true | ApGridRowSelection<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: ApGridColumnType<RecordType>[]) => void; /** * 查询表单配置，设置为false表示不渲染查询表单 */ searchForm?: false | ApFormSearchFormProps; /** * 查询表单提交之前，一般用于自定义对查询数据进行变更 * @param params * @returns */ beforeSearchSubmit?: (params: Partial<ParamsType>) => any; /** * 是否显示分页器（特定的分页器）或者指定默认的当前页和pageSize */ pagination?: false | ApTablePaginationConfig; /** * 自定义查询表单容器样式 */ searchFormWrapperStyle?: CSSProperties; /** * 自定义表格样式 */ tableWrapperStyle?: CSSProperties; /** * 表格最外层容器自定义样式 */ wrapperStyle?: CSSProperties; /** * 是否手动发起第一次网络请求 */ manual?: boolean; /** * 表格尺寸（只支持中等大小和小尺寸） */ size?: 'medium' | 'mini'; /** * 表格是否自适应高度 */ adaptive?: boolean; /** * 设置表格列是否可以resize，还可以进行更多可变尺寸配置 */ columnResizable?: boolean | VxeTablePropTypes.ResizableConfig; rowKey?: string; /** * 指定用于渲染footer的数据，支持函数 */ footer?: VxeTablePropTypes.FooterData | VxeTablePropTypes.FooterMethod<RecordType>; /** * 设置虚拟滚动 */ virtual?: false | ApGridVirtualConfig; /** * 设置可展开及其配置 */ expandable?: VxeTablePropTypes.ExpandConfig<RecordType> & { /** * 自定义渲染展开后内容 */ renderContent: NonNullable<VxeColumnSlots<RecordType>['content']>; /** * 展开列占据的宽度，默认为auto */ width?: string | number; /** * 展开列的title */ title?: string; /** * 自定义渲染单元格 * @param expanded 当前的展开状态 * @param row 当前的行数据 * @returns */ renderCell?: (expanded: boolean, row: RecordType) => any; }; /** * 作为表单项时内部传递，请勿使用 */ value?: any; /** * 行是否可以被高亮（传入函数可以获取当前被选中的行） */ rowHighlightable?: boolean | ((current: RecordType) => void); /** * 树形表格设置（部分vxe-table.treeConfig配置） */ treeConfig?: Omit<VxeTablePropTypes.TreeConfig<RecordType>, 'transform' | 'iconOpen' | 'iconClose' | 'iconLoaded'>; /** * 当表格准备好后执行，可以在这个事件中执行表格的API操作 * @returns */ onReady?: (records: RecordType[]) => void; }; export type ApGridVirtualConfig = { x?: false | number; y?: false | number; /** * 指定每次渲染更多的数据，值越大渲染耗时就越久 */ oSize?: number; }; export type ApGridColumnProps<RecordType> = { column: ApGridColumnType<RecordType>; }; export type ApGridExpose<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: () => ApGridColumnType<RecordType>[]; /** * 行选中相关 */ rowSelection: { selectedRows: ComputedRef<RecordType[]>; /** * 通过API调用设置行选中 * @param keys * @returns */ setSelectedRowKeys: (keys: (string | number)[]) => void; clearAll: () => void; }; /** * 滚动到某一行 * @param index 行索引 * @param fieldOrColumn * @returns */ scrollToRow: (index: number, fieldOrColumn?: any) => Promise<any>; /** * 获取当前表格数据 * @returns */ getDataSource: () => RecordType[]; /** * 设置某一行被选中 * @param nextRow * @returns */ setCurrentRow: (nextRow: Partial<RecordType>) => void; /** * 获取分页参数 * @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; /** * 根据rowKey设置展开行 * @param rowKeys * @param expanded 设置展开与否，默认为`true` * @returns */ setRowExpand: (rowKeys: string | number | (string | number)[], expanded?: boolean) => Promise<void>; };