@hzab/list-render 0.1.2 → 0.1.4
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/README.md +227 -61
- package/docs/form-linkage.md +203 -0
- package/docs/remote-data.md +72 -22
- package/docs/table.md +86 -0
- package/lib/data-model.js +1 -1
- package/lib/index.js +1 -1
- package/package.json +2 -1
- package/src/data-model.js +2 -225
- package/src/index.js +1 -1
- package/src/list-render.jsx +1 -1
- package/src/pagination-render/index.jsx +2 -2
- package/src/table-render/index.jsx +33 -11
package/README.md
CHANGED
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
## Tips
|
|
14
14
|
|
|
15
15
|
- antd 组件样式需要手动引入
|
|
16
|
+
- 相关文档可查看 docs 中的文件
|
|
16
17
|
|
|
17
18
|
## 示例
|
|
18
19
|
|
|
@@ -48,44 +49,69 @@ const listDM = useMemo(
|
|
|
48
49
|
|
|
49
50
|
### InfoPanel Attributes
|
|
50
51
|
|
|
51
|
-
| 属性名称 | 属性类型
|
|
52
|
-
| ----------------- |
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
| tableConf | Object
|
|
69
|
-
|
|
|
70
|
-
|
|
|
52
|
+
| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
|
|
53
|
+
| ----------------- | ---------------- | ---- | ------ | -------------------------------------------------------------------------------------------------------- |
|
|
54
|
+
| className | string | 否 | - | 外层 div className |
|
|
55
|
+
| idKey | string | 否 | id | 唯一值字段的 key |
|
|
56
|
+
| schema | Object | 是 | - | 字段描述文件，包含各个字段的信息 |
|
|
57
|
+
| model | Object | 是 | - | 数据模型，包含 CURD 接口信息，传入 DataModel 的实例 |
|
|
58
|
+
| list | Array | | - | 本地数据源 |
|
|
59
|
+
| closeAutoRequest | Boolean | | false | 是否关闭加载完毕后自动发起请求。true 时组件 didMount 不自动发起请求 |
|
|
60
|
+
| hasQuery | Boolean | | true | 是否包含搜索、筛选框、搜索按钮等 |
|
|
61
|
+
| search | String | | - | 传入空字符串时，不包含搜索框；传入非空字符串时，显示搜索框，同时传入的字符串作为搜索框的占位符 |
|
|
62
|
+
| filters | Array | | [] | 字符串数组，可以包含要筛选的字段 key 值（schema 中的 name），或者字符串 '$timerange'（时间范围筛选专用） |
|
|
63
|
+
| queryConf | Object | | {} | 设置 query 参数的 key |
|
|
64
|
+
| hasCreate | Boolean | | true | 是否显示新增按钮 |
|
|
65
|
+
| hasAction | Boolean | | true | 是否在表格的最右增加一个“操作”列；hasAction 为 true 时，下面的 hasEdit/hasDel 才会生效 |
|
|
66
|
+
| hasEdit | Boolean/Function | | true | 是否显示编辑按钮，可传入回调控制当前行是否显示 |
|
|
67
|
+
| hasDel | Boolean/Function | | true | 是否显示删除按钮，可传入回调控制当前行是否显示 |
|
|
68
|
+
| hasDelTips | String/Function | | "确认删除该项?" | 删除按钮自定义提示，可传入回调根据当前行数据显示对应提示 |
|
|
69
|
+
| tableConf | Object | | {} | Table 相关配置 |
|
|
70
|
+
| tableProps | Object | | {} | 直接传给 Table 的 props，相关 API 可直接参考 antd table 组件 |
|
|
71
|
+
| fetchOnEdit | Boolean | | true | 展示编辑弹框时，是否会调用一次详情接口进行回填；若为 false，则会使用表格列表接口返回的 row 数据进行回填 |
|
|
72
|
+
| fetchById | Boolean | | true | 编辑中的详情请求，是否使用 id 作为入参的 key |
|
|
73
|
+
| dialogConf | Object | | {} | dialog 配置对象 |
|
|
74
|
+
| schemaScope | Object | | {} | formRender schemaScope props |
|
|
75
|
+
| components | Object | | {} | formRender components props 自定义组件 |
|
|
76
|
+
| hasPagination | Boolean | | true | 是否显示分页 |
|
|
77
|
+
| paginationConf | Object | | {} | 可自定义 Pagination props，进行 pagination 相关设置 |
|
|
78
|
+
| formInitialValues | Object | | {} | 给新增、编辑对话框中的表单增加默认值 |
|
|
79
|
+
| Slots | Object | | {} | 组件插槽 |
|
|
80
|
+
| onGetListEnd | Function | | - | 请求列表成功返回的回调 |
|
|
81
|
+
| onCreateSuc | Function | | - | 新增成功返回的回调 |
|
|
82
|
+
| onEditSuc | Function | | - | 编辑成功返回的回调 |
|
|
83
|
+
| onDelSuc | Function | | - | 删除成功返回的回调 |
|
|
84
|
+
| onFormDialogClose | Function | | - | 表单弹窗关闭回调 |
|
|
85
|
+
| dialogFormMount | Function | | - | 新增、编辑弹窗 Form 渲染完成回调 |
|
|
71
86
|
|
|
72
87
|
- fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填
|
|
73
88
|
|
|
74
89
|
#### tableConf
|
|
75
90
|
|
|
76
|
-
| 属性名称
|
|
77
|
-
|
|
|
78
|
-
| colConf
|
|
79
|
-
| rowSelection
|
|
80
|
-
| scroll
|
|
81
|
-
| expandable
|
|
82
|
-
| onRow
|
|
91
|
+
| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
|
|
92
|
+
| ------------- | ------------- | ---- | ------ | -------------------------------------------------------------------------------------------- |
|
|
93
|
+
| colConf | Object | | {} | 指定各列的配置（比如列宽），key 为字段的 name。可以指定名为 “\_$actions”的字段来设置“操作”列 |
|
|
94
|
+
| rowSelection | Object | | {} | 选择功能的配置。参考 antd table rowSelection 参数 |
|
|
95
|
+
| scroll | Object | | {} | 表格是否可滚动，也可以指定滚动区域的宽、高。参考 antd table scroll 参数 |
|
|
96
|
+
| expandable | Object | | {} | 配置展开属性。参考 antd table expandable 参数 |
|
|
97
|
+
| onRow | Object | | {} | 设置行属性。参考 antd table onRow 参数 |
|
|
98
|
+
| orderColType | string | | - | 序号列数据类型：page（按当前页的序号）、all（按所有页的序号） |
|
|
99
|
+
| orderColWidth | string/number | | - | 序号列 width 的参数 |
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
##### tableConf.colConf[xxx]
|
|
104
|
+
|
|
105
|
+
| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
|
|
106
|
+
| -------- | -------------- | ---- | ------ | ------------------------------------------------------------ |
|
|
107
|
+
| ellipsis | boolean/Object | | - | 当前列是否超出隐藏，true 或 { showTitle: true } 开启超出隐藏 |
|
|
108
|
+
|
|
83
109
|
#### queryConf
|
|
84
110
|
|
|
85
|
-
| 属性名称
|
|
86
|
-
|
|
|
87
|
-
| hasReset
|
|
88
|
-
| queryMap
|
|
111
|
+
| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
|
|
112
|
+
| -------- | -------- | ---- | ------ | -------------------------- |
|
|
113
|
+
| hasReset | boolean | | false | 是否有重置按钮 |
|
|
114
|
+
| queryMap | Function | | - | query 数据提交前的处理函数 |
|
|
89
115
|
|
|
90
116
|
#### model
|
|
91
117
|
|
|
@@ -93,42 +119,171 @@ const listDM = useMemo(
|
|
|
93
119
|
| -------- | -------- | ---- | ------ | ------------ |
|
|
94
120
|
| query | Object | 否 | | get 请求参数 |
|
|
95
121
|
|
|
96
|
-
|
|
122
|
+
#### Slots 插槽
|
|
123
|
+
|
|
124
|
+
- 用于在指定位置添加所需的组件
|
|
125
|
+
|
|
126
|
+
| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
|
|
127
|
+
| ------------------ | -------- | ---- | ------ | ------------------------------------ |
|
|
128
|
+
| headerActionPrefix | Function | 否 | | 新增按钮左侧插槽 |
|
|
129
|
+
| headerActionSuffix | Function | 否 | | 新增按钮右侧插槽 |
|
|
130
|
+
| tableActionsSlot | Function | 否 | | 操作列插槽，会覆盖操作列 |
|
|
131
|
+
| actionPrefixSlot | Function | 否 | | 操作列 编辑按钮左侧插槽 |
|
|
132
|
+
| actionCenterSlot | Function | 否 | | 操作列 编辑、删除按钮中间插槽 |
|
|
133
|
+
| actionSuffixSlot | Function | 否 | | 操作列 删除按钮右侧插槽 |
|
|
134
|
+
| FormSlot | Function | 否 | | 新增、编辑弹窗插槽 |
|
|
135
|
+
| dialogFooterPre | Function | 否 | | 新增、编辑弹窗确认及取消按钮左侧插槽 |
|
|
136
|
+
| dialogFooterCenter | Function | 否 | | 新增、编辑弹窗确认及取消按钮中间插槽 |
|
|
137
|
+
| dialogFooterSuffix | Function | 否 | | 新增、编辑弹窗确认及取消按钮右侧插槽 |
|
|
138
|
+
|
|
139
|
+
```JSX
|
|
140
|
+
// Slots 按需添加
|
|
141
|
+
const Slots = {
|
|
142
|
+
headerActionPrefix() {
|
|
143
|
+
return (<div>headerActionPrefix</div>)
|
|
144
|
+
},
|
|
145
|
+
actionPrefixSlot(props) {
|
|
146
|
+
const { text, record, index, onEdit, onDel } = props;
|
|
147
|
+
return (<div>actionPrefixSlot</div>)
|
|
148
|
+
},
|
|
149
|
+
dialogFooterPre(props) {
|
|
150
|
+
const {
|
|
151
|
+
cancel,
|
|
152
|
+
onOk,
|
|
153
|
+
close,
|
|
154
|
+
form,
|
|
155
|
+
validate,
|
|
156
|
+
} = props?.options || {};
|
|
157
|
+
return (<div>dialogFooterPre</div>)
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
<ListRender schema={schema} model={listDM} Slots={Slots} />
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
#### dialogConf
|
|
165
|
+
|
|
166
|
+
| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
|
|
167
|
+
| ------------ | ------------- | ---- | ------ | --------------------------------------------------- |
|
|
168
|
+
| width | number/string | 否 | | 弹窗宽度 |
|
|
169
|
+
| okText | string | 否 | | 弹窗底部确定按钮文案 |
|
|
170
|
+
| cancelText | string | 否 | | 弹窗底部取消按钮文案 |
|
|
171
|
+
| footer | Array | 否 | | 自定义弹窗底部按钮 |
|
|
172
|
+
| beforeSubmit | Function | 否 | | 提交前的回调， return false; 表示拦截，不进行请求。 |
|
|
173
|
+
|
|
174
|
+
#### paginationConf
|
|
175
|
+
|
|
176
|
+
- 默认参数参考 antd pagination 组件
|
|
177
|
+
|
|
178
|
+
| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
|
|
179
|
+
| --------------- | -------- | ---- | ----------------- | ------------------ |
|
|
180
|
+
| pageSizeOptions | Array | 否 | [10, 20, 50, 100] | 可选 pageSize 数组 |
|
|
181
|
+
|
|
182
|
+
### Table ref Methods
|
|
97
183
|
|
|
98
184
|
- 可使用 ref 获取并触发执行
|
|
99
185
|
|
|
100
|
-
| 函数名
|
|
101
|
-
|
|
|
102
|
-
| onSearch
|
|
103
|
-
| getList
|
|
104
|
-
| forceUpdate |
|
|
105
|
-
| formDialogRef
|
|
106
|
-
| queryRef
|
|
107
|
-
|
|
|
108
|
-
|
|
|
109
|
-
|
|
|
110
|
-
| onFormDialogClose | | 表单弹窗关闭回调 |
|
|
111
|
-
| dialogFormMount | | 新增、编辑弹窗 Form 渲染完成回调 |
|
|
186
|
+
| 函数名 | 参数 | 说明 |
|
|
187
|
+
| ------------- | ----- | -------------------------------------------- |
|
|
188
|
+
| onSearch | query | 重置页码至 1，并刷新列表 |
|
|
189
|
+
| getList | query | 获取当前页列表数据 |
|
|
190
|
+
| forceUpdate | - | 强制重渲染列表，解决枚举数据渲染不正常的问题 |
|
|
191
|
+
| formDialogRef | - | 新增、编辑 弹窗 form-dialog 的 ref |
|
|
192
|
+
| queryRef | - | 筛选条件 query-render 的 ref |
|
|
193
|
+
| onCreate | - | 手动触发新增按钮相关操作 |
|
|
194
|
+
| onEdit | row | 手动触发编辑按钮相关操作 |
|
|
195
|
+
| onDel | row | 手动触发删除按钮相关操作 |
|
|
112
196
|
|
|
113
|
-
|
|
197
|
+
# Schema
|
|
114
198
|
|
|
115
|
-
|
|
199
|
+
- 字段文档：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
|
|
116
200
|
|
|
117
|
-
|
|
201
|
+
## Schema Scope
|
|
118
202
|
|
|
119
|
-
-
|
|
203
|
+
- 用于传入参数给到响应器使用
|
|
204
|
+
|
|
205
|
+
### 常用示例
|
|
206
|
+
|
|
207
|
+
#### 字段显隐 x-display
|
|
208
|
+
|
|
209
|
+
- visible: 显示（默认状态）
|
|
210
|
+
- hidden: 半隐藏。字段可赋值，可监听，但表单项隐藏
|
|
211
|
+
- none: 全隐藏。字段完全不可用。
|
|
120
212
|
|
|
121
213
|
```JSON
|
|
122
214
|
{
|
|
123
215
|
"form": {
|
|
124
216
|
"labelCol": 6,
|
|
125
|
-
"wrapperCol": 12
|
|
126
|
-
"wrapperWidth": "300px"
|
|
217
|
+
"wrapperCol": 12
|
|
127
218
|
},
|
|
128
219
|
"schema": {
|
|
129
220
|
"type": "object",
|
|
130
221
|
"properties": {
|
|
131
|
-
"
|
|
222
|
+
"test": {
|
|
223
|
+
"type": "string",
|
|
224
|
+
"title": "Input",
|
|
225
|
+
"x-decorator": "FormItem",
|
|
226
|
+
"x-component": "Input",
|
|
227
|
+
"x-validator": [],
|
|
228
|
+
"x-component-props": {},
|
|
229
|
+
"x-decorator-props": {},
|
|
230
|
+
"x-reactions": {},
|
|
231
|
+
"x-designable-id": "1zlm9bu3fpg",
|
|
232
|
+
"x-index": 0,
|
|
233
|
+
"name": "test",
|
|
234
|
+
"x-display": "none"
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
"x-designable-id": "ldzb3lu81dx"
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
#### 字段在表格中隐藏 inTable
|
|
243
|
+
|
|
244
|
+
- true: 在表格中展示（默认）
|
|
245
|
+
- false: 在表格中隐藏
|
|
246
|
+
|
|
247
|
+
```JSON
|
|
248
|
+
{
|
|
249
|
+
"form": {},
|
|
250
|
+
"schema": {
|
|
251
|
+
"type": "object",
|
|
252
|
+
"properties": {
|
|
253
|
+
"test": {
|
|
254
|
+
"type": "string",
|
|
255
|
+
"title": "Input",
|
|
256
|
+
"x-decorator": "FormItem",
|
|
257
|
+
"x-component": "Input",
|
|
258
|
+
"x-validator": [],
|
|
259
|
+
"x-component-props": {},
|
|
260
|
+
"x-decorator-props": {},
|
|
261
|
+
"x-reactions": {},
|
|
262
|
+
"x-designable-id": "1zlm9bu3fpg",
|
|
263
|
+
"x-index": 0,
|
|
264
|
+
"name": "test",
|
|
265
|
+
"inTable": false
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
"x-designable-id": "ldzb3lu81dx"
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
#### 字段动态显隐——响应器
|
|
274
|
+
|
|
275
|
+
##### 编辑表单中才显示
|
|
276
|
+
|
|
277
|
+
- 通过 scenario 获取当前表单环境变量
|
|
278
|
+
- 属性响应中，显示/隐藏配置：scenario === 'edit'
|
|
279
|
+
|
|
280
|
+
```JSON
|
|
281
|
+
{
|
|
282
|
+
"form": {},
|
|
283
|
+
"schema": {
|
|
284
|
+
"type": "object",
|
|
285
|
+
"properties": {
|
|
286
|
+
"test": {
|
|
132
287
|
"type": "string",
|
|
133
288
|
"title": "Input",
|
|
134
289
|
"x-decorator": "FormItem",
|
|
@@ -149,22 +304,33 @@ const listDM = useMemo(
|
|
|
149
304
|
}
|
|
150
305
|
}
|
|
151
306
|
},
|
|
152
|
-
"x-designable-id": "
|
|
153
|
-
"x-index": 0
|
|
307
|
+
"x-designable-id": "1zlm9bu3fpg",
|
|
308
|
+
"x-index": 0,
|
|
309
|
+
"name": "test"
|
|
154
310
|
}
|
|
155
311
|
},
|
|
156
|
-
"x-designable-id": "
|
|
312
|
+
"x-designable-id": "ldzb3lu81dx"
|
|
157
313
|
}
|
|
158
314
|
}
|
|
159
315
|
```
|
|
160
316
|
|
|
161
|
-
|
|
162
|
-
| -------- | ---- | --------------------------------------------- |
|
|
163
|
-
| scenario | | 环境参数，当前表单的环境：create、edit、query |
|
|
317
|
+
#### 响应器中可用的参数
|
|
164
318
|
|
|
165
|
-
|
|
319
|
+
| 参数名 | 说明 |
|
|
320
|
+
| ----------- | ------------------------------------------------------------------------------------------------------ |
|
|
321
|
+
| scenario | 环境参数，当前表单的环境：create、edit、query |
|
|
322
|
+
| $self | 代表当前字段实例，可以在普通属性表达式中使用，也能在 x-reactions 中使用 |
|
|
323
|
+
| $form | 代表当前 Form 实例，可以在普通属性表达式中使用，也能在 x-reactions 中使用 |
|
|
324
|
+
| $deps | 只能在 x-reactions 中的表达式消费，与 x-reactions 定义的 dependencies 对应，数组顺序一致 |
|
|
325
|
+
| $values | 代表顶层表单数据，可以在普通属性表达式中使用，也能在 x-reactions 中使用 |
|
|
326
|
+
| $observable | 用于创建响应式对象，使用方式与 observable 一致 |
|
|
327
|
+
| $memo | 用于创建持久引用数据，使用方式与 autorun.memo 一致 |
|
|
328
|
+
| $effect | 用于响应 autorun 第一次执行的下一个微任务时机与响应 autorun 的 dispose，使用方式与 autorun.effect 一致 |
|
|
329
|
+
| $props | 用于对房钱字段实例设置组件 props |
|
|
166
330
|
|
|
167
|
-
|
|
331
|
+
# DataModel
|
|
332
|
+
|
|
333
|
+
## Tips
|
|
168
334
|
|
|
169
335
|
- 若存在 axios 相关配置失效的问题，请在选择一下任意一种方式解决；
|
|
170
336
|
- 在入口文件设置 DataModel 默认的 axios 为已配置好的 axios；
|
|
@@ -261,7 +427,7 @@ const dataModel = new DataModel({
|
|
|
261
427
|
deleteApi: "deleteApi",
|
|
262
428
|
multipleDeleteApi: "multipleDeleteApi",
|
|
263
429
|
query: { pageNumber: 1, pageSize: 10 },
|
|
264
|
-
|
|
430
|
+
axiosConf: {
|
|
265
431
|
timeout: 10000,
|
|
266
432
|
},
|
|
267
433
|
});
|
|
@@ -292,7 +458,7 @@ async function test() {
|
|
|
292
458
|
| deleteApi | String | | | delete 请求的 api |
|
|
293
459
|
| multipleDeleteApi | | | | 批量删除请求的 api，使用的 axios({ method: 'DELETE' }) 发请求 |
|
|
294
460
|
| query | | | | get 请求的参数 |
|
|
295
|
-
|
|
|
461
|
+
| axiosConf | Object | | | axios 的配置项 |
|
|
296
462
|
|
|
297
463
|
# 组件开发流程
|
|
298
464
|
|
package/docs/form-linkage.md
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
5. 属性响应器 -> 显示/隐藏 -> 输入框中输入 $deps.menuType === 'C' （$deps 表示表单中的字段，$deps.menuType 表示监听 menuType 表单项，如果 menuType 的值为 'C' 时展示当前表单项，否时隐藏当前表单项（perms））
|
|
12
12
|
|
|
13
13
|
- test.schema.json
|
|
14
|
+
|
|
14
15
|
```JSON
|
|
15
16
|
{
|
|
16
17
|
"form": {
|
|
@@ -87,4 +88,206 @@
|
|
|
87
88
|
|
|
88
89
|
#### 表单项数据
|
|
89
90
|
|
|
91
|
+
##### 根据其他表单项改变当前表单项数值
|
|
90
92
|
|
|
93
|
+
```JSON
|
|
94
|
+
{
|
|
95
|
+
"form": {},
|
|
96
|
+
"schema": {
|
|
97
|
+
"type": "object",
|
|
98
|
+
"properties": {
|
|
99
|
+
"test": {
|
|
100
|
+
"type": "string",
|
|
101
|
+
"title": "test",
|
|
102
|
+
"x-decorator": "FormItem",
|
|
103
|
+
"x-component": "Input",
|
|
104
|
+
"x-validator": [],
|
|
105
|
+
"x-component-props": {},
|
|
106
|
+
"x-decorator-props": {},
|
|
107
|
+
"x-reactions": {},
|
|
108
|
+
"x-designable-id": "1zlm9bu3fpg",
|
|
109
|
+
"x-index": 0,
|
|
110
|
+
"name": "test",
|
|
111
|
+
"x-display": "visible"
|
|
112
|
+
},
|
|
113
|
+
"watch": {
|
|
114
|
+
"type": "string",
|
|
115
|
+
"title": "watch",
|
|
116
|
+
"x-decorator": "FormItem",
|
|
117
|
+
"x-component": "Input",
|
|
118
|
+
"x-validator": [],
|
|
119
|
+
"x-component-props": {},
|
|
120
|
+
"x-decorator-props": {},
|
|
121
|
+
"name": "watch",
|
|
122
|
+
"x-reactions": {
|
|
123
|
+
"dependencies": [
|
|
124
|
+
{
|
|
125
|
+
"property": "value",
|
|
126
|
+
"type": "string",
|
|
127
|
+
"source": "test",
|
|
128
|
+
"name": "test"
|
|
129
|
+
}
|
|
130
|
+
],
|
|
131
|
+
"fulfill": {
|
|
132
|
+
"state": {
|
|
133
|
+
"value": "{{$deps.test + 10}}"
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
"x-designable-id": "ri912mmvcz2",
|
|
138
|
+
"x-index": 1
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
"x-designable-id": "ldzb3lu81dx"
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
##### 根据其他表单项改变当前 select 数据
|
|
147
|
+
|
|
148
|
+
```JSX
|
|
149
|
+
// RemoteData
|
|
150
|
+
import listSchema from "./list.schema.json";
|
|
151
|
+
|
|
152
|
+
const schemaScope = {
|
|
153
|
+
// 动态获取 select 数据
|
|
154
|
+
fetchSelectOptions(field, query) {
|
|
155
|
+
field.loading = true;
|
|
156
|
+
fetch(
|
|
157
|
+
`//some.domain/getSomething?test=${query.test}`
|
|
158
|
+
)
|
|
159
|
+
.then((response) => response.json())
|
|
160
|
+
.then(
|
|
161
|
+
({ data }) => {
|
|
162
|
+
// field 目标组件的 配置参数
|
|
163
|
+
console.log("fetchSelectOptions field", field);
|
|
164
|
+
// 通过 select 可直接通过 field.dataSource 进行选项数据的配置
|
|
165
|
+
field.dataSource = data;
|
|
166
|
+
field.loading = false;
|
|
167
|
+
},
|
|
168
|
+
() => {
|
|
169
|
+
field.loading = false;
|
|
170
|
+
}
|
|
171
|
+
);
|
|
172
|
+
},
|
|
173
|
+
// 动态获取 treeSelect 数据
|
|
174
|
+
fetchMenuTree(field, query) {
|
|
175
|
+
field.loading = true;
|
|
176
|
+
fetch(
|
|
177
|
+
`//some.domain/getSomething?test=${query.test}`
|
|
178
|
+
)
|
|
179
|
+
.then((response) => response.json())
|
|
180
|
+
.then(
|
|
181
|
+
({ data }) => {
|
|
182
|
+
// field 目标组件的 配置参数
|
|
183
|
+
console.log("fetchMenuTree field", field);
|
|
184
|
+
// 通过 field.component[1] 可以动态配置目标组件的 props
|
|
185
|
+
console.log("fetchMenuTree field.component[1]", field.component[1]);
|
|
186
|
+
// 树选择器 数据源，需要通过 field.component[1] 进行配置
|
|
187
|
+
field.component[1].treeData = data;
|
|
188
|
+
field.loading = false;
|
|
189
|
+
},
|
|
190
|
+
() => {
|
|
191
|
+
field.loading = false;
|
|
192
|
+
}
|
|
193
|
+
);
|
|
194
|
+
},
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
function RemoteData() {
|
|
198
|
+
const listDM = useMemo(
|
|
199
|
+
() =>
|
|
200
|
+
new DataModule({
|
|
201
|
+
getListApi: "/api/v1/user/list",
|
|
202
|
+
getApi: "/api/v1/user/list/:id",
|
|
203
|
+
createApi: "/api/v1/user/list",
|
|
204
|
+
updateApi: "/api/v1/user/list/:id",
|
|
205
|
+
deleteApi: "/api/v1/user/list/:id",
|
|
206
|
+
}),
|
|
207
|
+
[]
|
|
208
|
+
);
|
|
209
|
+
return (
|
|
210
|
+
<ListRender model={listDM} schema={listSchema} schemaScope={schemaScope} />
|
|
211
|
+
);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
export default RemoteData;
|
|
215
|
+
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
```JSON
|
|
219
|
+
{
|
|
220
|
+
"form": {
|
|
221
|
+
"labelCol": 6,
|
|
222
|
+
"wrapperCol": 12
|
|
223
|
+
},
|
|
224
|
+
"schema": {
|
|
225
|
+
"type": "object",
|
|
226
|
+
"properties": {
|
|
227
|
+
"test": {
|
|
228
|
+
"type": "string",
|
|
229
|
+
"title": "test",
|
|
230
|
+
"x-decorator": "FormItem",
|
|
231
|
+
"x-component": "Input",
|
|
232
|
+
"x-validator": [],
|
|
233
|
+
"x-component-props": {},
|
|
234
|
+
"x-decorator-props": {},
|
|
235
|
+
"x-reactions": {},
|
|
236
|
+
"x-designable-id": "1zlm9bu3fpg",
|
|
237
|
+
"x-index": 0,
|
|
238
|
+
"name": "test",
|
|
239
|
+
"x-display": "visible"
|
|
240
|
+
},
|
|
241
|
+
"watch": {
|
|
242
|
+
"title": "watch",
|
|
243
|
+
"x-decorator": "FormItem",
|
|
244
|
+
"x-component": "Select",
|
|
245
|
+
"x-validator": [],
|
|
246
|
+
"x-component-props": {},
|
|
247
|
+
"x-decorator-props": {},
|
|
248
|
+
"name": "watch",
|
|
249
|
+
"x-designable-id": "jvjf7fkpke9",
|
|
250
|
+
"x-index": 1,
|
|
251
|
+
"x-reactions": {
|
|
252
|
+
"dependencies": [
|
|
253
|
+
{
|
|
254
|
+
"property": "value",
|
|
255
|
+
"type": "string",
|
|
256
|
+
"source": "test",
|
|
257
|
+
"name": "test"
|
|
258
|
+
}
|
|
259
|
+
],
|
|
260
|
+
"fulfill": {
|
|
261
|
+
"run": "$effect(() => {\n try {\n fetchSelectOptions && fetchSelectOptions($self, { test: $deps.test })\n } catch (e) {}\n}, [$deps.test])\n"
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
},
|
|
265
|
+
"treeSelect": {
|
|
266
|
+
"title": "TreeSelect",
|
|
267
|
+
"x-decorator": "FormItem",
|
|
268
|
+
"x-component": "TreeSelect",
|
|
269
|
+
"x-validator": [],
|
|
270
|
+
"x-component-props": {},
|
|
271
|
+
"x-decorator-props": {},
|
|
272
|
+
"x-designable-id": "303l866v0lj",
|
|
273
|
+
"x-index": 2,
|
|
274
|
+
"name": "treeSelect",
|
|
275
|
+
"x-reactions": {
|
|
276
|
+
"dependencies": [
|
|
277
|
+
{
|
|
278
|
+
"property": "value",
|
|
279
|
+
"type": "string",
|
|
280
|
+
"source": "test",
|
|
281
|
+
"name": "test"
|
|
282
|
+
}
|
|
283
|
+
],
|
|
284
|
+
"fulfill": {
|
|
285
|
+
"run": "$effect(() => {\r\n try {\r\n fetchMenuTree && fetchMenuTree($self, { test: $deps.test })\r\n } catch (e) {}\r\n}, [$deps.test])\r\n"
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
},
|
|
290
|
+
"x-designable-id": "ldzb3lu81dx"
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
```
|