Skip to content

Commit 727c8bf

Browse files
shaohuzhang1shaohuzhang1
authored
feat: Enhance dynamic form rendering (#4223)
1 parent da7f0ed commit 727c8bf

File tree

15 files changed

+469
-167
lines changed

15 files changed

+469
-167
lines changed

‎ui/src/components/dynamics-form/Demo.vue‎

Lines changed: 107 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
:model="form_data"
66
:render_data="damo_data"
77
ref="dynamicsFormRef"
8+
:other-params="{ current_workspace_id: 'default' }"
89
>
910
<template #default="scope">
1011
<el-form-item label="其他字段">
@@ -21,7 +22,30 @@ import { ref } from 'vue'
2122
import type { Dict } from '@/api/type/common'
2223
2324
const damo_data: Array<FormField> = [
24-
{ field: 'name', input_type: 'PasswordInput', label: '用戶名', required: false },
25+
{
26+
field: 'name',
27+
input_type: 'PasswordInput',
28+
label: {
29+
label: '用戶名',
30+
input_type: 'SettingLabel',
31+
field: 'name_setting',
32+
relation_show_field_dict: {
33+
name: {
34+
values: ['01993837-5b09-7f20-9360-801d11d43d28'],
35+
},
36+
},
37+
relation_trigger_field_dict: {
38+
name: {
39+
values: ['01993837-5b09-7f20-9360-801d11d43d28'],
40+
request:
41+
'self.children=()=>request.get(extra.renderTemplate(trigger_setting.url)).then(ok=>{return ok})',
42+
url: '/workspace/${current_workspace_id}/model/${trigger_value}/model_params_form',
43+
},
44+
},
45+
children: [],
46+
},
47+
required: false,
48+
},
2549
{ field: 'json_text', input_type: 'JsonInput', label: 'aa', required: false },
2650
{
2751
field: 'array_object_card_field',
@@ -33,8 +57,8 @@ const damo_data: Array<FormField> = [
3357
children: [
3458
{ field: 'name1', input_type: 'TextInput', label: '用戶名1' },
3559
{ field: 'name2', input_type: 'TextInput', label: '用戶名2' },
36-
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' }
37-
]
60+
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' },
61+
],
3862
},
3963
{
4064
field: 'maxkb_tokens',
@@ -46,9 +70,9 @@ const damo_data: Array<FormField> = [
4670
step: 1,
4771
precision: 1,
4872
'show-input-controls': false,
49-
'show-input': true
73+
'show-input': true,
5074
},
51-
label: { label: '温度', attrs: { tooltip: 'sss' }, input_type: 'TooltipLabel' }
75+
label: { label: '温度', attrs: { tooltip: 'sss' }, input_type: 'TooltipLabel' },
5276
},
5377
{
5478
field: 'object_card_field',
@@ -60,8 +84,8 @@ const damo_data: Array<FormField> = [
6084
children: [
6185
{ field: 'name1', input_type: 'TextInput', label: '用戶名1' },
6286
{ field: 'name2', input_type: 'TextInput', label: '用戶名2' },
63-
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' }
64-
]
87+
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' },
88+
],
6589
},
6690
{
6791
field: 'tab_card_field',
@@ -70,53 +94,68 @@ const damo_data: Array<FormField> = [
7094
trigger_type: 'CHILD_FORMS',
7195
attrs: { 'label-width': '120px', 'label-suffix': ':ssss', 'label-position': 'left' },
7296
required: false,
73-
relation_trigger_field_dict: {
74-
'array_object_card_field.0.name1': ['111']
75-
},
7697
props_info: { tabs_label: '用户' },
7798
children: [
7899
{ field: 'name1', input_type: 'TextInput', label: '用戶名1' },
79100
{ field: 'name2', input_type: 'TextInput', label: '用戶名2' },
80-
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' }
81-
]
101+
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' },
102+
],
82103
},
83104
{
84105
field: 'single_select_field',
85106
input_type: 'SingleSelect',
86-
label: '测试单选',
107+
text_field: 'name',
108+
value_field: 'id',
87109
required: true,
88110
attrs: { placeholder: '请选择' },
89-
option_list: [
90-
{
91-
key: '测试',
92-
value: 'test'
111+
required_asterisk: true,
112+
label: {
113+
label: '测试单选',
114+
input_type: 'SettingLabel',
115+
field: 'name_setting',
116+
relation_show_field_dict: {
117+
single_select_field: {
118+
values: [],
119+
},
93120
},
94-
{
95-
key: '测试1',
96-
value: 'test1'
97-
}
98-
]
121+
relation_trigger_field_dict: {
122+
single_select_field: {
123+
values: [],
124+
request:
125+
'self.children=()=>request.get(extra.renderTemplate(trigger_setting.url)).then(ok=>{return ok})',
126+
url: '/workspace/${current_workspace_id}/model/${trigger_value}/model_params_form',
127+
},
128+
},
129+
children: [],
130+
},
131+
relation_trigger_field_dict: {
132+
name: {
133+
values: [],
134+
url: '/workspace/${current_workspace_id}/model_list?model_type=LLM',
135+
change_field: 'option_list',
136+
},
137+
},
99138
},
100139
{
101140
field: 'multi_select_field',
102141
input_type: 'MultiSelect',
103142
default_value: ['test1'],
104143
relation_show_field_dict: {
105-
'object_card_field.name1': []
144+
'object_card_field.name1': [],
106145
},
107146
label: '测试多选下拉',
108147
required: true,
109148
attrs: { placeholder: '请选择' },
110149
option_list: [
111150
{
112151
key: '测试',
113-
value: 'test'
152+
value: 'test',
114153
},
115154
{
116155
key: '测试1',
117-
value: 'test1'
118-
}
119-
]
156+
value: 'test1',
157+
},
158+
],
120159
},
121160
{
122161
field: 'radio_field',
@@ -127,13 +166,13 @@ const damo_data: Array<FormField> = [
127166
option_list: [
128167
{
129168
key: '测试',
130-
value: 'test'
169+
value: 'test',
131170
},
132171
{
133172
key: '测试1',
134-
value: 'test1'
135-
}
136-
]
173+
value: 'test1',
174+
},
175+
],
137176
},
138177
{
139178
field: 'radio_button_field',
@@ -144,13 +183,13 @@ const damo_data: Array<FormField> = [
144183
option_list: [
145184
{
146185
key: '测试',
147-
value: 'test'
186+
value: 'test',
148187
},
149188
{
150189
key: '测试1',
151-
value: 'test1'
152-
}
153-
]
190+
value: 'test1',
191+
},
192+
],
154193
},
155194
{
156195
field: 'radio_card_field',
@@ -161,13 +200,13 @@ const damo_data: Array<FormField> = [
161200
option_list: [
162201
{
163202
key: '测试',
164-
value: 'test'
203+
value: 'test',
165204
},
166205
{
167206
key: '测试111111',
168-
value: 'test1'
169-
}
170-
]
207+
value: 'test1',
208+
},
209+
],
171210
},
172211
{
173212
field: 'table_radio_field',
@@ -181,7 +220,7 @@ const damo_data: Array<FormField> = [
181220
{
182221
property: '`${row.key}${row.number}`',
183222
label: '名称',
184-
type: 'eval'
223+
type: 'eval',
185224
},
186225
{
187226
property: 'ProgressTableItem',
@@ -194,40 +233,40 @@ const damo_data: Array<FormField> = [
194233
{ color: '#e6a23c', percentage: 40 },
195234
{ color: '#5cb87a', percentage: 60 },
196235
{ color: '#1989fa', percentage: 80 },
197-
{ color: '#6f7ad3', percentage: 100 }
198-
]
236+
{ color: '#6f7ad3', percentage: 100 },
237+
],
199238
},
200239
props_info: {
201240
view_card: [
202241
{
203242
type: 'eval',
204243
title: '测试',
205244
value_field:
206-
'`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`'
245+
'`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`',
207246
},
208247
{
209248
type: 'eval',
210249
title: '名称',
211-
value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`'
212-
}
213-
]
214-
}
215-
}
250+
value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`',
251+
},
252+
],
253+
},
254+
},
216255
],
217-
style: { width: '500px' }
256+
style: { width: '500px' },
218257
},
219258
option_list: [
220259
{
221260
key: '测试',
222261
value: 'test',
223-
number: 10
262+
number: 10,
224263
},
225264
{
226265
key: '测试111111',
227266
value: 'test1',
228-
number: 100
229-
}
230-
]
267+
number: 100,
268+
},
269+
],
231270
},
232271
{
233272
field: 'table_checkbox_field',
@@ -241,7 +280,7 @@ const damo_data: Array<FormField> = [
241280
{
242281
property: '`${row.key}${row.number}`',
243282
label: '名称',
244-
type: 'eval'
283+
type: 'eval',
245284
},
246285
{
247286
property: 'ProgressTableItem',
@@ -254,41 +293,41 @@ const damo_data: Array<FormField> = [
254293
{ color: '#e6a23c', percentage: 40 },
255294
{ color: '#5cb87a', percentage: 60 },
256295
{ color: '#1989fa', percentage: 80 },
257-
{ color: '#6f7ad3', percentage: 100 }
258-
]
296+
{ color: '#6f7ad3', percentage: 100 },
297+
],
259298
},
260299
props_info: {
261300
view_card: [
262301
{
263302
type: 'eval',
264303
title: '测试',
265304
value_field:
266-
'`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`'
305+
'`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`',
267306
},
268307
{
269308
type: 'eval',
270309
title: '名称',
271-
value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`'
272-
}
273-
]
274-
}
275-
}
310+
value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`',
311+
},
312+
],
313+
},
314+
},
276315
],
277-
style: { width: '500px' }
316+
style: { width: '500px' },
278317
},
279318
option_list: [
280319
{
281320
key: '测试',
282321
value: 'test',
283-
number: 10
322+
number: 10,
284323
},
285324
{
286325
key: '测试111111',
287326
value: 'test1',
288-
number: 100
289-
}
290-
]
291-
}
327+
number: 100,
328+
},
329+
],
330+
},
292331
]
293332
const form_data = ref<Dict<any>>({})
294333
const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()

0 commit comments

Comments
 (0)