what
acbff01332
button/container/data-converter/data-list/grid-layout/grid-layout-form/
res-ws/virtual-fs 这几个入口的 index.js 都用 export { default as X } from './xxx'
转发了 default 导出，但同级有手写 types/ 目录时会触发合成入口逻辑，用
export * from './index' 拼入口文件，而 export * 在 ES 模块语义里不会带出 default，
导致这些包的 default 导出（部分甚至连实现本身，如 DataConverter、ResWs 整个类）
被 tree-shake 掉，没有出现在最终产物里。
607 lines
29 KiB
TypeScript
607 lines
29 KiB
TypeScript
import React, { ReactNode as ReactNode$1, ComponentType, ReactElement } from 'react';
|
||
import { ButtonOption, WidgetContainerProps } from './button';
|
||
import { GridLayoutProps } from './grid-layout';
|
||
|
||
/** 宫格卡片的 GridLayout 布局配置，透传给 DataListContent / GridLayout */
|
||
interface DataListItemForGridLayout extends GridLayoutProps {}
|
||
|
||
/** 列表操作按钮配置（行内操作 / 批量操作通用） */
|
||
type DataListOperation = ButtonOption & {
|
||
/** 操作后是否刷新：0 不刷新，1 整体刷新，2 局部刷新（只更新当前行） */
|
||
isRefresh?: 0 | 1 | 2
|
||
}
|
||
|
||
/** 表格列配置，在 antd ColumnType 基础上扩展数据列表能力 */
|
||
interface DataListColumn {
|
||
/** 列标题 */
|
||
title?: string
|
||
/** 对应数据字段名 */
|
||
dataIndex?: string | string[]
|
||
/** 列唯一 key */
|
||
key?: string
|
||
/** 列宽（px） */
|
||
width?: number
|
||
/** 是否固定宽度，不参与自适应缩放 */
|
||
isWidthFixed?: boolean
|
||
/** 固定列方向 */
|
||
fixed?: 'left' | 'right' | boolean
|
||
/** 对齐方式 */
|
||
align?: 'left' | 'center' | 'right'
|
||
/** 自定义渲染函数 */
|
||
render?: (value: unknown, record: Record<string, unknown>, index: number) => ReactNode$1
|
||
/** 渲染中间件列表，由 DataConverter 链式处理 */
|
||
middlewares?: unknown[]
|
||
/** 动态渲染控件标识（通过 core.getWidgetComponent 加载） */
|
||
widgetByJs?: string
|
||
/** widgetByJs 的 $setting 配置 */
|
||
widgetByJsSetting?: Record<string, unknown>
|
||
/** 是否可行内编辑 */
|
||
editableByJs?: boolean
|
||
/** 行内编辑配置 */
|
||
editableByJsSetting?: {
|
||
formSetting?: { primaryKey?: string; help?: string; validators?: Record<string, unknown> }
|
||
widgetSetting?: Record<string, unknown>
|
||
widgetContainerSetting?: WidgetContainerProps
|
||
}
|
||
[key: string]: unknown
|
||
}
|
||
|
||
/** 列表 tab 配置项 */
|
||
interface DataListTab {
|
||
/** tab 唯一标识（优先使用） */
|
||
value?: unknown
|
||
/** tab 编码（value 不存在时使用） */
|
||
code?: unknown
|
||
/** tab 显示文本 */
|
||
label?: string
|
||
[key: string]: unknown
|
||
}
|
||
|
||
/** DataList / DataListHelper 各区块自定义 className */
|
||
interface DataListClassNames {
|
||
sider?: string
|
||
filter?: string
|
||
footer?: string
|
||
toolbar?: string
|
||
container?: string
|
||
content?: string
|
||
item?: string
|
||
empty?: string
|
||
}
|
||
|
||
/** DataList layouts prop — 各子区块组件，false 表示全部隐藏 */
|
||
interface DataListLayouts {
|
||
sider?: ComponentType<any> | ReactElement | null
|
||
filter?: ComponentType<any> | ReactElement | null
|
||
footer?: ComponentType<any> | ReactElement | null
|
||
toolbar?: ComponentType<any> | ReactElement | null
|
||
empty?: ComponentType<any> | ReactElement | null
|
||
}
|
||
|
||
/** 行选择配置 */
|
||
interface DataListRowSelection {
|
||
/** 选择模式 */
|
||
type?: 'checkbox' | 'radio'
|
||
/** 受控选中的行 key 列表 */
|
||
selectedRowKeys?: unknown[]
|
||
/** 默认选中行 key（非受控） */
|
||
defaultSelectedRowKeys?: unknown[]
|
||
/** 选中行变化回调 */
|
||
onChange?: (keys: unknown[], rows: Record<string, unknown>[]) => void
|
||
/** 选择列宽度（px），默认 32 */
|
||
columnWidth?: number
|
||
[key: string]: unknown
|
||
}
|
||
|
||
/** /api/_/{listCode} 返回的列表结构配置，由 DataListHelper 通过 setStructure 消费 */
|
||
interface DataListStructure {
|
||
/** 关联资源标识 */
|
||
resource?: string
|
||
/** 主键字段名 */
|
||
primaryKey?: string
|
||
/** 表格列配置 */
|
||
columns?: DataListColumn[]
|
||
/** 行内操作按钮配置 */
|
||
itemOperations?: DataListOperation[]
|
||
/** 批量操作按钮配置 */
|
||
batchOperations?: DataListOperation[]
|
||
/** 是否使用表单布局模式的筛选条件 */
|
||
isConditionFormLayout?: boolean
|
||
/** 是否启用树形侧边栏 */
|
||
isTreeSider?: boolean
|
||
/** 树形侧边栏配置 */
|
||
treeSiderConfig?: Record<string, unknown>
|
||
/** 主题组件标识 */
|
||
theme?: string
|
||
/** 传给主题组件的 $setting */
|
||
themeConfig?: Record<string, unknown>
|
||
/** 是否使用宫格卡片布局 */
|
||
isItemGridLayout?: boolean
|
||
/**
|
||
* 宫格卡片布局配置（API 格式）
|
||
* 注：themeConfig 在 DataListHelper 中会被重命名为 themeProps 后再传给组件
|
||
*/
|
||
itemGridLayout?: Omit<DataListItemForGridLayout, 'themeProps'> & { themeConfig?: Record<string, unknown> }
|
||
/** 列表标题 */
|
||
title?: string
|
||
/** 是否分页 */
|
||
isPaginate?: boolean
|
||
/** tab 配置 */
|
||
tabs?: DataListTab[]
|
||
/** 行选择模式 */
|
||
selectionType?: 'checkbox' | 'radio'
|
||
/** 是否启用动态刷新（WebSocket 订阅） */
|
||
isDynamicRefresh?: boolean
|
||
[key: string]: unknown
|
||
}
|
||
|
||
/**
|
||
* 行内操作权限映射：key 为操作按钮 uuid，value 为拥有该权限的行主键列表；
|
||
* 由后端 list-operations-access 接口返回，通过 useOperationCallback 管理
|
||
*/
|
||
type DataListItemOperationsAccess = Map<string, unknown[]>
|
||
|
||
/** 列表查询参数，用于分页/筛选/tab/关键字等，经 base62 编码后传给后端 */
|
||
interface DataListQueryParams {
|
||
/** 当前页码，默认 1 */
|
||
page?: number
|
||
/** 每页条数，默认 30 */
|
||
pageSize?: number
|
||
/** 当前选中的 tab 值 */
|
||
tab?: unknown
|
||
/** 关键字搜索值 */
|
||
keyword?: string
|
||
/** 筛选条件（字段名 → 值） */
|
||
condition?: Record<string, unknown>
|
||
/** 侧边栏选中值 */
|
||
sider?: unknown
|
||
/** 数据总条数（仅用于回显，不参与请求） */
|
||
total?: number
|
||
/** 附加请求参数，透传到后端 */
|
||
payload?: Record<string, unknown>
|
||
[key: string]: unknown
|
||
}
|
||
|
||
/**
|
||
* DataList 对外暴露的操作 API；
|
||
* 由 DataList 通过 Context 注入，供动态脚本及子组件（如 ff-button）调用
|
||
*/
|
||
interface DataListAPI {
|
||
/** 获取当前查询参数；k 为字段名时返回单个值，'init' 或空时返回全量对象 */
|
||
getBase62params: (k?: string, defaultValue?: unknown) => unknown
|
||
/** 获取当前已选中行数据 */
|
||
getSelectedRows: () => Record<string, unknown>[]
|
||
reload: (params?: Partial<DataListQueryParams>) => void
|
||
setPage: (page: number, pageSize?: number) => void
|
||
setPageSize: (pageSize: number) => void
|
||
setTab: (tab: unknown) => void
|
||
setSider: (sider: unknown) => void
|
||
setKeyword: (keyword: string) => void
|
||
setCondition: (value: Record<string, unknown>, keyword?: string) => void
|
||
}
|
||
|
||
/** DataListContext 的值结构，由 DataList 通过 Provider 注入，内部子组件通过 useContext 消费 */
|
||
interface DataListContextValue extends DataListAPI {
|
||
listCode?: string
|
||
classNames?: DataListClassNames
|
||
onReload: (params?: Partial<DataListQueryParams>) => void
|
||
onClickCallback?: (isRefresh: number, item?: Record<string, unknown> | null) => void
|
||
onConditionChange: (value: Record<string, unknown>, keyword?: string) => void
|
||
onTabChange: (tab: unknown) => void
|
||
onSiderChange: (sider: unknown) => void
|
||
onKeywordChange: (keyword: string) => void
|
||
onPageChange: (page: number, pageSize?: number) => void
|
||
onPageSizeChange: (pageSize: number) => void
|
||
}
|
||
|
||
/** useDataListHelper 的返回值：继承 DataListQueryParams 当前状态 + 数据 + 各维度更新方法 */
|
||
interface DataListHelperState extends DataListQueryParams {
|
||
/** 当前页数据 */
|
||
dataSource: Record<string, unknown>[]
|
||
/** 操作权限映射：操作 uuid → 有权限的行主键列表 */
|
||
itemOperationsAccess: DataListItemOperationsAccess
|
||
/** 主键字段名（来自结构配置） */
|
||
primaryKey?: string
|
||
onReload: DataListContextValue['onReload']
|
||
onTabChange: DataListContextValue['onTabChange']
|
||
onPageChange: DataListContextValue['onPageChange']
|
||
onPageSizeChange: DataListContextValue['onPageSizeChange']
|
||
onConditionChange: DataListContextValue['onConditionChange']
|
||
onSiderChange: DataListContextValue['onSiderChange']
|
||
onKeywordChange: DataListContextValue['onKeywordChange']
|
||
onClickCallback?: DataListContextValue['onClickCallback']
|
||
}
|
||
|
||
/** DataListHelper 通过 ref 暴露的方法 */
|
||
interface DataListHelperRef {
|
||
/** 触发整体刷新 */
|
||
reload: () => void
|
||
/** 获取已选中行数据 */
|
||
getSelectedRows: () => Record<string, unknown>[]
|
||
/** Button 操作完成后通知列表刷新：isRefresh=1 整体刷新，2 局部刷新（item 为当前行数据） */
|
||
emitOperation: (isRefresh: number, item?: Record<string, unknown> | null) => void
|
||
}
|
||
|
||
/**
|
||
* 处理表格列配置:为每列注入 onCell,并按 middlewares/widgetByJs 组装渲染中间件链(通过 DataConverter)生成最终的 render 函数
|
||
* @param {DataListColumn[]} columns 原始列配置(可能包含 widgetByJs/widgetByJsSetting/middlewares/render)
|
||
* @param {Object} [base62params={}] 分页/查询参数,仅作为依赖项触发重新计算
|
||
* @returns {DataListColumn[]} 处理后可直接传给 antd Table 的列配置
|
||
*/
|
||
declare function useColumnsRender(columns: DataListColumn[], base62params?: any): DataListColumn[];
|
||
/**
|
||
* 补全 antd Table 的 components 配置,确保 body.cell 默认使用可编辑单元格组件 DataListCellEditable
|
||
* @param {Object} [components={}] 原始 components 配置
|
||
* @returns {Object} 补全后的 components 配置
|
||
*/
|
||
declare function useCellEditableComponents(components?: any): any;
|
||
/**
|
||
* 生成一个按权限映射过滤某行数据可用行内操作按钮的函数
|
||
* @param {DataListOperation[]} [itemOperations=[]] 行内操作按钮配置
|
||
* @param {DataListItemOperationsAccess} [itemOperationsAccess=new Map] 操作 uuid 到有权限的数据主键列表的映射
|
||
* @param {string} [pk='id'] 主键字段名
|
||
* @param {string} [resource] 数据嵌套的资源字段名(主键从 data[resource][pk] 取值)
|
||
* @returns {(data: Record<string, unknown>) => DataListOperation[]} 传入一行数据,返回其可用操作按钮列表
|
||
*/
|
||
declare function useItemOperationsAccess(itemOperations?: DataListOperation[], itemOperationsAccess?: DataListItemOperationsAccess, pk?: string, resource?: string): (data: Record<string, unknown>) => DataListOperation[];
|
||
/**
|
||
* 判断是否需要渲染操作列:操作按钮需通过全局权限校验(auth.check),且(若配置了行级权限映射)当前数据中至少一行拥有权限
|
||
* @param {DataListOperation[]} [operations=[]] 操作按钮配置
|
||
* @param {DataListItemOperationsAccess} [itemOperationsAccess=new Map] 操作 uuid 到有权限的数据主键列表的映射
|
||
* @param {Record<string, unknown>[]} [dataSource=[]] 当前页数据
|
||
* @param {string} [pk='id'] 主键字段名
|
||
* @param {string} [resource] 数据嵌套的资源字段名
|
||
* @returns {boolean} 是否存在可展示的操作列
|
||
*/
|
||
declare function useHasOperationColumn(operations?: DataListOperation[], itemOperationsAccess?: DataListItemOperationsAccess, dataSource?: Record<string, unknown>[], pk?: string, resource?: string): boolean;
|
||
/**
|
||
* 生成行内/批量操作点击后的处理逻辑:isRefresh=1 触发整体刷新(onReload),isRefresh=2 仅拉取该行最新详情与权限并合并回 dataSource(局部刷新)
|
||
* @param {Object} props 列表状态,须包含 dataSource/itemOperationsAccess/onReload
|
||
* @param {string} listCode 列表标识
|
||
* @param {string} [primaryKey='id'] 主键字段名
|
||
* @param {string} [resource=null] 数据嵌套的资源字段名
|
||
* @returns {[Object, (isRefresh: number, item?: Object) => void]} 元组:可能已合并局部刷新结果的 props,以及操作点击回调
|
||
*/
|
||
declare function useOperationCallback(props: any, listCode: string, primaryKey?: string, resource?: string): [any, (isRefresh: number, item?: any) => void];
|
||
/**
|
||
* 组合式获取并管理列表数据(分页/tab/筛选条件/侧边栏/关键字等),供 DataListHelper 使用
|
||
* @param {string} listCode 列表标识
|
||
* @param {DataListQueryParams} base62params 初始查询参数
|
||
* @returns {DataListHelperState}
|
||
*/
|
||
declare function useDataListHelper(listCode: string, base62params: DataListQueryParams): DataListHelperState;
|
||
|
||
/**
|
||
* 数据列表根组件:根据 isItemGridLayout 选择宫格(DataListFramework)或表格(DataTableFramework)布局,
|
||
* 也可通过 theme 动态加载自定义主题组件替代默认布局;并通过 DataListContext 向下透传分页/筛选/选中等状态与操作方法
|
||
* @param {Object} props
|
||
* @param {boolean} [props.isItemGridLayout] 是否使用宫格布局(否则使用表格布局,theme 设置时忽略)
|
||
* @param {string} [props.theme] 自定义主题组件标识,设置后通过 core.getWidgetComponent 动态加载并替代默认布局
|
||
* @param {Object} [props.themeProps] 传给自定义主题组件的 $setting
|
||
* @param {DataListContextValue['onClickCallback']} [props.onClickCallback] 行内/批量操作点击后的回调
|
||
* @param {DataListContextValue['onReload']} [props.onReload] 刷新回调
|
||
* @param {string} [props.listCode] 列表标识
|
||
* @param {DataListQueryParams['total']} [props.total=0] 数据总条数
|
||
* @param {DataListQueryParams['page']} [props.page=0] 当前页码
|
||
* @param {DataListContextValue['onPageChange']} [props.onPageChange] 页码变更回调
|
||
* @param {DataListQueryParams['pageSize']} [props.pageSize=30] 每页条数
|
||
* @param {DataListContextValue['onPageSizeChange']} [props.onPageSizeChange] 每页条数变更回调
|
||
* @param {DataListQueryParams['tab']} [props.tab] 当前选中的 tab
|
||
* @param {DataListContextValue['onTabChange']} [props.onTabChange] tab 变更回调
|
||
* @param {DataListQueryParams['keyword']} [props.keyword] 关键字搜索值
|
||
* @param {DataListContextValue['onKeywordChange']} [props.onKeywordChange] 关键字变更回调
|
||
* @param {DataListQueryParams['condition']} [props.condition] 筛选条件
|
||
* @param {DataListContextValue['onConditionChange']} [props.onConditionChange] 筛选条件变更回调
|
||
* @param {DataListQueryParams['sider']} [props.sider] 侧边栏选中值
|
||
* @param {DataListContextValue['onSiderChange']} [props.onSiderChange] 侧边栏选中值变更回调
|
||
* @param {DataListLayouts|false} [props.layouts] 自定义子布局组件集合(sider/filter/footer/toolbar/empty),false 表示全部隐藏
|
||
* @param {DataListClassNames} [props.classNames={}] 各区块自定义 className
|
||
* @param {DataListQueryParams['payload']} [props.payload={}] 附加请求参数
|
||
* @param {Record<string, unknown>[]} [props.dataSource=[]] 列表数据
|
||
* @param {DataListRowSelection} [props.rowSelection] 行选择配置
|
||
* @param {() => Record<string, unknown>[]} [props.getSelectedRows] 获取已选中行的方法,未提供时默认返回 dataSource
|
||
* @param {string} [props.primaryKey] 主键字段名
|
||
*/
|
||
declare function DataList({ isItemGridLayout, theme, themeProps, onClickCallback, onReload, listCode, total, page, onPageChange, pageSize, onPageSizeChange, tab, onTabChange, keyword, onKeywordChange, condition, onConditionChange, sider, onSiderChange, layouts, classNames, payload, dataSource, rowSelection, getSelectedRows: getSelectedRowsProp, primaryKey, ...props }: {
|
||
isItemGridLayout?: boolean;
|
||
theme?: string;
|
||
themeProps?: any;
|
||
onClickCallback?: DataListContextValue["onClickCallback"];
|
||
onReload?: DataListContextValue["onReload"];
|
||
listCode?: string;
|
||
total?: DataListQueryParams["total"];
|
||
page?: DataListQueryParams["page"];
|
||
onPageChange?: DataListContextValue["onPageChange"];
|
||
pageSize?: DataListQueryParams["pageSize"];
|
||
onPageSizeChange?: DataListContextValue["onPageSizeChange"];
|
||
tab?: DataListQueryParams["tab"];
|
||
onTabChange?: DataListContextValue["onTabChange"];
|
||
keyword?: DataListQueryParams["keyword"];
|
||
onKeywordChange?: DataListContextValue["onKeywordChange"];
|
||
condition?: DataListQueryParams["condition"];
|
||
onConditionChange?: DataListContextValue["onConditionChange"];
|
||
sider?: DataListQueryParams["sider"];
|
||
onSiderChange?: DataListContextValue["onSiderChange"];
|
||
layouts?: DataListLayouts | false;
|
||
classNames?: DataListClassNames;
|
||
payload?: DataListQueryParams["payload"];
|
||
dataSource?: Record<string, unknown>[];
|
||
rowSelection?: DataListRowSelection;
|
||
getSelectedRows?: () => Record<string, unknown>[];
|
||
primaryKey?: string;
|
||
}): React.JSX.Element;
|
||
|
||
/**
|
||
* 列表筛选区:isConditionFormLayout 为 true 时拉取后台配置的条件表单结构并渲染 GridLayoutForm,否则渲染默认的关键字搜索框
|
||
* @param {Object} props
|
||
* @param {string} [props.className] 自定义 className
|
||
* @param {boolean} [props.isConditionFormLayout] 是否使用后台配置的条件表单布局
|
||
*/
|
||
declare function DataListFilter({ className, isConditionFormLayout }: {
|
||
className?: string;
|
||
isConditionFormLayout?: boolean;
|
||
}): React.JSX.Element;
|
||
declare namespace DataListFilter {
|
||
let reservedFields: {
|
||
x: number;
|
||
y: number;
|
||
h: number;
|
||
w: number;
|
||
field: {
|
||
isVirtual: boolean;
|
||
widgetPrefix: string;
|
||
widget: string;
|
||
code: string;
|
||
label: string;
|
||
placeholder: string;
|
||
extras: {
|
||
prefix: string;
|
||
};
|
||
};
|
||
}[];
|
||
}
|
||
|
||
/**
|
||
* 列表工具栏:展示标题、tab 面包屑导航以及刷新等操作按钮
|
||
* @param {Object} props
|
||
* @param {string} [props.className] 自定义 className
|
||
* @param {string} [props.title] 列表标题
|
||
* @param {DataListTab[]} [props.tabs] tab 配置列表
|
||
*/
|
||
declare function DataListToolbar({ className, title, tabs }: {
|
||
className?: string;
|
||
title?: string;
|
||
tabs?: DataListTab[];
|
||
}): React.JSX.Element;
|
||
|
||
/**
|
||
* 列表侧边栏:isTreeSider 为 true 时渲染目录树(当前 treeData 为占位示例数据)
|
||
* @param {Object} props
|
||
* @param {string} [props.className] 自定义 className
|
||
* @param {number} [props.width=280] 侧边栏宽度
|
||
* @param {boolean} [props.isTreeSider] 是否渲染树形侧边栏
|
||
*/
|
||
declare function DataListSider({ className, width, isTreeSider }: {
|
||
className?: string;
|
||
width?: number;
|
||
isTreeSider?: boolean;
|
||
}): React.JSX.Element;
|
||
|
||
/**
|
||
* 列表底部:渲染批量操作按钮与分页器;operations 为空且不分页时不渲染任何内容
|
||
* @param {Object} props
|
||
* @param {string} [props.className] 自定义 className
|
||
* @param {DataListOperation[]} [props.operations] 批量操作按钮配置
|
||
* @param {boolean} [props.isOperations] 是否展示批量操作按钮
|
||
* @param {boolean} [props.isPaginate] 是否展示分页器
|
||
*/
|
||
declare function DataListFooter({ className, operations, isOperations, isPaginate }: {
|
||
className?: string;
|
||
operations?: DataListOperation[];
|
||
isOperations?: boolean;
|
||
isPaginate?: boolean;
|
||
}): React.JSX.Element;
|
||
|
||
/**
|
||
* DataList 的开箱即用封装:根据 listCode 自动拉取结构与数据、管理分页/筛选/选中等状态,
|
||
* 并通过 ref 暴露 reload/emitOperation/getSelectedRows
|
||
* @param {Object} props
|
||
* @param {string} props.listCode 列表标识
|
||
* @param {DataListQueryParams} [props.base62params] 初始查询参数
|
||
* @param {string} [props.className] 自定义 className
|
||
* @param {string} [props.theme] 自定义主题组件标识,未传时使用结构配置中的 theme
|
||
* @param {Object} [props.themeProps] 传给主题组件的 $setting,会与结构配置中的 themeConfig 合并
|
||
* @param {DataListLayouts|false} [props.layouts] 自定义子布局组件集合
|
||
* @param {DataListClassNames} [props.classNames] 各区块自定义 className
|
||
* @param {DataListRowSelection} [props.rowSelection] 行选择配置(type/selectedRowKeys/defaultSelectedRowKeys/onChange 等)
|
||
* @param {(dataSource: Array, meta: Object) => void} [props.onDataSourceChange] dataSource 变更后的回调
|
||
*/
|
||
declare const DataListHelper: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
|
||
|
||
declare const _default: React.Context<{
|
||
listCode: string;
|
||
classNames: {};
|
||
getBase62params: (k: string, defaultValue: unknown) => void;
|
||
getSelectedRows: () => any[];
|
||
onReload: () => void;
|
||
onClickCallback: () => void;
|
||
onConditionChange: () => void;
|
||
onTabChange: () => void;
|
||
onSiderChange: () => void;
|
||
onKeywordChange: () => void;
|
||
onPageChange: () => void;
|
||
onPageSizeChange: () => void;
|
||
reload: () => void;
|
||
setPage: () => void;
|
||
setPageSize: () => void;
|
||
setTab: () => void;
|
||
setSider: () => void;
|
||
setKeyword: () => void;
|
||
setCondition: () => void;
|
||
}>;
|
||
|
||
/**
|
||
* 列表表格视图:在 antd Table 基础上支持列宽按容器自适应缩放、单元格可编辑、默认展开行等能力
|
||
* @param {Object} props
|
||
* @param {string} [props.className] 自定义 className
|
||
* @param {string} [props.primaryKey] 主键字段名
|
||
* @param {DataListColumn[]} [props.columns=[]] 列配置
|
||
* @param {Record<string, unknown>[]} [props.dataSource=[]] 表格数据
|
||
* @param {(record: Record<string, unknown>, index: number) => ReactNode} [props.operationRender] 操作列渲染函数,提供时会追加一列操作列
|
||
* @param {number} [props.operationWidth=180] 操作列宽度
|
||
* @param {Object} [props.components={}] antd Table 的 components 配置
|
||
* @param {DataListRowSelection} [props.rowSelection] 行选择配置
|
||
*/
|
||
declare function DataListTable({ className, primaryKey, columns, dataSource, operationRender, operationWidth, components, rowSelection, ...props }: {
|
||
className?: string;
|
||
primaryKey?: string;
|
||
columns?: DataListColumn[];
|
||
dataSource?: Record<string, unknown>[];
|
||
operationRender?: (record: Record<string, unknown>, index: number) => ReactNode;
|
||
operationWidth?: number;
|
||
components?: any;
|
||
rowSelection?: DataListRowSelection;
|
||
}): React.JSX.Element;
|
||
|
||
/**
|
||
* 列表宫格(卡片)视图:基于 GridLayout 渲染每条数据的卡片,并处理行选中状态
|
||
* @param {Object} props
|
||
* @param {number} [props.column=0] 每行列数
|
||
* @param {number} [props.colWidth=0] 列宽
|
||
* @param {number} [props.cols] GridLayout 栅格总列数
|
||
* @param {number} [props.rowHeight] 行高
|
||
* @param {[number, number]} [props.itemMargin] 卡片间距 [marginX, marginY]
|
||
* @param {*} [props.containerPadding] 容器内边距
|
||
* @param {GridLayoutItem[]} [props.fields] 卡片内字段/组件布局配置
|
||
* @param {string} [props.primaryKey] 主键字段名
|
||
* @param {Record<string, unknown>[]} [props.dataSource] 列表数据
|
||
* @param {(dataSource: Record<string, unknown>[]) => ReactNode} [props.beforeRender=null] 数据渲染前的额外内容
|
||
* @param {(dataSource: Record<string, unknown>[]) => ReactNode} [props.afterRender=null] 数据渲染后的额外内容
|
||
* @param {string} [props.itemClassName] 传给每张卡片(itemRender.children)的 className
|
||
* @param {(children: ReactNode, data: Record<string, unknown>, index: number) => ReactNode} [props.itemRender] 卡片渲染包装函数
|
||
* @param {*} [props.empty] 空数据时展示的内容
|
||
* @param {string} [props.className] 自定义 className
|
||
* @param {Object} [props.style={}] 容器行内样式
|
||
* @param {string} [props.theme] GridLayout 主题
|
||
* @param {Object} [props.themeProps={}] GridLayout 主题参数
|
||
* @param {GridLayoutGroup[]} [props.groups=[{ key: 'default', label: '默认' }]] 分组配置
|
||
* @param {DataListRowSelection} [props.rowSelection] 行选择配置(selectedRowKeys/onChange/type)
|
||
*/
|
||
declare function DataListContent({ column, colWidth, cols, rowHeight, itemMargin, containerPadding, fields, primaryKey, dataSource, beforeRender, afterRender, itemClassName, itemRender, empty, className, style, theme, themeProps, groups, rowSelection, }: {
|
||
column?: number;
|
||
colWidth?: number;
|
||
cols?: number;
|
||
rowHeight?: number;
|
||
itemMargin?: [number, number];
|
||
containerPadding?: any;
|
||
fields?: _[];
|
||
primaryKey?: string;
|
||
dataSource?: Record<string, unknown>[];
|
||
beforeRender?: (dataSource: Record<string, unknown>[]) => _;
|
||
afterRender?: (dataSource: Record<string, unknown>[]) => _;
|
||
itemClassName?: string;
|
||
itemRender?: (children: _, data: Record<string, unknown>, index: number) => _;
|
||
empty?: any;
|
||
className?: string;
|
||
style?: any;
|
||
theme?: string;
|
||
themeProps?: any;
|
||
groups?: _[];
|
||
rowSelection?: DataListRowSelection;
|
||
}): React.JSX.Element;
|
||
|
||
/**
|
||
* 宫格列表整体布局:组合侧边栏/筛选/工具栏/内容(卡片列表)/底部分页等子区块,并为每条数据包装行内操作按钮
|
||
* @param {Object} props
|
||
* @param {string} [props.listCode] 列表标识
|
||
* @param {string} [props.className] 自定义 className
|
||
* @param {DataListLayouts} [props.layouts={}] 子布局组件集合 { sider, filter, toolbar, footer, empty }
|
||
* @param {Record<string, unknown>[]} [props.dataSource] 列表数据
|
||
* @param {boolean} [props.isPaginate] 是否分页
|
||
* @param {boolean} [props.isItemOperations] 是否展示行内操作按钮
|
||
* @param {boolean} [props.isBatchOperations] 是否展示批量操作按钮
|
||
* @param {DataListOperation[]} [props.batchOperations] 批量操作按钮配置
|
||
* @param {DataListOperation[]} [props.itemOperations] 行内操作按钮配置
|
||
* @param {DataListItemOperationsAccess} [props.itemOperationsAccess] 行内操作权限映射
|
||
* @param {string} [props.resource] 数据嵌套的资源字段名
|
||
* @param {string} [props.primaryKey] 主键字段名
|
||
* @param {string} [props.title] 列表标题
|
||
* @param {DataListItemForGridLayout} [props.itemGridLayout] 卡片宫格布局配置,透传给 DataListContent
|
||
* @param {Object} [props.$setting] 主题设置,包含 column/colWidth/beforeRender/afterRender/style/itemMargin/containerPadding/isMarkSelected
|
||
* @param {DataListTab[]} [props.tabs] tab 配置
|
||
* @param {boolean} [props.isConditionFormLayout] 是否使用条件表单布局
|
||
* @param {boolean} [props.isTreeSider] 是否展示树形侧边栏
|
||
* @param {Object} [props.treeSiderConfig] 树形侧边栏配置
|
||
* @param {DataListRowSelection} [props.rowSelection] 行选择配置
|
||
*/
|
||
declare function DataListFramework({ listCode, className, layouts, dataSource, isPaginate, isItemOperations, isBatchOperations, batchOperations, itemOperations, itemOperationsAccess, resource, primaryKey, title, itemGridLayout, $setting, tabs, isConditionFormLayout, isTreeSider, treeSiderConfig, rowSelection, }: {
|
||
listCode?: string;
|
||
className?: string;
|
||
layouts?: DataListLayouts;
|
||
dataSource?: Record<string, unknown>[];
|
||
isPaginate?: boolean;
|
||
isItemOperations?: boolean;
|
||
isBatchOperations?: boolean;
|
||
batchOperations?: DataListOperation[];
|
||
itemOperations?: DataListOperation[];
|
||
itemOperationsAccess?: DataListItemOperationsAccess;
|
||
resource?: string;
|
||
primaryKey?: string;
|
||
title?: string;
|
||
itemGridLayout?: DataListItemForGridLayout;
|
||
$setting?: any;
|
||
tabs?: DataListTab[];
|
||
isConditionFormLayout?: boolean;
|
||
isTreeSider?: boolean;
|
||
treeSiderConfig?: any;
|
||
rowSelection?: DataListRowSelection;
|
||
}): React.JSX.Element;
|
||
|
||
/**
|
||
* 表格列表整体布局:组合侧边栏/筛选/工具栏/表格(DataListTable)/底部分页等子区块,并按权限计算操作列
|
||
* @param {Object} props
|
||
* @param {string} [props.listCode] 列表标识
|
||
* @param {string} [props.className] 自定义 className
|
||
* @param {DataListLayouts} [props.layouts={}] 子布局组件集合 { sider, filter, toolbar, footer }
|
||
* @param {Record<string, unknown>[]} [props.dataSource] 表格数据
|
||
* @param {DataListColumn[]} [props.columns] 表格列配置
|
||
* @param {boolean} [props.isItemOperations] 是否展示行内操作按钮(结合权限计算实际是否展示操作列)
|
||
* @param {boolean} [props.isBatchOperations] 是否展示批量操作按钮
|
||
* @param {DataListOperation[]} [props.batchOperations] 批量操作按钮配置
|
||
* @param {DataListOperation[]} [props.itemOperations] 行内操作按钮配置
|
||
* @param {DataListItemOperationsAccess} [props.itemOperationsAccess] 行内操作权限映射
|
||
* @param {string} [props.resource] 数据嵌套的资源字段名
|
||
* @param {string} [props.primaryKey] 主键字段名
|
||
* @param {string} [props.title] 列表标题
|
||
* @param {DataListTab[]} [props.tabs] tab 配置
|
||
* @param {boolean} [props.isPaginate] 是否分页
|
||
* @param {DataListRowSelection} [props.rowSelection] 行选择配置
|
||
* @param {boolean} [props.isTreeSider] 是否展示树形侧边栏
|
||
* @param {Object} [props.treeSiderConfig] 树形侧边栏配置
|
||
* @param {boolean} [props.isConditionFormLayout] 是否使用条件表单布局
|
||
*/
|
||
declare function DataTableFramework({ listCode, className, layouts, dataSource, columns, isItemOperations, isBatchOperations, batchOperations, itemOperations, itemOperationsAccess, resource, primaryKey, title, tabs, isPaginate, rowSelection, isTreeSider, treeSiderConfig, isConditionFormLayout, ...props }: {
|
||
listCode?: string;
|
||
className?: string;
|
||
layouts?: DataListLayouts;
|
||
dataSource?: Record<string, unknown>[];
|
||
columns?: DataListColumn[];
|
||
isItemOperations?: boolean;
|
||
isBatchOperations?: boolean;
|
||
batchOperations?: DataListOperation[];
|
||
itemOperations?: DataListOperation[];
|
||
itemOperationsAccess?: DataListItemOperationsAccess;
|
||
resource?: string;
|
||
primaryKey?: string;
|
||
title?: string;
|
||
tabs?: DataListTab[];
|
||
isPaginate?: boolean;
|
||
rowSelection?: DataListRowSelection;
|
||
isTreeSider?: boolean;
|
||
treeSiderConfig?: any;
|
||
isConditionFormLayout?: boolean;
|
||
}): React.JSX.Element;
|
||
|
||
export { DataListContent, _default as DataListContext, DataListFilter, DataListFooter, DataListFramework, DataListHelper, DataListSider, DataListTable, DataListToolbar, DataTableFramework, DataList as default, useCellEditableComponents, useColumnsRender, useDataListHelper, useHasOperationColumn, useItemOperationsAccess, useOperationCallback };
|
||
export type { DataListAPI, DataListClassNames, DataListColumn, DataListContextValue, DataListHelperRef, DataListHelperState, DataListItemForGridLayout, DataListItemOperationsAccess, DataListLayouts, DataListOperation, DataListQueryParams, DataListRowSelection, DataListStructure, DataListTab };
|