fix: replace dynamic form code execution with declarative handlers

ui/src/components/ai-chat/component/inline-params/InlineFormItem.vue

@@ -46,7 +46,7 @@
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted, type Ref } from 'vue'
-import type { FormField } from '@/components/dynamics-form/type'
+import type { FormField, TriggerSetting } from '@/components/dynamics-form/type'
 import type { Dict } from '@/api/type/common'
 import bus from '@/utils/bus'
 import { get } from 'lodash'
@@ -59,7 +59,7 @@ const props = defineProps<{
   trigger: (
     trigger_field: string,
     trigger_value: any,
-    trigger_setting: any,
+    trigger_setting: TriggerSetting,
     self: any,
     loading: Ref<boolean>,
   ) => void

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

@@ -56,8 +56,7 @@ const damo_data: Array<FormField> = [
       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})',
+          request_action: 'set_children_loader',
           url: '/workspace/${current_workspace_id}/model/${trigger_value}/model_params_form',
         },
       },
@@ -140,8 +139,7 @@ const damo_data: Array<FormField> = [
       relation_trigger_field_dict: {
         single_select_field: {
           values: [],
-          request:
-            'self.children=()=>request.get(extra.renderTemplate(trigger_setting.url)).then(ok=>{return ok})',
+          request_action: 'set_children_loader',
           url: '/workspace/${current_workspace_id}/model/${trigger_value}/model_params_form',
         },
       },
@@ -152,6 +150,7 @@ const damo_data: Array<FormField> = [
         values: [],
         url: '/workspace/${current_workspace_id}/model_list?model_type=LLM',
         change_field: 'option_list',
+        response_type: 'model_options',
       },
     },
   },
@@ -237,9 +236,10 @@ const damo_data: Array<FormField> = [
       active_msg: '当前选中',
       table_columns: [
         {
-          property: '`${row.key}${row.number}`',
+          property: 'key',
+          value_fields: ['key', 'number'],
           label: '名称',
-          type: 'eval',
+          type: 'concat',
         },
         {
           property: 'ProgressTableItem',
@@ -258,15 +258,17 @@ const damo_data: Array<FormField> = [
           props_info: {
             view_card: [
               {
-                type: 'eval',
+                type: 'number',
                 title: '测试',
-                value_field:
-                  '`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`',
+                value_field: 'number',
+                locale: 'zh-CN',
+                maximum_fraction_digits: 1,
+                suffix: '%',
               },
               {
-                type: 'eval',
+                type: 'default',
                 title: '名称',
-                value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`',
+                value_field: 'key',
               },
             ],
           },
@@ -297,9 +299,10 @@ const damo_data: Array<FormField> = [
       active_msg: '当前选中',
       table_columns: [
         {
-          property: '`${row.key}${row.number}`',
+          property: 'key',
+          value_fields: ['key', 'number'],
           label: '名称',
-          type: 'eval',
+          type: 'concat',
         },
         {
           property: 'ProgressTableItem',
@@ -318,15 +321,17 @@ const damo_data: Array<FormField> = [
           props_info: {
             view_card: [
               {
-                type: 'eval',
+                type: 'number',
                 title: '测试',
-                value_field:
-                  '`${parseFloat(row.number).toLocaleString("zh-CN",{style: "decimal",maximumFractionDigits:1})}%&nbsp;&nbsp;&nbsp;`',
+                value_field: 'number',
+                locale: 'zh-CN',
+                maximum_fraction_digits: 1,
+                suffix: '%',
               },
               {
-                type: 'eval',
+                type: 'default',
                 title: '名称',
-                value_field: '`${row.key}&nbsp;&nbsp;&nbsp;`',
+                value_field: 'key',
               },
             ],
           },

ui/src/components/dynamics-form/FormItem.vue

@@ -34,7 +34,7 @@
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted, type Ref } from 'vue'
-import type { FormField } from '@/components/dynamics-form/type'
+import type { FormField, TriggerSetting } from '@/components/dynamics-form/type'
 import FormItemLabel from './FormItemLabel.vue'
 import type { Dict } from '@/api/type/common'
 import bus from '@/utils/bus'
@@ -54,7 +54,7 @@ const props = defineProps<{
   trigger: (
     trigger_field: string,
     trigger_value: any,
-    trigger_setting: any,
+    trigger_setting: TriggerSetting,
     self: any,
     loading: Ref<boolean>,
   ) => void
@@ -100,6 +100,17 @@ const itemValue = computed({
   },
 })
 const componentFormRef = ref<any>()
+const componentValidator = (rule: any, value: string, callback: any) => {
+  return componentFormRef.value?.validate_rules(rule, value, callback)
+}
+
+const isComponentValidator = (validator: unknown) => {
+  return (
+    validator === 'component' ||
+    (typeof validator === 'string' &&
+      validator.includes('componentFormRef.value?.validate_rules(rule, value, callback)'))
+  )
+}
 const label_attrs = computed(() => {
   return props.formfield.label &&
     typeof props.formfield.label !== 'string' &&
@@ -132,13 +143,16 @@ const errMsg = computed(() => {
  * @param rule
  */
 const to_rule = (rule: any) => {
-  if (rule.validator) {
-    // eslint-disable-next-line prefer-const, @typescript-eslint/no-unused-vars
-    let validator = (rule: any, value: string, callback: any) => {}
-    eval(rule.validator)
-    return { ...rule, validator }
+  if (typeof rule.validator === 'function' || !rule.validator) {
+    return rule
   }
-  return rule
+
+  if (isComponentValidator(rule.validator)) {
+    return { ...rule, validator: componentValidator }
+  }
+
+  const { validator: _validator, ...safeRule } = rule
+  return safeRule
 }
 
 /**
@@ -187,9 +201,9 @@ onMounted(() => {
   props.initDefaultData(props.formfield)
   initTrigger(props.formfield, props.formfield.relation_trigger_field_dict)
   initTrigger(props.formfield.label, props.formfield.label?.relation_trigger_field_dict)
-  isString(props.formfield.label)
-    ? undefined
-    : onTrigger(props.formfield.label, props.formfield.label.relation_trigger_field_dict)
+  if (!isString(props.formfield.label)) {
+    onTrigger(props.formfield.label, props.formfield.label.relation_trigger_field_dict)
+  }
   onTrigger(props.formfield, props.formfield.relation_trigger_field_dict)
 })
 const onTrigger = (self: any, trigger_field_dict?: Dict<any>) => {

ui/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue

@@ -112,10 +112,7 @@ const getData = () => {
       rules: [
         {
           required: formValue.value.required,
-          validator: `validator = (rule, value, callback) => {
-            return componentFormRef.value?.validate_rules(rule, value, callback);
-
-}`,
+          validator: 'component',
           trigger: 'blur',
         },
       ],

ui/src/components/dynamics-form/index.vue

@@ -35,19 +35,14 @@
 <script lang="ts" setup>
 import type { Dict } from '@/api/type/common'
 import FormItem from '@/components/dynamics-form/FormItem.vue'
-import type { FormField } from '@/components/dynamics-form/type'
+import type { FormField, TriggerSetting } from '@/components/dynamics-form/type'
 import { ref, onBeforeMount, watch, type Ref, nextTick, computed } from 'vue'
 import type { FormInstance } from 'element-plus'
 import type Result from '@/request/Result'
 import _ from 'lodash'
-import { get, post, put, del } from '@/request/index'
+import { get } from '@/request/index'
 import { computeVisibilityMap } from './visibility'
-const request = {
-  get,
-  post,
-  put,
-  del,
-}
+import { runTrigger } from './trigger'
 defineOptions({ name: 'dynamicsForm' })
 
 const props = withDefaults(
@@ -152,59 +147,23 @@ watch(
   { deep: true },
 )
 
-function renderTemplate(template: string, data: any) {
-  return template.replace(/\$\{(\w+)\}/g, (match, key) => {
-    return data[key] !== undefined ? data[key] : match
-  })
-}
 /**
  * 触发器,用户获取子表单 或者 下拉选项
  * @param field
  * @param loading
  */
 const trigger = (
-  trigger_field: string,
+  _trigger_field: string,
   trigger_value: any,
-  trigger_setting: any,
+  trigger_setting: TriggerSetting,
   self: any,
   loading: Ref<boolean>,
 ) => {
-  const request_call = new Function(
-    'self',
-    'trigger_setting',
-    'request',
-    'extra',
-    trigger_setting.request
-      ? trigger_setting.request
-      : 'return  request.get(extra.renderTemplate(trigger_setting.url));',
-  )(self, trigger_setting, request, {
-    renderTemplate: (url: string) =>
-      renderTemplate(url, {
-        trigger_value: trigger_value,
-        ...props.otherParams,
-      }),
-  })
-
-  if (!trigger_setting.change && !trigger_setting.change_field) {
-    return
-  }
-  request_call.then((ok: any) => {
-    new Function(
-      'self',
-      'trigger_setting',
-      'response',
-      'extra',
-      trigger_setting.change
-        ? trigger_setting.change
-        : `self[trigger_setting.change_field]=[
-        ...response.data.shared_model.map((m) => {
-          return { ...m, type: 'share' }
-        }),
-        ...response.data.model.map((m) => {
-          return { ...m, type: 'workspace' }
-        })
-      ];`,
-    )(self, trigger_setting, ok, { form_data: formValue, getDefault: getFormDefaultValue })
+  return runTrigger(trigger_setting, self, {
+    triggerValue: trigger_value,
+    otherParams: props.otherParams,
+    loading,
+    get,
   })
 }
 /**

ui/src/components/dynamics-form/items/table/ProgressTableItem.vue

@@ -13,14 +13,17 @@
       <div>
         <el-row v-for="(item, index) in view_card" :key="index">
           <el-col :span="6">{{ item.title }}</el-col>
-          <el-col :span="18"> <span class="value" :innerHTML="value_html(item)"> </span></el-col>
+          <el-col :span="18">
+            <span class="value">{{ formatTableValue(item, row) }}</span>
+          </el-col>
         </el-row>
       </div>
     </el-popover>
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
+import { formatTableValue } from '@/components/dynamics-form/items/table/valueFormatter'
 const props = defineProps<{
   /**
    *表单渲染Item column
@@ -31,12 +34,6 @@ const props = defineProps<{
    */
   row: any
 }>()
-const rowRef = ref<any>()
-
-function evalF(text: string, row: any) {
-  rowRef.value = row
-  return eval(text)
-}
 const props_info = computed(() => {
   return props.column.props_info ? props.column.props_info : {}
 })
@@ -47,14 +44,6 @@ const value_field = computed(() => {
   return props.column.value_field ? props.column.value_field : 'value'
 })
 
-const value_html = (view_card_item: any) => {
-  if (view_card_item.type === 'eval') {
-    return evalF(view_card_item.value_field, props.row)
-  } else {
-    return props.row[view_card_item.value_field]
-  }
-}
-
 const view_card = computed(() => {
   return props_info.value.view_card ? props_info.value.view_card : []
 })

ui/src/components/dynamics-form/items/table/TableCheckbox.vue

@@ -35,11 +35,8 @@
           <template v-if="column.type === 'component'">
             <TableColumn :column="column" :row="scope.row"></TableColumn>
           </template>
-          <template v-else-if="column.type === 'eval'">
-            <span v-html="evalF(column.property, scope.row)"></span
-          ></template>
           <template v-else>
-            <span>{{ scope.row[column.property] }}</span></template
+            <span>{{ formatTableValue(column, scope.row) }}</span></template
           >
         </template>
       </el-table-column>
@@ -60,6 +57,7 @@ import type { TableInstance } from 'element-plus'
 
 import _ from 'lodash'
 import TableColumn from '@/components/dynamics-form/items/table/TableColumn.vue'
+import { formatTableValue } from '@/components/dynamics-form/items/table/valueFormatter'
 const filterText = ref<string>('')
 const props = defineProps<{
   formValue?: any
@@ -71,11 +69,6 @@ const props = defineProps<{
   // 选中的值
   modelValue?: Array<any>
 }>()
-const rowTemp = ref<any>()
-const evalF: (text: string, row: any) => string = (text: string, row: any) => {
-  rowTemp.value = row
-  return eval(text)
-}
 const emit = defineEmits(['update:modelValue', 'change'])
 
 const multipleTableRef = ref<TableInstance>()
@@ -124,15 +117,10 @@ const tableData = computed(() => {
     if (filterText.value) {
       return option_list.value.filter((item: any) =>
         tableColumns.value.some((c: any) => {
-          let v = ''
-          if (c.type === 'eval') {
-            v = evalF(c.property, item)
-          } else if (c.type === 'component') {
+          if (c.type === 'component') {
             return false
-          } else {
-            v = item[c.property]
           }
-          return typeof v == 'string' ? v.indexOf(filterText.value) >= 0 : false
+          return formatTableValue(c, item).includes(filterText.value)
         })
       )
     } else {