react-antd-iui

react-antd常用二次封装组件

在线文档

组件功能

表格组件功能

1. [x] 标准Antd表格, 统一配置 options , 样式
2. [x] 简单表格, 只展示表格数据, 适用于展示一些不用请求网络的静态表格
3. [x] 自动和手动请求请求表格接口数据
4. [x] 内置可选搜索栏表单配置(内置表单目前仅支持input和select), 支持表单校验, 表格与搜索栏之间的插槽
5. [x] 内置可选编辑单元格和编辑行(内置表单目前仅支持input), 支持表单校验
6. [x] 内置可选单元格自定义显示Tooltip
7. [x] 内置可选表格是否第一列显示序号, 默认显示
8. [x] ConfigProvider 全局配置
9. [ ] 内置表单增加多个常用表单类型
10. [ ] 编辑行增加modal, 增加查看行modal
11. [ ] 合并所有表单配置为一个配置

扩展的属性和方法

ITable

参数	说明	类型	默认值
getTableDataApi	请求数据的Api	string	-
getTableData	请求数据的方法, 注意和 getTableDataApi 不能同时使用	(args: RequestHandlerArgs) => Promise<Record<string, any>>	-
requestParamsHandler	在请求之前额外处理请求参数	( searchParams, formData ) : { searchParams, formData }	-
initPaginationConfig	初始化分页数据	PaginationConfigType	-
initParams	初始化表单数据	InitParamsType	-
blockAutoRequestFlag	true: 阻止初始内置自动请求, auto : initParams 数据更新后自动请求	boolean / 'auto'	false
simpleTableFlag	简单表格, 只展示表格数据, 适用于展示一些不用请求网络的静态表格	boolean	false
useAntdTableOptions	useAntdTable 的配置参数	UseAntdTableOptionsType	-
showSearchBar	是否使用搜索栏	boolean	true
useTableForm	使用搜索栏的表单配置参数	UseTableFormType	-
editableConfig	编辑表格的配置参数	EditableConfigType	-
editableConfig.editRowFlag	true : 编辑行, false : 编辑单元格	boolean	false
editableConfig.onChange	配置了的话保存优先使用	(args: EditArgumentsType) => void	-
iTableRequestFields	表格请求字段名	ITableRequestFieldsType	{ current: 'page', pageSize: 'limit', total: 'total', records: 'list', data: 'data' }
serialNumber	是否在最左边显示序列号, 从多少开始, 默认从1开始	boolean / number	1
children	表格与搜索栏之间的插槽	React.ReactNode	-
filterRequestValue	过滤请求参数值	true / ((key: string, value: any) => any)	undefined和""
requestOptions	传入getTableDataApi时使用的自定义请求options	(args: { params: Record<string, any> }) => Partial<UseRequestOptionsType>	-
responseDataHandler	回调方法处理请求返回的数据	<TData, TRes>(data: TData, res: TRes) => TData	-
disabled	禁用内置的表单和按钮	boolean	-

columns

参数	说明	类型	默认值
editable	当前单元格是否可以编辑	EditableType	-
tooltip	当前单元格是否可以自定义显示Tooltip	boolean或TooltipProps	-
formProps	编辑行/单元格表单Form配置props	FormProps	-
formItemProps	编辑行/单元格表单Item配置props	FormItemProps	-
sortConfig	排序配置	SortConfigType	-
sortConfig.sortFieldsName	排序请求字段	[string, string]	[order, orderField]
sortConfig.orderFieldName	排序字段的名称	'lowerLine' / 'smallHump' / ((str: string) => string)	dataIndex

useTableForm

参数	说明	类型	默认值
formProps	表单 Form 的 props	FormProps	-
formItemOptions	表单 Form.Item 配置	IFormItemType[]	-
formItemAppendNodes	按钮组, 追加到表单按钮后面	React.ReactNode	-
formItemRowNodes	表单追加一行元素	React.ReactNode	-
showSearch	是否显示查询按钮	boolean	true
searchText	查询文本	string	查询
searchProps	查询按钮props	ButtonProps	-
showReset	是否显示查询按钮	boolean	true
resetText	是否显示查询按钮	string	重置
resetProps	重置按钮props	ButtonProps	-

IFormItemType

参数	说明	类型	默认值
name	表单 name	string	-
formItemProps	表单 Form.Item 的 props	FormItemProps	-
itemName	表单元素名称	string	-
itemProps	表单元素的 props	any	-
optionProps	表单元素 option 的 props	any	-
itemNode	表单元素, 如传了优先使用	React.ReactNode	-

ConfigProvider 全局配置

参数	说明	类型	默认值
isUseHttp	是否使用 use-http 请求, 否则使用 fetch	boolean	true
iTableRequestFields	表格请求字段名	ITableRequestFieldsType	{ current: 'page', pageSize: 'limit', total: 'total', records: 'list', data: 'data' }
antdContextOptions	antd表格全局配置项, 注意上下文顺序	AntdConfigProviderProps	-
responseHandler	useRequest请求响应后的操作	ResponseHandlerType	-

使用示例

// 手动请求数据
itableRef.current?.run(...params)

// 刷新
itableRef.current?.refresh()

// 自动请求数据
let initParams = {}
setTimeout(() => {
  initParams = { name: 'jack' }
}, 500)
< ITable
initParams = { initParams }
/>

// 简单表格
<ITable
  columns={columns}
  dataSource={dataSource}
  simpleTableFlag
  blockAutoRequestFlag
  // 简单表格, 必须传getTableData或者getTableDataApi, 值随便传, 不会使用到
  getTableData={(pagination, formData) => {
    // eslint-disable-next-line no-console
    console.log('pagination, formData', pagination, formData)
    return Promise.resolve({ total: 1, list: [] })
  }}
/>

// 如果外层样式TableStyled是styled(Table), 使用as="div"
<TableStyled as="div">
  <ITable />
</TableStyled>

默认配置文件config.ts

参数	说明	类型	默认值
defaultPaginationConfig	基础分页配置	PaginationConfigType	{current: 1,pageSize: 10,total: 0,pageSizeOptions: [10, 20, 50, 100]}
defaultTableConfig	默认antd表格配置	TableProps<RecordType>	{rowKey: 'id', scroll: { x: '100%' }, tableLayout: 'fixed' }

IInput

组件功能

1. [x] 内置 useRemoveInputSpaces 支持失去焦点和回车去除内容首尾空格
2. [x] 支持 IInput.ITextArea IInput.ISearch IInput.IPassword

参数	说明	类型	默认值
regex	替换正则	RegExp / false	/(^\s*)/(\s*$)/g
formName	form表单name	string	Input.id
pressEnterFlag	回车是否去除空格	boolean	true

hooks

useRequest

网络请求，使用参考 Fetch 和 use-http 文档, 支持全局和使用时处理响应结果 全局上下文配置 isUseHttp = true 使用 use-http 请求， 否则使用 Fetch

参数	说明	类型	默认值
api	请求地址	string	-
options	fetch options 增加了 params, 修改body为对象	RequestInit & IRequestProps	-
responseHandler	响应后的操作	ResponseHandlerType	-
responseHandler.responseDataHandler	成功后处理数据方法	(args?: Record<string, any>) => Promise<any>	-
responseHandler.responseSuccessText	请求成功提示语	string	请求成功
responseHandler.responseErrorText	请求失败提示语	string	请求失败
返回 run	开始请求方法	(args: RequestHandlerArgs) => Promise<any>	-
返回 use-http的所有返回对象	use-http的所有返回对象, Fetch返回 run 和 loading	object	-

useITableInstance

获取 ITable 实例, 返回 ITableInstance

useRemoveInputSpaces

去除 input 内容首尾空格, 支持失去焦点和回车 Antd Form 直接使用, 未在 Form 里的 Input 通过 onChange 处理

参数	说明	类型	默认值
regex	替换正则	RegExp / false	/(^\s*)/(\s*$)/g
formName	form表单name	string	Input.id
pressEnterFlag	回车是否去除空格	boolean	true

LICENSE

MIT