97 lines
3.1 KiB
Markdown
97 lines
3.1 KiB
Markdown
|
---
|
|||
|
|
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>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
```
|