react hooks的封装

//路径 @/hooks/useTables.tsx hooks 配置

import React, { useState, useEffect } from 'react'
import axios from '@/utils/http'
import { useDebounceFn } from 'ahooks'

let searchData = {} // 搜索区域表单数据
let ajaxUrl = ''

/**
 * 表格hooks
 * @param url           请求接口
 * @param ajaxData      其他默认请求参数
 * @returns {{setSearchData: setSearchData, pagination: {current: number, onChange: onChange, showTotal: (function(*)), pageSize: number, showQuickJumper: boolean, showSizeChanger: boolean}, onChange: onChange, setLoading: (value: (((prevState: boolean) => boolean) | boolean)) => void, dataList: *[], responseData: {}, setDataList: (value: (((prevState: *[]) => *[]) | *[])) => void, loading: boolean, searchData: {}}}
 */
function useTable(url:string, ajaxData:any) {
  const [dataList, setDataList] = useState([]) // 表格数据list
  const [pagination, setPag] = useState<any>({ // 分页
    pageSize: ajaxData.pageSize || 10,
    current: 1,
    showQuickJumper: false,
    showSizeChanger: false,
    position: ['bottomCenter'],
    total: 0,
    showTotal: (total:number) => (
      <span>
        共<span className='text-warning'>{total}</span>条
      </span>
    ),
    onChange: (current = 1, pageSize = 10) => {
      console.log(current, pageSize)
      setPagination({ current, pageSize })
    }
  })
  const [loading, setLoading] = useState(false) // loading
  const [responseData, setResponseData] = useState({}) // 接口返回的data

  /**
   * 获取获取表格数据
   * @param searchParam           Object 搜索区域表单数据
   * @param paginationParam       Object 分页请求数据
   * @param config                Object 其他参数
   */
  const { run: getList } = useDebounceFn(
    ({ searchParam, paginationParam = {}, config = {}} = {}) => {
      setLoading(true)
      const isSearch = typeof searchParam === 'object'
      const isCurrent = typeof paginationParam.current !== 'undefined'
      const param = isSearch ? searchParam : searchData

      if (isSearch) {
        searchData = searchParam
      }
      ajaxUrl = config?.url || url
      axios
        .post(ajaxUrl, {
          ...ajaxData,
          ...param,
          page_size: isCurrent ? paginationParam.pageSize || pagination.pageSize : pagination.pageSize,
          cur_page: isCurrent ? paginationParam.current - 1 : pagination.current - 1
        })
        .then((res:any) => {
          if (res.success) {
            setDataList(res.data)
            setPag({
              ...pagination,
              current: isCurrent ? paginationParam.current : pagination.current,
              total: res.total
            })
            setLoading(false)
            setResponseData(res)
          }
        })
    },
    { wait: 500, leading: true }
  )

  useEffect(() => {
    getList({ searchParam: ajaxData })
    // eslint-disable-next-line
  }, []);

  // 设置接口参数，获取新数据
  const setSearchData = function(searchParam:any, paginationParam:any, config:any) {
    getList({ searchParam, paginationParam, config })
  }

  // 分页变化调接口
  const setPagination = function(paginationParam:any) {
    getList({ paginationParam, config: { url: ajaxUrl }})
  }

  // table change
  // eslint-disable-next-line
  const onChange = (pagination:any, filters:any, sorter:any, extra:any) => {
    console.log('pagination', pagination)
    console.log('filters', filters)
    console.log('sorter', sorter)
    console.log('extra', extra)
    const sortForms = []
    switch (extra.action) {
      case 'sort': // 排序
        if (Object.prototype.toString.call(sorter) === '[object Object]') {
          if (sorter.order) {
            sortForms.push({
              sortFiled: sorter.field,
              sortType: sorter.order === 'ascend' ? 0 : sorter.order === 'descend' ? 1 : undefined,
              weight: sorter?.column?.sorter?.multiple
            })
          }
        } else if (Object.prototype.toString.call(sorter) === '[object Array]') {
          for (const item of sorter) {
            if (item.order) {
              sortForms.push({
                sortFiled: item.field,
                sortType: item.order === 'ascend' ? 0 : item.order === 'descend' ? 1 : undefined,
                weight: item?.column?.sorter?.multiple
              })
            }
          }
        }
        searchData = {
          ...searchData,
          sortForms: sortForms?.length ? JSON.stringify(sortForms) : undefined
        }
        getList({ searchParam: searchData, paginationParam: { current: 1 }})
        break
      case 'paginate':
        break
    }
  }

  return {
    dataList,
    setDataList,
    pagination,
    loading,
    setLoading,
    searchData,
    setSearchData,
    responseData,
    onChange
  }
}

export default useTable

//引用 useTable

import React, { FC} from 'react'
import TableList from './modules/TableList'
import SearchForm from './modules/SearchForm'
import useTables from '@/hooks/useTables'

import './index.less'
const WithoutCard: FC = () => {
  const { dataList, loading, pagination, searchData, setSearchData, responseData } = useTables(
    url, {})
  return (
    <div className='confirmate-daily-hours-box'>
      <div className='staff-box'>
          <SearchForm
            dataList={dataList}
            searchData={searchData}
            pagination={pagination}
            setSearchData={setSearchData}
            responseData={responseData}/>
          <TableList
            dataList={dataList}
            loading={loading}
            pagination={pagination}
            searchData={searchData}
            setSearchData={setSearchData}
            responseData={responseData}/>
      </div>
    </div>
  )
}

export default WithoutCard

// TableList

import React, { FC, useState, useContext } from 'react'
import { Space, Table} from 'antd'
import type { ColumnsType } from 'antd/es/table'

import { TableListType, IsBatchTable } from '../../types/index'
import './index.less'

const TableList: FC<IsBatchTable> = ({ dataList, loading, pagination}) => {
  const columns :ColumnsType<TableListType> = [
    {
      title: '批次号',
      dataIndex: 'batch_id',
      render: (text: string) => text || '-'
    },
    {
      title: '项目名称',
      dataIndex: 'product_name',
      render: (text: string) => text || '-'
    },
    {
      title: '计薪年月',
      dataIndex: 'month',
      render: (text: string) => text || '-'
    },

    {
      title: '发薪人数',
      dataIndex: 'people_count',
      render: (text: string) => text || '-'
    },
    {
      title: '发薪金额',
      dataIndex: 'paid_in_amount',
      render: (text: string) => text || '-',
      width: '100px'
    },
    {
      title: '发薪状态',
      dataIndex: 'status',
      width: '140px',
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      render: (text: string) => text || '-',
      width: '130px'
    },
    {
      title: '操作人',
      dataIndex: 'operator_name',
      render: (text: string) => text || '-'
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '170px',
    }
  ]


  return (<div className='without-card-table'>
    <Table
      pagination={pagination}
      rowKey='batch_id'
      loading={loading}
      columns={columns}
      dataSource={dataList}
    />
  </div>)
}

export default TableList

//SearchForm

import React, {
  FC, useEffect, useContext
} from 'react'
import { Form, Input, Select, Button, DatePicker} from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import moment from 'moment'

import { IsBatchTable } from '../../types/index'
import { statusList } from '../../enum/index'

import './index.less'
const { RangePicker } = DatePicker
const { Option } = Select

const SearchForms: FC<IsBatchTable> = ({ setSearchData}) => {

  const [form] = Form.useForm()
  const onFinish = () => {
    const list = form.getFieldsValue(['status', 'time', 'batch_id', 'product_name'])
    list.start_submit_time = list.time ? (moment(list.time[0]).format('YYYY-MM-DD') + ' 00:00:00') : undefined
    list.end_submit_time = list.time ? (moment(list.time[1]).format('YYYY-MM-DD') + ' 23:59:59') : undefined
    console.log(list, 'onSearch--list')
    setSearchData(list)
  }
  // 清空操作
  const onChange = (e: { type: string }) => {
    if (e.type !== 'click') return
    e.type === 'click' && onFinish()
  }

  return (
    <Form form={form} name='search-form-hooks'>
      <div className='search-form-left'>
        <Form.Item name='status'>
          <Select
            placeholder='发薪状态'
            onChange={onFinish}
            allowClear
          >
            {
              statusList.map((item: any) => {
                return (<Option key={item.id} value={item.id}>{item.name}</Option>)
              })
            }
          </Select>
        </Form.Item>
        <Form.Item name='time' style={{width: '240px'}}>
          <RangePicker format='YYYY-MM-DD' onChange={onFinish} allowClear/>
        </Form.Item>
        <Form.Item name='batch_id'>
          <Input
            placeholder='批次号'
            suffix={
              <SearchOutlined onClick={onChange} style={{ color: 'rgba(0,0,0,.45)' }} />
            }
            onPressEnter={onFinish}
            onChange={onChange}
            allowClear
          />
        </Form.Item>
        <Form.Item name='product_name'>
          <Input
            placeholder='项目名称'
            suffix={
              <SearchOutlined onClick={onChange} style={{ color: 'rgba(0,0,0,.45)' }} />
            }
            onPressEnter={onFinish}
            onChange={onChange}
            allowClear
          />
        </Form.Item>
      </div>
    </Form>
  )
}

export default SearchForms

// type ts 校验

export interface TableListType {
  batch_id?:string,
  product_name?:string,
  month?:string,
  people_count?:string,
  paid_in_amount?:string,
  created_at?:string,
  operator_name?:string,
  name?:string,
  status?:number,
  positionName?:string,
}

export interface IsBatchTable {
  tableData?: TableListType[];
  dataList?: TableListType[];
  loading?: boolean;
  searchData?:any
  setSearchData?:any
  responseData?:any
  pagination:any
}

export interface IFormInfo {
	cur_page?: string|number;
	page_size?: string|number;
	salary_batch_id?: string|number;
	product_name?: string;
	start_submit_time?: string;
	end_submit_time?: string;
	status?: string;
	batch_id?: string;
	tenant_id?: string;
}

export interface PaginationType {
  total: number;
}