system-copyright-react/src/components/invoice/info/InvoiceInfoList.tsx

import {Button, Modal, Space, Table, TableProps} from "antd";
import {DeleteOutlined, EditOutlined, PlusOutlined} from "@ant-design/icons";
import useMessage from "antd/es/message/useMessage";
import {useEffect, useState} from "react";
import {get} from "../../../util/AjaxUtils.ts";
import {IListPage} from "../../../interfaces/listpage/IListPage.ts";
import InvoiceInfoSave from "./InvoiceInfoSave.tsx";

type DataType = {
    invoiceTitle: string;
    invoicePhone: string;
    invoiceNo: string;
    invoiceInfoId: string;
    invoiceBank: string;
    invoiceAddress: string;
    invoiceAccount: string;
    gmtCreate: number;
    creator: string;
}

export default function InvoiceInfoList() {
    const [messageApi, messageContext] = useMessage();
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [dataArray, setDataArray] = useState<DataType[]>([]);

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '公司名称',
            dataIndex: 'invoiceTitle',
            align: 'center',
            width: 180,
            fixed: 'left'
        },
        {
            title: '纳税人识别号',
            dataIndex: 'invoiceNo',
            align: 'center',
            width: 180
        },
        {
            title: '公司地址',
            dataIndex: 'invoiceAddress',
            align: 'center',
            width: 180
        },
        {
            title: '联系电话',
            dataIndex: 'invoicePhone',
            align: 'center',
            width: 180
        },
        {
            title: '开户行',
            dataIndex: 'invoiceBank',
            align: 'center',
            width: 180
        },
        {
            title: '开户行账号',
            dataIndex: 'invoiceAccount',
            align: 'center',
            width: 180
        },
        {
            title: '操作',
            dataIndex: 'option',
            align: 'center',
            width: 100,
            fixed: 'right',
            render: () => {
                return (
                    <Space size={5}>
                        <Button type="primary" size="small"><EditOutlined/></Button>
                        <Button size="small"><DeleteOutlined/></Button>
                    </Space>
                )
            }
        },
    ]

    useEffect(() => {
        get<IListPage<DataType>>({
            messageApi,
            url: '/api/invoice-info/listpage/self',
            config: {
                params: {
                    page: page,
                    rows: 20
                }
            },
            onSuccess({data}) {
                setPage(data.page);
                setTotal(data.total);
                setDataArray(data.rows);
            }
        })
    }, [page]);

    return (
        <>
            <div className="invoice-list-container">
                <div className="mod-list">
                    <div className="table-btn-group" style={{marginBottom: '15px'}}>
                        <Button value="small" onClick={() => {

                        }}><PlusOutlined/> 新增</Button>
                    </div>
                    <Table rowSelection={
                        {
                            type: 'radio',
                            onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
                                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                            },
                        }
                    } columns={columns} dataSource={dataArray} pagination={
                        {
                            pageSize: 20,
                            total: total,
                            onChange: (currentPage) => {
                                setPage(currentPage);
                            }
                        }
                    } scroll={{y: 500}} bordered key="dataTable" rowKey="invoiceInfoId"/>
                </div>
            </div>
            <Modal open={true}
                   title="新增"
                   footer={false}
            >
                <InvoiceInfoSave/>
            </Modal>
            {messageContext}
        </>
    );
}