补充商品筛选

src/components/ModalTable/index.tsx

@@ -38,7 +38,7 @@ const ModalTable:React.FC<ModalTableProps> = (props) => {
         tableType='small'
         currentRef={selfRef}
         formRender={(child, ps) => <Row justify='space-between'>
-          <Col>{child}</Col>
+          <Col span={18}>{child}</Col>
           <Col style={{marginTop: 4}}>{ps}</Col>
         </Row>}
         {...resetTable}

src/components/NiceForm/components/SearchSelect.tsx

@@ -128,6 +128,9 @@ const SearchSelect = (props: ISchemaFieldComponentProps) => {
       filterOption={false}
       loading={loading}
       options={dataSource}
+      getPopupContainer={triggerNode => {
+        return triggerNode
+      }}
       value={props.value}
       dropdownRender={originNode => <SelectContent confirm={confirm} resetField={resetField} parentRef={ref} handleChange={handleChange} multiple={multiple} value={props.value}>{originNode}</SelectContent>}
       {...multipleProps}

src/global/styles/global.less

@@ -206,6 +206,8 @@ h6 {
     }
   }
 
+ 
+
   .tree-node-circle {
     width: 4px;
     height: 4px;
@@ -267,3 +269,10 @@ h6 {
   top: 100%;
   font-size: 12px;
 }
+
+ // 强制覆盖下拉框固定位置
+ .fixed-ant-selected-down {
+  .ant-select-dropdown {
+    top: 36px !important;
+  }
+}
\ No newline at end of file

src/pages/repositories/components/PositionSetting.tsx

@@ -15,6 +15,11 @@ import { Button, message } from 'antd'
 import NiceForm from '@/components/NiceForm'
 import ModalTable from '@/components/ModalTable'
 import { GlobalConfig } from '@/global/config'
+import { FORM_FILTER_PATH } from '@/formSchema/const'
+import SearchSelect from '@/components/NiceForm/components/SearchSelect'
+import Search from '@/components/NiceForm/components/Search'
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
+import Submit from '@/components/NiceForm/components/Submit'
 
 export interface PositionSettingProps {
   addSchemaAction: ISchemaFormActions,
@@ -221,9 +226,59 @@ const PositionSetting:React.FC<PositionSettingProps> = (props) => {
     properties: {
       name: {
         type: 'string',
-        "x-component": 'Search',
+        'x-component': 'ModalSearch',
+        'x-component-props': {
+          placeholder: '请输入商品名称/ID',
+          align: 'flex-left',
+        },
+      },
+      [FORM_FILTER_PATH]: {
+        type: 'object',
+        'x-component': 'flex-layout',
+        'x-component-props': {
+          rowStyle: {
+            flexWrap: 'nowrap',
+            style: {
+              marginRight: 0
+            }
+          },
+          colStyle: {
+            marginTop: 20,
+          },
+        },
+        properties: {
+          categoryId: {
+            type: 'string',
+            "x-component": 'SearchSelect',
+            "x-component-props": {
+              placeholder: '请选择品类',
+              className: 'fixed-ant-selected-down', // 该类强制将显示的下拉框出现在select下, 只有这里出现问题, ??
+              fetchSearch: PublicApi.getProductSelectGetSelectCategory,
+              style: {
+                width: 160
+              }
+            }
+          },
+          brandId: {
+            type: 'string',
+            "x-component": 'SearchSelect',
+            "x-component-props": {
+              placeholder: '请选择品牌',
+              fetchSearch: PublicApi.getProductSelectGetSelectBrand,
+              style: {
+                width: 160
+              }
+            }
+          },
+          submit: {
+            "x-component": 'Submit',
+            "x-mega-props": {
+              span: 1
+            },
             "x-component-props": {
-          placeholder: '请输入商品名称或者ID'
+              children: '查询'
+            }
+          }
         }
       }
     }
@@ -282,7 +337,18 @@ const PositionSetting:React.FC<PositionSettingProps> = (props) => {
           fetchTableData={params => fetchProductList(params)}
           formilyProps={
             {
-              ctx: { schema: formProduct }
+              ctx: { 
+                schema: formProduct, 
+                components: { ModalSearch: Search, SearchSelect, Submit } ,
+                effects: ($, actions) => {
+                  useStateFilterSearchLinkageEffect(
+                    $,
+                    actions,
+                    'name',
+                    FORM_FILTER_PATH,
+                  );
+                }
+              }
             }
           }
           tableProps={{