列表页搜索条件添加订单状态，日历也优化为可以清除日期。

src/stores/Invoice.js

@@ -30,11 +30,11 @@ class Invoice {
 
 	onDateRangeChange = dates => {
 		console.log(dates);
-		this.search_date_start = dates[0];
-		this.search_date_end = dates[1];
+		this.search_date_start = dates==null? null: dates[0];
+		this.search_date_end = dates==null? null: dates[1];
 	};
 
-	fetchInvoiceList(VEI_SN, GroupNo, DateStart, DateEnd) {
+	fetchInvoiceList(VEI_SN, GroupNo, DateStart, DateEnd,OrderType) {
 		this.loading = true;
 		const fetchUrl = prepareUrl(HT_HOST + "/service-cusservice/PTSearchGMBPageList")
 			.append("VEI_SN", VEI_SN)
@@ -50,6 +50,7 @@ class Invoice {
 			.append("TotalNum", 0)
 			.append("PageSize", 2000)
 			.append("PageIndex", 1)
+			.append("PayState",OrderType)
 			.append("token",this.root.authStore.login.token)
 			.build();
 

src/views/invoice/Index.jsx

@@ -2,7 +2,7 @@ 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, Steps } from "antd";
+import { Row, Col, Space, Button, Table, Input, DatePicker, Typography, App, Steps ,Select } from "antd";
 import { useStore } from "@/stores/StoreContext.js";
 import * as config from "@/config";
 import { formatDate, isNotEmpty } from "@/utils/commons";
@@ -14,6 +14,7 @@ function Index() {
 	const { authStore, invoiceStore } = useStore();
 	const { invoiceList, search_date_start, search_date_end } = invoiceStore;
 	const [groupNo, onGroupNoChange] = useState("");
+	const [OrderType, onOrderTypeChange] = useState(0); //订单状态搜索
 	const navigate = useNavigate();
 	const { notification } = App.useApp();
 	const showTotal = total => `Total ${invoiceList.length} items`;
@@ -76,7 +77,7 @@ function Index() {
 		<Space direction="vertical" style={{ width: "100%" }}>
 			<Title level={3}></Title>
 			<Row gutter={16}>
-				<Col md={24} lg={6} xxl={4}>
+				<Col md={24} lg={4} xxl={4}>
 					<Input
 						placeholder="Reference Number"
 						onChange={e => {
@@ -84,17 +85,53 @@ function Index() {
 						}}
 					/>
 				</Col>
+				<Col md={24} lg={2} xxl={3}>				
+					
+					<Select
+					defaultValue="Status"
+					style={{
+						width: 240,
+					}}
+					onChange={ value => {onOrderTypeChange(value);}}
+					options={[
+						{
+						value: '0',
+						label: 'Status',
+						},
+						{
+						value: '1',
+						label: 'Not submitted',
+						},
+						{
+						value: '2',
+						label: 'Submitted',
+						},
+						{
+						value: '3',
+						label: 'Travel advisor approved',
+						},
+						{
+						value: '4',
+						label: 'Finance Dept arrproved',
+						},
+						{
+							value: '5',
+							label: 'Paid',
+						},
+					]}
+					/>
+				</Col>
 				<Col md={24} lg={8} xxl={6}>
 					<Space direction="horizontal">
 						Arrival 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} />
+						<DatePicker.RangePicker format={config.DATE_FORMAT} allowClear={true} style={{ width: "100%" }} defaultValue={[search_date_start, search_date_end]} presets={config.DATE_PRESETS} onChange={invoiceStore.onDateRangeChange} allowEmpty={true} />
 					</Space>
 				</Col>
 				<Col md={24} lg={4} xxl={4}>
 					<Button
 						type="primary"
 						loading={invoiceStore.loading}
-						onClick={() => invoiceStore.fetchInvoiceList(authStore.login.travelAgencyId, groupNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT))}>
+						onClick={() => invoiceStore.fetchInvoiceList(authStore.login.travelAgencyId, groupNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT),OrderType)}>
 						Search
 					</Button>
 				</Col>
@@ -118,3 +155,4 @@ function Index() {
 }
 
 export default observer(Index);
+//value={[search_date_start, search_date_end]} 20230803 zp 去掉日期默认可以清空