perf: 供应商选择: 自动获取默认选项

src/components/SearchInput.jsx

@@ -18,7 +18,10 @@ function DebounceSelect({ fetchOptions, debounceTimeout = 500, initLoad = false,
   const loadOptions = (value) => {
     fetchRef.current += 1;
     const fetchId = fetchRef.current;
-    if (value) setOptions([]);
+    const currentFilter = options.filter(option => (option?.label ?? '').toLowerCase().includes(value.toLowerCase()))
+    if (currentFilter.length!==0) { setOptions(currentFilter); return; }
+    else if (value) setOptions([]);
+    // if (value) setOptions([]);
     setFetching(true);
     fetchOptions(value).then((newOptions) => {
       const mapperOptions = newOptions.map(ele => objectMapper(ele, props.map));
@@ -36,6 +39,11 @@ function DebounceSelect({ fetchOptions, debounceTimeout = 500, initLoad = false,
     return debounce(loadOptions, debounceTimeout);
   }, [fetchOptions, debounceTimeout]);
 
+  const onChange = (v) => {
+    props.onChange && props.onChange(v);
+    setOptions(defaultOptions);
+  }
+
   return (
     <Select
       labelInValue
@@ -47,6 +55,7 @@ function DebounceSelect({ fetchOptions, debounceTimeout = 500, initLoad = false,
       // dropdownStyle={{width: '20rem'}}
       styles={{ root: { width: 'min(20rem, 100%)' }, popup: { root: { width: '20rem' } } }}
       {...props}
+      onChange={onChange}
       onSearch={debounceFetcher}
       notFoundContent={fetching ? <Spin size='small' /> : null}
       optionFilterProp='label'

src/components/VendorSelector.jsx

@@ -7,20 +7,33 @@ import { useTranslation } from 'react-i18next';
 import useFormStore from "@/stores/Form";
 import { usingStorage } from "@/hooks/usingStorage";
 import useAuthStore from '@/stores/Auth'
+import { isEmpty, objectMapper } from '@/utils/commons';
+
+const mapper = { travel_agency_name: 'label', travel_agency_id: 'value' };
 
 /**
  * 供应商列表
  */
 const fetchVendorList = async (q) => {
-  const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/VendorList`, { q });
+  const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/VendorList`, { q, useweb: -1 });
   return errcode !== 0 ? [] : result;
 };
 
+const fetchVendorListDefault = async (q = '') => {
+  const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/VendorList`, { q, useweb: 1 });
+  return errcode !== 0 ? [] : result.map(ele => objectMapper(ele, mapper));
+};
+
 const VendorSelector = ({ ...props }) => {
-	const { travelAgencyId: myAgencyId } = usingStorage();
-  const [{ travelAgencyName: myAgencyName }] = useAuthStore((state) => [state.currentUser]);
   const { t } = useTranslation();
   const [{ vendorList }, setCache] = useFormStore(state => [state.cache, state.setCache]);
+  const [vendorList0, setVendorList0] = useFormStore(state => [state.vendorList0, state.setVendorList0]);
+
+  useEffect(() => {
+    if (isEmpty(vendorList0)) {
+      fetchVendorListDefault().then(res => setVendorList0(res));
+    }
+  }, []);
 
   return (
     <>
@@ -31,9 +44,9 @@ const VendorSelector = ({ ...props }) => {
         maxTagCount={0}
         {...props}
         fetchOptions={fetchVendorList}
-        map={{ travel_agency_name: 'label', travel_agency_id: 'value' }}
+        map={mapper}
         onFetch={(v) => setCache({ vendorList: v })}
-        defaultOptions={vendorList?.length ? vendorList : [{ label: myAgencyName, value: myAgencyId, key: myAgencyId }]}
+        defaultOptions={vendorList0}
       />
     </>
   );

src/stores/Form.js

@@ -9,7 +9,10 @@ export const useFormStore = create(
     formValuesToSub: { agency: usingStorage().travelAgencyId },
     setFormValuesToSub: (values) => set((state) => ({ formValuesToSub: { ...state.formValuesToSub, ...values } })),
 
-    cache: {},
+    vendorList0: [],
+    setVendorList0: (values) => set((state) => ({ vendorList0: values })),
+
+    cache: { },
     setCache: (values) => set((state) => ({ cache: { ...state.cache, ...values } })),
 
   }), { name: 'formStore' })