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}
                   title="开票订单"
                   width={1000}
                   footer={false}
                   onCancel={() => setIsInvoiceOrderListOpen(false)}
            >
                <InvoiceInfoSelectedList invoiceId={props.invoiceId}/>
            </Modal>
        </>
    );
}