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("VEI_SN", this.root.authStore.login.travelAgencyId);
+		formData.append("LMI_SN", useAuthStore.getState().loginUser.userId);
+		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);
@@ -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,66 +82,26 @@ function Index() {
 
 	return (
 		<Space direction="vertical" style={{ width: "100%" }}>
-			<Title level={3}></Title>
     <Row gutter={16}>
-				<Col md={24} lg={4} xxl={4}>
-					<Input
-						placeholder="Reference Number"
-						onChange={e => {
-							onGroupNoChange(e.target.value);
-						}}
-					/>
-				</Col>
-				<Col md={24} lg={4} xxl={3}>
-
-					<Select
-					defaultValue="Status"
-					style={{
-						width: 220,
+    <Col flex="auto">
+  <SearchForm
+    initialValue={{
+      dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
     }}
-					onChange={ value => {onOrderTypeChange(value);}}
-					options={[
-						{
-						value: '0',
-						label: 'Status',
-						},
-						{
-						value: '1',
-						label: 'Not submitted',
-						},
-						{
-						value: '2',
-						label: 'Submitted',
-						},
-						{
-						value: '3',
-						label: 'Travel advisor approved',
+    defaultValue={{
+      shows: ['referenceNo', 'invoiceStatus', 'dates'],
+      fieldProps: {
+        referenceNo: { col: 5},
+        invoiceStatus: { col: 4},
+        dates: { col: 10 },
       },
-						{
-						value: '4',
-						label: 'Finance Dept arrproved',
-						},
-						{
-							value: '5',
-							label: 'Paid',
-						},
-					]}
+    }}
+    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={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
@@ -145,7 +111,7 @@ function Index() {
       </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)} />