From 25e2eb66f738809c6a6d41d12a7afa643df18871 Mon Sep 17 00:00:00 2001
From: zhangzhanwei <zhanwei.zhang@fit2cloud.com>
Date: Wed, 27 May 2026 11:38:29 +0800
Subject: [PATCH] fix: Visibility tab

---
 .../dynamics-form/constructor/index.vue       | 252 ++++++++++++------
 ui/src/workflow/common/AddFormCollect.vue     |   4 +-
 ui/src/workflow/common/EditFormCollect.vue    |   4 +-
 .../component/UserFieldFormDialog.vue         |   1 +
 ui/src/workflow/nodes/form-node/index.vue     |   9 +-
 5 files changed, 182 insertions(+), 88 deletions(-)

diff --git a/ui/src/components/dynamics-form/constructor/index.vue b/ui/src/components/dynamics-form/constructor/index.vue
index 40f970d32fc..599b3bf3009 100644
--- a/ui/src/components/dynamics-form/constructor/index.vue
+++ b/ui/src/components/dynamics-form/constructor/index.vue
@@ -1,94 +1,174 @@
 <template>
-  <el-tabs v-model="activeTab">
-    <el-tab-pane :label="$t('common.info')" name="basic">
-      <el-form
-        @submit.prevent
-        ref="ruleFormRef"
-        class="mb-24"
-        label-width="auto"
-        :model="form_data"
-        v-bind="$attrs"
-      >
-        <el-form-item
-          :label="$t('dynamicsForm.paramForm.field.label')"
-          :required="true"
-          prop="field"
-          :rules="rules.field"
-        >
-          <el-input
-            v-model="form_data.field"
-            :maxlength="64"
-            :placeholder="$t('dynamicsForm.paramForm.field.placeholder')"
-            show-word-limit
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$t('dynamicsForm.paramForm.name.label')"
-          :required="true"
-          prop="label"
-          :rules="rules.label"
-        >
-          <el-input
-            v-model="form_data.label"
-            :maxlength="64"
-            show-word-limit
-            :placeholder="$t('dynamicsForm.paramForm.name.placeholder')"
-          />
-        </el-form-item>
-        <el-form-item :label="$t('dynamicsForm.paramForm.tooltip.label')">
-          <el-input
-            v-model="form_data.tooltip"
-            :maxlength="128"
-            show-word-limit
-            :placeholder="$t('dynamicsForm.paramForm.tooltip.placeholder')"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$t('dynamicsForm.paramForm.required.label')"
-          :required="true"
-          prop="required"
-          :rules="rules.required"
-          @click.prevent
-        >
-          <el-switch v-model="form_data.required" :active-value="true" :inactive-value="false" />
-        </el-form-item>
-        <el-form-item
-          :label="$t('dynamicsForm.paramForm.input_type.label')"
-          :required="true"
-          prop="input_type"
-          :rules="rules.input_type"
+  <template v-if="enableVisibility">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane :label="$t('common.info')" name="basic">
+        <el-form
+          @submit.prevent
+          ref="ruleFormRef"
+          class="mb-24"
+          label-width="auto"
+          :model="form_data"
+          v-bind="$attrs"
         >
-          <el-select
-            v-model="form_data.input_type"
-            :placeholder="$t('dynamicsForm.paramForm.input_type.placeholder')"
+          <el-form-item
+            :label="$t('dynamicsForm.paramForm.field.label')"
+            :required="true"
+            prop="field"
+            :rules="rules.field"
           >
-            <el-option
-              v-for="input_type in input_type_list"
-              :key="input_type.value"
-              :label="input_type.label"
-              :value="input_type.value"
+            <el-input
+              v-model="form_data.field"
+              :maxlength="64"
+              :placeholder="$t('dynamicsForm.paramForm.field.placeholder')"
+              show-word-limit
+            />
+          </el-form-item>
+          <el-form-item
+            :label="$t('dynamicsForm.paramForm.name.label')"
+            :required="true"
+            prop="label"
+            :rules="rules.label"
+          >
+            <el-input
+              v-model="form_data.label"
+              :maxlength="64"
+              show-word-limit
+              :placeholder="$t('dynamicsForm.paramForm.name.placeholder')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('dynamicsForm.paramForm.tooltip.label')">
+            <el-input
+              v-model="form_data.tooltip"
+              :maxlength="128"
+              show-word-limit
+              :placeholder="$t('dynamicsForm.paramForm.tooltip.placeholder')"
             />
-          </el-select>
-        </el-form-item>
-        <component
-          v-if="form_data.input_type"
-          ref="componentFormRef"
-          v-model="form_data"
-          :is="form_data.input_type"
-        ></component>
-      </el-form>
-    </el-tab-pane>
+          </el-form-item>
+          <el-form-item
+            :label="$t('dynamicsForm.paramForm.required.label')"
+            :required="true"
+            prop="required"
+            :rules="rules.required"
+            @click.prevent
+          >
+            <el-switch v-model="form_data.required" :active-value="true" :inactive-value="false" />
+          </el-form-item>
+          <el-form-item
+            :label="$t('dynamicsForm.paramForm.input_type.label')"
+            :required="true"
+            prop="input_type"
+            :rules="rules.input_type"
+          >
+            <el-select
+              v-model="form_data.input_type"
+              :placeholder="$t('dynamicsForm.paramForm.input_type.placeholder')"
+            >
+              <el-option
+                v-for="input_type in input_type_list"
+                :key="input_type.value"
+                :label="input_type.label"
+                :value="input_type.value"
+              />
+            </el-select>
+          </el-form-item>
+          <component
+            v-if="form_data.input_type"
+            ref="componentFormRef"
+            v-model="form_data"
+            :is="form_data.input_type"
+          ></component>
+        </el-form>
+      </el-tab-pane>
+
+      <el-tab-pane :label="$t('workflow.nodes.baseNode.visibilitySetting.label')" name="visibility">
+        <VisibilityConstructor
+          ref="visibilityRef"
+          :initialValue="visibility_rules"
+          :nodeModel="nodeModel"
+          :currentNodeFields="currentNodeFields"
+          :currentEditingIndex="currentEditingIndex"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </template>
 
-    <el-tab-pane :label="$t('workflow.nodes.baseNode.visibilitySetting.label')" name="visibility">
-      <VisibilityConstructor
-        ref="visibilityRef"
-        :initialValue="visibility_rules"
-        :nodeModel="nodeModel"
-        :currentNodeFields="currentNodeFields"
-        :currentEditingIndex="currentEditingIndex"
+  <el-form
+    v-else
+    @submit.prevent
+    ref="ruleFormRef"
+    class="mb-24"
+    label-width="auto"
+    :model="form_data"
+    v-bind="$attrs"
+  >
+    <el-form-item
+      :label="$t('dynamicsForm.paramForm.field.label')"
+      :required="true"
+      prop="field"
+      :rules="rules.field"
+    >
+      <el-input
+        v-model="form_data.field"
+        :maxlength="64"
+        :placeholder="$t('dynamicsForm.paramForm.field.placeholder')"
+        show-word-limit
       />
-    </el-tab-pane>
-  </el-tabs>
+    </el-form-item>
+    <el-form-item
+      :label="$t('dynamicsForm.paramForm.name.label')"
+      :required="true"
+      prop="label"
+      :rules="rules.label"
+    >
+      <el-input
+        v-model="form_data.label"
+        :maxlength="64"
+        show-word-limit
+        :placeholder="$t('dynamicsForm.paramForm.name.placeholder')"
+      />
+    </el-form-item>
+    <el-form-item :label="$t('dynamicsForm.paramForm.tooltip.label')">
+      <el-input
+        v-model="form_data.tooltip"
+        :maxlength="128"
+        show-word-limit
+        :placeholder="$t('dynamicsForm.paramForm.tooltip.placeholder')"
+      />
+    </el-form-item>
+    <el-form-item
+      :label="$t('dynamicsForm.paramForm.required.label')"
+      :required="true"
+      prop="required"
+      :rules="rules.required"
+      @click.prevent
+    >
+      <el-switch v-model="form_data.required" :active-value="true" :inactive-value="false" />
+    </el-form-item>
+    <el-form-item
+      :label="$t('dynamicsForm.paramForm.input_type.label')"
+      :required="true"
+      prop="input_type"
+      :rules="rules.input_type"
+    >
+      <el-select
+        v-model="form_data.input_type"
+        :placeholder="$t('dynamicsForm.paramForm.input_type.placeholder')"
+      >
+        <el-option
+          v-for="input_type in input_type_list"
+          :key="input_type.value"
+          :label="input_type.label"
+          :value="input_type.value"
+        />
+      </el-select>
+    </el-form-item>
+    <component
+      v-if="form_data.input_type"
+      ref="componentFormRef"
+      v-model="form_data"
+      :is="form_data.input_type"
+    ></component>
+  </el-form>
 </template>
 
 <script setup lang="ts">
@@ -106,8 +186,10 @@ const props = withDefaults(
     nodeModel?: any
     currentNodeFields?: Array<any>
     currentEditingIndex?: number
+    enableVisibility?: boolean
   }>(),
   {
+    enableVisibility: false,
     input_type_list: () =>
       input_type_list_data.map((item) => ({
         label: item.label,
diff --git a/ui/src/workflow/common/AddFormCollect.vue b/ui/src/workflow/common/AddFormCollect.vue
index 5423a16d6b2..f809bc55b84 100644
--- a/ui/src/workflow/common/AddFormCollect.vue
+++ b/ui/src/workflow/common/AddFormCollect.vue
@@ -16,6 +16,7 @@
       :nodeModel="nodeModel"
       :currentNodeFields="currentNodeFields"
       :currentEditingIndex="currentNodeFields?.length ?? 0"
+      :enableVisibility="enableVisibility"
     ></DynamicsFormConstructor>
     <template #footer>
       <span class="dialog-footer">
@@ -37,8 +38,9 @@ const props = withDefaults(
     addFormField: (form_data: any) => void
     nodeModel?: any
     currentNodeFields?: Array<any>
+    enableVisibility?: boolean
   }>(),
-  { title: t('common.param.addParam') },
+  { title: t('common.param.addParam'), enableVisibility: false },
 )
 const dialogVisible = ref<boolean>(false)
 const dynamicsFormConstructorRef = ref<InstanceType<typeof DynamicsFormConstructor>>()
diff --git a/ui/src/workflow/common/EditFormCollect.vue b/ui/src/workflow/common/EditFormCollect.vue
index 50f05cc5e3f..1abdeae2624 100644
--- a/ui/src/workflow/common/EditFormCollect.vue
+++ b/ui/src/workflow/common/EditFormCollect.vue
@@ -16,6 +16,7 @@
       :nodeModel="nodeModel"
       :currentNodeFields="currentNodeFields"
       :currentEditingIndex="currentIndex"
+      :enableVisibility="enableVisibility"
     ></DynamicsFormConstructor>
     <template #footer>
       <span class="dialog-footer">
@@ -37,8 +38,9 @@ const props = withDefaults(
     nodeModel?: any
     currentNodeFields?: Array<any>
     editFormField: (form_data: any, index: number) => void
+    enableVisibility?: boolean
   }>(),
-  { title: t('common.param.editParam') },
+  { title: t('common.param.editParam'), enableVisibility: false },
 )
 const dialogVisible = ref<boolean>(false)
 const dynamicsFormConstructorRef = ref<InstanceType<typeof DynamicsFormConstructor>>()
diff --git a/ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue b/ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue
index 85aeaabbf4a..becd721b6c6 100644
--- a/ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue
+++ b/ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue
@@ -17,6 +17,7 @@
       :nodeModel="nodeModel"
       :currentNodeFields="currentNodeFields"
       :currentEditingIndex="isEdit ? (currentIndex ?? undefined) : (currentNodeFields?.length ?? 0)"
+      :enableVisibility="true"
       ref="DynamicsFormConstructorRef"
     ></DynamicsFormConstructor>
     <template #footer>
diff --git a/ui/src/workflow/nodes/form-node/index.vue b/ui/src/workflow/nodes/form-node/index.vue
index 93ea1585f5d..df5d3736fad 100644
--- a/ui/src/workflow/nodes/form-node/index.vue
+++ b/ui/src/workflow/nodes/form-node/index.vue
@@ -138,12 +138,14 @@
       :addFormField="addFormField"
       :nodeModel="nodeModel"
       :currentNodeFields="form_data.form_field_list"
+      :enableVisibility="enableVisibility"
     ></AddFormCollect>
     <EditFormCollect
       ref="editFormCollectRef"
       :editFormField="editFormField"
       :nodeModel="nodeModel"
       :currentNodeFields="form_data.form_field_list"
+      :enableVisibility="enableVisibility"
     />
   </NodeContainer>
 </template>
@@ -152,14 +154,19 @@ import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import AddFormCollect from '@/workflow/common/AddFormCollect.vue'
 import EditFormCollect from '@/workflow/common/EditFormCollect.vue'
 import { type FormInstance } from 'element-plus'
-import { ref, onMounted, computed, provide } from 'vue'
+import { ref, onMounted, computed, provide, inject } from 'vue'
 import { input_type_list } from '@/components/dynamics-form/constructor/data'
+import { WorkflowMode } from '@/enums/application'
 import { MsgError } from '@/utils/message'
 import { set, cloneDeep } from 'lodash'
 import Sortable from 'sortablejs'
 import { t } from '@/locales'
 const props = defineProps<{ nodeModel: any }>()
 provide('getModel', () => props.nodeModel)
+const workflowMode = inject('workflowMode', WorkflowMode.Application) as WorkflowMode
+const enableVisibility = computed(
+  () => workflowMode === WorkflowMode.Application || workflowMode === WorkflowMode.ApplicationLoop,
+)
 const formNodeFormRef = ref<FormInstance>()
 const tableRef = ref()
 const editFormField = (form_field_data: any, field_index: number) => {