添加远程检索

src/pages/transaction/stockSellStorage/bills/components/BillsForm/index.tsx

@@ -10,6 +10,7 @@ import { SaveOutlined, PlusOutlined } from '@ant-design/icons';
 import { createFormActions, FormEffectHooks } from '@formily/antd';
 import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
 import { PublicApi } from '@/services/api';
+import { useLinkageUtils } from '@/utils/formEffectUtils';
 import ReutrnEle from '@/components/ReturnEle';
 import NiceForm from '@/components/NiceForm';
 import ModalTable from '@/components/ModalTable'; 
@@ -43,6 +44,7 @@ import { createEffects } from './effects';
 const addSchemaAction = createFormActions();
 const { 
   onFormInputChange$, 
+  onFormInit$, 
 } = FormEffectHooks;
 
 interface BillsFormProps {
@@ -98,6 +100,28 @@ const BillsForm: React.FC<BillsFormProps> = ({
     },
   ]
 
+  // 获取品牌
+  const fetchBrand = async (name = '') => {
+    const res = await PublicApi.getProductSelectGetSelectBrand({
+      name, 
+    });
+    if (res.code === 1000) {
+      return res.data;
+    }
+    return [];
+  }
+  
+  // 获取会员品类
+  const fetchCustomerCategory = async (name = '') => {
+    const res = await PublicApi.getProductSelectGetSelectCustomerCategory({
+      name, 
+    });
+    if (res.code === 1000) {
+      return res.data;
+    }
+    return [];
+  }
+
   // 获取单据详情
   const getBillInfo = () => {
     if (!id) {
@@ -878,12 +902,43 @@ const BillsForm: React.FC<BillsFormProps> = ({
                   SearchSelect, 
                 }, 
                 effects: ($, actions) => {
+                  const linkage = useLinkageUtils();
+
                   useStateFilterSearchLinkageEffect(
                     $,
                     actions,
                     'name',
                     FORM_FILTER_PATH,
                   );
+                  useAsyncSelect('brandId', fetchBrand, ['name', 'id']);
+                  useAsyncSelect('customerCategoryId', fetchCustomerCategory, ['name', 'id']);
+
+                  onFormInit$().subscribe(() => {
+                    // 初始化远程检索逻辑
+                    linkage.componentProps('customerCategoryId', {
+                      onSearch: async value => {
+                        linkage.loading('customerCategoryId');
+                        const dataSource = await fetchCustomerCategory(value);
+                        linkage.enum('customerCategoryId', dataSource.map(item => ({
+                          label: item.name,
+                          value: item.id,
+                        })));
+                        linkage.loaded('customerCategoryId');
+                      }, 
+                    });
+                    // 初始化远程检索逻辑
+                    linkage.componentProps('brandId', {
+                      onSearch: async value => {
+                        linkage.loading('brandId');
+                        const dataSource = await fetchCustomerCategory(value);
+                        linkage.enum('brandId', dataSource.map(item => ({
+                          label: item.name,
+                          value: item.id,
+                        })));
+                        linkage.loaded('brandId');
+                      }, 
+                    });
+                  });
                 }, 
                 inline: false, 
               }

src/pages/transaction/stockSellStorage/bills/components/BillsForm/schema/index.ts

@@ -779,24 +779,24 @@ export const goodsSearchSchema: ISchema = {
             },
             customerCategoryId: {
               type: 'string', 
-              'x-component': 'SearchSelect', 
+              enum: [], 
               'x-component-props': {
-                placeholder: '品类',
-                fetchSearch: PublicApi.getProductSelectGetSelectCustomerCategory,
-                style: {
-                  width: '100%', 
-                }
+                placeholder: '品类', 
+                showSearch: true, 
+                defaultActiveFirstOption: false, 
+                showArrow: true, 
+                filterOption: false, 
               },
             },
             brandId: {
               type: 'string', 
-              'x-component': 'SearchSelect', 
+              enum: [], 
               'x-component-props': {
-                placeholder: '品牌',
-                fetchSearch: PublicApi.getProductSelectGetSelectBrand,
-                style: {
-                  width: '100%', 
-                }
+                placeholder: '品牌', 
+                showSearch: true, 
+                defaultActiveFirstOption: false, 
+                showArrow: true, 
+                filterOption: false, 
               },
             },
             submit: {