goodsFilter，modal组件

import React, { useEffect, useState } from 'react';
import styles from './index.module.less';
import {
  Input,
  Select,
  Form,
  Row,
  Col,
  Tag,
  List,
  Divider,
  Modal,
  Checkbox,
  Tabs,
  // ProList
} from 'antd';
import { useSelector, useStore } from 'react-redux';

import { AsyncRequestState, ReduxState } from '../../types';

import {
  SearchOutlined,
} from '@ant-design/icons';
import { CheckboxValueType } from 'antd/lib/checkbox/Group';
import { useGoodsActions } from '../../store/actions/goods';
import { CheckCard } from '@ant-design/pro-card';



const { Search } = Input;





const MenuFilter: React.FC<any> = ({ }) => {
  const [priceForm] = Form.useForm();

  const [tag, setTag] = useState(null)

  const { saveFilter, } = useGoodsActions();

  const filter = useStore().getState().goods?.filter

  const tags = useSelector<ReduxState, any>(
    (state) => state.goods?.tags
  );

  console.log('filter', filter);


  const filterSelected = [];
  if (filter.productTypeId) {
    filterSelected.push('productTypeId-' + filter.productTypeId);
  }

  if (filter.materialId) {
    filterSelected.push('materialId-' + filter.materialId);
  }


  // 点击事件

  const handleStock = (stock) => {
    saveFilter({ stock });
  };

  const handleSort = (sort) => {
    saveFilter({ sort });
  };

  // 价格筛选项
  const optionsPrice =
    [
      {
        value: '0 - 100',
        label: '0 - 100',
      },
      {
        value: '50 - 100',
        label: '50 - 100',
      },
      {
        value: '200 - 500',
        label: '200 - 500',
      },
      {
        value: '500 +',
        label: '500 +',
      },
    ];
  // 库存筛选项
  const optionsStock =
    [
      {
        value: '> 10 ',
        label: '> 10 ',
      },
      {
        value: '> 25 ',
        label: '> 25 +',
      },
      {
        value: '> 50 ',
        label: '> 50 ',
      },
      {
        value: '> 100 ',
        label: '> 100 ',
      },
    ];
  // 筛选选项
  const optionsCategory =
    [
      {
        value: 1,
        label: 'market.all',
      },
      {
        value: 2,
        label: 'market.latestTime',
      },
      {
        value: 3,
        label: 'market.sale',
      },
      {
        value: 4,
        label: 'market.minMax',
      },
      {
        value: 5,
        label: 'market.maxMin',
      },
      {
        value: 6,
        label: 'market.sort',
      },
    ]

  useEffect(() => {
    priceForm.setFieldsValue({
      layout: null,
      minPrice: filter?.minPrice,
      maxPrice: filter?.maxPrice,
    });
    /* stockForm.setFieldsValue({
      stock: filter?.stock,
    }); */

    //Sourcing();
  }, [filter]);

  /*   tags?.forEach(a => {
      console.log(a.options)
      a.options = a.options ? a.options.split(",") : []
    })
   */



  return (
    // 筛选
    <List
      bordered
      style={{ backgroundColor: 'white' }}
      size='small'
    >
      {/* 价格筛选 */}
      {/* <List.Item style={{ height: 25 }}> */}
      <Row style={{ padding: 0 }}>
        <Col span={4} className={styles.searchTitle}>
          <strong>
            {'价格范围'}
          </strong>
        </Col>

        <Col span={16} >
          <ul className={styles.searchRow}>
            {optionsPrice.map((item) => {
              return (
                <>
                  <li ><a>{item.label}</a></li>
                </>)
            })}
          </ul>
        </Col>
      </Row>
      <Divider style={{ margin: '0', color: '#e7e7e7' }}></Divider>
      {/* 库存筛选 */}
      <Row style={{ padding: 0 }}>
        <Col span={4} className={styles.searchTitle}>
          <strong>
            {'库存'}
          </strong>
        </Col>
        <Col span={16} >
          {/* <Form form={priceForm}> */}
          <ul className={styles.searchRow}>
            {optionsStock.map((item) => {
              return <li onClick={() => handleStock(item.value)}
              ><a>{item.label}</a></li>
            })}
          </ul>
        </Col>
      </Row>
      <Divider style={{ margin: '0', color: '#e7e7e7' }}></Divider>
      {/* 材质筛选 */}
      {tags && <CheckCard.Group
        style={{ width: '100%' }} size="small"
        // className={styles.searchTitle}
        multiple
        defaultValue={filter.checkedValues}
        bordered={false}
        onChange={(value) => {
          console.log('value', value);
          // setCheckedValue(value)
          saveFilter({ checkedValues: value })
        }}
      >
        {tags?.map((item, index) => {
          return <Row style={{ padding: 0 }}>
            <Col span={4}
              className={styles.searchTitle}
            >
              <strong>
                {item.title}
              </strong>
            </Col>
            <Col span={16} >
              {/* <ul className={styles.searchRow}> */}

              {item.options.split(",").map((op) => {
                // <li>
                return <CheckCard
                  title={op}
                  value={item.title + ':' + op}
                  key={item.title + ':' + op}
                  className={styles.checkCard} />
                {/* </li> */ }
              })}
              {/* </ul> */}

            </Col>
            <Col span={4} style={{ backgroundColor: 'white' }} className={styles.searchContent}>
            </Col>
            <Divider style={{ margin: '0', color: '#e7e7e7' }}></Divider>
          </Row>
        })
        }
      </CheckCard.Group>
      }
      {/* 其他筛选 */}
      <Row style={{ padding: 0 }}>
        <Col span={4} className={styles.searchTitle}>
          <strong>
            {'种类'}
          </strong>
        </Col>

        <Col span={16} >
          <ul className={styles.searchRow}>
            {optionsCategory.map((item) => {
              return <li><a onClick={() => handleSort(item.value)}>{item.label}</a></li>
            })}
          </ul>
        </Col>
      </Row>
    </List >

  );
};


const OptionsModal: React.FC<any> = ({ setTag, tag }) => {
  const [form] = Form.useForm();
  const { saveFilter } = useGoodsActions();

  const onChangeM = (checkedValues: CheckboxValueType[]) => {
    // form.getFieldValue
    // setCheckedValue(checkedValues)
    console.log('checkedValues', checkedValues);


  }


  const handleOk = () => {


    setTag(null);
  };

  const handleCancel = () => {
    console.log(tag);

    setTag(null);

  }


  return <Modal title={tag.title} visible={true} onOk={() => handleOk()} onCancel={handleCancel} >
    <Form form={form} layout="inline">
      <Checkbox.Group onChange={onChangeM}>
        <Form.Item name={tag.title} label={tag.title}>
          <Row>
            <Col span={8}>
              {tag.options.split(",").map((op) => (
                <Checkbox value={op}>{op}</Checkbox>
              ))}
            </Col>
          </Row>
        </Form.Item>
      </Checkbox.Group >
    </Form>
  </Modal>
}
//categoryId={categoryId} materialId={materialId} productTypeId={productTypeId}

const GoodsFilterMemo: React.FC<any> = ({ reload }) => {
  const { fetchJewelryProductType, fetchListByProductType } = useGoodsActions();

  const filter = useSelector<ReduxState, any>(
    (state) => state.goods?.filter
  );

  console.log('634filter', filter.checkedValues);
  const [value, setValue] = useState(filter?.filter);
  const { saveFilter } = useGoodsActions();



  const onSearch = (e) => {
    console.log('125e', e);
    saveFilter({ filter: e });
  };
  const handleChangeSearch = (val) => {
    console.log('changeSearch', val);
    setValue(val.target.value);
  };

  // 切换tab栏
  const handleProductType = (productTypeId) => {
    const params = {
      productTypeId: productTypeId,
      type: 0
    }
    fetchListByProductType(params).then(res => {
      console.log('874res', res);
    })

    reload({ ...filter, productTypeId })
  };

  const handleCategory = (categoryId, checked) => {

    saveFilter({ categoryId: checked ? categoryId : 0 });
  };
  const handleTag = (type, id = 0) => {
    console.log('type', type);
    if (type == 'checkedValues') {
      saveFilter({
        checkedValues: null,
      });
    } else if (type == 'filter') {
      setValue(null);
      saveFilter({ filter: null });
    } else {
      saveFilter({ [type]: 0 });
    }
  };




  const productTypeList = useSelector<ReduxState, any>((state) => state.goods?.productTypeList);


  useEffect(() => {
    if (!productTypeList) {
      fetchJewelryProductType().then(res => {
        console.log('913res', res.payload);
      })
    }

  }, [])




  if (!productTypeList) return null;

  const productTypeMap = {};
  productTypeList.forEach((e) => {
    productTypeMap[e.sid] = e.name;
  });




  return (
    <>
      <div className={styles.searchs}>
        <Input.Group compact>
          <Search
            placeholder={'关键词'}
            allowClear
            enterButton={<SearchOutlined />}
            // defaultValue={filter?.filter}
            onSearch={onSearch}
            value={value}
            onChange={handleChangeSearch}
            className={styles.keys}
          />
        </Input.Group>
      </div>
      <div className={styles.rows}>
        <Row>
          <Col span={24}>
            <Tabs
              defaultActiveKey="item-1"
              onChange={handleProductType}
            >
              <Tabs.TabPane tab="全部" key="item-1" >

              </Tabs.TabPane>
              {productTypeList.map((a) => {
                return (
                  <Tabs.TabPane tab={a.name} key={a.sid} ></Tabs.TabPane>
                )
              })}
            </Tabs>
          </Col>
        </Row>
      </div >
      <MenuFilter />

      {!!filter.stock && (
        <Tag
          key={'stock-' + filter.stock}
          color="purple"
          className={styles.tag}
          onClose={() => handleTag('stock')}
          closable
        >
          {'库存'}: {filter.stock}
        </Tag>
      )}
      {!!filter.sort && (
        <Tag
          key={'sort-' + filter.sort}
          color="purple"
          className={styles.tag}
          onClose={() => handleTag('sort')}
          closable
        >
          {'种类'}: {filter.sort}
        </Tag>
      )}
      {filter.checkedValues.map((item) => {
        return <Tag
          key={item}
          color="purple"
          className={styles.tag}
          onClose={() => handleTag('checkedValues')}
          closable
        >
          {item}
          {console.log(11)
          }
        </Tag>
      })
      }

      {!!filter.filter && (
        <Tag
          key={'filter-' + filter.filter}
          color="purple"
          className={styles.tag}
          onClose={() => handleTag('filter')}
          closable
        >
          关键字: {filter.filter}
        </Tag>
      )}
      {(!!filter.maxPrice || !!filter.minPrice) && (
        <Tag
          key={'Price-' + filter.maxPrice || filter.minPrice}
          color="purple"
          className={styles.tag}
          onClose={() => handleTag('Price')}
          closable
        >
          {'价格'}: {'最大价格'}{' '}
          {!!filter?.maxPrice && filter?.maxPrice} -{' '}
          {'最小价格'} {filter?.minPrice || 0}
        </Tag>
      )}

    </>
  );
};

export default React.memo(GoodsFilterMemo);