查看账单付款记录功能

src/main.jsx

@@ -23,6 +23,8 @@ 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 InvoicePaid from "@/views/invoice/Paid";
+import InvoicePaidDetail from "@/views/invoice/PaidDetail";
 
 
 configure({ 
@@ -51,6 +53,8 @@ const router = createBrowserRouter([
       { path: "notice/:CCP_BLID", element: <NoticeDetail />},
       { path: "invoice",element:<InvoiceIndex />},
       { path: "invoice/detail/:GMDSN/:GSN",element:<InvoiceDetail />},
+      { path: "invoice/paid",element:<InvoicePaid />},
+      { path: "invoice/paid/detail/:flid",element:<InvoicePaidDetail />},
     ]
   },
   {

src/stores/Invoice.js

@@ -21,6 +21,9 @@ class Invoice {
 	invoicePicList = []; //多账单图片列表数组
 	invoiceFormData = { info_money: 0, info_Currency: "", info_date: "" }; //存储form数据
 
+	invoicePaid = [] ; //支付账单列表
+	invoicePaidDetail = []; //每期账单详细
+
 	loading = false;
 	search_date_start = dayjs().subtract(2, "M").startOf("M");
 	search_date_end = dayjs().endOf("M");
@@ -249,6 +252,97 @@ class Invoice {
 		}
 	}
 
+	fetchInvoicePaid(VEI_SN, GroupNo, DateStart, DateEnd) {
+		this.loading = true;
+		const fetchUrl = prepareUrl(HT_HOST + "/service-Cooperate/Cooperate/GetInvoicePaid")
+			.append("VEI_SN", VEI_SN)
+			.append("GroupNo", GroupNo)
+			.append("DateStart", DateStart)
+			.append("DateEnd", DateEnd)
+			.append("TotalNum", 0)
+			.append("PageSize", 2000)
+			.append("PageIndex", 1)
+			.append("token",this.root.authStore.login.token)
+			.build();
+
+		return fetchJSON(fetchUrl).then(json => {
+			runInAction(() => {
+				this.loading = false;
+				if (json.errcode == 0) {
+					if (isNotEmpty(json.Result)) {
+						this.invoicePaid = json.Result.map((data, index) => {
+							return {
+								key: data.fl_id,
+								fl_finaceNo: data.fl_finaceNo,
+								fl_vei_sn: data.fl_vei_sn,
+								fl_year: data.fl_year,
+								fl_month: data.fl_month,
+								fl_memo: data.fl_memo,
+								fl_adddate: data.fl_adddate,
+								fl_addUserSn: data.fl_addUserSn,
+								fl_updateUserSn: data.fl_updateUserSn,
+								fl_updatetime: data.fl_updatetime,
+								fl_state: data.fl_state,
+								fl_paid: data.fl_paid,
+								fl_pic: data.fl_pic,
+								fcount: data.fcount,
+								pSum: data.pSum,
+							};
+						});
+					} else {
+						this.invoicePaid = [];
+					}
+				} else {
+					throw new Error(json.errmsg + ": " + json.errcode);
+				}
+			});
+		});
+
+	}
+
+
+	fetchInvoicePaidDetail(VEI_SN,FLID){
+		this.loading = true;
+		const fetchUrl = prepareUrl(HT_HOST + "/service-Cooperate/Cooperate/GetInvoicePaidDetail")
+			.append("VEI_SN", VEI_SN)
+			.append("fl_id", FLID)
+			.append("token",this.root.authStore.login.token)
+			.build();
+
+		return fetchJSON(fetchUrl).then(json => {
+			runInAction(() => {
+				this.loading = false;
+				if (json.errcode == 0) {
+					if (isNotEmpty(json.Result)) {
+						this.invoicePaidDetail = json.Result.map((data, index) => {
+							return {
+								key: data.fl2_id,
+								fl2_fl_id: data.fl2_fl_id,
+								fl2_GroupName: data.fl2_GroupName,
+								fl2_gri_sn: data.fl2_gri_sn,
+								fl2_gmd_sn: data.fl2_gmd_sn,
+								fl2_wl: data.fl2_wl,
+								fl2_ArriveDate: data.fl2_ArriveDate,
+								fl2_price: data.fl2_price,
+								fl2_state: data.fl2_state,
+								fl2_updatetime: data.fl2_updatetime,
+								fl2_updateUserSn: data.fl2_updateUserSn,
+								fl2_memo: data.fl2_memo,
+								fl2_memo2: data.fl2_memo2,
+								fl2_paid: data.fl2_paid,
+								fl2_pic: data.fl2_pic,
+							};
+						});
+					} else {
+						this.invoicePaidDetail = [];
+					}
+				} else {
+					throw new Error(json.errmsg + ": " + json.errcode);
+				}
+			});
+		});
+	}
+
 	/* 测试数据 */
 	//账单列表范例数据
 	testData = [

src/views/invoice/Index.jsx

@@ -102,6 +102,11 @@ function Index() {
 					<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/detail/0/338787`)}>
 						Misc. Invoice
 					</Button>
+					</Col>
+					<Col md={24} lg={4} xxl={4}>	
+					<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/paid`)}>
+						Bank statement
+					</Button>
 				</Col>
 			</Row>
 			<Title level={3}></Title>

src/views/invoice/Paid.jsx

@@ -0,0 +1,105 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { toJS } from "mobx";
+import { Row, Col, Space, Button, Table, Input, DatePicker, Typography, App, Image } from "antd";
+import { useStore } from "@/stores/StoreContext.js";
+import * as config from "@/config";
+import { formatDate, isNotEmpty } from "@/utils/commons";
+const { Title } = Typography;
+
+function Paid(){
+	const { authStore, invoiceStore } = useStore();
+	const { invoicePaid, search_date_start, search_date_end } = invoiceStore;
+    const [groupNo, onGroupNoChange] = useState("");
+	const navigate = useNavigate();
+    const showTotal = total => `Total ${invoicePaid.length} items`;
+
+
+	useEffect (() => {
+		invoiceStore.fetchInvoicePaid(authStore.login.travelAgencyId,"","","");
+
+	},[]);
+    const invoicePaidColumns = [
+		{
+			title: "Payment ref.NO",
+			dataIndex: "fl_finaceNo",
+			key: "fl_finaceNo",
+			render: (text, record) => <NavLink to={`/invoice/paid/detail/${record.key}`}>{text}</NavLink>,
+		},
+		{
+			title: "Payment date",
+			key: "fl_adddate",
+			dataIndex: "fl_adddate",
+			render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
+		},
+		{
+			title: "Number of bills",
+			key: "fcount",
+			dataIndex: "fcount",
+		},
+		{
+			title: "Total amount",
+			key: "pSum",
+            dataIndex: "pSum",
+			//render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
+		},
+        {
+			title: "Bank statement",
+			key: "fl_pic",
+            dataIndex: "fl_pic",
+			render: showPIc,
+		},
+	];
+
+    function showPIc(text,record) {
+        let strPic = record.fl_pic;
+        //console.log(JSON.parse(strPic));
+        return (
+
+            JSON.parse(strPic).map((item,index) => {
+                return <Image key={index} width={90} src={item.url} />;
+            })
+        );
+    }
+
+
+
+	return (
+		<Space direction="vertical" style={{ width: "100%" }}>
+			<Title level={3}></Title>
+			<Row gutter={16}>
+				<Col md={24} lg={6} xxl={4}>
+					<Input
+						placeholder="Reference Number"
+						onChange={e => {
+							onGroupNoChange(e.target.value);
+						}}
+					/>
+				</Col>
+				<Col md={24} lg={8} xxl={6}>
+					<Space direction="horizontal">
+						Date
+						<DatePicker.RangePicker format={config.DATE_FORMAT} allowClear={false} style={{ width: "100%" }} value={[search_date_start, search_date_end]} presets={config.DATE_PRESETS} onChange={invoiceStore.onDateRangeChange} />
+					</Space>
+				</Col>
+				<Col md={24} lg={4} xxl={4}>
+					<Button
+						type="primary"
+						loading={invoiceStore.loading}
+						onClick={() => invoiceStore.fetchInvoicePaid(authStore.login.travelAgencyId, groupNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT))}>
+						Search
+					</Button>
+				</Col>
+			</Row>
+			<Title level={3}></Title>
+			<Row>
+				<Col md={24} lg={24} xxl={24}>
+					<Table bordered pagination={{ defaultPageSize: 20, showTotal: showTotal }} columns={invoicePaidColumns} dataSource={toJS(invoicePaid)} />
+				</Col>
+			</Row>
+		</Space>
+	);
+}
+
+export default observer(Paid);

src/views/invoice/PaidDetail.jsx

@@ -0,0 +1,67 @@
+import { NavLink, useNavigate ,useParams} from "react-router-dom";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { toJS } from "mobx";
+import { Row, Col, Space, Button, Table,  Typography } from "antd";
+import { useStore } from "@/stores/StoreContext.js";
+import * as config from "@/config";
+import { formatDate, isNotEmpty } from "@/utils/commons";
+const { Title } = Typography;
+
+function PaidDetail(){
+    const navigate = useNavigate();
+    const { authStore, invoiceStore } = useStore();
+    const { invoicePaidDetail } = invoiceStore;
+    const { flid } = useParams();
+
+    useEffect(() => {
+        invoiceStore.fetchInvoicePaidDetail(authStore.login.travelAgencyId,flid);
+
+    },[flid]);
+
+    const invoicePaidColumns = [
+		{
+			title: "Ref.NO",
+			dataIndex: "fl2_GroupName",
+			key: "fl2_GroupName",
+		},
+		{
+			title: "Arrival date",
+			key: "fl2_ArriveDate",
+			dataIndex: "fl2_ArriveDate",
+			render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
+		},
+		{
+			title: "Payment amount",
+			key: "fl2_price",
+			dataIndex: "fl2_price",
+		},
+		{
+			title: "Currency",
+			key: "fl2_memo",
+            dataIndex: "fl2_memo",
+		},
+	];
+
+    return (
+		<Space direction="vertical" style={{ width: "100%" }}>
+            <Row gutter={16}>
+					<Col span={20}>
+					</Col>
+					<Col span={4}>
+						<Button type="link" onClick={() => navigate("/invoice/paid")}>
+							Back
+						</Button>
+					</Col>
+			</Row>
+			<Title level={3}></Title>
+			<Row>
+				<Col md={24} lg={24} xxl={24}>
+					<Table bordered columns={invoicePaidColumns} dataSource={toJS(invoicePaidDetail)} />
+				</Col>
+			</Row>
+		</Space>
+	);
+}
+
+export default observer(PaidDetail);