---
name: jjb-search-form
description: 定义 JJB 项目搜索表单组件使用规范。在使用 SearchForm、formLine、Form.Item 或 PageLayout 集成搜索区时使用。必须参考 MD/d.ts 文档。
---

# 搜索区规范（一级页面）

## 搜索表单组件

- 除提示词明确不需要的情况下，所有页面搜索区 **必须** 使用：

  ```javascript
  import SearchForm from '~/components/SearchForm'
  ```

  必须严格参考node_modules中对应依赖包的 MD 文档或 d.ts 文件！不得猜测组件属性！

- **FormLine 规范**：

  `SearchForm` 的 `formLine` 属性中，所有搜索控件 **必须** 使用 `ControlWrapper` 封装：

  ```javascript
  import ControlWrapper from '@cqsjjb/jjb-react-admin-component/ControlWrapper'
  ```

  | 控件 | 写法 |
  |------|------|
  | 文本输入 | `<ControlWrapper.Input label="标签" placeholder="请输入" allowClear />` |
  | 下拉选择 | `<ControlWrapper.Select label="标签" placeholder="请选择" allowClear style={{ width: "100%" }}>...</ControlWrapper.Select>` |
  | 日期范围 | `<ControlWrapper.DatePicker.RangePicker label="标签" />` |
  | 级联选择 | `<ControlWrapper.Cascader label="标签" placeholder="请选择" options={...} />` |
  | 树选择 | `<ControlWrapper.TreeSelect label="标签" placeholder="请选择" treeData={...} />` |

  **注意**：`ControlWrapper` 没有 `Custom` 属性，不要自行拼装。

- **布局挂载规范**：

  - **标准布局**：若页面结构简单，**必须**将 `SearchForm` 放置在 `PageLayout` 的 `formLine` 属性中，以实现搜索区与页面头部的紧凑集成。

  - **复杂布局**：若搜索需求涉及复杂交互或多行展示，可根据实际场景将 `SearchForm` 放置于 `PageLayout` 的主体内容区。

### 代码演示

```jsx
import React, { useState, useEffect } from 'react';
import { Button, Form, Table } from 'antd';
import PageLayout from '@cqsjjb/jjb-react-admin-component/PageLayout';
import SearchForm from '~/components/SearchForm';
import ControlWrapper from '@cqsjjb/jjb-react-admin-component/ControlWrapper';
import { tools } from '@cqsjjb/jjb-common-lib';

const { router } = tools;

function DemoList(props) {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const getData = async () => {
    setLoading(true);
    try {
      // 请求数据
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    form.setFieldsValue(router.query);
    getData();
  }, []);

  return (
    <PageLayout title="页面标题">
      <SearchForm
        style={{ marginBottom: 24 }}
        form={form}
        loading={loading}
        formLine={[
          <Form.Item key="name" name="name">
            <ControlWrapper.Input label="名称" placeholder="请输入" allowClear />
          </Form.Item>,
        ]}
        onReset={(values) => {
          router.query = { ...router.query, ...values, current: 1, pageSize: 10 };
          getData();
        }}
        onFinish={(values) => {
          router.query = { ...router.query, ...values, current: 1, pageSize: 10 };
          getData();
        }}
      />
      {/* Table ... */}
    </PageLayout>
  );
}
```