Skip to content

Commit afb98d2

Browse files
shaohuzhang1shaohuzhang1
authored
feat: dynamics-form (#6774)
1 parent 9cac6c4 commit afb98d2

66 files changed

Lines changed: 8655 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎ui/src/api/types/common.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
/** 多个公共组件共同使用的通用选项类型。 */
22
export type RequestParams = Record<string, unknown>
33

4+
/** 键为字符串的通用字典类型。 */
5+
export type Dict<T> = Record<string, T>
6+
47
/** 通用的 ID + 名称选项，用于下拉列表、标签等场景。 */
58
export interface ListItem {
69
id: string

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

Lines changed: 357 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,357 @@
1+
<template>
2+
<div style="width: 1024px">
3+
<DynamicsForm
4+
v-model="form_data"
5+
:model="form_data"
6+
:render_data="damo_data"
7+
ref="dynamicsFormRef"
8+
:other-params="{ current_workspace_id: 'default' }"
9+
>
10+
<template #default="scope">
11+
<el-form-item label="其他字段">
12+
<el-input v-model="scope.form_value['zha']" /> </el-form-item
13+
></template>
14+
</DynamicsForm>
15+
<el-button @click="click">点我校验</el-button>
16+
</div>
17+
</template>
18+
<script setup lang="ts">
19+
import type { FormField } from '@/components/mk-dynamics-form/type'
20+
import DynamicsForm from '@/components/mk-dynamics-form/index.vue'
21+
import { ref } from 'vue'
22+
import type { Dict } from '@/api/types/common'
23+
24+
const damo_data: Array<FormField> = [
25+
{
26+
field: 'aaa',
27+
input_type: 'Tree',
28+
attrs: {
29+
lazy: true,
30+
url: '/workspace/${current_workspace_id}/knowledge/${current_knowledge_id}/datasource/tool/019aa0bb-552d-73a3-b0c6-1809eaedb139/get_file_list',
31+
},
32+
label: '',
33+
},
34+
{
35+
field: 'aa',
36+
input_type: 'LocalFileUpload',
37+
attrs: {
38+
file_count_limit: 10,
39+
file_size_limit: 10,
40+
file_type_list: ['TXT'],
41+
},
42+
label: '',
43+
},
44+
{
45+
field: 'name',
46+
input_type: 'PasswordInput',
47+
label: {
48+
label: '用戶名',
49+
input_type: 'SettingLabel',
50+
field: 'name_setting',
51+
relation_show_field_dict: {
52+
name: {
53+
values: ['01993837-5b09-7f20-9360-801d11d43d28'],
54+
},
55+
},
56+
relation_trigger_field_dict: {
57+
name: {
58+
values: ['01993837-5b09-7f20-9360-801d11d43d28'],
59+
request:
60+
'self.children=()=>request.get(extra.renderTemplate(trigger_setting.url)).then(ok=>{return ok})',
61+
url: '/workspace/${current_workspace_id}/model/${trigger_value}/model_params_form',
62+
},
63+
},
64+
children: [],
65+
},
66+
required: false,
67+
},
68+
{ field: 'json_text', input_type: 'JsonInput', label: 'aa', required: false },
69+
{
70+
field: 'array_object_card_field',
71+
input_type: 'ArrayObjectCard',
72+
label: '測試',
73+
trigger_type: 'CHILD_FORMS',
74+
attrs: { 'label-width': '120px', 'label-suffix': ':ssss', 'label-position': 'top' },
75+
required: false,
76+
children: [
77+
{ field: 'name1', input_type: 'TextInput', label: '用戶名1' },
78+
{ field: 'name2', input_type: 'TextInput', label: '用戶名2' },
79+
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' },
80+
],
81+
},
82+
{
83+
field: 'maxkb_tokens',
84+
input_type: 'Slider',
85+
default_value: 1,
86+
attrs: {
87+
min: 0,
88+
max: 10,
89+
step: 1,
90+
precision: 1,
91+
'show-input-controls': false,
92+
'show-input': true,
93+
},
94+
label: { label: '温度', attrs: { tooltip: 'sss' }, input_type: 'TooltipLabel' },
95+
},
96+
{
97+
field: 'object_card_field',
98+
input_type: 'ObjectCard',
99+
label: '測試',
100+
trigger_type: 'CHILD_FORMS',
101+
attrs: { 'label-width': '120px', 'label-suffix': ':ssss', 'label-position': 'left' },
102+
required: false,
103+
children: [
104+
{ field: 'name1', input_type: 'TextInput', label: '用戶名1' },
105+
{ field: 'name2', input_type: 'TextInput', label: '用戶名2' },
106+
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' },
107+
],
108+
},
109+
{
110+
field: 'tab_card_field',
111+
input_type: 'TabCard',
112+
label: '測試',
113+
trigger_type: 'CHILD_FORMS',
114+
attrs: { 'label-width': '120px', 'label-suffix': ':ssss', 'label-position': 'left' },
115+
required: false,
116+
props_info: { tabs_label: '用户' },
117+
children: [
118+
{ field: 'name1', input_type: 'TextInput', label: '用戶名1' },
119+
{ field: 'name2', input_type: 'TextInput', label: '用戶名2' },
120+
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' },
121+
],
122+
},
123+
{
124+
field: 'single_select_field',
125+
input_type: 'SingleSelect',
126+
text_field: 'name',
127+
value_field: 'id',
128+
required: true,
129+
attrs: { placeholder: '请选择' },
130+
required_asterisk: true,
131+
label: {
132+
label: '测试单选',
133+
input_type: 'SettingLabel',
134+
field: 'name_setting',
135+
relation_show_field_dict: {
136+
single_select_field: {
137+
values: [],
138+
},
139+
},
140+
relation_trigger_field_dict: {
141+
single_select_field: {
142+
values: [],
143+
request:
144+
'self.children=()=>request.get(extra.renderTemplate(trigger_setting.url)).then(ok=>{return ok})',
145+
url: '/workspace/${current_workspace_id}/model/${trigger_value}/model_params_form',
146+
},
147+
},
148+
children: [],
149+
},
150+
relation_trigger_field_dict: {
151+
name: {
152+
values: [],
153+
url: '/workspace/${current_workspace_id}/model_list?model_type=LLM',
154+
change_field: 'option_list',
155+
},
156+
},
157+
},
158+
{
159+
field: 'multi_select_field',
160+
input_type: 'MultiSelect',
161+
default_value: ['test1'],
162+
relation_show_field_dict: {
163+
'object_card_field.name1': [],
164+
},
165+
label: '测试多选下拉',
166+
required: true,
167+
attrs: { placeholder: '请选择' },
168+
option_list: [
169+
{
170+
key: '测试',
171+
value: 'test',
172+
},
173+
{
174+
key: '测试1',
175+
value: 'test1',
176+
},
177+
],
178+
},
179+
{
180+
field: 'radio_field',
181+
input_type: 'Radio',
182+
label: '测试单选',
183+
required: true,
184+
attrs: { placeholder: '请选择' },
185+
option_list: [
186+
{
187+
key: '测试',
188+
value: 'test',
189+
},
190+
{
191+
key: '测试1',
192+
value: 'test1',
193+
},
194+
],
195+
},
196+
{
197+
field: 'radio_button_field',
198+
input_type: 'RadioButton',
199+
label: '测试单选',
200+
required: true,
201+
attrs: { placeholder: '请选择' },
202+
option_list: [
203+
{
204+
key: '测试',
205+
value: 'test',
206+
},
207+
{
208+
key: '测试1',
209+
value: 'test1',
210+
},
211+
],
212+
},
213+
{
214+
field: 'radio_card_field',
215+
input_type: 'RadioCard',
216+
label: '测试单选1',
217+
required: true,
218+
attrs: { placeholder: '请选择' },
219+
option_list: [
220+
{
221+
key: '测试',
222+
value: 'test',
223+
},
224+
{
225+
key: '测试111111',
226+
value: 'test1',
227+
},
228+
],
229+
},
230+
{
231+
field: 'table_radio_field',
232+
input_type: 'TableRadio',
233+
label: '表格单选',
234+
required: true,
235+
attrs: { placeholder: '请选择' },
236+
props_info: {
237+
active_msg: '当前选中',
238+
table_columns: [
239+
{
240+
property: '`${row.key}${row.number}`',
241+
label: '名称',
242+
type: 'eval',
243+
},
244+
{
245+
property: 'ProgressTableItem',
246+
label: '数值',
247+
type: 'component',
248+
value_field: 'number',
249+
attrs: {
250+
color: [
251+
{ color: '#f56c6c', percentage: 20 },
252+
{ color: '#e6a23c', percentage: 40 },
253+
{ color: '#5cb87a', percentage: 60 },
254+
{ color: '#1989fa', percentage: 80 },
255+
{ color: '#6f7ad3', percentage: 100 },
256+
],
257+
},
258+
props_info: {
259+
view_card: [
260+
{
261+
type: 'eval',
262+
title: '测试',
263+
value_field:
264+
'`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`',
265+
},
266+
{
267+
type: 'eval',
268+
title: '名称',
269+
value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`',
270+
},
271+
],
272+
},
273+
},
274+
],
275+
style: { width: '500px' },
276+
},
277+
option_list: [
278+
{
279+
key: '测试',
280+
value: 'test',
281+
number: 10,
282+
},
283+
{
284+
key: '测试111111',
285+
value: 'test1',
286+
number: 100,
287+
},
288+
],
289+
},
290+
{
291+
field: 'table_checkbox_field',
292+
input_type: 'TableCheckbox',
293+
label: '表格多选',
294+
required: true,
295+
attrs: { placeholder: '请选择' },
296+
props_info: {
297+
active_msg: '当前选中',
298+
table_columns: [
299+
{
300+
property: '`${row.key}${row.number}`',
301+
label: '名称',
302+
type: 'eval',
303+
},
304+
{
305+
property: 'ProgressTableItem',
306+
label: '数值',
307+
type: 'component',
308+
value_field: 'number',
309+
attrs: {
310+
color: [
311+
{ color: '#f56c6c', percentage: 20 },
312+
{ color: '#e6a23c', percentage: 40 },
313+
{ color: '#5cb87a', percentage: 60 },
314+
{ color: '#1989fa', percentage: 80 },
315+
{ color: '#6f7ad3', percentage: 100 },
316+
],
317+
},
318+
props_info: {
319+
view_card: [
320+
{
321+
type: 'eval',
322+
title: '测试',
323+
value_field:
324+
'`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`',
325+
},
326+
{
327+
type: 'eval',
328+
title: '名称',
329+
value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`',
330+
},
331+
],
332+
},
333+
},
334+
],
335+
style: { width: '500px' },
336+
},
337+
option_list: [
338+
{
339+
key: '测试',
340+
value: 'test',
341+
number: 10,
342+
},
343+
{
344+
key: '测试111111',
345+
value: 'test1',
346+
number: 100,
347+
},
348+
],
349+
},
350+
]
351+
const form_data = ref<Dict<any>>({})
352+
const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
353+
const click = () => {
354+
dynamicsFormRef.value?.validate()
355+
}
356+
</script>
357+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)