@flatbiz/antd

import { TAny, TPlainObject } from '@flatbiz/utils'; import { ButtonProps, FormInstance, FormProps, PaginationProps, PopoverProps, RowProps, SpaceProps, TableProps, TooltipProps } from 'antd'; import { ColumnsType } from 'antd/lib/table/index.js'; import { CSSProperties, ReactElement, ReactNode } from 'react'; export type TipsWrapperProps = { gap?: number; className?: string; style?: CSSProperties; children?: ReactNode; icon?: ReactElement; /** Icon添加点击事件，设置hoverTips后失效 */ onClick?: (event: any) => void; /** * 提示效果类型 * ``` * 1. popover 气泡卡片，内容通过popoverProps设置 * 2. tooltip 文字提示，内容通过tooltipProps设置 * ``` */ tipType?: "popover" | "tooltip"; popoverProps?: PopoverProps; tooltipProps?: TooltipProps; trigger?: "icon" | "all"; }; export type TEasyTableTableColumn<T> = ColumnsType<T>[0] & { dataIndex?: keyof T | (string & {}); /** * 会在 title 之后展示一个 icon * ``` * 1. title为string类型有效 * 2. 可为icon添加提示效果 * 3. 可为icon添加点击事件 * * 例如 * tipsWrapperProps: { * tipType: 'tooltip', * tooltipProps: { * title: '我是内容', * }, * } * * tipsWrapperProps: { * tipType: 'popover', * popoverProps: { * title: '我是标题', * content: '我是内容', * }, * }, * ``` */ tipsWrapperProps?: string | TipsWrapperProps; /** 是否隐藏 */ hidden?: boolean; /** 是否折叠在更多中 */ isFold?: boolean; /** * 异步数据渲染，与asyncColumnRequest配合使用 * ``` * 1. 使用asyncRender后，render配置失效 * 2. 使用场景为，表格列数据是通过接口查询后渲染的（通常表格数据为code，但是页面渲染要使用name） * 3. respData为异步返回数据 * ``` */ asyncRender?: (value: TAny, record: T, index: number, respData?: TAny) => ReactNode; /** 设置默认值，当数据为【undefined、null、''】时显示；自定义render后失效 */ defaultValue?: string; }; export type EasyTableServiceConfig = { /** 接口配置 */ onRequest: (params?: TPlainObject) => Promise<TPlainObject | TPlainObject[]>; /** * 请求参数处理 * ``` * 1. params: 请求参数（requestParamsInternalAdapter 处理后，即值为空字符串、null、undefined 的key值直接删除、以`__#invalid_`开头的key值直接删除） * 2. originalParams: 原始请求参数 * ``` */ requestParamsAdapter?: (params: TPlainObject, originalParams: TPlainObject) => TPlainObject; /** * 接口相应数据处理 * ``` * 返回数据为对象，包含两个字段 * 1. 表格列表数据 - Array * 2. 表格条数总数 - Number * 其中字段key 命名会通过 fieldNames 进行转义 * 例如： * fieldNames={{ * list: 'aList', * total: 'aTotal', * }} * serviceConfig={{ * url: '/v1/board/list', * requestResultAdapter: (respData) => { * return { * aList: respData.data.rows, * aTotal: respData.page.total, * }; * }, * }} * ``` */ requestResultAdapter?: (params: TAny) => TPlainObject; /** * 动态列自定义渲染 * ``` * 1. respData: 接口返回数据 * 2. columns: Table columns配置项 * ``` * */ dynamicColumsAdapter?: (respData?: TAny, columns?: TEasyTableTableColumn<TPlainObject>[]) => TEasyTableTableColumn<TPlainObject>[] | undefined; }; export type EasyTableProps = { className?: string; style?: CSSProperties; children: ReactElement | ReactElement[] | ((dataSource?: TAny) => ReactElement); /** * EasyTable唯一值，可用于缓存查询条件 * @deprecated 已过时，如果需要缓存数据请设置 cacheKey 参数 */ modelKey?: string; /** * 缓存key * ``` * 1. 缓存查询条件key（刷新页面保留查询条件） * 2. 表格列折叠缓存key * ``` */ cacheKey?: string; /** 接口数据配置 */ serviceConfig: EasyTableServiceConfig; /** * 1. 查询条件Form initialValues * 2. 接口其他参数，例如常量类型 * ``` * 如果设置 cacheKey，则查询参数会被缓存，缓存数据优先级高于 initialValues * ``` */ initialValues?: TPlainObject; /** 分页单页条数，默认值：10 */ pageSize?: number; /** * 字段映射，默认值：{ list:'list', total:'total', pageNo:'pageNo', pageSize:'pageSize' } * ``` * 1. list、total用于解析接口响应数据，可以配置多级，例如：{ list: 'data.rows', total: 'page.total' } * 2. pageNo、pageSize用于接口分页入参Key定义，只能一级，例如：pageNo: 'page' * ``` */ fieldNames?: { list?: string; total?: string; pageNo?: string; pageSize?: string; }; /** * 初始化是否请求，默认值：true；必须配合 cacheKey 一起使用 * @deprecated 已过时，请使用 cancelInitAutoRequest、alwaysCancelInitAutoRequest 参数 */ initRequest?: boolean; /** * 取消初始化自动请求 * ``` * 1. 只要用户没有点击查询按钮，多次刷新也不会发起初始请求； * 2. 当用户点击查询按钮后，再次刷新页面就不会控制自动请求了，例如首页（控制了初始不请求）点击查询然后跳转详情，再次通过路由回调首页（会主动请求） * 3. 关闭iframe tab后，再次打开tab时，逻辑重置 * 4. 必须配合 cacheKey 一起使用 * ``` */ cancelInitAutoRequest?: boolean | (() => boolean); /** * 永久关闭任何初始请求，任何情况下都不会自动发起初始请求。 * ``` * 1. 高于 cancelInitAutoRequest 优先级，当设置为 true 时，表格不会自动发起任何初始请求（即使缓存或路由等情况）。 * 2. 必须配合 cacheKey 一起使用 * ``` */ alwaysCancelInitAutoRequest?: boolean | (() => boolean); /** 表格数据变更回调 */ onDataSourceChange?: (dataSource: TAny) => void; /** 如果自定义查询按钮，可设置 Form onFinish */ onFormFinish?: (values?: TPlainObject) => void; /** 在父节点高度下，上下铺满；默认值：true */ isFull?: boolean; /** 查询条件固定，不随滚动条滚动, 屏幕尺寸为xs时失效 */ filterFixed?: boolean; /** 分页区域固定，不随滚动条滚动 */ paginationFixed?: boolean; /** * 1. 配合paginationFixed=true一起使用有效果 * 2. 当使用Table内的pagination时，在EasyTable.Table中配置分页属性 */ pagination?: PaginationProps; /** * 查询条件展开、收起，被收起key数组；数组内容为EasyTable.Filter 子节点key值 */ foldKeys?: string[]; /** 自定义处理服务异常 */ onRequestErrorHandle?: (error: any) => void; /** * 是否inline模式 * ``` * 1. 缩短 EasyTable.Filter 与 EasyTable.Table 之间的距离 * 2. 取消内边距 * ``` */ isInline?: boolean; /** Form 实例 */ form?: FormInstance; /** * 字段折叠配置 * ``` * 1. 设置EasyTable.Table columns中isFold=true * 2. 通过initSelectedKeys、onChange可将选择字段数据外部存储 * 3. 设置cacheKey后，缓存数据优先级高于initSelectedKeys * 4. 必须要设置 EasyTable.Table columns中dataIndex字段（保证在columns中唯一） * ``` */ columnFoldConfig?: { /** 初始化选中数据，缓存数据优先级更高 */ initSelectedKeys?: string[]; /** 隐藏默认触发节点 */ hidden?: boolean; /** 自定义图标 */ icon?: ReactElement; /** 文本 */ text?: string; /** 鼠标悬浮文案 */ hoverTipText?: string; /** 折叠字段选择事件 */ onChange?: (keys: string[]) => void; /** 触发交互弹出类型 */ triggerType?: "drawer" | "dropdown"; }; /** * 配置表格列中需要异步请求数据 * ``` * 1. 与table column asyncRender配合使用 * ``` */ asyncColumnRequest?: { dataIndex: string; onRequest: () => Promise<TAny>; }[]; /** * 调用接口前自定义判断，返回Promise.resolve才能发起查询操作 * ``` * 例如： * breforeRequest={async (form) => { * await sleep(100); * return form.validateFields(); * }} * ``` */ breforeRequest?: (form: FormInstance) => Promise<void>; /** * 指定查询条件验证的formItemKeys，设置后条件回车查询事件失效 * ``` * 1. 当EasyTable处在Form内部时，设置此函数可控制验证字段、控制获取数据 * ``` */ filterFormItemKeys?: string[]; /** 移除请求参数中值为空字符串、null、undefined 的key值，默认值：true */ removeRequestParamsEmptyValue?: boolean; }; export type EasyTableRefApi = { /** 外部发起请求服务 */ onRequest: (params?: TPlainObject) => void; /** * 实时输入的请求参数 */ getRequestParams: () => TPlainObject; /** * 获取提交查询的请求参数 */ getSubmitParams: () => TPlainObject; /** * 清除Form查询条件 * ``` * 1. 会执行form.resetFields(); * 2. values 为清除后指定赋值form的数据 * ``` */ clearQueryCondition: (values?: TPlainObject) => void; /** 更新Form查询条件，不会执行form.resetFields(); */ updateQueryCondition: (values: TPlainObject) => void; /** 搜素表单实例 */ form: FormInstance; /** 重置请求 */ onResetRequest: (params?: TPlainObject) => void; /** * 表格数据源，用在 useEffect、useMemo 中，可保持引用不变 */ dataSource: TAny; /** * 接口数据源，完整的接口数据 * ``` * 1. 每次获取到的都是新的实例 * 2. 可使用 easyTableRefApi.dataSource，获取不变实例 * ``` */ getDataSource: () => TAny; /** 获取表格列表数据 */ getTableDataList: () => TPlainObject[]; /** 过滤表格数据源，不会触发 onDataSourceChange 函数 */ onFilterDataSource: (dataSource: TPlainObject[]) => void; /** 清空表格数据 */ onClearDataSource: () => void; /** 修改表格数据源，会触发onDataSourceChange函数 */ onUpdateDataSource: (dataList: TPlainObject[]) => void; /** 自定义字段折叠触发位置，默认位置在最后一个字段标题右侧 */ columnFoldTriggerRender: (children: ReactElement, columns: TEasyTableTableColumn<TPlainObject>[]) => ReactElement; /** 查询loading状态 */ loading?: boolean; /** * 更新 table columns 数据 * ``` * 1. 初始化阶段可使用 EasyTable.serviceConfig.dynamicColumsAdapter 实现动态表格列 * demo: https://fex.qa.tcshuke.com/docs/admin/main/table/easy-table?tabKey=key7 * ``` */ onChangeTableColumns: (columns: TEasyTableTableColumn<TPlainObject>[]) => void; getTableColumns: () => TEasyTableTableColumn<TPlainObject>[]; /** 设置启用初始化请求 */ setEnabledInitRequest: () => void; }; export type ButtonWrapperProps = Omit<ButtonProps, "onClick" | "color"> & { /** 当返回 Promise 时，按钮自动loading */ onClick?: (e: React.MouseEvent) => Promise<TAny> | void; /** 重复点击间隙，单位毫秒默认值：500 */ debounceDuration?: number; /** 基于GLOBAL中elemAclLimits按钮权限列表，控制按钮显示、隐藏 */ permission?: string; /** 是否隐藏按钮 */ hidden?: boolean; /** loading 显示位置，默认值：left */ loadingPosition?: "left" | "center"; /** 移除按钮内边距，一般用于 type=link 类型下 */ removeGap?: boolean; color?: string; }; declare const PresetDefaultGrid: { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number; }; export type TBoxBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; export type Gutter = number | undefined | Partial<Record<TBoxBreakpoint, number>>; export type GutterParams = Gutter | [ Gutter, Gutter ]; export interface BoxRowProps { /** * 在不同响应尺寸下的元素占位格数 * 应用到所有Col子元素上 */ defaultGrid?: Partial<typeof PresetDefaultGrid>; /** 间距 */ gutter?: GutterParams; /** flex 布局的垂直对齐方式 */ align?: "top" | "middle" | "bottom" | "stretch"; /** flex 布局的水平排列方式 */ justify?: "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly"; /** 尺寸变化回调 */ onBoxBreakpointChange?: (breakpoint: TBoxBreakpoint) => void; } export type TFormLayoutPreClassNameProps = { /** * label宽度，Form内部所有FormItem label都生效 * ``` * 1. 可设置数值 * 2. 可设置`auto`自适应 * ``` */ labelWidth?: "auto" | "70" | "80" | "90" | "100" | "110" | "120" | "130" | "140" | "150" | "160" | "170" | "180" | "190" | "200"; /** labelItem 竖直布局 */ labelItemVertical?: boolean; /** label 对齐方式 */ labelAlign?: "left" | "right"; /** formItem之间竖直间距，默认值：24 */ formItemGap?: "24" | "15" | "8" | "5" | "0"; /** * className 中可能会包含 preDefinedClassName.form.xx，优先级大于 labelWidth、labelItemVertical、labelAlign、formItemGap */ className?: string; }; export type FormWrapperProps<Values = any> = TFormLayoutPreClassNameProps & FormProps<Values> & { children: ReactNode; }; export type EasyFormProps = Omit<FormWrapperProps, "children"> & { /** * 定义一行显示几列（当外层宽度尺寸大于 992px（lg）时，一行显示几列）, 默认值：3 * ``` * 1. 当外层宽度尺寸小于992px（lg），为xs、sm、md情况下不受column值影响（column=1除外） * 2. 宽度尺寸定义 * xs: 宽度 < 576px * sm: 宽度 ≥ 576px * md: 宽度 ≥ 768px * lg: 宽度 ≥ 992px * xl: 宽度 ≥ 1200px * xxl: 宽度 ≥ 1600px * 3. 列数尺寸定义 * { * 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 }, * 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 }, * 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 }, * 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 }, * }; * ``` */ column?: 1 | 2 | 3 | 4; /** * 强制定义一行显示几列，不考虑响应式 * ``` * 1. 优先级大于column * 2. 建议优先使用column配置 * ``` */ forceColumn?: 1 | 2 | 3 | 4; /** * Form显示宽度，可数值、可百分比；在小屏幕尺寸（xs、sm）上无效 */ width?: number | string; /** 网格间距 */ gridGutter?: BoxRowProps["gutter"]; children: ReactNode; /** * 是否为纯净模式，对EasyForm的子节点不做任何包装处理 */ isPure?: boolean; /** * 栅格占位格数，最大值：24 * ``` * 1. 当前EasyForm处在 EasyForm 直接子节点中有效，即当前EasyForm在EasyForm栅格中的占位格数； * 2. 父节点使用属性值，当前节点不使用属性值 * ``` */ span?: number; }; export type FormOperateColProps = { className?: string; leftList?: Array<ReactElement | null>; rightList?: Array<ReactElement | null>; justify?: RowProps["justify"]; /** 强制单独一行 */ forceAloneRow?: boolean; hidden?: boolean; leftSpaceProps?: SpaceProps; rightSpaceProps?: SpaceProps; }; export type FormRowProps = RowProps & { children?: ReactNode | ReactNode[]; /** * default = { xs: 24, sm: 12, md: 8, lg: 8, xl: 8, xxl: 6 }; * small = { xs: 24, sm: 12, md: 8, lg: 6, xl: 6, xxl: 6 }; */ gridSize?: "default" | "small"; }; export type EasyTableFilterProps = { children: ReactElement | ReactElement[] | ((form: FormInstance) => ReactElement); /** isPure = true时无效 */ filterOperate?: (form: FormInstance) => FormOperateColProps; /** 是否为纯净模式（查询条件布局是否自定义）， */ isPure?: boolean; /** 查询按钮配置 */ queryButtonProps?: Omit<ButtonWrapperProps, "onClick"> & { text?: string; }; /** 重置按钮配置 */ resetButtonProps?: Omit<ButtonWrapperProps, "onClick"> & { text?: string; }; /** * 网格布局设置 * default = { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }; * small = { xs: 24, sm: 8, md: 8, lg: 6, xl: 6, xxl: 6 }; */ formGridSize?: FormRowProps["gridSize"]; /** * @deprecated已过期，使用 easyFormProps.className 配置 */ formClassName?: string; /** * @deprecated已过期，使用 easyFormProps.style 配置 */ formStyle?: CSSProperties; /** filter Form 外层 BlockLayout style */ filterWrapperStyle?: CSSProperties; /** filter Form 外层 BlockLayout className */ filterWrapperClassName?: string; /** * 自定义 filterOperate.rightList 后默认【查询、重置】按钮处理逻辑 * 1. cover：覆盖内部查询重置按钮（默认值） * 2. beforeAppend：添加到【查询重置】按钮前面 * 3. afterAppend：添加到【查询重置】按钮后面 * * 如果想隐藏【查询、重置】按钮中的某一个，可设置 queryButtonProps.hidden、resetButtonProps.hidden */ rightOperateAreaAppendType?: "cover" | "beforeAppend" | "afterAppend"; /** 默认重启按钮触发请求，默认值：true */ defaultResetButtonTriggerRequest?: boolean; easyFormProps?: Omit<EasyFormProps, "isPure" | "column" | "forceColumn" | "width" | "gridGutter" | "children">; }; export type EasyTableTableProps<T> = Omit<TableProps<TAny>, "dataSource" | "loading" | "rowKey" | "columns" | "title"> & { children?: ReactElement | ReactElement[]; /** * 表格行 key 的取值， * ``` * 如果 rowKey 为string类型 * 1. 组件会判断表格列表数据第一条是否存在当前rowKey对象的数据，如果没有组件内部会动态添加唯一值 * 2. 基于上一条的逻辑，如果表格数据没有唯一值，可指定 rowKey 值为table数据中不存在的字段名，例如：rowKey="_uid" * 3. 如果触发上述逻辑，表格数据中会多出rowKey对应的键值对数据 * ``` */ rowKey: TableProps<TAny>["rowKey"]; /** table Form 外层 SimpleLayout className */ tableWrapperStyle?: CSSProperties; /** table Form 外层 SimpleLayout className */ tableWrapperClassName?: string; /** * ``` * 1. 当配置了 EasyTable.serviceConfig.dynamicColumsAdapter 后，columns配置只在初始化有效，再次修改无效 * 2. 可通过 EasyTableRef.onChangeTableColumns 实现 columns 的指定修改 * ``` */ columns: TEasyTableTableColumn<T>[]; /** * 数据加载与表格初始化渲染是否同步 * @version 4.4.6 * ``` * 1. true：获取数据后再初始化渲染表格（可用于实现表格中defaultXxxx相关功能的使用） * ``` */ isSync?: boolean; /** * 空效果显示尺寸，默认值：small * @version 4.4.6 */ emptyShowSize?: "small" | "large"; /** 标题 */ title?: ReactNode; /** 与标题对齐的动作 */ actions?: ReactElement[]; }; /** * 对查询条件+表格数据进行深度封装，内置数据交互处理 * ``` * Demo https://fex.qa.tcshuke.com/docs/admin/main/crud/easy-table * * 1. 废弃modelKey参数 * 2. 如果需要在路由跳转回退中缓存查询条件，设置cacheSwitch=true；如果存在多个EasyTable缓存情况可设置cacheSwitch为自定义字符串 * 3. 需要获取查询条件、主动发起请求等可通过ref、useEasyTable操作 * 4. 可通过属性 initRequest 设置初始化是否请求数据 * 5. 可通过属性 fieldNames 来设置自定义变量，默认值为：list、total、pageNo、pageSize * 6. isFull=true，设置【在父节点高度下，上下铺满】（默认值：true） * 7. filterFixed=true，设置查询条件固定，不随滚动条滚动 * 8. paginationFixed=true，可设置分页条件在底部固定，不随滚动条滚动 * 9. foldKeys=string[]，查询条件展开、收起，被收起数组内容为EasyTable.Filter 子节点key值 * 10. windows环境下，会在EasyTable.Table外部包装一下 TableScrollbar，提高windows下table左右滚动体验 * 11. 可实现部分字段折叠，手动选择显示，将EasyTable.Table columns中isFold属性设为true，可通过EasyTable columnFoldConfig配置属性，demo（https://fex.qa.tcshuke.com/docs/admin/main/crud/demo1） * 12. 通过asyncColumnRequest、asyncRender配合使用可实现表格列数据接口渲染（demo：https://fex.qa.tcshuke.com/docs/admin/main/crud/easy-table） * ``` */ export declare const EasyTable: import("react").ForwardRefExoticComponent<EasyTableProps & import("react").RefAttributes<EasyTableRefApi>> & { /** * 过滤条件 *``` * 1. 用法1 * -- 默认网格布局规则：{ xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 } * <EasyTable.Filter> * <FormItemWrapper name="field1" label="条件1">xxx</FormItemWrapper> * </EasyTable.Filter> * * -- 自定义网格布局使用 FormGrid.Col 组件包装 FormItemWrapper * <EasyTable.Filter> * <FormGrid.Col span={12}><FormItemWrapper name="field1" label="条件1">xxx</FormItemWrapper></FormGrid.Col> * </EasyTable.Filter> * * -- children 可为 function * <EasyTable.Filter> * {(form) => { * return <FormItemWrapper name="field1" label="条件1">xxx</FormItemWrapper> * }} * </EasyTable.Filter> * 2. 用户2（自定义布局） * EasyTable.Filter设置 isPure = true，FormItem无布局规则 * 3. EasyTable.Filter中内置了 Form 标签，当children为函数时，可获取form实例 * 4. 默认布局下，可通过设置 filterOperate 设置操作按钮 * 5. Filter 子节点包含 hidden = true 会被忽略 * 6. 如果想隐藏【查询、重置】按钮中的某一个，可设置 queryButtonProps.hidden、resetButtonProps.hidden * 7. EasyTableFilter 子节点可使用 FormItemWrapper，FormItemWrapper中可配置label宽度等 * 8. 通过easyFormProps属性可整体控制子节点FormItem布局 *``` */ Filter: (props: EasyTableFilterProps) => import("react").JSX.Element; /** * 表格渲染 * @param props * ``` * 1. 继承了 TableProps 可设置antd table功能 * 2. 分页功能已内置处理，不调用 onChange * ``` */ Table: <T extends import("@flatbiz/utils").TPlainObject>(props: EasyTableTableProps<T>) => import("react").JSX.Element; /** 在 EasyTable子组件内才可使用 */ useEasyTable: () => EasyTableRefApi; /** 设置启用初始化请求 */ setEnabledInitRequest: (cacheKey: string) => void; }; export {};