react做多条件缓存search组件，公用性比较强

1、使用方式

import SearchBarMore from '../../../components/Search/searchBarMore';

<SearchBarMore

            form={form}

            option={searchConfig}

            onSearch={submit}

            onClear={reset}

            placeholder="输入员工姓名、工号或项目名称"

          />

2、搜索项控制，不同页面可以不同控制

const searchConfig: any[] = [

    {

      itemType: 'customize',

      placeholder: '请选择',

      name: 'projectName',

      label: '选择项目',

      allowClear: true,

      col: 8,

    },

    {

      itemType: 'hidden',

      placeholder: '请选择',

      name: 'projectData',

      label: '项目data',

      allowClear: true,

      col: 8,

    },

    {

      itemType: 'hidden',

      placeholder: '请选择',

      name: 'projectCode',

      label: '项目code',

      allowClear: true,

      col: 8,

    },

    {

      itemType: 'input',

      placeholder: '请输入',

      name: 'submitName',

      label: '提交人',

      allowClear: true,

      col: 8,

    },

    {

      itemType: 'hidden',

      placeholder: '请输入',

      name: 'tabIndex',

      label: '选项卡',

      allowClear: true,

      col: 8,

    },

    {

      itemType: 'input',

      placeholder: '请输入',

      name: 'acceptName',

      label: ' 受理人',

      allowClear: true,

      col: 8,

    },

    {

      itemType: 'input',

      placeholder: '请输入',

      name: 'organizationCode',

      label: ' 所属阵地',

      allowClear: true,

      col: 8,

    },

    {

      itemType: 'input',

      placeholder: '请输入',

      name: 'cityName',

      label: ' 所在城市',

      allowClear: true,

      col: 8,

    },

    {

      itemType: 'searchOrReset',

      col: 8,

    },

  ];

3、search组件控制下拉框、输入框、自定义组件等等

import React, { useState, useEffect } from 'react';

import { Form, Row, Col, Input, Button, Select } from 'antd';

import { taskType } from '@/pages/TaskManage/fastDelivery/components/fastStatusType';

import SelectProjectModal from '@/components/treeProject/selectProject';

import _ from 'lodash';

import { SearchOutlined, CloseCircleOutlined } from '@ant-design/icons';

import { cleanObject } from '@/utils/clean';

interface IProps {

  onSearch: (v: any) => void;

  onClear: () => void;

  option: any;

  placeholder: string;

  form: any;

}

const SearchBarMore: React.FC<IProps> = (props) => {

  const { option, onSearch, onClear, form } = props;

  const { Search } = Input;

  function onFinish(v: any) {

    Object.assign(v);

    onSearch(cleanObject(v));

  }

  function clear() {

    form?.resetFields();

    onClear();

  }

  const SelectRender = (item: any) => {

    let selectOptions: any[] = [];

    if (item.dataType === 'taskType') {

      selectOptions = taskType;

    }

    return (

      <Col xs={12} sm={8} md={item.col || 6}>

        <Form.Item label={item.label} name={item.name} labelCol={{ span: 6 }}>

          <Select

            multiple={item.multiple}

            config={item}

            allowClear={item.allowClear}

            onChange={onChangeSelect}

            placeholder={item.placeholder || '请选择'}

            getPopupContainer={(triggerNode: { parentElement: any }) => triggerNode.parentElement || document.body}

          >

            {selectOptions.map((sp) => (

              <Select.Option key={sp.value} value={sp.value} disabled={sp.disabled}>

                {sp.label}

              </Select.Option>

            ))}

          </Select>

        </Form.Item>

      </Col>

    );

  };

  const onChangeSelect = (v: any) => {

    console.log(v);

  };

  const HiddenRender = (item: any) => {

    return (

      <Form.Item name={item.name} labelCol={{ span: 0 }}>

        <Input type="hidden" />

      </Form.Item>

    );

  };

  const InputRender = (item: any) => {

    return (

      <Col xs={12} sm={8} md={item.col || 6}>

        <Form.Item label={item.label} name={item.name} labelCol={{ span: 6 }}>

          <Search

            autoComplete="off"

            allowClear

            onSearch={(v) => clearStrSpace(v, item.name)}

            placeholder={item.placeholder || '请输入关键字...'}

          />

        </Form.Item>

      </Col>

    );

  };

  // 自定义选择项目

  const CustomizeRender = (item: any) => {

    return (

      <Col xs={12} sm={8} md={item.col || 6}>

        <Form.Item label={item.label} name={item.name} labelCol={{ span: 6 }}>

          <Select

            mode="tags"

            placeholder="请选择"

            className="w-60"

            open={false}

            onClick={showModal}

            suffixIcon={<SearchOutlined />}

            maxTagCount={1}

            onChange={proChanged}

          />

        </Form.Item>

        {form?.getFieldsValue(true)?.projectName?.length > 0 ? (

          <CloseCircleOutlined

            className="absolute top-2.2 right-5 cursor-pointer z-1000"

            style={{ color: '#999' }}

            onClick={clearProject}

          />

        ) : (

          ''

        )}

      </Col>

    );

  };

  const SearchOrResetRender = (item: any) => {

    return (

      <Col xs={12} sm={8} md={item.col || 8}>

        <Button className=" float-right" type="primary" htmlType="submit">

          查询

        </Button>

        <Button className="mr-3 float-right" onClick={clear}>

          重置

        </Button>

      </Col>

    );

  };

  function clearProject() {

    form?.setFieldsValue({

      ...form?.getFieldsValue(true),

      projectName: [],

      projectCode: [],

    });

  }

  function proChanged(val: any) {

    let arr: any = [];

    form?.getFieldsValue(true)?.projectData?.forEach((item: any) => {

      if ((item.title && val.includes(item.title)) || (item.name && val.includes(item.name))) {

        arr.push(item.code);

      }

    });

    setTimeout(() => {

      form?.setFieldsValue({

        ...form?.getFieldsValue(true),

        projectName: val,

        projectCode: arr,

      });

    }, 10);

  }

  const showModal = () => {

    SelectProjectModal.show({

      show: form?.getFieldsValue(true)?.projectCode,

      // isAlone: true, //单选

      title: '选择项目（多选）',

      onOk(data, m) {

        if (m === 'tree') {

          form?.setFieldsValue({

            ...form?.getFieldsValue(true),

            projectName: _.map(data, 'title'),

            projectCode: _.map(data, 'code'),

            projectData: data,

          });

        } else {

          form?.setFieldsValue({

            ...form?.getFieldsValue(true),

            projectName: _.map(data, 'name'),

            projectCode: _.map(data, 'code'),

            projectData: data,

          });

        }

      },

    });

  };

  function clearStrSpace(e: string, name: any) {

    form?.setFieldsValue({ [name]: e.trim() });

    let param = form?.getFieldsValue(true);

    Object.assign(param);

    onSearch(cleanObject(param));

  }

  return (

    <Form form={form} onFinish={(v) => onFinish(v)} autoComplete="off" className="flex-auto">

      <SelectProjectModal />

      <Row gutter={24}>

        {option.map((config: any, index: any) => (

          <React.Fragment key={index}>

            {config.itemType === 'select' && SelectRender(config)}

            {config.itemType === 'input' && InputRender(config)}

            {config.itemType === 'customize' && CustomizeRender(config)}

            {config.itemType === 'searchOrReset' && SearchOrResetRender(config)}

            {config.itemType === 'hidden' && HiddenRender(config)}

          </React.Fragment>

        ))}

      </Row>

    </Form>

  );

};

export default SearchBarMore;