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

import { useEffect, useState } from 'react'
import { get } from '../../util/AjaxUtils'
import useMessage from "antd/es/message/useMessage";
import { Table, Tag, Spin, Input, 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 CapitalModal() {
    // 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 [newkeywords, setnewkeywords] = useState('')//临时过度
    const [keywords, setkeywords] = useState('')
    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)
        setkeywords(newkeywords)
        setstartTime(newstartTime)
        setnewendTime(newendTime)
        get({
            messageApi,
            url: '/api/account/listpage-item/self',
            config: {
                // dayjs(data.projDevCompleteDate, 'YYYY-MM-DD')
                params: {

                    keywords: newkeywords ? newkeywords : '',
                    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)
        setkeywords('')
        setnewkeywords('')
        setstartTime('')
        setnewstartTime('')
        setendTime('')
        setnewendTime('')
        get({
            messageApi,
            url: '/api/account/listpage-item/self',
            config: {
                params: {
                    keywords: '',
                    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/account/listpage-item/self',
            config: {
                //  dayjs(date).format(dateFormat)
                params: {
                    keywords: keywords ? keywords : '',
                    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;
        type: number;
        // 交易前金额
        accountBeforeMoneyDouble: string;
        // 交易金额
        accountMoneyDouble: string;
        // 余额
        accountAfterMoneyDouble: string;
        // 关联订单编号
        orderId: string;
        // 关联订单类型
        orderType: string;
        // 交易时间
        gmtCreate: string;
        // 描述
        description: 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>,
            key: 'type',
            width: 100, // 设置宽度
            dataIndex: 'type',
            align: 'center',
            render: (text) => {
                const tagProps =
                    text === 1 ? { color: '#f50', label: '充值' } :
                        text === 2 ? { color: '#2db7f5', label: '支出' } :
                            text === 3 ? { color: '#87d068', label: '提现' } :
                                text === 4 ? { color: '#108ee9', label: '系统扣款' } :
                                    text === 5 ? { color: '#10e98f', label: '订单收入' } :
                                        { color: '#d9d9d9', label: '未知' }; // 默认值
                return <Tag color={tagProps.color}>{tagProps.label}</Tag>;
            }
            ,
        },
        {
            title: <div style={{ textAlign: 'center' }}>交易前金额</div>,
            width: 120,
            dataIndex: 'accountBeforeMoneyDouble',
            key: 'accountBeforeMoneyDouble',
            align: 'center',
            render:(text) => (
                <div style={{fontWeight:700}}>{text}</div>
            )
        },
        {
            title: <div style={{ textAlign: 'center' }}>交易金额</div>,
            width: 120,
            dataIndex: 'accountMoneyDouble',
            key: 'accountMoneyDouble',
            align: 'center',
            render:(text) => (
                <div style={{fontWeight:700}}>{text}</div>
            )
        },
        {
            title: <div style={{ textAlign: 'center' }}>交易后余额</div>,
            width: 120,
            dataIndex: 'accountAfterMoneyDouble',
            key: 'accountAfterMoneyDouble',
            align: 'center',
            render:(text) => (
                <div style={{fontWeight:700}}>{text}</div>
            )
            
        },
        {
            title: <div style={{ textAlign: 'center' }}>关联订单编号</div>,
            dataIndex: 'orderId',
            // fixed: 'right',
            width: 300, 
            align: 'center',
            key: 'orderId',
        },
        {
            title: <div style={{ textAlign: 'center' }}>关联订单类型</div>,
            dataIndex: 'orderType',
            key: 'orderType',
            width: 160,
            align: 'center',
             render:(text) => (
                <div >{text == 'ai'?'AI秒著引擎':text}</div>
            )
        },
        {
            title: <div style={{ textAlign: 'center' }}>交易时间</div>,
            dataIndex: 'gmtCreate',
            key: 'gmtCreate',
        },
        {
            title: <div style={{ textAlign: 'center' }}>描述</div>,
            dataIndex: 'description',
            key: 'description',
            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 }}>
                    <Input placeholder="请输入关键字" value={newkeywords} onChange={(e) => {
                        setnewkeywords(e.target.value)
                    }}
                        style={{ width: 198, height: 36, marginRight: 12 }}
                    ></Input>
                    <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}
                    pagination={
                        {
                            pageSize: 10,
                            total: total,
                            onChange: (currentPage) => {
                                setPage(currentPage);
                            },
                            showSizeChanger: false,
                            current: page

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