123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- import React, { useRef } from 'react';
- import ProTable, { ActionType } from '@ant-design/pro-table';
- import { request } from 'umi';
- export interface DataTable {
- toolBarRender?: object; // 表格操作栏
- url?: boolean; // 表格请求地址
- columns?: object; // 表格列表显示配置
- rowKey?: string; // 表格key值
- headerTitle?: string // 表格标题
- tableAlertOptionRender?: () => {};// 表格对选操作
- tableAlertRender?: () => {}; // 自定义批量操作工具栏左侧信息区域
- rowSelection?: object; // 表格选择配置
- search?: object; // 搜索配置
- requestProcess?: ()=>{}, // 请求前参数处理 用于处理向时间间隔上传时参数重复问题
- onRow?: ()=>{}, // 内容行操作
- onHeaderRow?: ()=>{}, // 标题行操作
- scroll?: {},
- params?: {}, // 额外的请求参数
- method?: string, // 列表请求方式
- pagination?: object, //翻页配置
- }
- const DataTable: React.FC<DataTable> = React.forwardRef((props, ref) => {
- return (
- <ProTable
- columns={
- // 默认配置列都不出现在搜索中
- // v5中不再支持设置search为true,所以用searchBool代替
- props.columns.map((v) => {
- if(!v.searchBool){
- v.search = false;
- };
- return v
- })
- }
- actionRef={ref}
- params={props.params || {}}
- request={async (params = {}) =>{
- try {
- params.pageNo = params.current;
- delete params.current;
- const msg = await request(props.url, {
- method: props.method || 'get',
- params: props.requestProcess?props.requestProcess(params):params,
- });
- return {
- data: msg.data.list || msg.data.one,
- success: true,
- total: msg.data.totalCount,
- };
- }catch (error){
- console.debug(error)
- return {success: false};
- }
- }
- }
- editable={{
- type: 'multiple',
- }}
- rowKey={props.rowKey || 'id'}
- search={props.search}
- pagination={typeof props.pagination === 'boolean' ? props.pagination : {
- pageSize: 10,
- }}
- scroll={props.scroll || {}}
- dateFormatter="string" // 时间转换格式
- headerTitle={props.headerTitle || false}
- toolBarRender={() => props.toolBarRender || false}
- rowSelection={props.rowSelection || false}
- tableAlertRender={props.tableAlertRender || false}
- tableAlertOptionRender={props.tableAlertOptionRender || false}
- onRow={props.onRow}
- onHeaderRow={props.onHeaderRow}
- />
- );
- });
- export default DataTable;
|