FEV2 / fw-cms

  import React, { useCallback } from "react";

  import { Button, Row, Select } from "antd";

  import { useStore } from "../index";
  
  const { Option } = Select;
  
  export default function Filter() {
    const { setVisible, dealerList, setDealerId, dealerId, brandList, brandLoading, brandId, setBrandId } = useStore();
  
    const searchDealer = useCallback((dealerId) => {
      setDealerId(dealerId);
    }, []);

    const searchBrand = useCallback((brandId) => {
      setBrandId(brandId);
    }, []);
  
    return (

      <Row justify="space-between" style={{ marginBottom: 10 }}>
        <Row justify="start">
          <Select
            placeholder="请选择商家"
            showSearch
            optionFilterProp="children"
            onChange={searchDealer}
            style={{ width: 200 }}
          >
            {dealerList.map((dealer) => (
              <Option value={dealer.id} key={dealer.id}>
                {dealer.name}
              </Option>
            ))}
          </Select>
          <Select
            placeholder="请选择品牌"
            loading={brandLoading}
            allowClear
            optionFilterProp="children"
            onChange={searchBrand}
            value={brandId && brandId > 0 ? brandId : undefined}
            style={{ width: 200,marginLeft:100 }}
          >
            {brandList.map((brand) => (
              <Option value={brand.id} key={brand.id}>
                {brand.name}
              </Option>
            ))}
          </Select>

        </Row>

        <Button type="primary" hidden={!dealerId} onClick={() => setVisible(true)}>
          新增
        </Button>

      </Row>

    );
  }