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/components/CustomInputSearch.tsx

@@ -13,12 +13,6 @@ import { PublicApi } from '@/services/api';
 
 const { Option } = Select
 
-// export interface SearchProps {
-//   value: string;
-//   mutators: any;
-//   props: any;
-// }
-
 const CustomInputSearch = props => {
   const { form } = props
   const justifyAlign = props.props['x-component-props'].align || 'flex-end'

src/components/NiceForm/components/Search.tsx

@@ -15,11 +15,11 @@ const Search = props => {
   const [state, setState] = useFieldState({
     filterSearch: false,
   });
-  const { 
-    align, 
+  const {
+    align,
     advanced = true,      // 是否展示高级筛选
     tip,                  // 搜索框悬浮提示
-    ...rest 
+    ...rest
   } = props.props['x-component-props'];
   const justifyAlign = align || 'flex-end';
 
@@ -56,6 +56,7 @@ const Search = props => {
       <Button
         onClick={() => {
           props.form.reset();
+          sessionStorage.setItem('tableRest', 'true')
           props.form.submit();
         }}
       >

src/components/NiceForm/index.tsx

@@ -8,7 +8,8 @@ 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 CustomInputSearch from './components/CustomInputSearch';
+import CustomCategorySearch from './components/CustomCategorySearch';
 import Submit from './components/Submit';
 import Text from './components/Text';
 import CardCheckBox from './components/CardCheckBox';
@@ -77,6 +78,7 @@ export const componentExport = {
   CustomRadio,
   Search,
   CustomInputSearch,
+  CustomCategorySearch,
   Submit,
   Text,
   CardCheckBox,

src/pages/commodity/effect/index.tsx

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

src/pages/commodity/productWillCheck/index.tsx

@@ -43,11 +43,16 @@ const Products: React.FC<{}> = () => {
       key: 'memberName',
     },
     {
-      title: '品类',
+      title: '会员品类',
       dataIndex: ['customerCategory', 'name'],
       key: 'customerCategory.name',
     },
     {
+      title: '平台品类',
+      dataIndex: ['customerCategory', 'category', 'name'],
+      key: 'customerCategory.category.name',
+    },
+    {
       title: '品牌',
       dataIndex: ['brand', 'name'],
       key: 'brand.name',
@@ -164,10 +169,10 @@ const Products: React.FC<{}> = () => {
                 FormEffectHooks.onFieldChange$('brandId').subscribe(state => {
                   searchBrandOptionEffect(actions, 'brandId')
                 })
-                FormEffectHooks.onFieldChange$('customerCategoryId').subscribe(state => {
-                  searchCustomerCategoryOptionEffect(actions, 'customerCategoryId')
+                FormEffectHooks.onFieldChange$('categoryId').subscribe(state => {
+                  searchCustomerCategoryOptionEffect(actions, 'categoryId')
                 })
-              }} 
+              }}
               schema={productWillSchema}
             />
           }
@@ -177,4 +182,4 @@ const Products: React.FC<{}> = () => {
   )
 }
 
-export default Products
\ No newline at end of file
+export default Products

src/pages/commodity/products/index.tsx

@@ -42,11 +42,16 @@ const Products: React.FC<{}> = () => {
       key: 'memberName',
     },
     {
-      title: '品类',
+      title: '会员品类',
       dataIndex: ['customerCategory', 'name'],
       key: 'customerCategory.name',
     },
     {
+      title: '平台品类',
+      dataIndex: ['customerCategory', 'category', 'name'],
+      key: 'customerCategory.category.name',
+    },
+    {
       title: '品牌',
       dataIndex: ['brand', 'name'],
       key: 'brand.name',
@@ -152,10 +157,10 @@ const Products: React.FC<{}> = () => {
                 FormEffectHooks.onFieldChange$('brandId').subscribe(state => {
                   searchBrandOptionEffect(actions, 'brandId')
                 })
-                FormEffectHooks.onFieldChange$('customerCategoryId').subscribe(state => {
-                  searchCustomerCategoryOptionEffect(actions, 'customerCategoryId')
+                FormEffectHooks.onFieldChange$('categoryId').subscribe(state => {
+                  searchCustomerCategoryOptionEffect(actions, 'categoryId')
                 })
-              }} 
+              }}
               schema={productSchema}
             />
           }
@@ -165,4 +170,4 @@ const Products: React.FC<{}> = () => {
   )
 }
 
-export default Products
\ No newline at end of file
+export default Products

src/pages/commodity/schema/index.tsx

@@ -58,19 +58,16 @@ export const productSchema: ISchema = {
                 dataoption: [],
               },
             },
-            customerCategoryId: {
+            categoryId: {
               type: 'string',
-              'x-component': 'CustomInputSearch',
+              'x-component': 'CustomCategorySearch',
               'x-component-props': {
-                placeholder: '商品品类',
+                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' },
               },
             },
             status: {
@@ -223,19 +220,16 @@ export const productWillSchema: ISchema = {
                 dataoption: [],
               },
             },
-            customerCategoryId: {
+            categoryId: {
               type: 'string',
-              'x-component': 'CustomInputSearch',
+              'x-component': 'CustomCategorySearch',
               'x-component-props': {
-                placeholder: '商品品类',
+                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' },
               },
             },
             'NO_NAME_FIELD_$2': {
@@ -294,4 +288,4 @@ export const productWillSchema: ISchema = {
       },
     },
   },
-};
\ No newline at end of file
+};