虚拟订单更换一个新订单，旧虚拟订单用新页面显示。

src/main.jsx

@@ -24,6 +24,7 @@ import NoticeIndex from '@/views/notice/Index'
 import NoticeDetail from '@/views/notice/Detail'
 import InvoiceIndex from '@/views/invoice/Index'
 import InvoiceDetail from '@/views/invoice/Detail'
+import InvoiceHistory from '@/views/invoice/History'
 import InvoicePaid from '@/views/invoice/Paid'
 import InvoicePaidDetail from '@/views/invoice/PaidDetail'
 import Airticket from '@/views/airticket/Index'
@@ -64,6 +65,7 @@ const initRouter = async () => {
         { path: 'notice/:CCP_BLID', element: <NoticeDetail />},
         { path: 'invoice',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceIndex /></RequireAuth>},
         { path: 'invoice/detail/:GMDSN/:GSN',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceDetail /></RequireAuth>},
+        { path: 'invoice/history/:GMDSN/:GSN',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceHistory /></RequireAuth>},
         { path: 'invoice/paid',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoicePaid /></RequireAuth>},
         { path: 'invoice/paid/detail/:flid', element: <RequireAuth subject={PERM_OVERSEA} result={true}><InvoicePaidDetail /></RequireAuth>},
         { path: 'airticket',element: <RequireAuth subject={PERM_AIR_TICKET} result={true}><Airticket /></RequireAuth>},

src/views/invoice/Detail.jsx

@@ -1,7 +1,7 @@
 import { useParams, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { Row, Col, Space, Button, Typography, Card, Form, Upload, Input, Divider, DatePicker, Select, App, Descriptions, Image } from "antd";
-import { PlusOutlined } from "@ant-design/icons";
+import { PlusOutlined,AuditOutlined } from "@ant-design/icons";
 import { isNotEmpty } from "@/utils/commons";
 import * as config from "@/config";
 import dayjs from "dayjs";
@@ -224,7 +224,7 @@ function Detail() {
 											<Descriptions column={1}>
 												<Descriptions.Item label="Amount">{data.GMD_Cost}</Descriptions.Item>
 												<Descriptions.Item label="Currency">{data.GMD_Currency}</Descriptions.Item>
-												<Descriptions.Item label="Due Dat">{data.GMD_PayDate}</Descriptions.Item>
+												<Descriptions.Item label="Due Date">{data.GMD_PayDate}</Descriptions.Item>
 												<Descriptions.Item label="Status">{invoiceStatus(data.FKState)}</Descriptions.Item>
 											</Descriptions>
 										</Col>
@@ -358,6 +358,9 @@ function Detail() {
 					</Col>
 					<Col span={4}>
 						<BackBtn />
+						<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/history/0/338787`)}>
+							Billing Records
+						</Button>
 					</Col>
 				</Row>
 				<Title level={5}></Title>

src/views/invoice/History.jsx

@@ -0,0 +1,130 @@
+import { useParams, NavLink, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { Row, Col, Space, Table, Image,App } from "antd";
+import { formatDate, isNotEmpty } from "@/utils/commons";
+import SearchForm from "@/components/SearchForm";
+import dayjs from "dayjs";
+import BackBtn from "@/components/BackBtn";
+import { fetchInvoiceDetail } from "@/stores/Invoice";
+import useInvoiceStore from "@/stores/Invoice";
+import { usingStorage } from "@/hooks/usingStorage";
+
+function History() {
+  const { travelAgencyId } = usingStorage();
+  const { GMDSN, GSN } = useParams();
+  const [dataLoading, setDataLoading] = useState(false);
+  const [invoiceZDDetail, setInvoiceZDDetail] = useState([]);
+  const { notification } = App.useApp();
+
+  useEffect(() => {
+    defaultShow();
+  }, [GMDSN, GSN]);
+
+  function defaultShow() {
+    setDataLoading(true);
+
+    fetchInvoiceDetail(travelAgencyId, GMDSN, GSN)
+      .then((json) => {
+        //console.log("id:"+travelAgencyId+",gmdsn:"+GMDSN+",GSN:"+GSN+"#13"+json);
+        setInvoiceZDDetail(json.invoiceZDDetail);
+      })
+      .catch((ex) => {
+        notification.error({
+          message: `Notification`,
+          description: ex.message,
+          placement: "top",
+          duration: 4,
+        });
+      })
+      .finally(() => {
+        setDataLoading(false);
+      });
+  }
+
+  const invoicePaidColumns = [
+    {
+      title: "ID",
+      dataIndex: "GMD_SN",
+      key: "GMD_SN",
+    },
+    {
+      title: "Due Date",
+      key: "GMD_PayDate",
+      dataIndex: "GMD_PayDate",
+      render: (text, record) =>
+        isNotEmpty(text) ? formatDate(new Date(text)) : "",
+    },
+    {
+      title: "Amount",
+      key: "GMD_Cost",
+      dataIndex: "GMD_Cost",
+    },
+    {
+      title: "Currency",
+      key: "GMD_Currency",
+      dataIndex: "GMD_Currency",
+    },
+    {
+      title: "Status",
+      key: "FKState",
+      dataIndex: "FKState",
+      render: (text, record) => (isNotEmpty(record.FKState) ? invoiceStatus(record.FKState) : text),
+    },
+    {
+      title: "Invoice",
+      key: "GMD_Pic",
+      dataIndex: "GMD_Pic",
+      render: showPIc,
+    },
+  ];
+
+  const invoiceStatus = (FKState) => {
+    switch (FKState - 1) {
+      case 1:
+        return "Submitted";
+      case 2:
+        return "Travel Advisor";
+      case 3:
+        return "Finance Dept";
+      case 4:
+        return "Paid";
+      default:
+        return "";
+    }
+  };
+
+  function showPIc(text, record) {
+    let strPic = record.GMD_Pic;
+    //console.log(JSON.parse(strPic));
+    if (isNotEmpty(strPic)) {
+      return JSON.parse(strPic).map((item, index) => {
+        return <Image key={index} width={90} src={item.url} />;
+      });
+    } else {
+      return "";
+    }
+  }
+
+  return (
+    <Space direction="vertical" style={{ width: "100%" }}>
+      <Row gutter={16}>
+        <Col span={20}></Col>
+        <Col span={4}>
+          <BackBtn />
+        </Col>
+      </Row>
+      <Row>
+        <Col md={24} lg={24} xxl={24}>
+          <Table
+            rowKey={"GMD_SN"}
+            bordered
+            columns={invoicePaidColumns}
+            dataSource={invoiceZDDetail}
+          />
+        </Col>
+      </Row>
+    </Space>
+  );
+}
+
+export default History;

src/views/invoice/Index.jsx

@@ -72,7 +72,7 @@ function Index() {
 	return (
 		<Space direction="vertical" style={{ width: "100%" }}>
 			<Row gutter={16}>
-				<Col flex="auto">
+				<Col md={16} sm={16} xs={24}  >
 					<SearchForm
 					initialValue={{
 					dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
@@ -90,13 +90,15 @@ function Index() {
 					}}
 					/>
 				</Col>
-				<Col md={24} lg={4} xxl={4}>
-					<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/detail/0/338787`)}>
+				<Col md={8} sm={8} xs={24} >
+					<Space>
+						<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/detail/0/395074`)}>
 							Misc. Invoice
 						</Button>
 						<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/paid`)}>
 							Bank statement
 						</Button>
+					</Space>
 				</Col>
 			</Row>
 			<Row>