AdvancedFilter

# 设计理念

封装常用的搜索样式，查询及重置功能；

# 用途

搜索组件，一般配合列表及卡片使用；

# 实际效果

# 引用方式

import { AdvancedFilter } from '@/bdpcloud/components';

# 示例

# 常用搜索过滤设置

<AdvancedFilter
  handleSubmit={() => this.handleSearch()}
  handleReset={() => this.handleSearch(true)}
  advancedItem={[
    <Form.Item {...this.formItemLayout}>
      {form.getFieldDecorator("keyWord")(
        <Input.Search
          onSearch={() => this.handleSearch()}
          onPressEnter={() => this.handleSearch()}
          placeholder={getPlaceholder(
            formatMessage({
              id: "hostMgt.nameOrIp",
              defaultMessage: "主机名或者IP查询",
            })
          )}
        />
      )}
    </Form.Item>,
  ]}
>
  <Form.Item
    {...this.formItemLayout}
    label={formatMessage({ id: "home.type", defaultMessage: "类型" })}
  >
    {getFieldDecorator("type", {
      rules: [{ required: false }],
    })(
      <Select allowClear>
        {selectList.map((item) => {
          return (
            <Select.Option key={item.id} value={item.standCode}>
              {item.standDisplayValue}
            </Select.Option>
          );
        })}
      </Select>
    )}
  </Form.Item>
</AdvancedFilter>;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 完整的例子

<AdvancedFilter
    handleSubmit={() => this.handleSearch()}
    handleReset={() => this.handleSearch(true)}
    extraContent={
    <Fragment>
        <Dropdown
        overlay={
            <Menu
            onClick={e => {
                this.goToNext(e.key);
            }}
            >
            <Menu.Item key="add">新增</Menu.Item>
            <Menu.Item key="batchAdd">批量新增</Menu.Item>
            </Menu>
        }
        >
          <Button type="primary" icon="down">
              新增
          </Button>
        </Dropdown>
        <Button
        className="button-margin-left"
        onClick={() => {
            this.gotoNext('scan');
        }}
        >
        {formatMessage({
            id: 'hostMgt.addVersion',
            defaultMessage: '扫描角色',
        })}
        </Button>
    </Fragment>
    }
    advancedExtra={
    <Popover placement="bottom" title="显示项选择" content={this.popoverContent()}>
        <Button icon="eye" />
    </Popover>
    }
    advancedItem={[
    <Form.Item {...this.formItemLayout}>
        {form.getFieldDecorator('keyWord')(
        <Input.Search
            onSearch={() => this.handleSearch()}
            onPressEnter={() => this.handleSearch()}
            placeholder={getPlaceholder(
            formatMessage({
                id: 'hostMgt.nameOrIp',
                defaultMessage: '主机名或者IP查询',
            })
            )}
        />
        )}
    </Form.Item>,
    ]}
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# API

参数	说明	类型	默认值
extraContent	左边部分	ReactNode	-
advancedExtra	中间显示部分	object	-
advancedItem	最右边部分	ReactNode	-

上次更新: 2023/11/17, 05:08:20