124 lines
3.2 KiB
Markdown
124 lines
3.2 KiB
Markdown
|
---
|
|||
|
|
name: jjb-table-basic
|
|||
|
|
description: 定义 JJB 项目表格基础规范。在使用 antd/Table 或配置表格 loading 时使用。
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 表格（Table）规范
|
|||
|
|
|
|||
|
|
## 表格基础
|
|||
|
|
|
|||
|
|
- 使用 `antd/Table`
|
|||
|
|
- 通过接口获取数据的 Table **必须** 有 loading 效果
|
|||
|
|
|
|||
|
|
## AntdTableFuncControl（必选）
|
|||
|
|
|
|||
|
|
所有列表页 **必须** 使用 `AntdTableFuncControl` HOC 包裹组件，以自动计算表格滚动高度 `scrollY`：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
|
|||
|
|
|
|||
|
|
// Table 中使用
|
|||
|
|
<Table scroll={{ y: props.scrollY }} ... />
|
|||
|
|
|
|||
|
|
// 导出时包裹
|
|||
|
|
export default AntdTableFuncControl(MyComponent);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
若同时使用 Connect，HOC 顺序：`Connect(...)(AntdTableFuncControl(Component))`
|
|||
|
|
|
|||
|
|
## 列表页数据流（router.query 模式）
|
|||
|
|
|
|||
|
|
**禁止** 使用 `zy-react-library` 的 `useTable` hook。必须手动管理数据状态：
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
import { tools } from "@cqsjjb/jjb-common-lib";
|
|||
|
|
|
|||
|
|
const { router } = tools;
|
|||
|
|
|
|||
|
|
function ListPage(props) {
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [dataSource, setDataSource] = useState([]);
|
|||
|
|
const [total, setTotal] = useState(0);
|
|||
|
|
|
|||
|
|
const getData = async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const params = {
|
|||
|
|
...router.query,
|
|||
|
|
current: router.query.current || 1,
|
|||
|
|
size: router.query.size || 10,
|
|||
|
|
};
|
|||
|
|
const res = await props.xxxList(params);
|
|||
|
|
if (res?.success !== false) {
|
|||
|
|
setDataSource(res?.data?.records || res?.data || []);
|
|||
|
|
setTotal(res?.data?.total || 0);
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.warn(err);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
form.setFieldsValue(router.query);
|
|||
|
|
getData();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<PageLayout title="标题">
|
|||
|
|
<SearchForm
|
|||
|
|
form={form}
|
|||
|
|
loading={loading}
|
|||
|
|
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
|
|||
|
|
rowKey="id"
|
|||
|
|
columns={...}
|
|||
|
|
dataSource={dataSource}
|
|||
|
|
loading={loading}
|
|||
|
|
scroll={{ y: props.scrollY }}
|
|||
|
|
pagination={{
|
|||
|
|
total,
|
|||
|
|
showSizeChanger: true,
|
|||
|
|
showQuickJumper: true,
|
|||
|
|
showTotal: (t) => `共 ${t} 条`,
|
|||
|
|
current: router.query.current || 1,
|
|||
|
|
pageSize: router.query.size || 10,
|
|||
|
|
onChange: (page, pageSize) => {
|
|||
|
|
router.query = { ...router.query, current: page, size: pageSize };
|
|||
|
|
getData();
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</PageLayout>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default AntdTableFuncControl(ListPage);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 上传组件
|
|||
|
|
|
|||
|
|
使用 antd 原生 `Upload`，**禁止** 使用 `zy-react-library` 的 `Upload` 组件。
|
|||
|
|
|
|||
|
|
## 禁止使用的 zy-react-library 组件
|
|||
|
|
|
|||
|
|
以下 `zy-react-library` 组件在列表页中 **禁止使用**，必须替换为项目规范组件：
|
|||
|
|
|
|||
|
|
| 禁止 | 替换为 |
|
|||
|
|
|------|--------|
|
|||
|
|
| `Search` | `SearchForm` + `ControlWrapper` |
|
|||
|
|
| `Table` + `useTable` | antd `Table` + `AntdTableFuncControl` + 手动管理数据 |
|
|||
|
|
| `Upload` | antd `Upload` |
|