perf: User input/form collection parameters support visibility settings

Author: wangdan-fit2cloud

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

@@ -1,6 +1,6 @@
 <template>
   <el-tabs v-model="activeTab">
-    <el-tab-pane :label="$t('dynamicsForm.paramForm.basicInfo', '基本信息')" name="basic">
+    <el-tab-pane :label="$t('common.info')" name="basic">
       <el-form
         @submit.prevent
         ref="ruleFormRef"
@@ -79,7 +79,7 @@
       </el-form>
     </el-tab-pane>
 
-    <el-tab-pane label="显隐设置" name="visibility">
+    <el-tab-pane :label="$t('workflow.nodes.baseNode.visibilitySetting.label')" name="visibility">
       <VisibilityConstructor
         ref="visibilityRef"
         :initialValue="visibility_rules"

ui/src/components/dynamics-form/visibility/ConditionRow.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-row :gutter="8">
-    <el-col :span="8">
+  <el-row :gutter="8" class="w-full">
+    <el-col :span="10">
       <el-form-item :error="cond._fieldError">
         <FieldSelector
           :nodeModel="nodeModel"
@@ -9,12 +9,18 @@
           :currentNodeFields="currentNodeFields"
           :currentEditingIndex="currentEditingIndex"
           class="w-full"
+          :placeholder="$t('workflow.variable.placeholder')"
         />
       </el-form-item>
     </el-col>
     <el-col :span="6">
       <el-form-item :error="cond._compareError">
-        <el-select v-model="cond.compare" @change="cond._compareError = ''" clearable>
+        <el-select
+          v-model="cond.compare"
+          @change="cond._compareError = ''"
+          clearable
+          :placeholder="$t('workflow.nodes.conditionNode.conditions.requiredMessage')"
+        >
           <el-option
             v-for="op in cond._ops || compareList"
             :key="op.value"
@@ -24,13 +30,14 @@
         </el-select>
       </el-form-item>
     </el-col>
-    <el-col :span="8" v-if="!['is_true', 'is_not_true'].includes(cond.compare)">
+    <el-col :span="6" v-if="!['is_true', 'is_not_true'].includes(cond.compare)">
       <el-form-item :error="cond._valueError">
         <el-select
           v-if="['SingleSelect', 'RadioCard', 'RadioRow'].includes(cond._fieldType || '')"
           v-model="cond.value"
           @change="cond._valueError = ''"
           clearable
+          :placeholder="$t('workflow.nodes.conditionNode.valueMessage')"
         >
           <el-option
             v-for="o in cond._options || []"
@@ -46,6 +53,7 @@
           @change="cond._valueError = ''"
           multiple
           clearable
+          :placeholder="$t('workflow.nodes.conditionNode.valueMessage')"
         >
           <el-option
             v-for="o in cond._options || []"
@@ -63,13 +71,19 @@
           :multiple="cond._treeMultiple"
           :render-after-expand="false"
           clearable
+          :placeholder="$t('workflow.nodes.conditionNode.valueMessage')"
         />
 
-        <el-input v-else v-model="cond.value" @input="cond._valueError = ''" />
+        <el-input
+          v-else
+          v-model="cond.value"
+          @input="cond._valueError = ''"
+          :placeholder="$t('workflow.nodes.conditionNode.valueMessage')"
+        />
       </el-form-item>
     </el-col>
-    <el-col :span="2">
-      <el-button link type="info" @click="$emit('delete')">
+    <el-col :span="1">
+      <el-button link type="info" @click="$emit('delete')" class="mt-4">
         <AppIcon iconName="app-delete" />
       </el-button>
     </el-col>
@@ -79,7 +93,6 @@
 import { compareList } from '@/workflow/common/data'
 import FieldSelector from './FieldSelector.vue'
 import { inferFieldType, getAllowedOps, getFieldConfig } from './field-type'
-import type { CompareOptions } from './'
 
 const props = defineProps<{
   cond: any

ui/src/components/dynamics-form/visibility/Constructor.vue

@@ -1,34 +1,41 @@
 <template>
   <div>
     <el-radio-group v-model="formData.action" class="mb-8">
-      <el-radio value="show">显示条件</el-radio>
-      <el-radio value="hide">隐藏条件</el-radio>
+      <el-radio value="show">{{
+        $t('workflow.nodes.baseNode.visibilitySetting.showCondition‌')
+      }}</el-radio>
+      <el-radio value="hide">{{
+        $t('workflow.nodes.baseNode.visibilitySetting.hideCondition‌')
+      }}</el-radio>
     </el-radio-group>
 
     <div class="flex align-center mb-8">
-      <span>符合以下</span>
+      <span class="lighter">{{ $t('workflow.nodes.conditionNode.conditions.info') }}</span>
       <el-select v-model="formData.condition" size="small" style="width: 60px; margin: 0 8px">
-        <el-option label="所有" value="and" />
-        <el-option label="任意" value="or" />
+        <el-option :label="$t('workflow.condition.AND')" value="and" />
+        <el-option :label="$t('workflow.condition.OR')" value="or" />
       </el-select>
-      <span>条件</span>
+      <span class="lighter">{{ $t('workflow.nodes.conditionNode.conditions.label') }}</span>
     </div>
 
-    <ConditionRow
-      v-for="(cond, idx) in formData.conditions"
-      :key="cond.id"
-      :cond="cond"
-      :index="idx"
-      :nodeModel="nodeModel"
-      :currentNodeFields="currentNodeFields"
-      :currentEditingIndex="currentEditingIndex"
-      @delete="removeCondition(idx)"
-      class="mb-8"
-    />
+    <el-scrollbar>
+      <div style="max-height: calc(100vh - 319px)">
+        <ConditionRow
+          v-for="(cond, idx) in formData.conditions"
+          :key="cond.id"
+          :cond="cond"
+          :index="idx"
+          :nodeModel="nodeModel"
+          :currentNodeFields="currentNodeFields"
+          :currentEditingIndex="currentEditingIndex"
+          @delete="removeCondition(idx)"
+        />
+      </div>
+    </el-scrollbar>
 
     <el-button link type="primary" @click="addCondition">
       <AppIcon iconName="app-add-outlined" class="mr-4" />
-      添加
+      {{ $t('common.add') }}
     </el-button>
   </div>
 </template>
@@ -39,7 +46,7 @@ import type { CompareOptions, VisibilityRules } from './index'
 import { inferFieldType, getAllowedOps, getFieldConfig } from './field-type'
 import { compareList } from '@/workflow/common/data'
 import ConditionRow from './ConditionRow.vue'
-
+import { t } from '@/locales'
 const props = defineProps<{
   initialValue?: VisibilityRules | null
   nodeModel?: any
@@ -77,18 +84,18 @@ function validate(): Promise<void> {
     const hasAny = cond.field[0] || cond.field[1] || cond.compare
     if (!hasAny) continue
     if (!cond.field[0] || !cond.field[1]) {
-      cond._fieldError = '请选择变量'
+      cond._fieldError = t('workflow.variable.placeholder')
       hasError = true
     }
     if (!cond.compare) {
-      cond._compareError = '请选择运算符'
+      cond._compareError = t('workflow.nodes.conditionNode.conditions.requiredMessage')
       hasError = true
     }
     const isEmpty = Array.isArray(cond.value)
       ? cond.value.length === 0
       : !cond.value && cond.value !== 0
     if (!['is_true', 'is_not_true'].includes(cond.compare) && isEmpty) {
-      cond._valueError = '请填写匹配值'
+      cond._valueError = t('workflow.nodes.conditionNode.valueMessage')
       hasError = true
     }
   }

ui/src/locales/lang/en-US/workflow.ts

@@ -127,6 +127,11 @@ export default {
       currentTime: 'Current Time',
     },
     baseNode: {
+      visibilitySetting: {
+        label: 'Visibility Setting',
+        showCondition‌: 'Show Condition',
+        hideCondition‌: 'Hide Condition',
+      },
       fileUpload: {
         label: 'File Upload',
         tooltip: 'When enabled, the Q&A page will display a file upload button.',

ui/src/locales/lang/zh-CN/workflow.ts

@@ -127,6 +127,11 @@ export default {
       currentTime: '当前时间',
     },
     baseNode: {
+      visibilitySetting: {
+        label: '显隐设置',
+        showCondition‌: '显示条件',
+        hideCondition‌: '隐藏条件',
+      },
       fileUpload: {
         label: '文件上传',
         tooltip: '开启后，问答页面会显示上传文件的按钮。',

ui/src/locales/lang/zh-Hant/workflow.ts

@@ -127,6 +127,11 @@ export default {
       currentTime: '當前時間',
     },
     baseNode: {
+      visibilitySetting: {
+        label: '顯隱設置',
+        showCondition‌: '顯示條件',
+        hideCondition‌: '隱藏條件',
+      },
       fileUpload: {
         label: '文件上傳',
         tooltip: '開啟後，問答頁面會顯示上傳文件的按鈕。',