index.tsx 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import React, { useRef } from 'react';
  2. import ProTable, { ActionType } from '@ant-design/pro-table';
  3. import { request } from 'umi';
  4. export interface DataTable {
  5. toolBarRender?: object; // 表格操作栏
  6. url?: boolean; // 表格请求地址
  7. columns?: object; // 表格列表显示配置
  8. rowKey?: string; // 表格key值
  9. headerTitle?: string // 表格标题
  10. tableAlertOptionRender?: () => {};// 表格对选操作
  11. tableAlertRender?: () => {}; // 自定义批量操作工具栏左侧信息区域
  12. rowSelection?: object; // 表格选择配置
  13. search?: object; // 搜索配置
  14. requestProcess?: ()=>{}, // 请求前参数处理 用于处理向时间间隔上传时参数重复问题
  15. onRow?: ()=>{}, // 内容行操作
  16. onHeaderRow?: ()=>{}, // 标题行操作
  17. scroll?: {},
  18. params?: {}, // 额外的请求参数
  19. method?: string, // 列表请求方式
  20. pagination?: object, //翻页配置
  21. }
  22. const DataTable: React.FC<DataTable> = React.forwardRef((props, ref) => {
  23. return (
  24. <ProTable
  25. columns={
  26. // 默认配置列都不出现在搜索中
  27. // v5中不再支持设置search为true,所以用searchBool代替
  28. props.columns.map((v) => {
  29. if(!v.searchBool){
  30. v.search = false;
  31. };
  32. return v
  33. })
  34. }
  35. actionRef={ref}
  36. params={props.params || {}}
  37. request={async (params = {}) =>{
  38. try {
  39. params.pageNo = params.current;
  40. delete params.current;
  41. const msg = await request(props.url, {
  42. method: props.method || 'get',
  43. params: props.requestProcess?props.requestProcess(params):params,
  44. });
  45. return {
  46. data: msg.data.list || msg.data.one,
  47. success: true,
  48. total: msg.data.totalCount,
  49. };
  50. }catch (error){
  51. console.debug(error)
  52. return {success: false};
  53. }
  54. }
  55. }
  56. editable={{
  57. type: 'multiple',
  58. }}
  59. rowKey={props.rowKey || 'id'}
  60. search={props.search}
  61. pagination={typeof props.pagination === 'boolean' ? props.pagination : {
  62. pageSize: 10,
  63. }}
  64. scroll={props.scroll || {}}
  65. dateFormatter="string" // 时间转换格式
  66. headerTitle={props.headerTitle || false}
  67. toolBarRender={() => props.toolBarRender || false}
  68. rowSelection={props.rowSelection || false}
  69. tableAlertRender={props.tableAlertRender || false}
  70. tableAlertOptionRender={props.tableAlertOptionRender || false}
  71. onRow={props.onRow}
  72. onHeaderRow={props.onHeaderRow}
  73. />
  74. );
  75. });
  76. export default DataTable;