tsg-web/src/components/crud/usePageTable2.ts

import { useState, useRef, useEffect } from 'react';
import { ListProps, TableProps } from 'antd';

import { PageResult, SearchOption } from '../../service/def';
import { camel2UnderLine } from "../../utils/utils";
import { log } from 'console';
import moment from 'moment';


type TableState<T> = {
  data: T[];
  total: number;
  loading: boolean;

  pageSize: number;
  pageNumber: number;
  search: { [key: string]: string };
  sortField?: string;
  sortOrder?: 'asc' | 'desc';
}


export type PageTableContext<T> = {
  tableProps: TableProps<T>,
  listProps?: ListProps<T>,
  search: (params?: SearchOption) => void,
  refresh: () => void

}

function usePageTable<T>(
  service: (params?: SearchOption) => Promise<PageResult<T>>,
  options: SearchOption = {}
): PageTableContext<T> {
  const [screenHeight, setScreenHeight] = useState(window.innerHeight);
  const [num, setNum] = useState(0);
  useEffect(() => {
    const handleResize = () => {
      setScreenHeight(window.innerHeight);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  useEffect(() => {
    //console.log("screenHeight 15+++",screenHeight);
    let a = parseInt(((Number(screenHeight) - 320)/39).toFixed(0));
    //console.log("num 18+++",a);
    if(a>=0 && a<15){
      setNum(10);
    }else if(a>=15 && a<20){
      setNum(15);
    }else if(a>=20){
      setNum(20);
    }
  }, [screenHeight]);

  // 写在一起避免异步之后多次setState导致多次重绘
  const [state, setState] = useState<TableState<T>>(() => ({
    data: [],
    total: 0,
    loading: false,
    pageSize: options.pageSize ?? 10,
    pageNumber: options.pageNumber ?? 1,
    sortField: options.sortField,
    sortOrder: options.sortOrder,
    search: options.search || {},
  }));

  const abort = useRef(false);
  // useEffect(() => {
  //   abort.current = false;
  //   if(num>0){
  //     console.log("num 78+++",num);
  //     search({ pageSize: num });
  //   }
  //   return () => { abort.current = true; }
  // }, [num]);

  const search = (opt: SearchOption = {}) => {
    setState(s => ({ ...s, loading: true }));
    const pageParams = {
      pageNumber: opt?.pageNumber ?? state.pageNumber,
      pageSize: opt?.pageSize ?? 10,
      sortField: opt?.sortField ?? state.sortField,
      sortOrder: opt?.sortOrder ?? state.sortOrder,
      search: opt?.search ?? state.search,
    };
    const { search, ...params } = pageParams;
    // console.log('search',search);
    // console.log('params',params);
    service({ ...search, ...params }).then((data) => {
      if (!abort.current) {

        //从c里找到shortName加到data.list里
        const c:any = sessionStorage.getItem('projectInformation')
        const allproject = JSON.parse(c)
        data.list?.map((itemD:any,index:any)=>{
          if(allproject && allproject.length>0){
            itemD.shortName = ''
            //给每个数据加一个key
            itemD.xcIndex = moment(new Date()).valueOf()+'index:'+index
            allproject?.map((itemA:any)=>{
              if(itemD.sn === itemA.sn){
                itemD.shortName=itemA.shortName
              }
            })
          }
        })



        setState({
          ...pageParams,
          data: data.list,
          total: data.totalRow,
          loading: false,
        })
      }
    });
  };

  const handleTableChange = (pagination: any, filters: any, sort: any) => {
    const { field, order } = sort;
    if (field && order) {
      const sortOrder: any = order === 'ascend' ? 'asc' : 'desc';
      const _field = camel2UnderLine(field);
      search({ pageNumber: pagination.current, pageSize: num, sortOrder, sortField: _field });
      return;
    }
    search({ pageNumber: pagination.current, pageSize: pagination.pageSize });
  };

  let listProps = undefined;
  if (false) {
    const handleListChange = (page: number, pageSize: number) => {
      search({ pageNumber: page, pageSize: pageSize });
    };
    listProps = {
      dataSource: state.data,
      loading: state.loading,
      pagination: {
        showTotal: (totalRow: any) => `共${totalRow}条`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSize: state.pageSize,
        current: state.pageNumber,
        total: state.total,
        pageSizeOptions: ['10', '20', '50', '100'],
        onChange: handleListChange
      }
    }
  }

  return {
    tableProps: {
      size: 'small',
      bordered: true,
      dataSource: state.data,
      pagination: {
        showTotal: (totalRow: any) => `共${totalRow}条`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSize: state.pageSize,
        current: state.pageNumber,
        total: state.total,
        pageSizeOptions: ['10', '15', '20', '50', '100'],
        hideOnSinglePage: true,
        position: ['bottomRight'],
      },
      loading: state.loading,
      onChange: handleTableChange,
    },
    listProps,
    search: (params?: SearchOption) => search({ ...params, pageNumber: 1 }),
    refresh: search,
  }
}

export default usePageTable