feat: Form collection single line tab supports variables (#3942)

apps/application/flow/step_node/form_node/impl/base_form_node.py

@@ -18,15 +18,18 @@ from application.flow.step_node.form_node.i_form_node import IFormNode
 
 
 def get_default_option(option_list, _type, value_field):
-    if option_list is not None and len(option_list) > 0:
-        default_value_list = [o.get(value_field) for o in option_list if o.get('default')]
-        if len(default_value_list) == 0:
-            return option_list[0].get(value_field)
-        else:
-            if _type == 'MultiSelect':
-                return default_value_list
+    try:
+        if option_list is not None and isinstance(option_list, list) and len(option_list) > 0:
+            default_value_list = [o.get(value_field) for o in option_list if o.get('default')]
+            if len(default_value_list) == 0:
+                return option_list[0].get(value_field)
             else:
-                return default_value_list[0]
+                if _type == 'MultiSelect':
+                    return default_value_list
+                else:
+                    return default_value_list[0]
+    except Exception as _:
+        pass
     return []
 
 
@@ -41,6 +44,13 @@ def write_context(step_variable: Dict, global_variable: Dict, node, workflow):
     node.context['run_time'] = time.time() - node.context['start_time']
 
 
+def generate_prompt(workflow_manage, _value):
+    try:
+        return workflow_manage.generate_prompt(_value)
+    except Exception as e:
+        return _value
+
+
 class BaseFormNode(IFormNode):
     def save_context(self, details, workflow_manage):
         form_data = details.get('form_data', None)
@@ -58,27 +68,34 @@ class BaseFormNode(IFormNode):
                 self.context[key] = form_data[key]
 
     def reset_field(self, field):
-        if ['SingleSelect', 'MultiSelect', 'RadioCard'].__contains__(field.get('input_type')):
-            if field.get('assignment_method') == 'ref_variables':
-                option_list = self.workflow_manage.get_reference_field(field.get('option_list')[0],
-                                                                       field.get('option_list')[1:])
-                field['option_list'] = option_list
-                field['default_value'] = get_default_option(option_list, field.get('input_type'),
-                                                            field.get('value_field'))
-
         reset_field = ['field', 'label', 'default_value']
         for f in reset_field:
             _value = field[f]
             if _value is None:
                 continue
             if isinstance(_value, str):
-                field[f] = self.workflow_manage.generate_prompt(_value)
+                field[f] = generate_prompt(self.workflow_manage, _value)
             elif f == 'label':
                 _label_value = _value.get('label')
-                _value['label'] = self.workflow_manage.generate_prompt(_label_value)
+                _value['label'] = generate_prompt(self.workflow_manage, _label_value)
                 tooltip = _value.get('attrs').get('tooltip')
                 if tooltip is not None:
-                    _value.get('attrs')['tooltip'] = self.workflow_manage.generate_prompt(tooltip)
+                    _value.get('attrs')['tooltip'] = generate_prompt(self.workflow_manage, tooltip)
+
+        if ['SingleSelect', 'MultiSelect', 'RadioCard', 'RadioRow'].__contains__(field.get('input_type')):
+            if field.get('assignment_method') == 'ref_variables':
+                option_list = self.workflow_manage.get_reference_field(field.get('option_list')[0],
+                                                                       field.get('option_list')[1:])
+                option_list = option_list if isinstance(option_list, list) else []
+                field['option_list'] = option_list
+                field['default_value'] = get_default_option(option_list, field.get('input_type'),
+                                                            field.get('value_field'))
+
+        if ['JsonInput'].__contains__(field.get('input_type')):
+            if field.get('default_value_assignment_method') == 'ref_variables':
+                field['default_value'] = self.workflow_manage.get_reference_field(field.get('default_value')[0],
+                                                                                  field.get('default_value')[1:])
+
         return field
 
     def execute(self, form_field_list, form_content_format, form_data, **kwargs) -> NodeResult:

ui/src/components/dynamics-form/constructor/data.ts

@@ -4,18 +4,18 @@ const input_type_list = [
     label: t('dynamicsForm.input_type_list.TextInput'),
     value: 'TextInput',
   },
+  {
+    label: t('dynamicsForm.input_type_list.TextareaInput'),
+    value: 'TextareaInput',
+  },
+  {
+    label: t('dynamicsForm.input_type_list.JsonInput'),
+    value: 'JsonInput',
+  },
   {
     label: t('dynamicsForm.input_type_list.PasswordInput'),
     value: 'PasswordInput',
   },
-  {
-    label: t('dynamicsForm.input_type_list.Slider'),
-    value: 'Slider',
-  },
-  {
-    label: t('dynamicsForm.input_type_list.SwitchInput'),
-    value: 'SwitchInput',
-  },
   {
     label: t('dynamicsForm.input_type_list.SingleSelect'),
     value: 'SingleSelect',
@@ -24,14 +24,6 @@ const input_type_list = [
     label: t('dynamicsForm.input_type_list.MultiSelect'),
     value: 'MultiSelect',
   },
-  {
-    label: t('dynamicsForm.input_type_list.DatePicker'),
-    value: 'DatePicker',
-  },
-  {
-    label: t('dynamicsForm.input_type_list.JsonInput'),
-    value: 'JsonInput',
-  },
   {
     label: t('dynamicsForm.input_type_list.RadioCard'),
     value: 'RadioCard',
@@ -40,13 +32,23 @@ const input_type_list = [
     label: t('dynamicsForm.input_type_list.RadioRow'),
     value: 'RadioRow',
   },
+  {
+    label: t('dynamicsForm.input_type_list.Slider'),
+    value: 'Slider',
+  },
+  {
+    label: t('dynamicsForm.input_type_list.SwitchInput'),
+    value: 'SwitchInput',
+  },
+
+  {
+    label: t('dynamicsForm.input_type_list.DatePicker'),
+    value: 'DatePicker',
+  },
+
   {
     label: t('dynamicsForm.input_type_list.UploadInput'),
     value: 'UploadInput',
   },
-  {
-    label: t('dynamicsForm.input_type_list.TextareaInput'),
-    value: 'TextareaInput',
-  },
 ]
 export { input_type_list }

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

@@ -1,8 +1,52 @@
 <template>
+  <el-form-item v-if="getModel">
+    <template #label>
+      <div class="flex-between">
+        {{ $t('dynamicsForm.AssignmentMethod.label', '赋值方式') }}
+      </div>
+    </template>
+
+    <el-row style="width: 100%" :gutter="10">
+      <el-radio-group v-model="formValue.default_value_assignment_method">
+        <el-radio :value="item.value" size="large" v-for="item in assignment_method_option_list"
+          >{{ item.label }}
+          <el-popover
+            width="300px"
+            v-if="item.value == 'ref_variables'"
+            class="box-item"
+            placement="top-start"
+          >
+            {{ $t('dynamicsForm.AssignmentMethod.ref_variables.popover') }}:
+            {{ $t('dynamicsForm.AssignmentMethod.ref_variables.json_format') }}
+
+            <template #reference>
+              <el-icon><InfoFilled /></el-icon>
+            </template>
+          </el-popover>
+        </el-radio>
+      </el-radio-group>
+    </el-row>
+  </el-form-item>
+  <el-form-item
+    v-if="formValue.default_value_assignment_method == 'ref_variables'"
+    :required="true"
+    prop="default_value"
+    :rules="[default_ref_variables_value_rule]"
+  >
+    <NodeCascader
+      ref="nodeCascaderRef"
+      :nodeModel="model"
+      class="w-full"
+      :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+      v-model="formValue.default_value"
+    />
+  </el-form-item>
+
   <el-form-item
     class="defaultValueItem"
     :label="$t('dynamicsForm.default.label')"
     :required="formValue.required"
+    v-if="formValue.default_value_assignment_method == 'custom'"
     prop="default_value"
     :rules="[default_value_rule]"
   >
@@ -16,11 +60,38 @@
   </el-form-item>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, inject, watch } from 'vue'
+import { t } from '@/locales'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import JsonInput from '@/components/dynamics-form/items/JsonInput.vue'
 const props = defineProps<{
   modelValue: any
 }>()
+const getModel = inject('getModel') as any
+
+const assignment_method_option_list = computed(() => {
+  const option_list = [
+    {
+      label: t('dynamicsForm.AssignmentMethod.custom.label', '自定义'),
+      value: 'custom',
+    },
+  ]
+  if (getModel) {
+    option_list.push({
+      label: t('dynamicsForm.AssignmentMethod.ref_variables.label', '引用变量'),
+      value: 'ref_variables',
+    })
+  }
+  return option_list
+})
+
+const model = computed(() => {
+  if (getModel) {
+    return getModel()
+  } else {
+    return null
+  }
+})
 const emit = defineEmits(['update:modelValue'])
 const formValue = computed({
   set: (item) => {
@@ -28,7 +99,7 @@ const formValue = computed({
   },
   get: () => {
     return props.modelValue
-  }
+  },
 })
 const jsonInputRef = ref<InstanceType<typeof JsonInput>>()
 const getData = () => {
@@ -41,14 +112,15 @@ const getData = () => {
           required: formValue.value.required,
           validator: `validator = (rule, value, callback) => {
             return componentFormRef.value?.validate_rules(rule, value, callback);
-             
+
 }`,
-          trigger: 'blur'
-        }
-      ]
+          trigger: 'blur',
+        },
+      ],
     },
     default_value: formValue.value.default_value,
-    show_default_value: formValue.value.show_default_value
+    show_default_value: formValue.value.show_default_value,
+    default_value_assignment_method: formValue.value.default_value_assignment_method || 'custom',
   }
 }
 
@@ -58,15 +130,31 @@ const default_value_rule = {
     jsonInputRef.value?.validate_rules(rule, value, callback)
     return true
   },
-  trigger: 'blur'
+  trigger: 'blur',
+}
+const default_ref_variables_value_rule = {
+  required: true,
+  validator: (rule: any, value: any, callback: any) => {
+    if (!(Array.isArray(value) && value.length > 1)) {
+      callback(
+        t('dynamicsForm.AssignmentMethod.ref_variables.label', '引用变量') + t('common.required'),
+      )
+    }
+
+    return true
+  },
+  trigger: 'blur',
 }
 
 const rander = (form_data: any) => {
   formValue.value.default_value = form_data.default_value
+  formValue.value.default_value_assignment_method =
+    form_data.default_value_assignment_method || 'custom'
 }
 defineExpose({ getData, rander })
 onMounted(() => {
   formValue.value.default_value = {}
+  formValue.value.default_value_assignment_method = 'custom'
   if (formValue.value.show_default_value === undefined) {
     formValue.value.show_default_value = true
   }

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

@@ -7,7 +7,7 @@
     </template>
 
     <el-row style="width: 100%" :gutter="10">
-      <el-radio-group v-model="formValue.assignment_method">
+      <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
         <el-radio :value="item.value" size="large" v-for="item in assignment_method_option_list"
           >{{ item.label }}
           <el-popover
@@ -37,14 +37,21 @@
       </el-radio-group>
     </el-row>
   </el-form-item>
-  <NodeCascader
+  <el-form-item
     v-if="formValue.assignment_method == 'ref_variables'"
-    ref="nodeCascaderRef"
-    :nodeModel="model"
-    class="w-full"
-    :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
-    v-model="formValue.option_list"
-  />
+    :required="true"
+    prop="option_list"
+    :rules="[default_ref_variables_value_rule]"
+  >
+    <NodeCascader
+      ref="nodeCascaderRef"
+      :nodeModel="model"
+      class="w-full"
+      :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+      v-model="formValue.option_list"
+    />
+  </el-form-item>
+
   <el-form-item v-if="formValue.assignment_method == 'custom'">
     <template #label>
       <div class="flex-between">
@@ -139,7 +146,7 @@
   </el-form-item>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, inject } from 'vue'
+import { computed, onMounted, inject, watch } from 'vue'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import { t } from '@/locales'
 const getModel = inject('getModel') as any
@@ -180,6 +187,20 @@ const formValue = computed({
   },
 })
 
+const default_ref_variables_value_rule = {
+  required: true,
+  validator: (rule: any, value: any, callback: any) => {
+    console.log(value.length)
+    if (!(Array.isArray(value) && value.length > 1)) {
+      callback(
+        t('dynamicsForm.AssignmentMethod.ref_variables.label', '引用变量') + t('common.required'),
+      )
+    }
+
+    return true
+  },
+  trigger: 'blur',
+}
 const addOption = () => {
   formValue.value.option_list.push({ value: '', label: '' })
 }

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

@@ -7,7 +7,7 @@
     </template>
 
     <el-row style="width: 100%" :gutter="10">
-      <el-radio-group v-model="formValue.assignment_method">
+      <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
         <el-radio :value="item.value" size="large" v-for="item in assignment_method_option_list"
           >{{ item.label }}
           <el-popover
@@ -37,14 +37,20 @@
       </el-radio-group>
     </el-row>
   </el-form-item>
-  <NodeCascader
+  <el-form-item
     v-if="formValue.assignment_method == 'ref_variables'"
-    ref="nodeCascaderRef"
-    :nodeModel="model"
-    class="w-full"
-    :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
-    v-model="formValue.option_list"
-  />
+    :required="true"
+    prop="option_list"
+    :rules="[default_ref_variables_value_rule]"
+  >
+    <NodeCascader
+      ref="nodeCascaderRef"
+      :nodeModel="model"
+      class="w-full"
+      :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+      v-model="formValue.option_list"
+    />
+  </el-form-item>
   <el-form-item v-if="formValue.assignment_method === 'custom'">
     <template #label>
       <div class="flex-between">
@@ -131,7 +137,7 @@
   </el-form-item>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, inject, ref } from 'vue'
+import { computed, onMounted, inject } from 'vue'
 import RadioCard from '@/components/dynamics-form/items/radio/RadioCard.vue'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import { t } from '@/locales'
@@ -172,7 +178,20 @@ const formValue = computed({
     return props.modelValue
   },
 })
+const default_ref_variables_value_rule = {
+  required: true,
+  validator: (rule: any, value: any, callback: any) => {
+    console.log(value.length)
+    if (!(Array.isArray(value) && value.length > 1)) {
+      callback(
+        t('dynamicsForm.AssignmentMethod.ref_variables.label', '引用变量') + t('common.required'),
+      )
+    }
 
+    return true
+  },
+  trigger: 'blur',
+}
 const addOption = () => {
   formValue.value.option_list.push({ value: '', label: '' })
 }

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

@@ -1,5 +1,57 @@
 <template>
-  <el-form-item>
+  <el-form-item v-if="getModel">
+    <template #label>
+      <div class="flex-between">
+        {{ $t('dynamicsForm.AssignmentMethod.label', '赋值方式') }}
+      </div>
+    </template>
+
+    <el-row style="width: 100%" :gutter="10">
+      <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
+        <el-radio :value="item.value" size="large" v-for="item in assignment_method_option_list"
+          >{{ item.label }}
+          <el-popover
+            width="300px"
+            v-if="item.value == 'ref_variables'"
+            class="box-item"
+            placement="top-start"
+          >
+            {{ $t('dynamicsForm.AssignmentMethod.ref_variables.popover') }}:<br />
+            [<br />
+            {<br />
+            "label": "xx",<br />
+            "value": "xx",<br />
+            "default": false<br />
+            }<br />
+            ]<br />
+            label: {{ $t('dynamicsForm.AssignmentMethod.ref_variables.popover_label') }}
+            {{ $t('common.required') }}<br />
+            value: {{ $t('dynamicsForm.AssignmentMethod.ref_variables.popover_value') }}
+            {{ $t('common.required') }}<br />
+            default:{{ $t('dynamicsForm.AssignmentMethod.ref_variables.popover_default') }}
+            <template #reference>
+              <el-icon><InfoFilled /></el-icon>
+            </template>
+          </el-popover>
+        </el-radio>
+      </el-radio-group>
+    </el-row>
+  </el-form-item>
+  <el-form-item
+    v-if="formValue.assignment_method == 'ref_variables'"
+    :required="true"
+    prop="option_list"
+    :rules="[default_ref_variables_value_rule]"
+  >
+    <NodeCascader
+      ref="nodeCascaderRef"
+      :nodeModel="model"
+      class="w-full"
+      :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+      v-model="formValue.option_list"
+    />
+  </el-form-item>
+  <el-form-item v-if="formValue.assignment_method == 'custom'">
     <template #label>
       <div class="flex-between">
         {{ $t('dynamicsForm.Select.label') }}
@@ -52,6 +104,7 @@
     </el-row>
   </el-form-item>
   <el-form-item
+    v-if="formValue.assignment_method == 'custom'"
     class="defaultValueItem"
     :label="$t('dynamicsForm.default.label')"
     :required="formValue.required"
@@ -83,9 +136,36 @@
   </el-form-item>
 </template>
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, inject, watch } from 'vue'
 import RadioRow from '@/components/dynamics-form/items/radio/RadioRow.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import type { FormField } from '@/components/dynamics-form/type'
+import { t } from '@/locales'
+const getModel = inject('getModel') as any
+
+const assignment_method_option_list = computed(() => {
+  const option_list = [
+    {
+      label: t('dynamicsForm.AssignmentMethod.custom.label', '自定义'),
+      value: 'custom',
+    },
+  ]
+  if (getModel) {
+    option_list.push({
+      label: t('dynamicsForm.AssignmentMethod.ref_variables.label', '引用变量'),
+      value: 'ref_variables',
+    })
+  }
+  return option_list
+})
+
+const model = computed(() => {
+  if (getModel) {
+    return getModel()
+  } else {
+    return null
+  }
+})
 const props = defineProps<{
   modelValue: any
 }>()
@@ -99,6 +179,20 @@ const formValue = computed({
   },
 })
 
+const default_ref_variables_value_rule = {
+  required: true,
+  validator: (rule: any, value: any, callback: any) => {
+    console.log(value.length)
+    if (!(Array.isArray(value) && value.length > 1)) {
+      callback(
+        t('dynamicsForm.AssignmentMethod.ref_variables.label', '引用变量') + t('common.required'),
+      )
+    }
+
+    return true
+  },
+  trigger: 'blur',
+}
 const addOption = () => {
   formValue.value.option_list.push({ value: '', label: '' })
 }
@@ -121,17 +215,20 @@ const getData = () => {
     text_field: 'label',
     value_field: 'value',
     option_list: formValue.value.option_list,
+    assignment_method: formValue.value.assignment_method || 'custom',
   }
 }
 const rander = (form_data: any) => {
   formValue.value.option_list = form_data.option_list || []
   formValue.value.default_value = form_data.default_value
+  formValue.value.assignment_method = form_data.assignment_method || 'custom'
 }
 
 defineExpose({ getData, rander })
 onMounted(() => {
   formValue.value.option_list = []
   formValue.value.default_value = ''
+  formValue.value.assignment_method = 'custom'
   if (formValue.value.show_default_value === undefined) {
     formValue.value.show_default_value = true
   }

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

@@ -7,7 +7,7 @@
     </template>
 
     <el-row style="width: 100%" :gutter="10">
-      <el-radio-group v-model="formValue.assignment_method">
+      <el-radio-group @change="formValue.option_list = []" v-model="formValue.assignment_method">
         <el-radio :value="item.value" size="large" v-for="item in assignment_method_option_list"
           >{{ item.label }}
           <el-popover
@@ -36,14 +36,20 @@
       </el-radio-group>
     </el-row>
   </el-form-item>
-  <NodeCascader
+  <el-form-item
     v-if="formValue.assignment_method == 'ref_variables'"
-    ref="nodeCascaderRef"
-    :nodeModel="model"
-    class="w-full"
-    :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
-    v-model="formValue.option_list"
-  />
+    :required="true"
+    prop="option_list"
+    :rules="[default_ref_variables_value_rule]"
+  >
+    <NodeCascader
+      ref="nodeCascaderRef"
+      :nodeModel="model"
+      class="w-full"
+      :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+      v-model="formValue.option_list"
+    />
+  </el-form-item>
   <el-form-item v-if="formValue.assignment_method == 'custom'">
     <template #label>
       <div class="flex-between">
@@ -131,7 +137,7 @@
   </el-form-item>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, inject } from 'vue'
+import { computed, onMounted, inject, watch } from 'vue'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import { t } from '@/locales'
 const getModel = inject('getModel') as any
@@ -172,6 +178,20 @@ const formValue = computed({
   },
 })
 
+const default_ref_variables_value_rule = {
+  required: true,
+  validator: (rule: any, value: any, callback: any) => {
+    console.log(value.length)
+    if (!(Array.isArray(value) && value.length > 1)) {
+      callback(
+        t('dynamicsForm.AssignmentMethod.ref_variables.label', '引用变量') + t('common.required'),
+      )
+    }
+
+    return true
+  },
+  trigger: 'blur',
+}
 const addOption = () => {
   formValue.value.option_list.push({ value: '', label: '' })
 }

ui/src/components/dynamics-form/items/JsonInput.vue

@@ -75,14 +75,14 @@ const model_value = computed({
         emit('update:modelValue', result)
       } catch (e) {}
     }
-  }
+  },
 })
 
 const extensions = [json(), linter(jsonParseLinter()), oneDark]
 
 const codemirrorStyle = {
   height: '210px!important',
-  width: '100%'
+  width: '100%',
 }
 
 // 弹出框相关代码

ui/src/locales/lang/en-US/dynamics-form.ts

@@ -123,6 +123,7 @@ export default {
     ref_variables: {
       label: 'Reference Variables',
       popover: 'Variable values must comply with',
+      json_format: 'JSON format',
       popover_label: 'Label',
       popover_value: 'Value',
       popover_default: 'Is Default',

ui/src/locales/lang/zh-CN/dynamics-form.ts

@@ -124,6 +124,7 @@ export default {
     ref_variables: {
       label: '引用变量 ',
       popover: '变量的值必须符合',
+      json_format: 'JSON 格式',
       popover_label: '标签',
       popover_value: '值',
       popover_default: '是否为默认值',

ui/src/locales/lang/zh-Hant/dynamics-form.ts

@@ -123,6 +123,7 @@ export default {
     ref_variables: {
       label: '參考變量',
       popover: '變量的值必須符合',
+      json_format: 'JSON 格式',
       popover_label: '標籤',
       popover_value: '值',
       popover_default: '是否為預設值',