Skip to content

feat: Enhance dynamic form rendering #4223

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shaohuzhang1 merged 1 commit into from
Oct 21, 2025
Merged

feat: Enhance dynamic form rendering #4223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 107 additions & 68 deletions ui/src/components/dynamics-form/Demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
:model="form_data"
:render_data="damo_data"
ref="dynamicsFormRef"
:other-params="{ current_workspace_id: 'default' }"
>
<template #default="scope">
<el-form-item label="其他字段">
Expand All @@ -21,7 +22,30 @@ import { ref } from 'vue'
import type { Dict } from '@/api/type/common'

const damo_data: Array<FormField> = [
{ field: 'name', input_type: 'PasswordInput', label: '用戶名', required: false },
{
field: 'name',
input_type: 'PasswordInput',
label: {
label: '用戶名',
input_type: 'SettingLabel',
field: 'name_setting',
relation_show_field_dict: {
name: {
values: ['01993837-5b09-7f20-9360-801d11d43d28'],
},
},
relation_trigger_field_dict: {
name: {
values: ['01993837-5b09-7f20-9360-801d11d43d28'],
request:
'self.children=()=>request.get(extra.renderTemplate(trigger_setting.url)).then(ok=>{return ok})',
url: '/workspace/${current_workspace_id}/model/${trigger_value}/model_params_form',
},
},
children: [],
},
required: false,
},
{ field: 'json_text', input_type: 'JsonInput', label: 'aa', required: false },
{
field: 'array_object_card_field',
Expand All @@ -33,8 +57,8 @@ const damo_data: Array<FormField> = [
children: [
{ field: 'name1', input_type: 'TextInput', label: '用戶名1' },
{ field: 'name2', input_type: 'TextInput', label: '用戶名2' },
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' }
]
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' },
],
},
{
field: 'maxkb_tokens',
Expand All @@ -46,9 +70,9 @@ const damo_data: Array<FormField> = [
step: 1,
precision: 1,
'show-input-controls': false,
'show-input': true
'show-input': true,
},
label: { label: '温度', attrs: { tooltip: 'sss' }, input_type: 'TooltipLabel' }
label: { label: '温度', attrs: { tooltip: 'sss' }, input_type: 'TooltipLabel' },
},
{
field: 'object_card_field',
Expand All @@ -60,8 +84,8 @@ const damo_data: Array<FormField> = [
children: [
{ field: 'name1', input_type: 'TextInput', label: '用戶名1' },
{ field: 'name2', input_type: 'TextInput', label: '用戶名2' },
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' }
]
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' },
],
},
{
field: 'tab_card_field',
Expand All @@ -70,53 +94,68 @@ const damo_data: Array<FormField> = [
trigger_type: 'CHILD_FORMS',
attrs: { 'label-width': '120px', 'label-suffix': ':ssss', 'label-position': 'left' },
required: false,
relation_trigger_field_dict: {
'array_object_card_field.0.name1': ['111']
},
props_info: { tabs_label: '用户' },
children: [
{ field: 'name1', input_type: 'TextInput', label: '用戶名1' },
{ field: 'name2', input_type: 'TextInput', label: '用戶名2' },
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' }
]
{ field: 'name3', input_type: 'TextInput', label: '用戶名3' },
],
},
{
field: 'single_select_field',
input_type: 'SingleSelect',
label: '测试单选',
text_field: 'name',
value_field: 'id',
required: true,
attrs: { placeholder: '请选择' },
option_list: [
{
key: '测试',
value: 'test'
required_asterisk: true,
label: {
label: '测试单选',
input_type: 'SettingLabel',
field: 'name_setting',
relation_show_field_dict: {
single_select_field: {
values: [],
},
},
{
key: '测试1',
value: 'test1'
}
]
relation_trigger_field_dict: {
single_select_field: {
values: [],
request:
'self.children=()=>request.get(extra.renderTemplate(trigger_setting.url)).then(ok=>{return ok})',
url: '/workspace/${current_workspace_id}/model/${trigger_value}/model_params_form',
},
},
children: [],
},
relation_trigger_field_dict: {
name: {
values: [],
url: '/workspace/${current_workspace_id}/model_list?model_type=LLM',
change_field: 'option_list',
},
},
},
{
field: 'multi_select_field',
input_type: 'MultiSelect',
default_value: ['test1'],
relation_show_field_dict: {
'object_card_field.name1': []
'object_card_field.name1': [],
},
label: '测试多选下拉',
required: true,
attrs: { placeholder: '请选择' },
option_list: [
{
key: '测试',
value: 'test'
value: 'test',
},
{
key: '测试1',
value: 'test1'
}
]
value: 'test1',
},
],
},
{
field: 'radio_field',
Expand All @@ -127,13 +166,13 @@ const damo_data: Array<FormField> = [
option_list: [
{
key: '测试',
value: 'test'
value: 'test',
},
{
key: '测试1',
value: 'test1'
}
]
value: 'test1',
},
],
},
{
field: 'radio_button_field',
Expand All @@ -144,13 +183,13 @@ const damo_data: Array<FormField> = [
option_list: [
{
key: '测试',
value: 'test'
value: 'test',
},
{
key: '测试1',
value: 'test1'
}
]
value: 'test1',
},
],
},
{
field: 'radio_card_field',
Expand All @@ -161,13 +200,13 @@ const damo_data: Array<FormField> = [
option_list: [
{
key: '测试',
value: 'test'
value: 'test',
},
{
key: '测试111111',
value: 'test1'
}
]
value: 'test1',
},
],
},
{
field: 'table_radio_field',
Expand All @@ -181,7 +220,7 @@ const damo_data: Array<FormField> = [
{
property: '`${row.key}${row.number}`',
label: '名称',
type: 'eval'
type: 'eval',
},
{
property: 'ProgressTableItem',
Expand All @@ -194,40 +233,40 @@ const damo_data: Array<FormField> = [
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 }
]
{ color: '#6f7ad3', percentage: 100 },
],
},
props_info: {
view_card: [
{
type: 'eval',
title: '测试',
value_field:
'`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`'
'`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`',
},
{
type: 'eval',
title: '名称',
value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`'
}
]
}
}
value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`',
},
],
},
},
],
style: { width: '500px' }
style: { width: '500px' },
},
option_list: [
{
key: '测试',
value: 'test',
number: 10
number: 10,
},
{
key: '测试111111',
value: 'test1',
number: 100
}
]
number: 100,
},
],
},
{
field: 'table_checkbox_field',
Expand All @@ -241,7 +280,7 @@ const damo_data: Array<FormField> = [
{
property: '`${row.key}${row.number}`',
label: '名称',
type: 'eval'
type: 'eval',
},
{
property: 'ProgressTableItem',
Expand All @@ -254,41 +293,41 @@ const damo_data: Array<FormField> = [
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 }
]
{ color: '#6f7ad3', percentage: 100 },
],
},
props_info: {
view_card: [
{
type: 'eval',
title: '测试',
value_field:
'`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`'
'`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`',
},
{
type: 'eval',
title: '名称',
value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`'
}
]
}
}
value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`',
},
],
},
},
],
style: { width: '500px' }
style: { width: '500px' },
},
option_list: [
{
key: '测试',
value: 'test',
number: 10
number: 10,
},
{
key: '测试111111',
value: 'test1',
number: 100
}
]
}
number: 100,
},
],
},
]
const form_data = ref<Dict<any>>({})
const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided Vue component template has several improvements and corrections:

  1. Attribute Errors: Fixed attrs syntax issues, such as using { label-width='xx' }.
  2. Relation Field Settings:
    • Updated relation_trigger_field_dict to correctly reference trigger_value when calling the request URL.
    • Removed duplicate children arrays that were causing confusion and added missing ones where necessary.
  3. Option List Correctness:
    • The option list for each select control is consistent with other fields.
  4. Text Field Name Handling:
    • Added missing text_field, value_field, required_asterisk, and setting correct labels for multi-level structure.

Suggested Changes:

  1. Updated HTML Attributes:

      :props-info="{ tabs_label: '用户', active-name: 'first-tab', tab-content-class:'content-card'" />
  style="width:100%"
</el-form>

  2. Fixed Relation Trigger Field Dictionary Keys:
    Use field instead of key (as used in option_lists).

  3. Consistent Option Lists:
    Ensure every input field's options match its configuration in both input_type specific properties and general attributes (placeholder, custom settings) if applicable.

Here’s an optimized version based on these suggestions:

<template>
  <dynamic-form
    :model="form_data"
    :render-data="damo_data"
    ref="dynamicsFormRef"
    :other-params="{ current_workspace_id: '{{ current_workspace_id }}' }" // Update dynamic parameters here.
  >
    <!-- Custom Label Components -->
    <div slot="label-template">
      {{ form_item.label.label }}
    </div>

    <template #default="scope">
      <el-form-item class="component-item">
        <template v-if="form_item.input_type === 'PasswordInput'">
          <password-input></password-input>
        </template>
        
        ...
        
        <!-- Example Component Usage -->
        <el-select v-model="formData[field]" clearable placeholder="请选择">
          <el-option
            v-for="(item, index) in form_item.option_list"
            :key="index"
            :label="item[key]"
            :value="item[value]">{{ item.text || item[title] }}</el-option>
        </el-select>

      </el-form-item>
    </template>

    <script setup lang="ts">
    import { ref } from 'vue';
    import type { DynamicFormItem } from '~components/dynamic-form/types';

    interface FormField extends DynamicFormItem {}
    const damo_data: Array<FormField> = [ /* ... */ ];
    const form_data = ref({});
    const formData = reactive({});

    // Additional hooks/setup logic can go here...
    
    // Example handler function if needed
    async function handleTriggerChange(value:any){
      try{
        console.log('handling trigger:', value);
        let response = await fetch(`/workspace/{{currentWorkspaceId}}/model/${value}/model_params_form`);
        if(response.ok){
          // Assuming you return JSON data directly or need further processing
          let data = await response.json();
          this.damo_data[index].relation_trigger_field_dict[name.value].request(data)
        }else throw Error(`Failed loading ${value}`);
      }catch(err){
        console.error("Error fetching:", err.message);
      }
    }

  </script>

  <style scoped>
    .component-item {
      margin-bottom: 2rem;
    }
  </style>
</template>

This revised format adheres to standard practices and improves maintainability while addressing the identified issues.

Expand Down
Loading
Loading