fix：商品品类高级筛选变更为Cascader级联选择

src/components/NiceForm/components/CustomCategorySearch.tsx

+import React, { useState, useEffect } from 'react';
+import { Input, Space, Select, Button, Cascader } from 'antd';
+import { useFieldState, FormPath, FormEffectHooks, useFormEffects } from '@formily/antd';
+
+/**
+ * 筛选项 搜索和远程数据结合的 Cascader
+ * 属性Data数据暂存至schema的props下的dataOption
+ */
+
+const CustomCategorySearch = props => {
+  const justifyAlign = props.props['x-component-props'].align || 'flex-end'
+  const option = props.props['x-component-props'].dataoption
+
+  const [dataOption, setDataOption] = useState<any>([])
+  const [value, setValue] = useState<any>([])
+
+  useEffect(() => {
+    setDataOption(option)
+  }, [option])
+
+  useFormEffects(() => {
+    FormEffectHooks.onFormReset$().subscribe(() => {
+      setValue([])
+    })
+  })
+
+
+  const onChange = (value, selectedOptions) => {
+    props.mutators.change(value[value.length - 1])
+    setValue(value)
+  }
+
+  const displayRender = (label) => {
+    return label[label.length - 1];
+  }
+
+  return (
+    <Space size={20} style={{ justifyContent: justifyAlign, width: '100%' }}>
+      <Cascader
+        options={dataOption}
+        onChange={onChange}
+        value={value}
+        displayRender={displayRender}
+        {...props.props['x-component-props']}
+      />
+    </Space>
+  );
+};
+
+CustomCategorySearch.defaultProps = {};
+
+CustomCategorySearch.isFieldComponent = true;
+
+export default CustomCategorySearch;

src/components/NiceForm/index.tsx

-import React from 'react';
-import SchemaForm, {
-  IAntdSchemaFormProps, createVirtualBox, registerVirtualBox, Schema, SchemaField, FormButtonGroup, Reset, createControllerBox, registerValidationRules,
-} from '@formily/antd';
-import { Button, Space, Row, Col, DatePicker } from 'antd';
-import CustomUpload from './components/CustomUpload';
-import CustomStatus from './components/CustomStatus';
-import CustomAddArray from './components/CustomAddArray';
-import CustomSlider from './components/CustomSlider';
-import Search from './components/Search';
-import CustomInputSearch from './components/CustomInputSearch'
-import Submit from './components/Submit';
-import Text from './components/Text';
-import CardCheckBox from './components/CardCheckBox';
-import MultTable from './components/MultTable';
-import CustomRegistryPhone from './components/CustomRegistryPhone';
-import CustomRelevance from './components/CustomRelevance';
-import Children from './components/Children';
-import CircleBox from './components/CircleBox';
-import Phone from './components/Phone';
-import CustomRadio from './components/CustomRadio';
-import Select from './components/Select';
-import SearchSelect from './components/SearchSelect';
-import TableTagList from './components/TableTagList';
-import './index.less'
-import { Checkbox, Radio } from '@formily/antd-components';
-import DateSelect from './components/DateSelect';
-import DateRangePickerUnix from './components/DateRangePickerUnix';
-import NumberRange from './components/NumberRange';
-import VirtualChildren from './components/VirtualChildren';
-import SmilingFace from './components/SmilingFace';
-import SliderValidate from './components/SliderValidate';
-import AntUpload from './components/AntUpload';
-import { useLinkComponentProps } from './linkages/linkComponentProps';
-import Loading from '../Loading';
-
-export interface NiceFormProps extends IAntdSchemaFormProps {
-  loading?: boolean
-}
-
-const SchemaFormButtonGroup = createVirtualBox('schemaButtonGroup', FormButtonGroup)
-const SchemaButton = createVirtualBox('schemaButton', Button)
-const SchemaSubmit = createVirtualBox('schemaSubmit', Submit)
-const SchemaReset = createVirtualBox('schemaReset', Reset)
-export const FlexBox = createVirtualBox('flexBox', props => <Row {...props}/>)
-
-// 自定义校验规则
-registerValidationRules({
-  limitByte: (value, desc, rules) => {
-    const { allowChineseTransform = true, maxByte } = desc;
-    let str = value;
-    let message = `不能超过${maxByte}个字符`
-    if (allowChineseTransform) {
-      str = str.replace(/[\u4E00-\u9FA5]/g, "AA");
-      message += `,或者${maxByte / 2}个汉字`
-    }
-    return str.length > maxByte ? message : "";
-  }
-});
-
-// 该组件用于schema中嵌套表单， 不过控制台会出现警告
-const schemaLayout = createControllerBox("schemaLayout", (_props) => {
-  const { schema } = _props;
-  const componentProps = schema.getExtendsComponentProps();
-  const { properties } = schema.toJSON();
-  const nestedSchema = new Schema({
-    type: "object",
-    properties
-  });
-
-  // const { visible, title, onCancel, footer, ...others } = componentProps;
-
-  return (
-    <NiceForm>
-      <SchemaField schema={nestedSchema}></SchemaField>
-    </NiceForm>
-  );
-});
-
-export const componentExport = {
-  CheckboxSingle: Checkbox,
-  CustomUpload,
-  CustomStatus,
-  CustomAddArray,
-  CustomSlider,
-  CustomRadio,
-  Search,
-  CustomInputSearch,
-  Submit,
-  Text,
-  CardCheckBox,
-  MultTable,
-  CustomRegistryPhone,
-  CustomRelevance,
-  Children,
-  CircleBox,
-  SchemaFormButtonGroup,
-  FlexBox,
-  Phone,
-  Select,
-  SearchSelect,
-  DateRangePicker: DatePicker.RangePicker,
-  TableTagList,
-  DateSelect,
-  DateRangePickerUnix,
-  NumberRange,
-  VirtualChildren, 
-  SmilingFace, 
-  SliderValidate,
-  RadioGroup: Radio.Group,
-  AntUpload,
-}
-const NiceForm: React.FC<NiceFormProps> = props => {
-  const { children, components, effects, expressionScope, loading = false, ...reset } = props;
-
-  const defineComponents = Object.assign(componentExport, components);
-
-  return (
-    <div style={{width: '100%', position: 'relative'}}>
-      <SchemaForm
-        colon={false} 
-        components={defineComponents} 
-        style={{opacity: loading ? 0 : 1, position: loading ? 'absolute' : 'initial'}}
-        effects={($, ctx) => {
-          // 自定义联动scope收集器
-          useLinkComponentProps(expressionScope)
-
-          // 组件联动
-          effects && effects($, ctx)
-        }}
-        expressionScope={expressionScope}
-        {...reset}
-      >
-        {children}
-      </SchemaForm>
-      { loading && <Loading/> }
-    </div>
-  );
-};
-
-NiceForm.defaultProps = {};
-
-export default NiceForm;
+import React from 'react';
+import SchemaForm, {
+  IAntdSchemaFormProps, createVirtualBox, registerVirtualBox, Schema, SchemaField, FormButtonGroup, Reset, createControllerBox, registerValidationRules,
+} from '@formily/antd';
+import { Button, Space, Row, Col, DatePicker } from 'antd';
+import CustomUpload from './components/CustomUpload';
+import CustomStatus from './components/CustomStatus';
+import CustomAddArray from './components/CustomAddArray';
+import CustomSlider from './components/CustomSlider';
+import Search from './components/Search';
+import CustomInputSearch from './components/CustomInputSearch';
+import CustomCategorySearch from './components/CustomCategorySearch';
+import Submit from './components/Submit';
+import Text from './components/Text';
+import CardCheckBox from './components/CardCheckBox';
+import MultTable from './components/MultTable';
+import CustomRegistryPhone from './components/CustomRegistryPhone';
+import CustomRelevance from './components/CustomRelevance';
+import Children from './components/Children';
+import CircleBox from './components/CircleBox';
+import Phone from './components/Phone';
+import CustomRadio from './components/CustomRadio';
+import Select from './components/Select';
+import SearchSelect from './components/SearchSelect';
+import TableTagList from './components/TableTagList';
+import './index.less'
+import { Checkbox, Radio } from '@formily/antd-components';
+import DateSelect from './components/DateSelect';
+import DateRangePickerUnix from './components/DateRangePickerUnix';
+import NumberRange from './components/NumberRange';
+import VirtualChildren from './components/VirtualChildren';
+import SmilingFace from './components/SmilingFace';
+import SliderValidate from './components/SliderValidate';
+import AntUpload from './components/AntUpload';
+import { useLinkComponentProps } from './linkages/linkComponentProps';
+import Loading from '../Loading';
+
+export interface NiceFormProps extends IAntdSchemaFormProps {
+  loading?: boolean
+}
+
+const SchemaFormButtonGroup = createVirtualBox('schemaButtonGroup', FormButtonGroup)
+const SchemaButton = createVirtualBox('schemaButton', Button)
+const SchemaSubmit = createVirtualBox('schemaSubmit', Submit)
+const SchemaReset = createVirtualBox('schemaReset', Reset)
+export const FlexBox = createVirtualBox('flexBox', props => <Row {...props}/>)
+
+// 自定义校验规则
+registerValidationRules({
+  limitByte: (value, desc, rules) => {
+    const { allowChineseTransform = true, maxByte } = desc;
+    let str = value;
+    let message = `不能超过${maxByte}个字符`
+    if (allowChineseTransform) {
+      str = str.replace(/[\u4E00-\u9FA5]/g, "AA");
+      message += `,或者${maxByte / 2}个汉字`
+    }
+    return str.length > maxByte ? message : "";
+  }
+});
+
+// 该组件用于schema中嵌套表单， 不过控制台会出现警告
+const schemaLayout = createControllerBox("schemaLayout", (_props) => {
+  const { schema } = _props;
+  const componentProps = schema.getExtendsComponentProps();
+  const { properties } = schema.toJSON();
+  const nestedSchema = new Schema({
+    type: "object",
+    properties
+  });
+
+  // const { visible, title, onCancel, footer, ...others } = componentProps;
+
+  return (
+    <NiceForm>
+      <SchemaField schema={nestedSchema}></SchemaField>
+    </NiceForm>
+  );
+});
+
+export const componentExport = {
+  CheckboxSingle: Checkbox,
+  CustomUpload,
+  CustomStatus,
+  CustomAddArray,
+  CustomSlider,
+  CustomRadio,
+  Search,
+  CustomInputSearch,
+  CustomCategorySearch,
+  Submit,
+  Text,
+  CardCheckBox,
+  MultTable,
+  CustomRegistryPhone,
+  CustomRelevance,
+  Children,
+  CircleBox,
+  SchemaFormButtonGroup,
+  FlexBox,
+  Phone,
+  Select,
+  SearchSelect,
+  DateRangePicker: DatePicker.RangePicker,
+  TableTagList,
+  DateSelect,
+  DateRangePickerUnix,
+  NumberRange,
+  VirtualChildren,
+  SmilingFace,
+  SliderValidate,
+  RadioGroup: Radio.Group,
+  AntUpload,
+}
+const NiceForm: React.FC<NiceFormProps> = props => {
+  const { children, components, effects, expressionScope, loading = false, ...reset } = props;
+
+  const defineComponents = Object.assign(componentExport, components);
+
+  return (
+    <div style={{width: '100%', position: 'relative'}}>
+      <SchemaForm
+        colon={false}
+        components={defineComponents}
+        style={{opacity: loading ? 0 : 1, position: loading ? 'absolute' : 'initial'}}
+        effects={($, ctx) => {
+          // 自定义联动scope收集器
+          useLinkComponentProps(expressionScope)
+
+          // 组件联动
+          effects && effects($, ctx)
+        }}
+        expressionScope={expressionScope}
+        {...reset}
+      >
+        {children}
+      </SchemaForm>
+      { loading && <Loading/> }
+    </div>
+  );
+};
+
+NiceForm.defaultProps = {};
+
+export default NiceForm;

src/pages/commodity/goods/effect/index.tsx

@@ -21,10 +21,15 @@ export const searchBrandOptionEffect = (context: any, fieldName: string) => {
 
 export const searchCustomerCategoryOptionEffect = (context: any, fieldName: string) => {
   context.getFieldState(fieldName, state => {
-    PublicApi.getProductSelectGetSelectCustomerCategory({ name: state.props['x-component-props'].searchValue }).then(res => {
+    // PublicApi.getProductSelectGetSelectCustomerCategory({ name: state.props['x-component-props'].searchValue }).then(res => {
+    //   context.setFieldState(fieldName, state => {
+    //     state.props['x-component-props'].dataoption = res.data
+    //   })
+    // })
+    PublicApi.getProductCustomerGetCustomerCategoryTree().then(res => {
       context.setFieldState(fieldName, state => {
         state.props['x-component-props'].dataoption = res.data
       })
     })
   })
-}
\ No newline at end of file
+}

src/pages/commodity/goods/schema/index.tsx

@@ -66,17 +66,14 @@ export const goodsSchema: ISchema = {
             },
             customerCategoryId: {
               type: 'string',
-              'x-component': 'CustomInputSearch',
+              'x-component': 'CustomCategorySearch',
               'x-component-props': {
                 placeholder: '商品品类',
                 showSearch: true,
-                showArrow: true,
-                defaultActiveFirstOption: false,
-                filterOption: false,
                 notFoundContent: null,
                 style: { width: '174px' },
-                searchValue: null,
-                dataoption: []
+                dataoption: [],
+                fieldNames: { label: 'title', value: 'id', children: 'children' },
               },
             },
             batch: {
@@ -99,4 +96,4 @@ export const goodsSchema: ISchema = {
       },
     },
   },
-};
\ No newline at end of file
+};

src/pages/commodity/products/effect/index.tsx

@@ -21,10 +21,15 @@ export const searchBrandOptionEffect = (context: any, fieldName: string) => {
 
 export const searchCustomerCategoryOptionEffect = (context: any, fieldName: string) => {
   context.getFieldState(fieldName, state => {
-    PublicApi.getProductSelectGetSelectCustomerCategory({ name: state.props['x-component-props'].searchValue }).then(res => {
+    // PublicApi.getProductSelectGetSelectCustomerCategory({ name: state.props['x-component-props'].searchValue }).then(res => {
+    //   context.setFieldState(fieldName, state => {
+    //     state.props['x-component-props'].dataoption = res.data
+    //   })
+    // })
+    PublicApi.getProductCustomerGetCustomerCategoryTree().then(res => {
       context.setFieldState(fieldName, state => {
         state.props['x-component-props'].dataoption = res.data
       })
     })
   })
-}
\ No newline at end of file
+}

src/pages/repositories/effects/index.tsx

@@ -65,7 +65,12 @@ export const searchBrandOptionEffect = (context: any, fieldName: string) => {
 
 export const searchCustomerCategoryOptionEffect = (context: any, fieldName: string) => {
   context.getFieldState(fieldName, state => {
-    PublicApi.getProductSelectGetSelectCustomerCategory({ name: state.props['x-component-props'].searchValue }).then(res => {
+    // PublicApi.getProductSelectGetSelectCustomerCategory({ name: state.props['x-component-props'].searchValue }).then(res => {
+    //   context.setFieldState(fieldName, state => {
+    //     state.props['x-component-props'].dataoption = res.data
+    //   })
+    // })
+    PublicApi.getProductCustomerGetCustomerCategoryTree().then(res => {
       context.setFieldState(fieldName, state => {
         state.props['x-component-props'].dataoption = res.data
       })