//路径 @/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={
onClick={onChange} style={{ color: 'rgba(0,0,0,.45)' }} />
}
onPressEnter={onFinish}
onChange={onChange}
allowClear
/>
Form.Item>
<Form.Item name='product_name'>
<Input
placeholder='项目名称'
suffix={
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;
}