FEV2 / fw-cms

  import React, { useCallback, useEffect, useState } from "react";

  import { Button, Row, Select, Input, Col } from "antd";
  import { useStore } from "../index";
  import { debounce } from "lodash";
  import { CapitalAccountTypeEnum, ConfigType } from "@/pages/finance/entitys";

  
  const { Option } = Select;
  const Search = Input.Search;
  
  export default function AccountList() {

    const { triggerModal, brands, financeList, setInvestList, companys, dealers } = useStore();

    // 存储删选条件
    const [filterParams, setFilterParams] = useState({});

    useEffect(() => {

      let originList = financeList;
      let res = [];
      if (filterParams.brandId) {
        //删选品牌
        originList = originList.filter((item) => item.brandId === filterParams.brandId);
      }
      if (filterParams.mefCompId) {
        //删选主机厂
        originList = originList.filter((item) => item.mefCompId === filterParams.mefCompId);
      }
      if (filterParams.includeId) {
        //删选包含商家 includeId
        originList = originList.filter((item) => item.includeDealers?.find((y) => y.id === filterParams.includeId));

      }
      if (filterParams.creditDealerId) {
        //删选授信商家 creditDealerId
        originList = originList.filter((item) => item.creditDealerId === filterParams.creditDealerId);
      }
      if (filterParams.name) {
        // 筛选投资主体 name
        originList = originList.filter((item) => item.name?.indexOf(filterParams.name) >= 0);
      }
      res = originList;
      setInvestList([...res]);
    }, [filterParams]);

    return (
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: 20,
        }}
      >

        <div>
          <Row justify="space-between" style={{ flexWrap: "nowrap" }}>

            <Select

              allowClear

              placeholder="请选择品牌"

              style={{ width: 200 }}

              showSearch
              optionFilterProp="children"
              onChange={(brandId) => {
                setFilterParams({ ...filterParams, brandId });
              }}

            >
              {brands.map((brand) => (
                <Option key={brand.id} value={brand.id}>
                  {brand.name}
                </Option>
              ))}
            </Select>

            <Select

              allowClear
              placeholder="请选择主机厂"
              style={{ width: 200, marginLeft: 50 }}

              showSearch
              optionFilterProp="children"

              onChange={(mefCompId) => {
                setFilterParams({ ...filterParams, mefCompId });
              }}
            >
              {companys.map((comp) => (
                <Option key={comp.id} value={comp.id}>
                  {comp.name}
                </Option>
              ))}
            </Select>
            <Input
              placeholder="请输入投资主体"
              style={{ width: 200, marginLeft: 50 }}
              onChange={(e) => {
                setFilterParams({ ...filterParams, name: e.target.value });
              }}
            />
          </Row>
          <Row  style={{ flexWrap: "nowrap", marginTop: 10 }}>
            <Select

              allowClear

              placeholder="请选择包含商家"

              style={{ width: 200 }}

              showSearch
              optionFilterProp="children"
              onChange={(includeId) => {
                setFilterParams({ ...filterParams, includeId });
              }}

            >

              {dealers.map((dealer) => (
                <Option key={dealer.id} value={dealer.id}>
                  {dealer.name}

                </Option>
              ))}
            </Select>

            <Select

              allowClear

              placeholder="请选择授信商家"
              style={{ width: 200,marginLeft:50 }}
              showSearch
              optionFilterProp="children"
              onChange={(creditDealerId) => {
                setFilterParams({ ...filterParams, creditDealerId });
              }}
            >
              {dealers.map((dealer) => (
                <Option key={dealer.id} value={dealer.id}>
                  {dealer.name}
                </Option>
              ))}
            </Select>
          </Row>
        </div>
  

        <Button type="primary" onClick={() => triggerModal({}, true)}>
          新增
        </Button>
      </div>
    );
  }