@aplus-frontend/ui

import { ColumnType, TableProps, ColumnsType } from '@aplus-frontend/antdv/es/table'; import { CompareFn, SortOrder, TableRowSelection } from '@aplus-frontend/antdv/es/table/interface'; import { ApFormItemProps, ApFormSearchFormPopoverSorterItem, ApFormSearchFormProps } from '../ap-form'; import { ApFormItemCheckboxProps, ApFormItemDateProps, ApFormItemDateRangeProps, ApFormItemNumberProps, ApFormItemRadioProps, ApFormItemSelectProps, ApFormItemSwitchProps, ApFormItemTextAreaProps, ApFormItemTextPasswordProps, ApFormItemTextProps, ApFormItemTreeSelectProps } from '../ap-form/items/interface'; import { Recordable } from '../type'; import { ComputedRef, CSSProperties, VNode } from 'vue'; import { ApActionGroupProps } from '../ap-action'; import { ApTableIndexProps } from './components/interface'; import { EllipsisConfig } from '@aplus-frontend/antdv/es/typography/Base'; import { RowSelectionReturnType } from './hooks/use-table-row-selection'; import { PaginationProps } from '@aplus-frontend/antdv'; import { InternalPagingType } from './hooks/use-table-paging-ng'; export type ValueEnumType = { text: string; /** * 当前枚举值与定义的状态，等同于Badge的status */ status?: 'success' | 'error' | 'processing' | 'warning' | 'default'; /** * 如果status预定义的颜色无法满足需求，你可以自定义徽标的颜色，注意`color`比`status`的优先级更高 */ color?: string; disabled?: boolean; }; /** * ApTable默认支持的值类型（将会用于表单生成和默认值格式化） */ export type ApTableValueFields = { /** 日期选择器 */ date: ApFormItemDateProps; /** 日期范围选择器 */ dateRange: ApFormItemDateRangeProps; /** 数字输入框 */ number: ApFormItemNumberProps; /** 单选 */ radio: ApFormItemRadioProps; /** 下拉选择 */ select: ApFormItemSelectProps; /** 开关 */ switch: ApFormItemSwitchProps; /** 文本输入 */ text: ApFormItemTextProps; /** 多行文本输入 */ textArea: ApFormItemTextAreaProps; /** 多选 */ checkbox: ApFormItemCheckboxProps; /** * 操作列 */ action: ApActionGroupProps; /** * 索引列 */ index: ApTableIndexProps; /** * 密码输入框 */ password: ApFormItemTextPasswordProps; /** * 树选择 */ treeSelect: ApFormItemTreeSelectProps; }; export type ApTableValueTypes = keyof ApTableValueFields; export type ValueEnum = Record<string, ValueEnumType>; export type ExtraProColumnType<T> = Omit<ColumnType<T>, 'children' | 'filters' | 'customRender' | 'ellipsis'> & { sorter?: string | boolean | CompareFn<T> | { compare?: CompareFn<T>; /** Config multiple sorter order priority */ multiple?: number; }; }; export type ApTableRowSelection<RecordType = any> = Omit<TableRowSelection<RecordType>, 'selectedRowKeys' | 'onChange' | 'onSelect' | 'onSelectAll' | 'onSelectInvert' | 'onSelectNone'> & { mode: 'internal'; }; export type CommonFieldReturnType = ApFormItemProps & { field?: Recordable; placeholder?: string; disabled?: boolean; }; export type ApTableSettingType = { /** * 用于持久化缓存的key */ persistenceKey?: string; /** * 持久化类型 */ persistenceType?: 'localStorage' | 'sessionStorage'; /** * 列的默认状态 */ defaultValue?: ApTableSettingDefaultValueType; /** * 列状态变更时的回调（注意，返回的是全量状态） * @param val * @returns */ onChange?: (val: ApColumnState[]) => void; }; export type ApTableSettingDefaultValueType = Recordable<Omit<ApColumnState, 'label' | 'key' | 'children'> & { children?: ApTableSettingDefaultValueType; }>; export type ApColumnState = { /** * 列的唯一标识 */ key: string | number; /** * 列是否显示 */ show?: boolean; /** * 列的固定状态 */ fixed?: 'left' | 'right'; /** * 是否可以修改列状态 */ disabled?: boolean; /** * 列对应显示的文本 */ label?: any; /** * 子节点状态 */ children?: ApColumnState[]; /** * 字段排序（和其同级的表头排序） */ order?: number; }; export type FieldPropsType<ReturnType, RecordType, ExtraValueType, ValueType extends ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType> = ReturnType | ((opt: Partial<{ value: any; text: any; record: RecordType; index: number; renderIndex: number; column: ApColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>; }>) => ReturnType); export type ApColumnType<RecordType = any, ExtraValueType = 'text', ValueType extends ApTableValueTypes = ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType = ExtraValueType | ValueType> = MergedValueType extends ExtraValueType | ValueType ? ExtraProColumnType<RecordType> & { children?: Omit<ApColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>, 'fixed'>[]; /** * 表单项所占据的格子数（1-24格） */ span?: number; /** * 在title之后展示一个icon并触发tooltip */ tooltip?: string | ((column: ApColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>) => VNode); /** * 是否可以复制 */ copyable?: boolean; /** * 是否省略自动溢出，自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 */ ellipsis?: boolean | EllipsisConfig; /** * 是否搜索表单中隐藏 */ hideInSearch?: boolean; /** * 是否在表格中隐藏 */ hideInTable?: boolean; /** * 值的枚举，会自动转化把值当成 key 来取出要显示的内容（也会作为select等组件的选项） */ valueEnum?: ValueEnum; /** * 自定义查询表单渲染 */ customRenderFormItem?: (config: ApColumnType<RecordType>) => any; /** * 自定义渲染文本，和customRender相比，其必须返回字符串，并且后续的渲染（例如copy/ellipsis）都将使用这个值 */ renderText?: (option: { value: any; text: any; record: RecordType; index: number; renderIndex: number; column: ApColumnType<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后会尝试使用valueEnum生成filters */ filters?: ColumnType<RecordType>['filters'] | true; /** * 自定义渲染，添加了`editable`以及`originalNode、originalText` * @param opt * @returns */ customRender?: (opt: { value: any; text: any; record: RecordType; index: number; renderIndex: number; column: ApColumnType<RecordType>; originalNode?: VNode; originalText?: any; }) => any; /** * 是否在表头渲染必填标记 * @description 仅限内部使用 */ _requireMark?: boolean; } : never; export type RequestData<T> = { data: T[] | undefined; total: number; } & Record<string, any>; export type ApTablePaginationConfig = { defaultCurrent?: number; defaultPageSize?: number; /** * 是否显示较少页面内容 */ showLessItems?: boolean; /** * 用于显示数据总量和当前数据顺序 */ showTotal?: boolean; /** * 是否显示尺寸切换器 */ showSizeChanger?: boolean; /** * 是否显示快速跳转 */ showQuickJumper?: boolean; } & { pageSizeOptions?: PaginationProps['pageSizeOptions']; }; export type ApTableProps<RecordType = any, ParamsType = any> = Omit<TableProps<RecordType>, 'columns' | 'pagination' | 'dataSource' | 'size' | 'rowSelection'> & { /** * 列配置 */ columns?: ApColumnType<RecordType, any>[]; /** * 行选中配置 */ rowSelection?: true | ApTableRowSelection<RecordType> | (TableRowSelection<RecordType> & { mode?: 'base'; }); /** * 是否启用卡片样式 */ card?: boolean; /** * request额外请求的参数 * 数据变化后将会重新执行网络请求 */ params?: ParamsType; /** * 自定义渲染搜索表单 * @deprecated 未实现暂不可用 */ searchFormRender?: (props: ApTableProps<RecordType, ParamsType>, defaultDom: any) => any; /** * 请求获取dataSource * @param params * @returns */ request?: (params: Partial<ParamsType> & { pageSize: number; current: number; sort?: Record<string, SortOrder>; filter?: Recordable<any>; }) => Promise<Partial<RequestData<RecordType>>>; /** * 数据加载完成后触发 * @deprecated 已弃用，请自行实现类似效果 * @returns */ onLoad?: (data: RecordType[]) => void; /** * 表格的默认数据源，这些数据源将会在第一次请求后被替换 */ defaultData?: RecordType[]; /** * 表格的最终数据源（设置后request和defaultData都不会生效），离线表格的效果 */ dataSource?: RecordType[]; /** * 表格loading状态变更后触发 * @param loading * @returns */ onLoadingChange?: (loading: boolean) => void; /** * 查询表单配置，设置为false表示不渲染查询表单 */ searchForm?: false | ApFormSearchFormProps; /** * 查询表单提交之前，一般用于自定义对查询数据进行变更 * @param params * @returns */ beforeSearchSubmit?: (params: Partial<ParamsType>) => any; /** * 是否显示分页器（特定的分页器）或者指定默认的当前页和pageSize */ pagination?: false | ApTablePaginationConfig; /** * 自定义查询表单容器样式 */ searchFormWrapperStyle?: CSSProperties; /** * 自定义表格样式 */ tableWrapperStyle?: CSSProperties; /** * 是否手动发起第一次网络请求 */ manual?: boolean; /** * 表格尺寸（只支持中等大小和小尺寸） */ size?: 'middle' | 'small'; /** * 表格是否自适应高度 */ adaptive?: boolean; /** * 设置表格列是否可以resize */ columnResizable?: ColumnType['resizable']; /** * 是否开启表格设置 */ settings?: true | ApTableSettingType; }; export type ApTableExpose<SearchParamsType = Recordable, RecordType = any> = { /** * 查询表单提交 */ submit: () => void; /** * 表格查询提交（重制页码但查询参数不会重置） * @param resetCurrent 是否重置当前页码，默认为`false` * @returns */ submitWith: (resetCurrent?: boolean) => void; /** * 查询表单重置 */ reset: () => void; /** * 刷新表格数据 * @description 请注意，此方法会缓存查询参数，也就意味着表单项异步初始值可能不会生效 * @returns */ refresh: () => void; /** * 设置查询表单的值 * @param fields * @returns */ setSearchFormValues: (fields: Partial<SearchParamsType>) => void; /** * 获取查询表单值 * @param `transform`是否转换表单值默认为`false` * @returns */ getSearchFormValues: (transform?: boolean) => Partial<SearchParamsType>; /** * 表格数据源 */ dataSource: RecordType; /** * 行选中相关的数据和API */ rowSelection?: Omit<RowSelectionReturnType<RecordType>, 'rowSelection'> & { selectedRows: ComputedRef<RecordType[]>; }; /** * 获取当前需要显示的列 * @returns */ getShownColumns: () => ColumnsType<RecordType>; /** * 滚动条实例 */ scrollBar: { x: { getCurrentScroll: () => number; scroll: (percent: number) => void | undefined; }; y: undefined; }; /** * 获取分页参数 * @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; }; export type ApTableContextRenderConfig = { color: string; className: string; };