refactor: Invoice/index, Detail, 读取authstore; 使用搜索组件

src/stores/Invoice.js

@@ -8,7 +8,7 @@ import dayjs from "dayjs";
 
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
-
+import useAuthStore from '@/stores/Auth';
 
 const initialState = {
   invoiceList: [], //账单列表
@@ -124,7 +124,7 @@ export class Invoice {
 
 	fetchInvoiceDetail(GMDSN, GSN) {
 		const fetchUrl = prepareUrl(HT_HOST + "/service-cusservice/PTGetZDDetail")
-			.append("VEI_SN", this.root.authStore.login.travelAgencyId)
+			.append("VEI_SN", useAuthStore.getState().loginUser.travelAgencyId)
 			.append("GRI_SN", GSN)
 			.append("GMD_SN", GMDSN)
 			.append("LGC", 1)
@@ -231,7 +231,7 @@ export class Invoice {
 	postEditInvoiceDetail(GMD_SN, Currency, Cost, PayDate, Pic, Memo) {
 		let postUrl = HT_HOST + "/service-cusservice/EditSupplierFK";
 		let formData = new FormData();
-		formData.append("LMI_SN", this.root.authStore.login.userId);
+		formData.append("LMI_SN", useAuthStore.getState().loginUser.userId);
 		formData.append("GMD_SN", GMD_SN);
 		formData.append("Currency", Currency);
 		formData.append("Cost", Cost);
@@ -249,8 +249,8 @@ export class Invoice {
 	postAddInvoice(GRI_SN, Currency, Cost, PayDate, Pic, Memo) {
 		let postUrl = HT_HOST + "/service-cusservice/AddSupplierFK";
 		let formData = new FormData();
-		formData.append("LMI_SN", this.root.authStore.login.userId);
+		formData.append("LMI_SN", useAuthStore.getState().loginUser.userId);
-		formData.append("VEI_SN", this.root.authStore.login.travelAgencyId);
+		formData.append("VEI_SN", useAuthStore.getState().loginUser.travelAgencyId);
 		formData.append("GRI_SN", GRI_SN);
 		formData.append("Currency", Currency);
 		formData.append("Cost", Cost);

src/views/invoice/Detail.jsx

@@ -8,6 +8,7 @@ import { PlusOutlined, AuditOutlined, SmileOutlined, SolutionOutlined, EditOutli
 import { isNotEmpty } from "@/utils/commons";
 import * as config from "@/config";
 import dayjs from "dayjs";
+import useAuthStore from '@/stores/Auth';
 
 const { Title,Text } = Typography;
 const { TextArea } = Input;
@@ -15,7 +16,10 @@ const { TextArea } = Input;
 function Detail() {
 	const navigate = useNavigate();
 	const { GMDSN, GSN } = useParams();
-	const { invoiceStore, authStore } = useStore();
+	const { invoiceStore, } = useStore();
+
+  const [travelAgencyId, token] = useAuthStore((state) => [state.loginUser.travelAgencyId, state.loginUser.token]);
+
 	const { invoicekImages, invoiceGroupInfo, invoiceProductList, invoiceCurrencyList, invoiceZDDetail } = invoiceStore;
 	const [form] = Form.useForm();
 	const [dataLoading, setDataLoading] = useState(false);
@@ -35,7 +39,7 @@ function Detail() {
 		invoiceStore
 			.fetchInvoiceDetail(GMDSN, GSN)
 			.then(json => {
-				let ZDDetail = json.ZDDetail;			
+				let ZDDetail = json.ZDDetail;
 				if (isNotEmpty(ZDDetail)) {
 					let arrLen = ZDDetail.length;
 					const formData = ZDDetail.map((data, index) => {
@@ -122,7 +126,7 @@ function Detail() {
 						description: "Success Submit!",
 						placement: "top",
 						duration: 4,
-					});										
+					});
 				}
 			});
 		}
@@ -272,13 +276,13 @@ function Detail() {
 														},
 													]}
 												>
-													<DatePicker picker="month" />													
+													<DatePicker picker="month" />
-												</Form.Item>												
+												</Form.Item>
-												<Text type="secondary">Payment is arranged during the last week of each month. If the invoice is issued after the 20th, please select the following month for payment. For urgent payments, please contact the travel advisor. </Text>												
+												<Text type="secondary">Payment is arranged during the last week of each month. If the invoice is issued after the 20th, please select the following month for payment. For urgent payments, please contact the travel advisor. </Text>
 												<Form.Item name="info_gmdsn" hidden={true}>
 													<input />
 												</Form.Item>
-												<br/>	
+												<br/>
 												<Form.Item>
 													<Button type="primary" htmlType="submit">
 														Submit
@@ -290,7 +294,7 @@ function Detail() {
 													<Upload
 														name="ghhfile"
 														multiple={true}
-														action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`}
+														action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${travelAgencyId}&FilePathName=invoice&token=${token}`}
 														fileList={fileList}
 														listType="picture-card"
 														onChange={handleChange}

src/views/invoice/Index.jsx

@@ -7,13 +7,19 @@ import { useStore } from "@/stores/StoreContext.js";
 import * as config from "@/config";
 import { formatDate, isNotEmpty } from "@/utils/commons";
 import { AuditOutlined, SmileOutlined, SolutionOutlined, EditOutlined } from "@ant-design/icons";
+import useAuthStore from '@/stores/Auth';
 import usePresets from '@/hooks/usePresets';
+import SearchForm from '@/components/SearchForm';
+import dayjs from 'dayjs';
 
 const { Title } = Typography;
 
 function Index() {
 	const { authStore, invoiceStore } = useStore();
 	const { invoiceList, search_date_start, search_date_end } = invoiceStore;
+
+  const [travelAgencyId ] = useAuthStore((state) => [state.loginUser.travelAgencyId]);
+
 	const [groupNo, onGroupNoChange] = useState("");
 	const [OrderType, onOrderTypeChange] = useState(0); //订单状态搜索
 	const navigate = useNavigate();
@@ -76,76 +82,36 @@ function Index() {
 
 	return (
 		<Space direction="vertical" style={{ width: "100%" }}>
-			<Title level={3}></Title>
+    <Row gutter={16}>
-			<Row gutter={16}>
+    <Col flex="auto">
-				<Col md={24} lg={4} xxl={4}>
+  <SearchForm
-					<Input
+    initialValue={{
-						placeholder="Reference Number"
+      dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
-						onChange={e => {
+    }}
-							onGroupNoChange(e.target.value);
+    defaultValue={{
-						}}
+      shows: ['referenceNo', 'invoiceStatus', 'dates'],
-					/>
+      fieldProps: {
-				</Col>
+        referenceNo: { col: 5},
-				<Col md={24} lg={4} xxl={3}>
+        invoiceStatus: { col: 4},
+        dates: { col: 10 },
+      },
+    }}
+    onSubmit={(err, formVal, filedsVal) => {
+      // fetchInvoiceList(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.enddate, formVal.invoiceStatus);
+      invoiceStore.fetchInvoiceList(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.enddate, formVal.invoiceStatus)
+    }}
+    />
+    </Col>
+    <Col md={24} lg={4} xxl={4}>
+      <Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/detail/0/338787`)}>
+        Misc. Invoice
+      </Button>
+      <Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/paid`)}>
+        Bank statement
+      </Button>
+    </Col>
+    </Row>
 
-					<Select
-					defaultValue="Status"
-					style={{
-						width: 220,
-					}}
-					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={true} style={{ width: "100%" }} defaultValue={[search_date_start, search_date_end]} presets={usePresets()} 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==null?null:search_date_start.format(config.DATE_FORMAT), search_date_end==null?null:search_date_end.format(config.DATE_FORMAT),OrderType)}>
-						Search
-					</Button>
-				</Col>
-				<Col md={24} lg={4} xxl={4}>
-					<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/detail/0/338787`)}>
-						Misc. Invoice
-					</Button>
-					<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/paid`)}>
-						Bank statement
-					</Button>
-					</Col>
-			</Row>
-			<Title level={3}></Title>
 			<Row>
 				<Col md={24} lg={24} xxl={24}>
 					<Table bordered pagination={{ defaultPageSize: 20, showTotal: showTotal }} columns={invoiceListColumns} dataSource={toJS(invoiceList)} />