Commit 0bb1eb39 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏

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

parent ac2f7abc
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;
...@@ -13,12 +13,6 @@ import { PublicApi } from '@/services/api'; ...@@ -13,12 +13,6 @@ import { PublicApi } from '@/services/api';
const { Option } = Select const { Option } = Select
// export interface SearchProps {
// value: string;
// mutators: any;
// props: any;
// }
const CustomInputSearch = props => { const CustomInputSearch = props => {
const { form } = props const { form } = props
const justifyAlign = props.props['x-component-props'].align || 'flex-end' const justifyAlign = props.props['x-component-props'].align || 'flex-end'
......
...@@ -15,11 +15,11 @@ const Search = props => { ...@@ -15,11 +15,11 @@ const Search = props => {
const [state, setState] = useFieldState({ const [state, setState] = useFieldState({
filterSearch: false, filterSearch: false,
}); });
const { const {
align, align,
advanced = true, // 是否展示高级筛选 advanced = true, // 是否展示高级筛选
tip, // 搜索框悬浮提示 tip, // 搜索框悬浮提示
...rest ...rest
} = props.props['x-component-props']; } = props.props['x-component-props'];
const justifyAlign = align || 'flex-end'; const justifyAlign = align || 'flex-end';
...@@ -56,6 +56,7 @@ const Search = props => { ...@@ -56,6 +56,7 @@ const Search = props => {
<Button <Button
onClick={() => { onClick={() => {
props.form.reset(); props.form.reset();
sessionStorage.setItem('tableRest', 'true')
props.form.submit(); props.form.submit();
}} }}
> >
......
...@@ -8,7 +8,8 @@ import CustomStatus from './components/CustomStatus'; ...@@ -8,7 +8,8 @@ import CustomStatus from './components/CustomStatus';
import CustomAddArray from './components/CustomAddArray'; import CustomAddArray from './components/CustomAddArray';
import CustomSlider from './components/CustomSlider'; import CustomSlider from './components/CustomSlider';
import Search from './components/Search'; 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 Submit from './components/Submit';
import Text from './components/Text'; import Text from './components/Text';
import CardCheckBox from './components/CardCheckBox'; import CardCheckBox from './components/CardCheckBox';
...@@ -77,6 +78,7 @@ export const componentExport = { ...@@ -77,6 +78,7 @@ export const componentExport = {
CustomRadio, CustomRadio,
Search, Search,
CustomInputSearch, CustomInputSearch,
CustomCategorySearch,
Submit, Submit,
Text, Text,
CardCheckBox, CardCheckBox,
......
...@@ -21,7 +21,12 @@ export const searchBrandOptionEffect = (context: any, fieldName: string) => { ...@@ -21,7 +21,12 @@ export const searchBrandOptionEffect = (context: any, fieldName: string) => {
export const searchCustomerCategoryOptionEffect = (context: any, fieldName: string) => { export const searchCustomerCategoryOptionEffect = (context: any, fieldName: string) => {
context.getFieldState(fieldName, state => { 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 => { context.setFieldState(fieldName, state => {
state.props['x-component-props'].dataoption = res.data state.props['x-component-props'].dataoption = res.data
}) })
......
...@@ -43,11 +43,16 @@ const Products: React.FC<{}> = () => { ...@@ -43,11 +43,16 @@ const Products: React.FC<{}> = () => {
key: 'memberName', key: 'memberName',
}, },
{ {
title: '品类', title: '会员品类',
dataIndex: ['customerCategory', 'name'], dataIndex: ['customerCategory', 'name'],
key: 'customerCategory.name', key: 'customerCategory.name',
}, },
{ {
title: '平台品类',
dataIndex: ['customerCategory', 'category', 'name'],
key: 'customerCategory.category.name',
},
{
title: '品牌', title: '品牌',
dataIndex: ['brand', 'name'], dataIndex: ['brand', 'name'],
key: 'brand.name', key: 'brand.name',
...@@ -164,10 +169,10 @@ const Products: React.FC<{}> = () => { ...@@ -164,10 +169,10 @@ const Products: React.FC<{}> = () => {
FormEffectHooks.onFieldChange$('brandId').subscribe(state => { FormEffectHooks.onFieldChange$('brandId').subscribe(state => {
searchBrandOptionEffect(actions, 'brandId') searchBrandOptionEffect(actions, 'brandId')
}) })
FormEffectHooks.onFieldChange$('customerCategoryId').subscribe(state => { FormEffectHooks.onFieldChange$('categoryId').subscribe(state => {
searchCustomerCategoryOptionEffect(actions, 'customerCategoryId') searchCustomerCategoryOptionEffect(actions, 'categoryId')
}) })
}} }}
schema={productWillSchema} schema={productWillSchema}
/> />
} }
...@@ -177,4 +182,4 @@ const Products: React.FC<{}> = () => { ...@@ -177,4 +182,4 @@ const Products: React.FC<{}> = () => {
) )
} }
export default Products export default Products
\ No newline at end of file
...@@ -42,11 +42,16 @@ const Products: React.FC<{}> = () => { ...@@ -42,11 +42,16 @@ const Products: React.FC<{}> = () => {
key: 'memberName', key: 'memberName',
}, },
{ {
title: '品类', title: '会员品类',
dataIndex: ['customerCategory', 'name'], dataIndex: ['customerCategory', 'name'],
key: 'customerCategory.name', key: 'customerCategory.name',
}, },
{ {
title: '平台品类',
dataIndex: ['customerCategory', 'category', 'name'],
key: 'customerCategory.category.name',
},
{
title: '品牌', title: '品牌',
dataIndex: ['brand', 'name'], dataIndex: ['brand', 'name'],
key: 'brand.name', key: 'brand.name',
...@@ -152,10 +157,10 @@ const Products: React.FC<{}> = () => { ...@@ -152,10 +157,10 @@ const Products: React.FC<{}> = () => {
FormEffectHooks.onFieldChange$('brandId').subscribe(state => { FormEffectHooks.onFieldChange$('brandId').subscribe(state => {
searchBrandOptionEffect(actions, 'brandId') searchBrandOptionEffect(actions, 'brandId')
}) })
FormEffectHooks.onFieldChange$('customerCategoryId').subscribe(state => { FormEffectHooks.onFieldChange$('categoryId').subscribe(state => {
searchCustomerCategoryOptionEffect(actions, 'customerCategoryId') searchCustomerCategoryOptionEffect(actions, 'categoryId')
}) })
}} }}
schema={productSchema} schema={productSchema}
/> />
} }
...@@ -165,4 +170,4 @@ const Products: React.FC<{}> = () => { ...@@ -165,4 +170,4 @@ const Products: React.FC<{}> = () => {
) )
} }
export default Products export default Products
\ No newline at end of file
...@@ -58,19 +58,16 @@ export const productSchema: ISchema = { ...@@ -58,19 +58,16 @@ export const productSchema: ISchema = {
dataoption: [], dataoption: [],
}, },
}, },
customerCategoryId: { categoryId: {
type: 'string', type: 'string',
'x-component': 'CustomInputSearch', 'x-component': 'CustomCategorySearch',
'x-component-props': { 'x-component-props': {
placeholder: '商品品类', placeholder: '平台品类',
showSearch: true, showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null, notFoundContent: null,
style: { width: '174px' }, style: { width: '174px' },
searchValue: null, dataoption: [],
dataoption: [] fieldNames: { label: 'title', value: 'id', children: 'children' },
}, },
}, },
status: { status: {
...@@ -223,19 +220,16 @@ export const productWillSchema: ISchema = { ...@@ -223,19 +220,16 @@ export const productWillSchema: ISchema = {
dataoption: [], dataoption: [],
}, },
}, },
customerCategoryId: { categoryId: {
type: 'string', type: 'string',
'x-component': 'CustomInputSearch', 'x-component': 'CustomCategorySearch',
'x-component-props': { 'x-component-props': {
placeholder: '商品品类', placeholder: '平台品类',
showSearch: true, showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null, notFoundContent: null,
style: { width: '174px' }, style: { width: '174px' },
searchValue: null, dataoption: [],
dataoption: [] fieldNames: { label: 'title', value: 'id', children: 'children' },
}, },
}, },
'NO_NAME_FIELD_$2': { 'NO_NAME_FIELD_$2': {
...@@ -294,4 +288,4 @@ export const productWillSchema: ISchema = { ...@@ -294,4 +288,4 @@ export const productWillSchema: ISchema = {
}, },
}, },
}, },
}; };
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment