system-copyright-react/src/components/RecordModal/RecordModal.tsx

import { useEffect, useState } from 'react'
import { get } from '../../util/AjaxUtils'
import useMessage from "antd/es/message/useMessage";
import { Table, Spin, DatePicker, Button,Tooltip } from 'antd';
import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
import type { TableProps, DatePickerProps } from 'antd';
// import dayjs, { } from 'dayjs';
import locale from 'antd/es/date-picker/locale/zh_CN';

export default function RecordModal() {
    // const dateFormat = 'YYYY年MM月DD日';
    const [messageApi, messageContext] = useMessage();
    const [isLoading, setIsLoading] = useState(false)
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [newstartTime, setnewstartTime] = useState<any>()//临时过度
    const [showStartTime, setShowStartTime] = useState<any>()
    const [startTime, setstartTime] = useState<any>()
    const [newendTime, setnewendTime] = useState<any>() //临时过度
    const [showEndTime, setShowEndTime] = useState<any>()
    const [endTime, setendTime] = useState<any>()
    const [tableData, setTableData] = useState<any[]>()

    // 更改开始日期
    const startTimeChange: DatePickerProps['onChange'] = (date, dateString) => {
        // const time = dayjs(date).format(dateFormat)
        setShowStartTime(date)
        setnewstartTime(dateString)


    };
    const endTimeChange: DatePickerProps['onChange'] = (date, dateString) => {
        // console.log(date, dateString);
        setShowEndTime(date)
        setnewendTime(dateString)
        // dayjs(formInfo.getFieldValue('projDevCompleteDate')).format(dateFormat),
        // console.log('日期', dayjs(date).format(dateFormat));

    };
    // 点击搜索
    const onSearch = () => {
        console.log(newstartTime);
        setPage(1)
        setstartTime(newstartTime)
        setnewendTime(newendTime)
        get({
            messageApi,
            url: '/api/payment/split/listpage/self',
            config: {
                // dayjs(data.projDevCompleteDate, 'YYYY-MM-DD')
                params: {
                    startTime: newstartTime ? newstartTime : '',
                    endTime: newendTime ? newendTime : '',
                    page: 1,
                    rows: 10
                }
            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess(data: any) {
                console.log(page);

                setTableData(data.data.rows)
                // console.log(data.data);
                setTotal(data.data.total)

            },
            onFinally() {
                setIsLoading(false);
            }
        })
    }
    // 初始化搜索条件及分页
    const init = () => {
        setShowEndTime(undefined)
        setShowStartTime(undefined)
        setPage(1)
        setstartTime('')
        setnewstartTime('')
        setendTime('')
        setnewendTime('')
        get({
            messageApi,
            url: '/api/payment/split/listpage/self',
            config: {
                params: {
                    startTime: '',
                    endTime: '',
                    page: 1,
                    rows: 10
                }
            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess(data: any) {
                setTableData(data.data.rows)
                // console.log(data.data);
                setTotal(data.data.total)

            },
            onFinally() {
                setIsLoading(false);
            }
        })
    }


    const getData = () => {
        get({
            messageApi,
            url: '/api/payment/split/listpage/self',
            config: {
                //  dayjs(date).format(dateFormat)
                params: {
                    startTime: startTime ? startTime : '',
                    endTime: endTime ? endTime : '',
                    page: page,
                    rows: 10
                }
            },
            onBefore() {
                setIsLoading(true);
            },
            onSuccess(data: any) {
                setTableData(data.data.rows)
                console.log(data.data);
                setTotal(data.data.total)

            },
            onFinally() {
                setIsLoading(false);
            }
        })
    }
    useEffect(() => {
        getData()
    }, [page])
    interface DataType {
        index?: number;
        // 金额
        amount: number;
        // 备注
        notes: string
    }

    const columns: TableProps<DataType>['columns'] = [
        {
            title: () => <div style={{ textAlign: 'center' }}>序号</div>,
            dataIndex: 'index',
            width: 70, // 设置宽度
            key: 'index',
            align: 'center',
            render: (_text, _record, index) => (page - 1) * 10 + index + 1,
        },
        {
            title: <div style={{ textAlign: 'center' }}>金额</div>,
            width: 120,
            align: 'center',
            dataIndex: 'amount',
            key: 'amount',
            render:(text) => (
                <div style={{fontWeight:700}}>{text}</div>
            )
        },
        {
            title: <div style={{ textAlign: 'center' }}>备注</div>,

            dataIndex: 'notes',
            key: 'notes',
            align: 'center',
            ellipsis: {
                showTitle: false,
            },
            render: (text) => {
                return <Tooltip placement="top" title={text}>{text}</Tooltip>
            }
        },

    ];

    return (
        <div>
            {messageContext}
            <Spin tip="加载中..." spinning={isLoading}>
                <div style={{ marginBottom: 10 }}>
                    <DatePicker placeholder="开始时间"
                        style={{ width: 198, height: 36, marginRight: 12 }}
                        locale={locale}
                        onChange={startTimeChange}
                        value={showStartTime}
                    />
                    <DatePicker placeholder="结束时间"
                        style={{ width: 198, height: 36, marginRight: 12 }}
                        locale={locale}
                        onChange={endTimeChange}
                        value={showEndTime}
                    />
                    <Button type="primary"
                        style={{
                            height: 36,
                            // backgroundColor: '#FF9F08'
                        }}
                        onClick={() => {
                            onSearch()
                        }}
                        icon={<SearchOutlined />}>
                        搜索
                    </Button>
                    <Button
                        style={{
                            height: 36,
                            marginLeft: 10,
                            // backgroundColor: '#FF9F08'
                        }}
                        icon={<ClearOutlined />}
                        onClick={() => {
                            init()
                        }}
                    >
                        清除
                    </Button>
                </div>
                <Table columns={columns} dataSource={tableData}
                    style={{ textAlign: 'center' }} // 设置表格内容居中显示
                    pagination={
                        {
                            pageSize: 10,
                            total: total,
                            onChange: (currentPage) => {
                                setPage(currentPage);
                            },
                            showSizeChanger: false,
                            current: page

                        }
                    }
                    scroll={{ y: 500 }}
                    bordered
                    key="dataTable" rowKey="paymentSplitId"
                />
                {/* <div className='product-release-pagination'>
                    <Pagination defaultCurrent={page} total={total} defaultPageSize={10} onChange={(page) => {
                        setPage(page)
                    }} />
                </div> */}
            </Spin>
        </div>
    )
}