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

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

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

interface ListProps {
    handleOk: (selectedInvoice: DataType) => void;
    handleCancel: () => void;
}

export default function InvoiceInfoList(props: ListProps) {
    const [messageApi, messageContext] = useMessage();
    const [isInvoiceInfoSaveOpen, setIsInvoiceInfoSaveOpen] = useState(false);
    const [isInvoiceInfoEditOpen, setIsInvoiceInfoEditOpen] = useState(false);
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [dataArray, setDataArray] = useState<DataType[]>([]);
    const editInvoiceInfoId = useRef('');
    const selectedInvoice = useRef<DataType | null>(null);

    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: (_value, record) => {
                return (
                    <Space size={5}>
                        <Button type="primary" size="small" onClick={() => {
                            editInvoiceInfoId.current = record.invoiceInfoId;
                            setIsInvoiceInfoEditOpen(true);
                        }}><EditOutlined/></Button>
                        <Popconfirm
                            placement="right"
                            title={false}
                            description="确定删除吗？"
                            okText="确定"
                            cancelText="取消"
                            onConfirm={() => {
                                del<any>({
                                    messageApi,
                                    url: `/api/invoice-info/remove/${record.invoiceInfoId}`,
                                    onSuccess() {
                                        messageApi.success('删除成功');
                                        getData();
                                    }
                                })
                            }}
                        >
                            <Button type="primary" size="small" danger><DeleteOutlined/></Button>
                        </Popconfirm>
                    </Space>
                )
            }
        },
    ]

    const getData = () => {
        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);
            }
        })
    }

    useEffect(() => {
        getData();
    }, [page]);

    return (
        <>
            <div className="invoice-list-container">
                <div className="mod-list">
                    <div className="table-btn-group" style={{marginBottom: '15px'}}>
                        <Button value="small" onClick={() => {
                            setIsInvoiceInfoSaveOpen(true);
                        }}><PlusOutlined/> 新增</Button>
                    </div>
                    <Table rowSelection={
                        {
                            type: 'radio',
                            onChange: (_selectedRowKeys, selectedRows) => {
                                selectedInvoice.current = selectedRows[0];
                            },
                        }
                    } columns={columns} dataSource={dataArray} pagination={
                        {
                            pageSize: 20,
                            total: total,
                            onChange: (currentPage) => {
                                setPage(currentPage);
                            }
                        }
                    } scroll={{y: 500}} bordered key="dataTable" rowKey="invoiceInfoId"/>
                </div>
                <Flex justify="center">
                    <Space size={5}>
                        <Button type="primary"
                                style={{backgroundColor: 'var(--color-primary)'}}
                                onClick={() => {
                                    if (!selectedInvoice.current) {
                                        messageApi.error('请选择开票信息');
                                        return;
                                    }
                                    props.handleOk(selectedInvoice.current);
                                }}
                        >确定</Button>
                        <Button type="default" onClick={() => {
                            props.handleCancel();
                        }}>关闭</Button>
                    </Space>
                </Flex>
            </div>
            <Modal open={isInvoiceInfoSaveOpen}
                   title="新增"
                   footer={false}
                   onCancel={() => {
                       setIsInvoiceInfoSaveOpen(false)
                   }}
            >
                <InvoiceInfoSave
                    handleOk={() => {
                        getData();
                        setIsInvoiceInfoSaveOpen(false);
                    }}
                    handleCancel={() => {
                        setIsInvoiceInfoSaveOpen(false);
                    }}
                />
            </Modal>
            <Modal open={isInvoiceInfoEditOpen}
                   title="编辑"
                   footer={false}
                   onCancel={() => {
                       setIsInvoiceInfoEditOpen(false)
                   }}
            >
                <InvoiceInfoEdit
                    invoiceInfoId={editInvoiceInfoId.current}
                    handleOk={() => {
                        getData();
                        setIsInvoiceInfoEditOpen(false);
                    }}
                    handleCancel={() => {
                        setIsInvoiceInfoEditOpen(false);
                    }}
                />
            </Modal>
            {messageContext}
        </>
    );
}