v0.7.14
This commit is contained in:
Vendored
+303
-175
@@ -1,51 +1,259 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
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 {Array<Object>} columns 原始列配置(可能包含 widgetByJs/widgetByJsSetting/middlewares/render)
|
||||
* @param {DataListColumn[]} columns 原始列配置(可能包含 widgetByJs/widgetByJsSetting/middlewares/render)
|
||||
* @param {Object} [base62params={}] 分页/查询参数,仅作为依赖项触发重新计算
|
||||
* @returns {Array<Object>} 处理后可直接传给 antd Table 的列配置
|
||||
* @returns {DataListColumn[]} 处理后可直接传给 antd Table 的列配置
|
||||
*/
|
||||
declare function useColumnsRender(columns: Array<any>, base62params?: any): Array<any>;
|
||||
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;
|
||||
/**
|
||||
* 根据 listCode 拉取列表结构配置(字段/列/分页/布局等元数据)
|
||||
* @param {string} listCode 列表标识
|
||||
* @returns {Object} 列表结构配置,请求完成前为空对象
|
||||
*/
|
||||
declare function useStructure(listCode: string): any;
|
||||
/**
|
||||
* 根据 listCode 及查询参数拉取列表数据
|
||||
* @param {string} listCode 列表标识
|
||||
* @param {Object} [base62params={}] 查询参数,会与 page:1 合并后进行 base62 编码请求
|
||||
* @returns {Object} 接口返回的数据,包含 dataSource 等字段;请求完成前为 { dataSource: [] }
|
||||
*/
|
||||
declare function useDataSource(listCode: string, base62params?: any): any;
|
||||
/**
|
||||
* 生成一个按权限映射过滤某行数据可用行内操作按钮的函数
|
||||
* @param {Array<Object>} [itemOperations=[]] 行内操作按钮配置
|
||||
* @param {Map<string, Array>} [itemOperationsAccess=new Map] 操作 uuid 到有权限的数据主键列表的映射
|
||||
* @param {DataListOperation[]} [itemOperations=[]] 行内操作按钮配置
|
||||
* @param {DataListItemOperationsAccess} [itemOperationsAccess=new Map] 操作 uuid 到有权限的数据主键列表的映射
|
||||
* @param {string} [pk='id'] 主键字段名
|
||||
* @param {string} [resource] 数据嵌套的资源字段名(主键从 data[resource][pk] 取值)
|
||||
* @returns {(data: Object) => Array<Object>} 传入一行数据,返回其可用操作按钮列表
|
||||
* @returns {(data: Record<string, unknown>) => DataListOperation[]} 传入一行数据,返回其可用操作按钮列表
|
||||
*/
|
||||
declare function useItemOperationsAccess(itemOperations?: Array<any>, itemOperationsAccess?: Map<string, any[]>, pk?: string, resource?: string): (data: any) => Array<any>;
|
||||
declare function useItemOperationsAccess(itemOperations?: DataListOperation[], itemOperationsAccess?: DataListItemOperationsAccess, pk?: string, resource?: string): (data: Record<string, unknown>) => DataListOperation[];
|
||||
/**
|
||||
* 判断是否需要渲染操作列:操作按钮需通过全局权限校验(auth.check),且(若配置了行级权限映射)当前数据中至少一行拥有权限
|
||||
* @param {Array<Object>} [operations=[]] 操作按钮配置
|
||||
* @param {Map<string, Array>} [itemOperationsAccess=new Map] 操作 uuid 到有权限的数据主键列表的映射
|
||||
* @param {Array<Object>} [dataSource=[]] 当前页数据
|
||||
* @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?: Array<any>, itemOperationsAccess?: Map<string, any[]>, dataSource?: Array<any>, pk?: string, resource?: string): 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
|
||||
@@ -58,91 +266,10 @@ declare function useOperationCallback(props: any, listCode: string, primaryKey?:
|
||||
/**
|
||||
* 组合式获取并管理列表数据(分页/tab/筛选条件/侧边栏/关键字等),供 DataListHelper 使用
|
||||
* @param {string} listCode 列表标识
|
||||
* @param {Object} base62params 初始查询参数
|
||||
* @returns {Object} 列表状态与操作方法(dataSource/tab/page/pageSize/condition/sider/keyword/total/itemOperationsAccess/onXxxChange/onReload/payload 等)
|
||||
* @param {DataListQueryParams} base62params 初始查询参数
|
||||
* @returns {DataListHelperState}
|
||||
*/
|
||||
declare function useDataListHelper(listCode: string, base62params: any): any;
|
||||
|
||||
/**
|
||||
* 数据列表根组件:根据 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 {Function} [props.onClickCallback] 行内/批量操作点击后的回调
|
||||
* @param {Function} [props.onReload] 刷新回调
|
||||
* @param {string} [props.listCode] 列表标识
|
||||
* @param {number} [props.total=0] 数据总条数
|
||||
* @param {number} [props.page=0] 当前页码
|
||||
* @param {Function} [props.onPageChange] 页码变更回调
|
||||
* @param {number} [props.pageSize=30] 每页条数
|
||||
* @param {Function} [props.onPageSizeChange] 每页条数变更回调
|
||||
* @param {*} [props.tab] 当前选中的 tab
|
||||
* @param {Function} [props.onTabChange] tab 变更回调
|
||||
* @param {string} [props.keyword] 关键字搜索值
|
||||
* @param {Function} [props.onKeywordChange] 关键字变更回调
|
||||
* @param {Object} [props.condition] 筛选条件
|
||||
* @param {Function} [props.onConditionChange] 筛选条件变更回调
|
||||
* @param {*} [props.sider] 侧边栏选中值
|
||||
* @param {Function} [props.onSiderChange] 侧边栏选中值变更回调
|
||||
* @param {boolean|Object} [props.layouts] 自定义子布局组件集合(sider/filter/footer/toolbar/empty),false 表示全部隐藏
|
||||
* @param {Object} [props.classNames={}] 各区块自定义 className
|
||||
* @param {Object} [props.payload={}] 附加请求参数
|
||||
* @param {Array} [props.dataSource=[]] 列表数据
|
||||
* @param {Object} [props.rowSelection] 行选择配置
|
||||
* @param {Function} [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?: Function;
|
||||
onReload?: Function;
|
||||
listCode?: string;
|
||||
total?: number;
|
||||
page?: number;
|
||||
onPageChange?: Function;
|
||||
pageSize?: number;
|
||||
onPageSizeChange?: Function;
|
||||
tab?: any;
|
||||
onTabChange?: Function;
|
||||
keyword?: string;
|
||||
onKeywordChange?: Function;
|
||||
condition?: any;
|
||||
onConditionChange?: Function;
|
||||
sider?: any;
|
||||
onSiderChange?: Function;
|
||||
layouts?: boolean | any;
|
||||
classNames?: any;
|
||||
payload?: any;
|
||||
dataSource?: any[];
|
||||
rowSelection?: any;
|
||||
getSelectedRows?: Function;
|
||||
primaryKey?: string;
|
||||
}): React.JSX.Element;
|
||||
declare namespace DataList {
|
||||
namespace propTypes {
|
||||
let classNames: PropTypes.Requireable<Required<PropTypes.InferProps<{
|
||||
sider: PropTypes.Requireable<string>;
|
||||
filter: PropTypes.Requireable<string>;
|
||||
footer: PropTypes.Requireable<string>;
|
||||
toolbar: PropTypes.Requireable<string>;
|
||||
container: PropTypes.Requireable<string>;
|
||||
content: PropTypes.Requireable<string>;
|
||||
item: PropTypes.Requireable<string>;
|
||||
empty: PropTypes.Requireable<string>;
|
||||
}>>>;
|
||||
let layouts: PropTypes.Requireable<NonNullable<boolean | Required<PropTypes.InferProps<{
|
||||
sider: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | PropTypes.ReactComponentLike>>;
|
||||
filter: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | PropTypes.ReactComponentLike>>;
|
||||
footer: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | PropTypes.ReactComponentLike>>;
|
||||
toolbar: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | PropTypes.ReactComponentLike>>;
|
||||
empty: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | PropTypes.ReactComponentLike>>;
|
||||
}>>>>;
|
||||
}
|
||||
}
|
||||
declare function useDataListHelper(listCode: string, base62params: DataListQueryParams): DataListHelperState;
|
||||
|
||||
/**
|
||||
* 列表筛选区:isConditionFormLayout 为 true 时拉取后台配置的条件表单结构并渲染 GridLayoutForm,否则渲染默认的关键字搜索框
|
||||
@@ -179,12 +306,12 @@ declare namespace DataListFilter {
|
||||
* @param {Object} props
|
||||
* @param {string} [props.className] 自定义 className
|
||||
* @param {string} [props.title] 列表标题
|
||||
* @param {Array<Object>} [props.tabs] tab 配置列表
|
||||
* @param {DataListTab[]} [props.tabs] tab 配置列表
|
||||
*/
|
||||
declare function DataListToolbar({ className, title, tabs }: {
|
||||
className?: string;
|
||||
title?: string;
|
||||
tabs?: Array<any>;
|
||||
tabs?: DataListTab[];
|
||||
}): React.JSX.Element;
|
||||
|
||||
/**
|
||||
@@ -204,29 +331,29 @@ declare function DataListSider({ className, width, isTreeSider }: {
|
||||
* 列表底部:渲染批量操作按钮与分页器;operations 为空且不分页时不渲染任何内容
|
||||
* @param {Object} props
|
||||
* @param {string} [props.className] 自定义 className
|
||||
* @param {Array<Object>} [props.operations] 批量操作按钮配置
|
||||
* @param {DataListOperation[]} [props.operations] 批量操作按钮配置
|
||||
* @param {boolean} [props.isOperations] 是否展示批量操作按钮
|
||||
* @param {boolean} [props.isPaginate] 是否展示分页器
|
||||
*/
|
||||
declare function DataListFooter({ className, operations, isOperations, isPaginate }: {
|
||||
className?: string;
|
||||
operations?: Array<any>;
|
||||
operations?: DataListOperation[];
|
||||
isOperations?: boolean;
|
||||
isPaginate?: boolean;
|
||||
}): React.JSX.Element;
|
||||
|
||||
/**
|
||||
* DataList 的开箱即用封装:根据 listCode 自动拉取结构与数据、管理分页/筛选/选中等状态,
|
||||
* 并通过 ref 暴露 onReload/onClickCallback/getSelectedRows
|
||||
* 并通过 ref 暴露 reload/emitOperation/getSelectedRows
|
||||
* @param {Object} props
|
||||
* @param {string} props.listCode 列表标识
|
||||
* @param {Object} [props.base62params] 初始查询参数
|
||||
* @param {DataListQueryParams} [props.base62params] 初始查询参数
|
||||
* @param {string} [props.className] 自定义 className
|
||||
* @param {string} [props.theme] 自定义主题组件标识,未传时使用结构配置中的 theme
|
||||
* @param {Object} [props.themeProps] 传给主题组件的 $setting,会与结构配置中的 themeConfig 合并
|
||||
* @param {boolean|Object} [props.layouts] 自定义子布局组件集合
|
||||
* @param {Object} [props.classNames] 各区块自定义 className
|
||||
* @param {Object} [props.rowSelection] 行选择配置(type/selectedRowKeys/defaultSelectedRowKeys/onChange 等)
|
||||
* @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>>;
|
||||
@@ -234,7 +361,7 @@ declare const DataListHelper: React.ForwardRefExoticComponent<React.RefAttribute
|
||||
declare const _default: React.Context<{
|
||||
listCode: string;
|
||||
classNames: {};
|
||||
getBase62params: (k: any, defaultValue: any) => void;
|
||||
getBase62params: (k: string, defaultValue: unknown) => void;
|
||||
getSelectedRows: () => any[];
|
||||
onReload: () => void;
|
||||
onClickCallback: () => void;
|
||||
@@ -258,22 +385,22 @@ declare const _default: React.Context<{
|
||||
* @param {Object} props
|
||||
* @param {string} [props.className] 自定义 className
|
||||
* @param {string} [props.primaryKey] 主键字段名
|
||||
* @param {Array<Object>} [props.columns=[]] 列配置
|
||||
* @param {Array<Object>} [props.dataSource=[]] 表格数据
|
||||
* @param {(record: Object, index: number) => *} [props.operationRender] 操作列渲染函数,提供时会追加一列操作列
|
||||
* @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 {Object} [props.rowSelection] 行选择配置
|
||||
* @param {DataListRowSelection} [props.rowSelection] 行选择配置
|
||||
*/
|
||||
declare function DataListTable({ className, primaryKey, columns, dataSource, operationRender, operationWidth, components, rowSelection, ...props }: {
|
||||
className?: string;
|
||||
primaryKey?: string;
|
||||
columns?: Array<any>;
|
||||
dataSource?: Array<any>;
|
||||
operationRender?: (record: any, index: number) => any;
|
||||
columns?: DataListColumn[];
|
||||
dataSource?: Record<string, unknown>[];
|
||||
operationRender?: (record: Record<string, unknown>, index: number) => ReactNode;
|
||||
operationWidth?: number;
|
||||
components?: any;
|
||||
rowSelection?: any;
|
||||
rowSelection?: DataListRowSelection;
|
||||
}): React.JSX.Element;
|
||||
|
||||
/**
|
||||
@@ -285,20 +412,20 @@ declare function DataListTable({ className, primaryKey, columns, dataSource, ope
|
||||
* @param {number} [props.rowHeight] 行高
|
||||
* @param {[number, number]} [props.itemMargin] 卡片间距 [marginX, marginY]
|
||||
* @param {*} [props.containerPadding] 容器内边距
|
||||
* @param {Array<Object>} [props.fields] 卡片内字段/组件布局配置
|
||||
* @param {GridLayoutItem[]} [props.fields] 卡片内字段/组件布局配置
|
||||
* @param {string} [props.primaryKey] 主键字段名
|
||||
* @param {Array<Object>} [props.dataSource] 列表数据
|
||||
* @param {(dataSource: Array) => *} [props.beforeRender=null] 数据渲染前的额外内容
|
||||
* @param {(dataSource: Array) => *} [props.afterRender=null] 数据渲染后的额外内容
|
||||
* @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: *, data: Object, index: number) => *} [props.itemRender] 卡片渲染包装函数
|
||||
* @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 {Array<Object>} [props.groups=[{ key: 'default', label: '默认' }]] 分组配置
|
||||
* @param {Object} [props.rowSelection] 行选择配置(selectedRowKeys/onChange/type)
|
||||
* @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;
|
||||
@@ -307,20 +434,20 @@ declare function DataListContent({ column, colWidth, cols, rowHeight, itemMargin
|
||||
rowHeight?: number;
|
||||
itemMargin?: [number, number];
|
||||
containerPadding?: any;
|
||||
fields?: Array<any>;
|
||||
fields?: _[];
|
||||
primaryKey?: string;
|
||||
dataSource?: Array<any>;
|
||||
beforeRender?: (dataSource: any[]) => any;
|
||||
afterRender?: (dataSource: any[]) => any;
|
||||
dataSource?: Record<string, unknown>[];
|
||||
beforeRender?: (dataSource: Record<string, unknown>[]) => _;
|
||||
afterRender?: (dataSource: Record<string, unknown>[]) => _;
|
||||
itemClassName?: string;
|
||||
itemRender?: (children: any, data: any, index: number) => any;
|
||||
itemRender?: (children: _, data: Record<string, unknown>, index: number) => _;
|
||||
empty?: any;
|
||||
className?: string;
|
||||
style?: any;
|
||||
theme?: string;
|
||||
themeProps?: any;
|
||||
groups?: Array<any>;
|
||||
rowSelection?: any;
|
||||
groups?: _[];
|
||||
rowSelection?: DataListRowSelection;
|
||||
}): React.JSX.Element;
|
||||
|
||||
/**
|
||||
@@ -328,46 +455,46 @@ declare function DataListContent({ column, colWidth, cols, rowHeight, itemMargin
|
||||
* @param {Object} props
|
||||
* @param {string} [props.listCode] 列表标识
|
||||
* @param {string} [props.className] 自定义 className
|
||||
* @param {Object} [props.layouts={}] 子布局组件集合 { sider, filter, toolbar, footer, empty }
|
||||
* @param {Array<Object>} [props.dataSource] 列表数据
|
||||
* @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 {Array<Object>} [props.batchOperations] 批量操作按钮配置
|
||||
* @param {Array<Object>} [props.itemOperations] 行内操作按钮配置
|
||||
* @param {Map<string, Array>} [props.itemOperationsAccess] 行内操作权限映射
|
||||
* @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 {Object} [props.itemGridLayout] 卡片宫格布局配置,透传给 DataListContent
|
||||
* @param {DataListItemForGridLayout} [props.itemGridLayout] 卡片宫格布局配置,透传给 DataListContent
|
||||
* @param {Object} [props.$setting] 主题设置,包含 column/colWidth/beforeRender/afterRender/style/itemMargin/containerPadding/isMarkSelected
|
||||
* @param {Array<Object>} [props.tabs] tab 配置
|
||||
* @param {DataListTab[]} [props.tabs] tab 配置
|
||||
* @param {boolean} [props.isConditionFormLayout] 是否使用条件表单布局
|
||||
* @param {boolean} [props.isTreeSider] 是否展示树形侧边栏
|
||||
* @param {Object} [props.treeSiderConfig] 树形侧边栏配置
|
||||
* @param {Object} [props.rowSelection] 行选择配置
|
||||
* @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?: any;
|
||||
dataSource?: Array<any>;
|
||||
layouts?: DataListLayouts;
|
||||
dataSource?: Record<string, unknown>[];
|
||||
isPaginate?: boolean;
|
||||
isItemOperations?: boolean;
|
||||
isBatchOperations?: boolean;
|
||||
batchOperations?: Array<any>;
|
||||
itemOperations?: Array<any>;
|
||||
itemOperationsAccess?: Map<string, any[]>;
|
||||
batchOperations?: DataListOperation[];
|
||||
itemOperations?: DataListOperation[];
|
||||
itemOperationsAccess?: DataListItemOperationsAccess;
|
||||
resource?: string;
|
||||
primaryKey?: string;
|
||||
title?: string;
|
||||
itemGridLayout?: any;
|
||||
itemGridLayout?: DataListItemForGridLayout;
|
||||
$setting?: any;
|
||||
tabs?: Array<any>;
|
||||
tabs?: DataListTab[];
|
||||
isConditionFormLayout?: boolean;
|
||||
isTreeSider?: boolean;
|
||||
treeSiderConfig?: any;
|
||||
rowSelection?: any;
|
||||
rowSelection?: DataListRowSelection;
|
||||
}): React.JSX.Element;
|
||||
|
||||
/**
|
||||
@@ -375,20 +502,20 @@ declare function DataListFramework({ listCode, className, layouts, dataSource, i
|
||||
* @param {Object} props
|
||||
* @param {string} [props.listCode] 列表标识
|
||||
* @param {string} [props.className] 自定义 className
|
||||
* @param {Object} [props.layouts={}] 子布局组件集合 { sider, filter, toolbar, footer }
|
||||
* @param {Array<Object>} [props.dataSource] 表格数据
|
||||
* @param {Array<Object>} [props.columns] 表格列配置
|
||||
* @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 {Array<Object>} [props.batchOperations] 批量操作按钮配置
|
||||
* @param {Array<Object>} [props.itemOperations] 行内操作按钮配置
|
||||
* @param {Map<string, Array>} [props.itemOperationsAccess] 行内操作权限映射
|
||||
* @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 {Array<Object>} [props.tabs] tab 配置
|
||||
* @param {DataListTab[]} [props.tabs] tab 配置
|
||||
* @param {boolean} [props.isPaginate] 是否分页
|
||||
* @param {Object} [props.rowSelection] 行选择配置
|
||||
* @param {DataListRowSelection} [props.rowSelection] 行选择配置
|
||||
* @param {boolean} [props.isTreeSider] 是否展示树形侧边栏
|
||||
* @param {Object} [props.treeSiderConfig] 树形侧边栏配置
|
||||
* @param {boolean} [props.isConditionFormLayout] 是否使用条件表单布局
|
||||
@@ -396,23 +523,24 @@ declare function DataListFramework({ listCode, className, layouts, dataSource, i
|
||||
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?: any;
|
||||
dataSource?: Array<any>;
|
||||
columns?: Array<any>;
|
||||
layouts?: DataListLayouts;
|
||||
dataSource?: Record<string, unknown>[];
|
||||
columns?: DataListColumn[];
|
||||
isItemOperations?: boolean;
|
||||
isBatchOperations?: boolean;
|
||||
batchOperations?: Array<any>;
|
||||
itemOperations?: Array<any>;
|
||||
itemOperationsAccess?: Map<string, any[]>;
|
||||
batchOperations?: DataListOperation[];
|
||||
itemOperations?: DataListOperation[];
|
||||
itemOperationsAccess?: DataListItemOperationsAccess;
|
||||
resource?: string;
|
||||
primaryKey?: string;
|
||||
title?: string;
|
||||
tabs?: Array<any>;
|
||||
tabs?: DataListTab[];
|
||||
isPaginate?: boolean;
|
||||
rowSelection?: any;
|
||||
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, useDataSource, useHasOperationColumn, useItemOperationsAccess, useOperationCallback, useStructure };
|
||||
export { DataListContent, _default as DataListContext, DataListFilter, DataListFooter, DataListFramework, DataListHelper, DataListSider, DataListTable, DataListToolbar, DataTableFramework, useCellEditableComponents, useColumnsRender, useDataListHelper, useHasOperationColumn, useItemOperationsAccess, useOperationCallback };
|
||||
export type { DataListAPI, DataListClassNames, DataListColumn, DataListContextValue, DataListHelperRef, DataListHelperState, DataListItemForGridLayout, DataListItemOperationsAccess, DataListLayouts, DataListOperation, DataListQueryParams, DataListRowSelection, DataListStructure, DataListTab };
|
||||
|
||||
Reference in New Issue
Block a user