refactor: Invoice/Paid, PaidDetail, 读取authstore; 使用搜索组件

src/views/invoice/Paid.jsx

@@ -1,121 +1,104 @@
-import { NavLink, useNavigate } from "react-router-dom";
+import { NavLink, useNavigate } from 'react-router-dom';
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
-import { observer } from "mobx-react";
+import { observer } from 'mobx-react';
-import { toJS } from "mobx";
+import { toJS } from 'mobx';
-import { Row, Col, Space, Button, Table, Input, DatePicker, Typography, App, Image } from "antd";
+import { Row, Col, Space, Button, Table, Input, DatePicker, Typography, App, Image } from 'antd';
-import { useStore } from "@/stores/StoreContext.js";
+import { useStore } from '@/stores/StoreContext.js';
-import * as config from "@/config";
+import * as config from '@/config';
-import { formatDate, isNotEmpty } from "@/utils/commons";
+import { formatDate, isNotEmpty } from '@/utils/commons';
 import usePresets from '@/hooks/usePresets';
+import SearchForm from '@/components/SearchForm';
+import useAuthStore from '@/stores/Auth';
+import dayjs from 'dayjs';
 const { Title } = Typography;
 
-function Paid(){
+function Paid() {
-	const { authStore, invoiceStore } = useStore();
+  const { invoiceStore } = useStore();
-	const { invoicePaid, search_date_start, search_date_end } = invoiceStore;
+  const { invoicePaid, search_date_start, search_date_end } = invoiceStore;
-    const [groupNo, onGroupNoChange] = useState("");
+  const [travelAgencyId] = useAuthStore((state) => [state.loginUser.travelAgencyId]);
-	const navigate = useNavigate();
+  const navigate = useNavigate();
-    const showTotal = total => `Total ${invoicePaid.length} items`;
+  const showTotal = (total) => `Total ${total} items`;
 
+  useEffect(() => {
+    invoiceStore.fetchInvoicePaid(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,
+    },
+  ];
 
-	useEffect (() => {
+  function showPIc(text, record) {
-		invoiceStore.fetchInvoicePaid(authStore.login.travelAgencyId,"","","");
+    let strPic = record.fl_pic;
-
+    //console.log(JSON.parse(strPic));
-	},[]);
+    if (isNotEmpty(strPic)) {
-    const invoicePaidColumns = [
+      return JSON.parse(strPic).map((item, index) => {
-		{
+        return <Image key={index} width={90} src={item.url} />;
-			title: "Payment ref.NO",
+      });
-			dataIndex: "fl_finaceNo",
+    } else {
-			key: "fl_finaceNo",
+      return '';
-			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));
-	    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%' }}>
-	return (
+      <Row gutter={16}>
-		<Space direction="vertical" style={{ width: "100%" }}>
+        <Col span={20}>
-			 <Row gutter={16}>
+          <SearchForm
-					<Col span={20}>
+            initialValue={{
-					</Col>
+              dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
-					<Col span={4}>
+            }}
-						<Button type="link" onClick={() => navigate("/invoice")}>
+            defaultValue={{
-							Back
+              shows: ['referenceNo', 'dates'],
-						</Button>
+              fieldProps: {
-					</Col>
+                referenceNo: { col: 5 },
-			</Row>
+                dates: { col: 10, label: 'Date' },
-			<Title level={3}></Title>
+              },
-			<Row gutter={16}>
+            }}
-				<Col md={24} lg={6} xxl={4}>
+            onSubmit={(err, formVal, filedsVal) => {
-					<Input
+              invoiceStore.fetchInvoicePaid(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.enddate);
-						placeholder="Reference Number"
+            }}
-						onChange={e => {
+          />
-							onGroupNoChange(e.target.value);
+        </Col>
-						}}
+        <Col span={4}>
-					/>
+          <Button type='link' onClick={() => navigate('/invoice')}>
-				</Col>
+            Back
-				<Col md={24} lg={8} xxl={6}>
+          </Button>
-					<Space direction="horizontal">
+        </Col>
-						Date
+      </Row>
-						<DatePicker.RangePicker format={config.DATE_FORMAT} allowClear={false} style={{ width: "100%" }} value={[search_date_start, search_date_end]} presets={usePresets()} onChange={invoiceStore.onDateRangeChange} />
+      <Row>
-					</Space>
+        <Col md={24} lg={24} xxl={24}>
-				</Col>
+          <Table bordered columns={invoicePaidColumns} dataSource={toJS(invoicePaid)} />
-				<Col md={24} lg={4} xxl={4}>
+        </Col>
-					<Button
+      </Row>
-						type="primary"
+    </Space>
-						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 columns={invoicePaidColumns} dataSource={toJS(invoicePaid)} />
-				</Col>
-			</Row>
-		</Space>
-	);
 }
 
 export default observer(Paid);

src/views/invoice/PaidDetail.jsx

@@ -6,16 +6,19 @@ 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";
+import useAuthStore from '@/stores/Auth';
+
 const { Title } = Typography;
 
 function PaidDetail(){
     const navigate = useNavigate();
-    const { authStore, invoiceStore } = useStore();
+    const { invoiceStore } = useStore();
     const { invoicePaidDetail } = invoiceStore;
+    const [travelAgencyId] = useAuthStore((state) => [state.loginUser.travelAgencyId]);
     const { flid } = useParams();
 
     useEffect(() => {
-        invoiceStore.fetchInvoicePaidDetail(authStore.login.travelAgencyId,flid);
+        invoiceStore.fetchInvoicePaidDetail(travelAgencyId,flid);
 
     },[flid]);