diff --git a/src/components/SearchInput.jsx b/src/components/SearchInput.jsx
index 19724a5..b76a497 100644
--- a/src/components/SearchInput.jsx
+++ b/src/components/SearchInput.jsx
@@ -1,29 +1,41 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState, useEffect } from 'react';
import { Select, Spin } from 'antd';
import { debounce, objectMapper } from '@/utils/commons';
-function DebounceSelect({ fetchOptions, debounceTimeout = 800, ...props }) {
+function DebounceSelect({ fetchOptions, debounceTimeout = 500, initLoad = false, defaultOptions=[], ...props }) {
const [fetching, setFetching] = useState(false);
const [options, setOptions] = useState([]);
const fetchRef = useRef(0);
+
+ // 首次加载获取选项
+ useEffect(() => {
+ setOptions(defaultOptions);
+ if (initLoad && defaultOptions.length===0) {
+ loadOptions(' ');
+ }
+ }, [initLoad]);
+
+ const loadOptions = (value) => {
+ fetchRef.current += 1;
+ const fetchId = fetchRef.current;
+ if (value) setOptions([]);
+ setFetching(true);
+ fetchOptions(value).then((newOptions) => {
+ const mapperOptions = newOptions.map(ele => objectMapper(ele, props.map));
+ if (fetchId !== fetchRef.current) {
+ // for fetch callback order
+ return;
+ }
+ setOptions(mapperOptions);
+ setFetching(false);
+ props.onFetch && props.onFetch(mapperOptions);
+ });
+ };
+
const debounceFetcher = useMemo(() => {
- const loadOptions = (value) => {
- fetchRef.current += 1;
- const fetchId = fetchRef.current;
- setOptions([]);
- setFetching(true);
- fetchOptions(value).then((newOptions) => {
- const mapperOptions = newOptions.map(ele => objectMapper(ele, props.map));
- if (fetchId !== fetchRef.current) {
- // for fetch callback order
- return;
- }
- setOptions(mapperOptions);
- setFetching(false);
- });
- };
return debounce(loadOptions, debounceTimeout);
}, [fetchOptions, debounceTimeout]);
+
return (
: null}
diff --git a/src/components/VendorSelector.jsx b/src/components/VendorSelector.jsx
index 639db96..bb3915a 100644
--- a/src/components/VendorSelector.jsx
+++ b/src/components/VendorSelector.jsx
@@ -4,6 +4,7 @@ import SearchInput from './SearchInput';
import { fetchJSON } from '@/utils/request';
import { HT_HOST } from '@/config';
import { useTranslation } from 'react-i18next';
+import useFormStore from "@/stores/Form";
//供应商列表
export const fetchVendorList = async (q) => {
@@ -13,15 +14,19 @@ export const fetchVendorList = async (q) => {
const VendorSelector = ({ ...props }) => {
const { t } = useTranslation();
+ const [{ vendorList }, setCache] = useFormStore(state => [state.cache, state.setCache]);
+
return (
<>
- setCache({ vendorList: v })}
+ defaultOptions={vendorList}
/>
>
);
diff --git a/src/stores/Form.js b/src/stores/Form.js
index d81fff6..78af78a 100644
--- a/src/stores/Form.js
+++ b/src/stores/Form.js
@@ -7,6 +7,10 @@ export const useFormStore = create(
setFormValues: (values) => set((state) => ({ formValues: { ...state.formValues, ...values } })),
formValuesToSub: {},
setFormValuesToSub: (values) => set((state) => ({ formValuesToSub: { ...state.formValuesToSub, ...values } })),
+
+ cache: {},
+ setCache: (values) => set((state) => ({ cache: { ...state.cache, ...values } })),
+
}), { name: 'formStore' })
);
export default useFormStore;