@hzab/list-render 1.12.10 → 1.12.12
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/CHANGELOG.md +189 -126
- package/README.md +392 -203
- package/dist/index.cjs +1 -1
- package/dist/index.js +286 -285
- package/docs/README.md +15 -0
- package/docs/effect.md +112 -0
- package/docs/form-linkage.md +4 -1
- package/docs/remote-data.md +6 -1
- package/docs/table.md +131 -6
- package/package.json +13 -13
- package/src/list-render.jsx +7 -4
package/docs/README.md
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# 组件文档
|
|
2
|
+
|
|
3
|
+
`@hzab/list-render` 的补充文档，位于本包 `docs/` 目录（与 `src/` 分离），随包发布。
|
|
4
|
+
|
|
5
|
+
| 主题 | 文档 | 内容 |
|
|
6
|
+
| ---------- | ------------------------------------ | ------------------------------------------------------------------ |
|
|
7
|
+
| 表格 | [table.md](./table.md) | 筛选与重置、顶部操作栏插槽、手动发起请求、编辑模式、新增与编辑表单 |
|
|
8
|
+
| 表单联动 | [form-linkage.md](./form-linkage.md) | 表单项显隐、按其他表单项改变数值、改变 Select 选项 |
|
|
9
|
+
| 远程数据源 | [remote-data.md](./remote-data.md) | Select / TreeSelect 动态取数（schemaScope + 响应器） |
|
|
10
|
+
| 配置响应器 | [effect.md](./effect.md) | 响应器可用参数、属性响应与 `$effect` 用法、常见场景与注意事项 |
|
|
11
|
+
|
|
12
|
+
其他文档：
|
|
13
|
+
|
|
14
|
+
- 组件 API、安装方式与常见问题见根目录 [README.md](../README.md)
|
|
15
|
+
- 版本变更见 [CHANGELOG.md](../CHANGELOG.md)
|
package/docs/effect.md
CHANGED
|
@@ -1,2 +1,114 @@
|
|
|
1
1
|
# 配置响应器
|
|
2
2
|
|
|
3
|
+
- 响应器由 formily 提供，写在 schema 字段的 `x-reactions` 上，用于「监听其他字段 → 改变当前字段」。
|
|
4
|
+
- 在 Schema JSON 配置界面中的操作路径：选中表单项 → 属性配置 → 字段属性 → 配置响应器 →
|
|
5
|
+
选择依赖字段 → 填写属性响应器（state）或执行响应器（run）。
|
|
6
|
+
- 参数速查同时见 [README.md §响应器中可用的参数](../README.md#响应器中可用的参数)；官方文档见
|
|
7
|
+
[formily Schema 内表达式作用域](https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F)。
|
|
8
|
+
|
|
9
|
+
## 1. 两种响应器
|
|
10
|
+
|
|
11
|
+
| 类型 | schema 位置 | 用途 |
|
|
12
|
+
| -------- | --------------------------- | ------------------------------------------------------------------------------- |
|
|
13
|
+
| 属性响应 | `x-reactions.fulfill.state` | 直接改字段自身状态：`visible` / `hidden` / `none`、`value`、`componentProps` 等 |
|
|
14
|
+
| 执行响应 | `x-reactions.fulfill.run` | 执行一段 JS（异步取数、调用外部函数），通常配合 `$effect` 使用 |
|
|
15
|
+
|
|
16
|
+
## 2. scenario：当前所处环境
|
|
17
|
+
|
|
18
|
+
`list-render` 会把当前场景注入 schemaScope，响应器中可直接读取 `scenario`：
|
|
19
|
+
|
|
20
|
+
| scenario 取值 | 出现位置 |
|
|
21
|
+
| ------------- | --------------------- |
|
|
22
|
+
| create | 新增表单弹窗 |
|
|
23
|
+
| edit | 编辑表单弹窗 |
|
|
24
|
+
| detail | 详情弹层 |
|
|
25
|
+
| query | 列表上方查询表单 |
|
|
26
|
+
| table-render | 表格列渲染 / 卡片渲染 |
|
|
27
|
+
|
|
28
|
+
```JSON
|
|
29
|
+
{
|
|
30
|
+
"x-reactions": {
|
|
31
|
+
"dependencies": [{ "property": "value", "type": "any" }],
|
|
32
|
+
"fulfill": {
|
|
33
|
+
"state": {
|
|
34
|
+
"visible": "{{scenario === 'edit'}}"
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## 3. 可用参数
|
|
42
|
+
|
|
43
|
+
| 参数名 | 说明 |
|
|
44
|
+
| ----------- | ------------------------------------------------------------------------------------------------------ |
|
|
45
|
+
| scenario | 环境参数，当前环境，取值见上表 |
|
|
46
|
+
| $self | 代表当前字段实例，可以在普通属性表达式中使用，也能在 x-reactions 中使用 |
|
|
47
|
+
| $form | 代表当前 Form 实例，可以在普通属性表达式中使用，也能在 x-reactions 中使用 |
|
|
48
|
+
| $deps | 只能在 x-reactions 中的表达式消费，与 x-reactions 定义的 dependencies 对应，数组顺序一致 |
|
|
49
|
+
| $values | 代表顶层表单数据，可以在普通属性表达式中使用，也能在 x-reactions 中使用 |
|
|
50
|
+
| $observable | 用于创建响应式对象，使用方式与 observable 一致 |
|
|
51
|
+
| $memo | 用于创建持久引用数据，使用方式与 autorun.memo 一致 |
|
|
52
|
+
| $effect | 用于响应 autorun 第一次执行的下一个微任务时机与响应 autorun 的 dispose，使用方式与 autorun.effect 一致 |
|
|
53
|
+
| $props | 用于对当前字段实例设置组件 props |
|
|
54
|
+
|
|
55
|
+
## 4. 常见场景
|
|
56
|
+
|
|
57
|
+
### 4.1 依赖其他字段控制显隐
|
|
58
|
+
|
|
59
|
+
- 完整步骤与 schema 见 [form-linkage.md](./form-linkage.md#表单项显隐)。
|
|
60
|
+
|
|
61
|
+
```JSON
|
|
62
|
+
{
|
|
63
|
+
"x-reactions": {
|
|
64
|
+
"dependencies": [{ "property": "value", "type": "string", "source": "menuType", "name": "menuType" }],
|
|
65
|
+
"fulfill": {
|
|
66
|
+
"state": {
|
|
67
|
+
"visible": "{{$deps.menuType === \"C\"}}"
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### 4.2 依赖其他字段改变当前字段的值
|
|
75
|
+
|
|
76
|
+
```JSON
|
|
77
|
+
{
|
|
78
|
+
"x-reactions": {
|
|
79
|
+
"dependencies": [{ "property": "value", "type": "string", "source": "test", "name": "test" }],
|
|
80
|
+
"fulfill": {
|
|
81
|
+
"state": {
|
|
82
|
+
"value": "{{$deps.test + 10}}"
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### 4.3 动态取数（远程数据源）
|
|
90
|
+
|
|
91
|
+
- 通过 `run` 调用 `schemaScope` 中传入的函数，并用 `$effect` 声明依赖，字段卸载时自动回收。
|
|
92
|
+
- 完整示例见 [remote-data.md](./remote-data.md) 与 [form-linkage.md](./form-linkage.md#根据其他表单项改变当前-select-数据)。
|
|
93
|
+
|
|
94
|
+
```JSON
|
|
95
|
+
{
|
|
96
|
+
"x-reactions": {
|
|
97
|
+
"dependencies": [{ "property": "value", "type": "string", "source": "test", "name": "test" }],
|
|
98
|
+
"fulfill": {
|
|
99
|
+
"run": "$effect(() => {\n try {\n fetchSelectOptions && fetchSelectOptions($self, { test: $deps.test })\n } catch (e) {}\n}, [$deps.test])\n"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
- Select 通过 `field.dataSource` 配置选项；TreeSelect 等组件的 props 通过 `field.component[1]` 配置。
|
|
106
|
+
|
|
107
|
+
## 5. 注意事项
|
|
108
|
+
|
|
109
|
+
- `dependencies` 必须声明被依赖字段，表达式中的 `$deps.xxx` 才可用；`source` / `name` 要与依赖字段的 name 一致。
|
|
110
|
+
- 依赖链达到三层及以上时请使用 `display` 而不是 `visible`：3 依赖 2、2 依赖 1 时，
|
|
111
|
+
编辑态赋值 2 不会触发 3 的 `visible` 重新计算，`display` 可以正确响应。
|
|
112
|
+
- `run` 中调用外部函数建议包一层 `try / catch`，避免单个响应器抛错中断整个表单渲染。
|
|
113
|
+
- 表格列渲染场景（`scenario === "table-render"`）的响应器在列表数据变化时按字段重新计算，
|
|
114
|
+
枚举/字典数据更新后若展示未刷新，可用 `ref.current.forceUpdate()` 强制重渲染。
|
package/docs/form-linkage.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# 表单联动
|
|
2
2
|
|
|
3
3
|
- 通过 配置响应器 实现
|
|
4
|
+
- 响应器可用参数与通用注意事项见 [effect.md](./effect.md)
|
|
4
5
|
|
|
5
6
|
#### 表单项显隐
|
|
6
7
|
|
|
@@ -147,6 +148,8 @@
|
|
|
147
148
|
|
|
148
149
|
```JSX
|
|
149
150
|
// RemoteData
|
|
151
|
+
import { useMemo } from "react";
|
|
152
|
+
import { DataModel, ListRender } from "@hzab/list-render";
|
|
150
153
|
import listSchema from "./list.schema.json";
|
|
151
154
|
|
|
152
155
|
const schemaScope = {
|
|
@@ -197,7 +200,7 @@ const schemaScope = {
|
|
|
197
200
|
function RemoteData() {
|
|
198
201
|
const listDM = useMemo(
|
|
199
202
|
() =>
|
|
200
|
-
new
|
|
203
|
+
new DataModel({
|
|
201
204
|
getListApi: "/api/v1/user/list",
|
|
202
205
|
getApi: "/api/v1/user/list/:id",
|
|
203
206
|
createApi: "/api/v1/user/list",
|
package/docs/remote-data.md
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
# 远程数据源
|
|
2
2
|
|
|
3
|
+
- 用于让 schema 中的 Select / TreeSelect 等组件的选项来自接口：在 `schemaScope` 中提供取数函数，
|
|
4
|
+
再在字段的 `x-reactions` 中通过 `$effect` 调用它（响应器写法见 [effect.md](./effect.md)）。
|
|
5
|
+
|
|
3
6
|
#### select 数据源
|
|
4
7
|
|
|
5
8
|
- RemoteData.jsx
|
|
6
9
|
|
|
7
10
|
```JSX
|
|
8
11
|
// RemoteData
|
|
12
|
+
import { useMemo } from "react";
|
|
13
|
+
import { DataModel, ListRender } from "@hzab/list-render";
|
|
9
14
|
import listSchema from "./list.schema.json";
|
|
10
15
|
|
|
11
16
|
const schemaScope = {
|
|
@@ -56,7 +61,7 @@ const schemaScope = {
|
|
|
56
61
|
function RemoteData() {
|
|
57
62
|
const listDM = useMemo(
|
|
58
63
|
() =>
|
|
59
|
-
new
|
|
64
|
+
new DataModel({
|
|
60
65
|
getListApi: "/api/v1/user/list",
|
|
61
66
|
getApi: "/api/v1/user/list/:id",
|
|
62
67
|
createApi: "/api/v1/user/list",
|
package/docs/table.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# 表格相关
|
|
2
2
|
|
|
3
|
+
- 本文示例中的 `schema` / `listDM` / `listRef` 均为占位，分别代表 schema JSON、`DataModel` 实例与 `ListRender` 的 ref。
|
|
4
|
+
|
|
3
5
|
## query 相关
|
|
4
6
|
|
|
5
7
|
#### 设置过滤项
|
|
@@ -12,7 +14,7 @@
|
|
|
12
14
|
search="模糊搜索"
|
|
13
15
|
// 传入 schema 中所需表单项的 name
|
|
14
16
|
filters={["userId"]}
|
|
15
|
-
|
|
17
|
+
/>
|
|
16
18
|
```
|
|
17
19
|
|
|
18
20
|
#### 开启重置按钮
|
|
@@ -28,7 +30,15 @@
|
|
|
28
30
|
queryConf={{
|
|
29
31
|
hasReset: true
|
|
30
32
|
}}
|
|
31
|
-
|
|
33
|
+
/>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
#### 时间范围筛选
|
|
37
|
+
|
|
38
|
+
- `filters` 中的 `$timerange` 是保留值，用于生成「开始时间 ~ 结束时间」筛选（默认字段名 `beginTime` / `endTime`）。
|
|
39
|
+
|
|
40
|
+
```JSX
|
|
41
|
+
<ListRender schema={schema} model={listDM} filters={["$timerange", "userId"]} />
|
|
32
42
|
```
|
|
33
43
|
|
|
34
44
|
## 顶部操作栏（新增按钮附近）
|
|
@@ -40,7 +50,7 @@
|
|
|
40
50
|
```JSX
|
|
41
51
|
const Slots = {
|
|
42
52
|
headerActionSuffix() {
|
|
43
|
-
return (<div>
|
|
53
|
+
return (<div>headerActionSuffix</div>)
|
|
44
54
|
},
|
|
45
55
|
};
|
|
46
56
|
|
|
@@ -65,9 +75,9 @@ useEffect(() => {
|
|
|
65
75
|
ref={listRef}
|
|
66
76
|
schema={schema}
|
|
67
77
|
model={listDM}
|
|
68
|
-
//
|
|
69
|
-
closeAutoRequest
|
|
70
|
-
|
|
78
|
+
// 关闭挂载后自动发起请求（传 closeAutoRequest 即关闭，默认 false 表示开启）
|
|
79
|
+
closeAutoRequest
|
|
80
|
+
/>
|
|
71
81
|
```
|
|
72
82
|
|
|
73
83
|
#### 编辑按钮左侧添加组件
|
|
@@ -83,4 +93,119 @@ const Slots = {
|
|
|
83
93
|
<ListRender schema={schema} model={listDM} Slots={Slots} />
|
|
84
94
|
```
|
|
85
95
|
|
|
96
|
+
#### 单元格自定义渲染
|
|
97
|
+
|
|
98
|
+
- 以 schema 字段 name 作为 Slots 的 key，即可替换该列单元格的渲染。
|
|
99
|
+
|
|
100
|
+
```JSX
|
|
101
|
+
const Slots = {
|
|
102
|
+
status(props) {
|
|
103
|
+
const { text, record, index, field, fieldSchema } = props;
|
|
104
|
+
return <Tag color={text === 1 ? "green" : "red"}>{text === 1 ? "启用" : "停用"}</Tag>;
|
|
105
|
+
},
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
<ListRender schema={schema} model={listDM} Slots={Slots} />
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
#### 显示列 / 显示过滤项
|
|
112
|
+
|
|
113
|
+
- 开启表格右上角的列显隐设置（`tableConf.isShowTableFilter`）。
|
|
114
|
+
|
|
115
|
+
```JSX
|
|
116
|
+
<ListRender schema={schema} model={listDM} tableConf={{ isShowTableFilter: true }} />
|
|
117
|
+
```
|
|
118
|
+
|
|
86
119
|
## 新增、编辑表单相关
|
|
120
|
+
|
|
121
|
+
#### 编辑模式 editMode
|
|
122
|
+
|
|
123
|
+
- 默认 `modal`（弹窗/抽屉）；行内编辑用 `line`、`line-cell`、`cell`，区别见
|
|
124
|
+
[README §编辑模式 editMode](../README.md#编辑模式-editmode)。
|
|
125
|
+
|
|
126
|
+
```JSX
|
|
127
|
+
// 整行编辑：操作列「编辑」→ 整行进入编辑态，操作列变为「保存 / 取消」
|
|
128
|
+
<ListRender schema={schema} model={listDM} editMode="line" />
|
|
129
|
+
|
|
130
|
+
// 单元格编辑：单元格内出现编辑图标，保存走 onEditSubmit
|
|
131
|
+
<ListRender
|
|
132
|
+
schema={schema}
|
|
133
|
+
model={listDM}
|
|
134
|
+
editMode="cell"
|
|
135
|
+
tableConf={{ hasEdit: (record) => record.status === 1 }}
|
|
136
|
+
// 单元格级可编辑判定，与 tableConf.hasEdit 同时满足时才可编辑
|
|
137
|
+
canEditCallback={(record, field, dataIndex) => dataIndex !== "id"}
|
|
138
|
+
/>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
#### 编辑弹窗的数据回填
|
|
142
|
+
|
|
143
|
+
```JSX
|
|
144
|
+
// 默认 true：打开弹窗先调详情接口回填；列表接口字段已完整时可关闭
|
|
145
|
+
<ListRender schema={schema} model={listDM} fetchOnEdit={false} />
|
|
146
|
+
|
|
147
|
+
// 详情接口入参 key 默认是 id；后端要求用其他字段名时关闭 fetchById（此时用 idKey 的值）
|
|
148
|
+
<ListRender schema={schema} model={listDM} fetchById={false} idKey="userId" />
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
#### 提交前的数据处理与校验
|
|
152
|
+
|
|
153
|
+
```JSX
|
|
154
|
+
<ListRender
|
|
155
|
+
schema={schema}
|
|
156
|
+
model={listDM}
|
|
157
|
+
// 编辑走 patch（model.patch / model.patchMap）而不是 put
|
|
158
|
+
isPatchUpdate
|
|
159
|
+
// 提交前把数据转成 FormData
|
|
160
|
+
useFormData
|
|
161
|
+
// 编辑保存前的额外校验：reject 即中止提交
|
|
162
|
+
onEditReqVerify={(data) => {
|
|
163
|
+
if (!data.menuName) return Promise.reject(new Error("菜单名称必填"));
|
|
164
|
+
return Promise.resolve();
|
|
165
|
+
}}
|
|
166
|
+
modalConf={{
|
|
167
|
+
// 弹窗提交前回调，return false 表示拦截，不进行请求
|
|
168
|
+
beforeSubmit: (values) => values.menuType !== "F",
|
|
169
|
+
}}
|
|
170
|
+
/>
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
#### 弹窗标题取当前行数据
|
|
174
|
+
|
|
175
|
+
- `modalConf.title` 的 `createKey` / `editKey` / `detailKey` 分别从 `formInitialValues`、当前行数据中取值作为标题。
|
|
176
|
+
|
|
177
|
+
```JSX
|
|
178
|
+
<ListRender
|
|
179
|
+
schema={schema}
|
|
180
|
+
model={listDM}
|
|
181
|
+
formInitialValues={{ menuName: "未命名菜单" }}
|
|
182
|
+
modalConf={{
|
|
183
|
+
title: {
|
|
184
|
+
createKey: "menuName",
|
|
185
|
+
editKey: "menuName",
|
|
186
|
+
detailText: "菜单详情",
|
|
187
|
+
},
|
|
188
|
+
}}
|
|
189
|
+
/>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
#### 替换弹窗内的表单 / 自定义底部按钮
|
|
193
|
+
|
|
194
|
+
```JSX
|
|
195
|
+
const Slots = {
|
|
196
|
+
// 替换新增、编辑弹窗内的表单
|
|
197
|
+
FormSlot({ formRef, scenario, schema }) {
|
|
198
|
+
return <MyForm formRef={formRef} scenario={scenario} schema={schema} />;
|
|
199
|
+
},
|
|
200
|
+
// 弹窗底部按钮两端的插槽
|
|
201
|
+
modalFooterPre({ options }) {
|
|
202
|
+
const { cancel, onOk, close, formRef, validate } = options;
|
|
203
|
+
return (<div>modalFooterPre</div>)
|
|
204
|
+
},
|
|
205
|
+
modalFooterSuffix({ options }) {
|
|
206
|
+
return (<div>modalFooterSuffix</div>)
|
|
207
|
+
},
|
|
208
|
+
};
|
|
209
|
+
|
|
210
|
+
<ListRender schema={schema} model={listDM} Slots={Slots} />
|
|
211
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hzab/list-render",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.12",
|
|
4
4
|
"private": false,
|
|
5
5
|
"src-direct": true,
|
|
6
6
|
"description": "列表与表格渲染",
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
"**/*.less"
|
|
21
21
|
],
|
|
22
22
|
"peerDependencies": {
|
|
23
|
-
"@formily/core": "
|
|
24
|
-
"@formily/json-schema": "
|
|
25
|
-
"@formily/react": "
|
|
26
|
-
"@formily/reactive": "
|
|
27
|
-
"@hzab/data-model": ">=
|
|
23
|
+
"@formily/core": "2.3.1",
|
|
24
|
+
"@formily/json-schema": "2.3.1",
|
|
25
|
+
"@formily/react": "2.3.1",
|
|
26
|
+
"@formily/reactive": "2.3.1",
|
|
27
|
+
"@hzab/data-model": ">=1.7.4",
|
|
28
28
|
"@hzab/edit-table": ">=0.1.2",
|
|
29
29
|
"@hzab/form-render": ">=1.5.0",
|
|
30
30
|
"@hzab/formily-result-utils": ">=1.2.0",
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@ant-design/icons": "^4.8.0",
|
|
47
47
|
"@formily/core": "2.3.1",
|
|
48
|
-
"@formily/json-schema": "
|
|
48
|
+
"@formily/json-schema": "2.3.1",
|
|
49
49
|
"@formily/react": "2.3.1",
|
|
50
|
-
"@formily/reactive": "
|
|
50
|
+
"@formily/reactive": "2.3.1",
|
|
51
51
|
"@types/lodash": "^4.17.12",
|
|
52
52
|
"@types/react": "^17.0.62",
|
|
53
53
|
"@types/react-dom": "^17.0.20",
|
|
@@ -63,15 +63,15 @@
|
|
|
63
63
|
"typescript": "^5.9.3",
|
|
64
64
|
"vite": "^8.0.0",
|
|
65
65
|
"vitest": "^4.1.10",
|
|
66
|
-
"@hzab/data-model": "^2.0.5",
|
|
67
|
-
"@hzab/eslint-config": "^0.0.0",
|
|
68
66
|
"@hzab/edit-table": "^0.1.9",
|
|
69
|
-
"@hzab/
|
|
70
|
-
"@hzab/vite-config": "^0.0.3-alpha.0",
|
|
67
|
+
"@hzab/eslint-config": "^0.0.0",
|
|
71
68
|
"@hzab/form-render": "^1.7.22",
|
|
72
69
|
"@hzab/formily-result-utils": "^1.2.6",
|
|
70
|
+
"@hzab/schema-descriptions": "^1.3.6",
|
|
71
|
+
"@hzab/data-model": "^2.0.5",
|
|
73
72
|
"@hzab/utils": "^1.1.11",
|
|
74
|
-
"@hzab/typescript-config": "^0.0.0"
|
|
73
|
+
"@hzab/typescript-config": "^0.0.0",
|
|
74
|
+
"@hzab/vite-config": "^0.0.3-alpha.0"
|
|
75
75
|
},
|
|
76
76
|
"scripts": {
|
|
77
77
|
"build": "vite build && tsc -p tsconfig.build.json",
|
package/src/list-render.jsx
CHANGED
|
@@ -5,7 +5,10 @@ model 不要定义在组件外部，避免出现 query 异常的情况。
|
|
|
5
5
|
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
6
6
|
import { Button, message } from "antd";
|
|
7
7
|
import _, { cloneDeep } from "lodash";
|
|
8
|
-
|
|
8
|
+
// 用命名空间导入而非具名导入：`isCancel` 自 data-model 2.0.0 才具名导出，1.x（1.7.4~1.8.x）
|
|
9
|
+
// 只有 default 上的 axios 本体带 `isCancel`。具名导入 1.x 不存在的导出会让 vite/esbuild 直接
|
|
10
|
+
// 报 "No matching export"（webpack 为 warning），从而被迫把 peer 下限抬到 2.0.0。
|
|
11
|
+
import axiosI, * as dataModelAxios from "@hzab/data-model/src/axios";
|
|
9
12
|
|
|
10
13
|
import QueryRender from "./query-render";
|
|
11
14
|
import Pagination from "./pagination-render";
|
|
@@ -182,7 +185,7 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
182
185
|
getListSourceRef.current?.cancel({ code: 601, message: "取消上一次请求" });
|
|
183
186
|
|
|
184
187
|
// 重新获取 source
|
|
185
|
-
getListSourceRef.current = getCancelTokenSource();
|
|
188
|
+
getListSourceRef.current = dataModelAxios.getCancelTokenSource();
|
|
186
189
|
|
|
187
190
|
//处理分页特殊情况 - 全部
|
|
188
191
|
const getListSource = cloneDeep(mergedQueries);
|
|
@@ -207,8 +210,8 @@ const ListRender = forwardRef(function (props, parentRef) {
|
|
|
207
210
|
setListLoading(false);
|
|
208
211
|
})
|
|
209
212
|
.catch((err) => {
|
|
210
|
-
// 兼容新老版本 data-model isCancel
|
|
211
|
-
const _isCancel = isCancel || axiosI.isCancel;
|
|
213
|
+
// 兼容新老版本 data-model isCancel 取法：2.x 有具名导出；1.x 无，取 default（axios 本体）上的
|
|
214
|
+
const _isCancel = dataModelAxios.isCancel || axiosI.isCancel;
|
|
212
215
|
if (typeof _isCancel === "function" && _isCancel(err)) {
|
|
213
216
|
console.info(`请求已取消:`, "", err.message);
|
|
214
217
|
return Promise.reject(err);
|