listpage_cli 0.0.322 → 0.0.324
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"preview": "rsbuild preview"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"listpage-http": "0.0.
|
|
14
|
-
"listpage-components": "0.0.
|
|
13
|
+
"listpage-http": "0.0.324",
|
|
14
|
+
"listpage-components": "0.0.324",
|
|
15
15
|
"antd": "6.3.1",
|
|
16
16
|
"ahooks": "^3.9.5",
|
|
17
17
|
"@ant-design/icons": "~6.0.2",
|
|
@@ -4,17 +4,17 @@
|
|
|
4
4
|
|
|
5
5
|
## ListPageProps
|
|
6
6
|
|
|
7
|
-
| 属性
|
|
8
|
-
|
|
|
9
|
-
| `styles`
|
|
10
|
-
| `title`
|
|
11
|
-
| `extra`
|
|
12
|
-
| `filter`
|
|
13
|
-
| `toolbar`
|
|
14
|
-
| `table`
|
|
15
|
-
| `request`
|
|
16
|
-
| `floats`
|
|
17
|
-
| `initialValues` | 初始值
|
|
7
|
+
| 属性 | 说明 | 类型 | 必填 |
|
|
8
|
+
| --------------- | ----------------------- | ------------------------------------------------------- | ---- |
|
|
9
|
+
| `styles` | 样式覆盖（目前仅 page） | `{ page?: React.CSSProperties }` | 否 |
|
|
10
|
+
| `title` | 页面标题 | `ReactNode` | 否 |
|
|
11
|
+
| `extra` | 标题右侧操作区 | `ReactNode \| (ctx: ListPageContextValue) => ReactNode` | 否 |
|
|
12
|
+
| `filter` | 筛选配置 | `FilterConfig \| FilterRenderConfig` | 否 |
|
|
13
|
+
| `toolbar` | 工具栏 | `ToolbarRenderConfig` | 否 |
|
|
14
|
+
| `table` | 表格配置 | `TableConfig \| TableRenderConfig` | 是 |
|
|
15
|
+
| `request` | 数据请求 | `ListPageRequest` | 是 |
|
|
16
|
+
| `floats` | 浮窗列表 | `FloatItem[]` | 否 |
|
|
17
|
+
| `initialValues` | 初始值 | `InitialValues` | 否 |
|
|
18
18
|
|
|
19
19
|
---
|
|
20
20
|
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
|
|
23
23
|
```ts
|
|
24
24
|
type InitialValues = {
|
|
25
|
-
filterValues?: any;
|
|
26
|
-
pageSize?: number;
|
|
25
|
+
filterValues?: any; // 预填筛选
|
|
26
|
+
pageSize?: number; // 默认每页条数
|
|
27
27
|
currentPage?: number; // 默认当前页
|
|
28
28
|
};
|
|
29
29
|
```
|
|
@@ -38,9 +38,9 @@ type FilterConfig = { items: FilterItem[] };
|
|
|
38
38
|
type FilterItem = {
|
|
39
39
|
name: string;
|
|
40
40
|
label?: ReactNode;
|
|
41
|
-
component?: ReactElement;
|
|
41
|
+
component?: ReactElement; // antd Input、Select 等
|
|
42
42
|
colSpan?: number;
|
|
43
|
-
formItemProps?: Omit<FormItemProps,
|
|
43
|
+
formItemProps?: Omit<FormItemProps, "children">;
|
|
44
44
|
};
|
|
45
45
|
```
|
|
46
46
|
|
|
@@ -57,7 +57,7 @@ type ToolbarRenderConfig = {
|
|
|
57
57
|
|
|
58
58
|
type ToolbarRenderProps = {
|
|
59
59
|
ctx: ListPageContextValue;
|
|
60
|
-
selection?: SelectionState;
|
|
60
|
+
selection?: SelectionState; // { selectedRowKeys; selectedRows }
|
|
61
61
|
};
|
|
62
62
|
```
|
|
63
63
|
|
|
@@ -84,17 +84,18 @@ type TableConfig = {
|
|
|
84
84
|
|
|
85
85
|
继承 antd `ColumnType`，额外支持：
|
|
86
86
|
|
|
87
|
-
| 属性
|
|
88
|
-
|
|
|
89
|
-
| `renderer`
|
|
90
|
-
| `rendererOptions` | 渲染器配置
|
|
91
|
-
| `component`
|
|
87
|
+
| 属性 | 说明 | 类型 |
|
|
88
|
+
| ----------------- | ----------------------------- | -------------------------------------------- |
|
|
89
|
+
| `renderer` | 内置渲染器 | `ColumnRendererType` |
|
|
90
|
+
| `rendererOptions` | 渲染器配置 | `ColumnRendererOptions[renderer]` |
|
|
91
|
+
| `component` | 自定义渲染（优先于 renderer） | `(props: ColumnComponentProps) => ReactNode` |
|
|
92
92
|
|
|
93
93
|
**ColumnComponentProps**：`{ ctx: ListPageContextValue; record; index; value }`
|
|
94
94
|
|
|
95
95
|
**ColumnRendererType**：`'text' | 'ellipsis' | 'tag' | 'badge' | 'date' | 'datetime' | 'number' | 'money' | 'percent' | 'boolean' | 'link' | 'enum' | 'copyable' | 'avatar' | 'image'`
|
|
96
96
|
|
|
97
97
|
**ColumnRendererOptions**（按 renderer 选配）：
|
|
98
|
+
|
|
98
99
|
- `ellipsis`: `{ maxLength?: number }`
|
|
99
100
|
- `tag`: `{ colorMap?: Record<string, string>; options?: Array<{ value; label; color? }> }`
|
|
100
101
|
- `badge`: `{ colorMap }`
|
|
@@ -118,7 +119,7 @@ type ListPageRequest = (
|
|
|
118
119
|
) => Promise<{ list: any[]; total: number }>;
|
|
119
120
|
|
|
120
121
|
type RequestParams = { current: number; pageSize: number };
|
|
121
|
-
type SortParams = { field?: string; order?:
|
|
122
|
+
type SortParams = { field?: string; order?: "ascend" | "descend" | null };
|
|
122
123
|
```
|
|
123
124
|
|
|
124
125
|
---
|
|
@@ -134,8 +135,8 @@ type FloatItem = {
|
|
|
134
135
|
type FloatComponentProps<T = any> = {
|
|
135
136
|
record: T;
|
|
136
137
|
visible: boolean;
|
|
137
|
-
onClose: (
|
|
138
|
-
//
|
|
138
|
+
onClose: (refresh?: any) => void;
|
|
139
|
+
// onClose(true) 强制刷新；onClose() 根据 showFloat 第三参 onCloseCallback 处理
|
|
139
140
|
};
|
|
140
141
|
```
|
|
141
142
|
|
|
@@ -145,20 +146,20 @@ type FloatComponentProps<T = any> = {
|
|
|
145
146
|
|
|
146
147
|
`extra`、`toolbar.render`、`table.extra`、列 `component` 中通过 `useListPageContext()` 获取。
|
|
147
148
|
|
|
148
|
-
| 属性
|
|
149
|
-
|
|
|
150
|
-
| `filters`
|
|
151
|
-
| `initialFilterValues` | 初始筛选值
|
|
152
|
-
| `pagination`
|
|
153
|
-
| `dataSource`
|
|
154
|
-
| `loading`
|
|
155
|
-
| `selection`
|
|
156
|
-
| `sort`
|
|
157
|
-
| `refreshTable`
|
|
158
|
-
| `submitFilters`
|
|
159
|
-
| `resetFilters`
|
|
160
|
-
| `updatePagination`
|
|
161
|
-
| `updateSort`
|
|
162
|
-
| `showFloat`
|
|
163
|
-
| `hideFloat`
|
|
164
|
-
| `onSelectionChange`
|
|
149
|
+
| 属性 | 说明 |
|
|
150
|
+
| --------------------- | ---------------------------------------------------------------- |
|
|
151
|
+
| `filters` | 当前筛选值 |
|
|
152
|
+
| `initialFilterValues` | 初始筛选值 |
|
|
153
|
+
| `pagination` | `{ current; pageSize; total }` |
|
|
154
|
+
| `dataSource` | 表格数据 |
|
|
155
|
+
| `loading` | 加载中 |
|
|
156
|
+
| `selection` | `{ selectedRowKeys; selectedRows }` |
|
|
157
|
+
| `sort` | `{ field?; order? }` |
|
|
158
|
+
| `refreshTable` | 刷新表格 |
|
|
159
|
+
| `submitFilters` | 提交筛选并刷新 |
|
|
160
|
+
| `resetFilters` | 重置筛选 |
|
|
161
|
+
| `updatePagination` | 更新分页 `(page, pageSize)` |
|
|
162
|
+
| `updateSort` | 更新排序 `(field?, order?)` |
|
|
163
|
+
| `showFloat` | 打开浮窗 `(key, record, onCloseCallback?: true \| (() => void))` |
|
|
164
|
+
| `hideFloat` | 关闭浮窗 `(refresh?: any)`，传真值强制刷新 |
|
|
165
|
+
| `onSelectionChange` | 选中变更 `(keys, rows)` |
|
|
@@ -65,7 +65,7 @@ export default function Page() {
|
|
|
65
65
|
|
|
66
66
|
## 2. 复杂用法（内置渲染器、toolbar、多浮窗）
|
|
67
67
|
|
|
68
|
-
内置列渲染器：`text`、`ellipsis`、`tag`、`badge`、`date`、`datetime`、`number`、`money`、`percent`、`boolean`、`link`、`enum`、`copyable`、`avatar`、`image`。浮窗 `onClose(
|
|
68
|
+
内置列渲染器：`text`、`ellipsis`、`tag`、`badge`、`date`、`datetime`、`number`、`money`、`percent`、`boolean`、`link`、`enum`、`copyable`、`avatar`、`image`。浮窗 `onClose(true)` 强制刷新；`onClose()` 根据 `onCloseCallback` 处理。Modal/Drawer 的 `onCancel` 请用 `() => onClose()`。
|
|
69
69
|
|
|
70
70
|
```tsx
|
|
71
71
|
import { ListPage } from "listpage-components";
|
|
@@ -88,7 +88,7 @@ const request = async (pageParams, filterValues) => {
|
|
|
88
88
|
};
|
|
89
89
|
|
|
90
90
|
const DetailModal = ({ record, visible, onClose }) => (
|
|
91
|
-
<Modal open={visible} title="详情" onCancel={onClose} footer={null}>
|
|
91
|
+
<Modal open={visible} title="详情" onCancel={() => onClose()} footer={null}>
|
|
92
92
|
<p>姓名：{record?.name}</p>
|
|
93
93
|
</Modal>
|
|
94
94
|
);
|
|
@@ -97,10 +97,10 @@ const EditModal = ({ record, visible, onClose }) => (
|
|
|
97
97
|
<Modal
|
|
98
98
|
open={visible}
|
|
99
99
|
title="编辑"
|
|
100
|
-
onCancel={onClose}
|
|
100
|
+
onCancel={() => onClose()}
|
|
101
101
|
onOk={() => {
|
|
102
102
|
message.success("保存成功");
|
|
103
|
-
onClose(
|
|
103
|
+
onClose(true);
|
|
104
104
|
}}
|
|
105
105
|
>
|
|
106
106
|
<Input defaultValue={record?.name} />
|
|
@@ -114,7 +114,7 @@ const CreateDrawer = ({ record, visible, onClose }) => (
|
|
|
114
114
|
type="primary"
|
|
115
115
|
onClick={() => {
|
|
116
116
|
message.success("新建成功");
|
|
117
|
-
onClose(
|
|
117
|
+
onClose(true);
|
|
118
118
|
}}
|
|
119
119
|
>
|
|
120
120
|
保存
|
|
@@ -388,7 +388,7 @@ export const ContractTypeFormFloat = (
|
|
|
388
388
|
} else {
|
|
389
389
|
await api.contractType.create(values);
|
|
390
390
|
}
|
|
391
|
-
onClose(
|
|
391
|
+
onClose(true); // 强制刷新列表
|
|
392
392
|
};
|
|
393
393
|
|
|
394
394
|
return (
|