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

src/views/invoice/Paid.jsx

@@ -1,54 +1,55 @@
-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() {
-	const { authStore, invoiceStore } = useStore();
+  const { invoiceStore } = useStore();
   const { invoicePaid, search_date_start, search_date_end } = invoiceStore;
-    const [groupNo, onGroupNoChange] = useState("");
+  const [travelAgencyId] = useAuthStore((state) => [state.loginUser.travelAgencyId]);
   const navigate = useNavigate();
-    const showTotal = total => `Total ${invoicePaid.length} items`;
+  const showTotal = (total) => `Total ${total} items`;
-
 
   useEffect(() => {
-		invoiceStore.fetchInvoicePaid(authStore.login.travelAgencyId,"","","");
+    invoiceStore.fetchInvoicePaid(travelAgencyId, '', '', '');
-
   }, []);
   const invoicePaidColumns = [
     {
-			title: "Payment ref.NO",
+      title: 'Payment ref.NO',
-			dataIndex: "fl_finaceNo",
+      dataIndex: 'fl_finaceNo',
-			key: "fl_finaceNo",
+      key: 'fl_finaceNo',
       render: (text, record) => <NavLink to={`/invoice/paid/detail/${record.key}`}>{text}</NavLink>,
     },
     {
-			title: "Payment date",
+      title: 'Payment date',
-			key: "fl_adddate",
+      key: 'fl_adddate',
-			dataIndex: "fl_adddate",
+      dataIndex: 'fl_adddate',
-			render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
+      render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ''),
     },
     {
-			title: "Number of bills",
+      title: 'Number of bills',
-			key: "fcount",
+      key: 'fcount',
-			dataIndex: "fcount",
+      dataIndex: 'fcount',
     },
     {
-			title: "Total amount",
+      title: 'Total amount',
-			key: "pSum",
+      key: 'pSum',
-            dataIndex: "pSum",
+      dataIndex: 'pSum',
       //render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
     },
     {
-			title: "Bank statement",
+      title: 'Bank statement',
-			key: "fl_pic",
+      key: 'fl_pic',
-            dataIndex: "fl_pic",
+      dataIndex: 'fl_pic',
       render: showPIc,
     },
   ];
@@ -57,58 +58,40 @@ function Paid(){
     let strPic = record.fl_pic;
     //console.log(JSON.parse(strPic));
     if (isNotEmpty(strPic)) {
-			return (
+      return JSON.parse(strPic).map((item, index) => {
-
-				JSON.parse(strPic).map((item,index) => {
         return <Image key={index} width={90} src={item.url} />;
-				})
+      });
-
-       		 );
     } else {
-			return "";
+      return '';
     }
-
   }
 
-
-
   return (
-		<Space direction="vertical" style={{ width: "100%" }}>
+    <Space direction='vertical' style={{ width: '100%' }}>
       <Row gutter={16}>
         <Col span={20}>
-					</Col>
+          <SearchForm
-					<Col span={4}>
+            initialValue={{
-						<Button type="link" onClick={() => navigate("/invoice")}>
+              dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
-							Back
+            }}
-						</Button>
+            defaultValue={{
-					</Col>
+              shows: ['referenceNo', 'dates'],
-			</Row>
+              fieldProps: {
-			<Title level={3}></Title>
+                referenceNo: { col: 5 },
-			<Row gutter={16}>
+                dates: { col: 10, label: 'Date' },
-				<Col md={24} lg={6} xxl={4}>
+              },
-					<Input
+            }}
-						placeholder="Reference Number"
+            onSubmit={(err, formVal, filedsVal) => {
-						onChange={e => {
+              invoiceStore.fetchInvoicePaid(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.enddate);
-							onGroupNoChange(e.target.value);
             }}
           />
         </Col>
-				<Col md={24} lg={8} xxl={6}>
+        <Col span={4}>
-					<Space direction="horizontal">
+          <Button type='link' onClick={() => navigate('/invoice')}>
-						Date
+            Back
-						<DatePicker.RangePicker format={config.DATE_FORMAT} allowClear={false} style={{ width: "100%" }} value={[search_date_start, search_date_end]} presets={usePresets()} 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 columns={invoicePaidColumns} dataSource={toJS(invoicePaid)} />

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]);