system-copyright-react/src/components/invoice/InvoiceShow.tsx

import { Button, Divider, Modal } from "antd";
import { useEffect, useState } from "react";
import { get } from "../../util/AjaxUtils.ts";
import useMessage from "antd/es/message/useMessage";
import InvoiceInfoSelectedList from "./order/InvoiceOrderSelectedList.tsx"

type DataType = {
    invoiceTitle: string;
    invoiceNo: string;
    invoiceAddress: string;
    invoicePhone: string;
    invoiceAccount: string;
    invoiceBank: string;
    content: string;
    rate: string;
    type: string;
    orderIds: string[];
    invoiceNote: string;
    isSaveInvoiceInfo: boolean;
    invoiceAmount: number;
}

type ShowProps = {
    invoiceId: string;
}

export default function InvoiceShow(props: ShowProps) {
    const [messageApi, messageContext] = useMessage();
    const [isInvoiceOrderListOpen, setIsInvoiceOrderListOpen] = useState(false);
    const [invoiceData, setInvoiceData] = useState<DataType | null>(null);
    const [orderAmount, setOrderAmount] = useState('0');

    useEffect(() => {

       
        if (!props.invoiceId) {
            return;
        }
        get<DataType>({
            messageApi,
            url: `/api/invoice/get/${props.invoiceId}`,
            onSuccess({ data }) {
                setInvoiceData({
                    ...data
                });
                setOrderAmount((data.invoiceAmount / 100).toFixed(2));
            }
        })
       
    }, []);

    return (
        <>
            {messageContext}
            <Divider orientation="left" plain>开票信息</Divider>
            <table className="pay-table">
                <colgroup>
                    <col width="120" />
                    <col />
                </colgroup>
                <tbody>
                    <tr>
                        <td className="table-label">公司名称 *</td>
                        <td>{invoiceData?.invoiceTitle}</td>
                    </tr>
                    <tr>
                        <td className="table-label">纳税人识别号 *</td>
                        <td>{invoiceData?.invoiceNo}</td>
                    </tr>
                    <tr>
                        <td className="table-label">公司地址 *</td>
                        <td>{invoiceData?.invoiceAddress}</td>
                    </tr>
                    <tr>
                        <td className="table-label">联系电话 *</td>
                        <td>{invoiceData?.invoicePhone}</td>
                    </tr>
                    <tr>
                        <td className="table-label">开户行 *</td>
                        <td>{invoiceData?.invoiceAccount}</td>
                    </tr>
                    <tr>
                        <td className="table-label">开户行账号 *</td>
                        <td>{invoiceData?.invoiceBank}</td>
                    </tr>
                    <tr>
                        <td className="table-label">开票内容 *</td>
                        <td>{invoiceData?.content}</td>
                    </tr>
                    <tr>
                        <td className="table-label">开票税率 *</td>
                        <td>{invoiceData?.rate}</td>
                    </tr>
                    <tr>
                        <td className="table-label">发票类型 *</td>
                        <td>{invoiceData?.type}</td>
                    </tr>
                </tbody>
            </table>
            <Divider orientation="left" plain>开票内容</Divider>
            <table className="pay-table">
                <colgroup>
                    <col width="120" />
                    <col />
                </colgroup>
                <tbody>
                    <tr>
                        <td className="table-label">开票金额 *</td>
                        <td>
                            <div>
                                <span>￥</span>
                                <span style={{ fontSize: '20px', fontWeight: 'bold' }}>{orderAmount}</span>
                                <Button type="link" size="small" onClick={() => {
                                    setIsInvoiceOrderListOpen(true);
                                }}>查看开票的订单</Button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td className="table-label">开票备注</td>
                        <td>{invoiceData?.invoiceNote}</td>
                    </tr>
                </tbody>
            </table>
            <Modal open={isInvoiceOrderListOpen}
                centered
                title="开票订单"
                width={1000}
                footer={false}
                onCancel={() => setIsInvoiceOrderListOpen(false)}
            >
                <InvoiceInfoSelectedList invoiceId={props.invoiceId} />
            </Modal>
        </>
    );
}