fix: [BPM 工作流] 更多设置不能选中表单项问题

src/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestParamSetting.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form-item label-position="top" label="请求头">
-    <div class="flex pt-2" v-for="(item, index) in props.header" :key="index">
+    <div class="flex pb-4" v-for="(item, index) in props.header" :key="index">
       <div class="mr-2">
         <el-form-item
           :prop="`${bind}.header.${index}.key`"
@@ -10,18 +10,20 @@
             trigger: 'blur'
           }"
         >
-          <el-input class="w-160px" v-model="item.key" />
+          <el-input v-model="item.key" style="width: 160px" />
         </el-form-item>
       </div>
       <div class="mr-2">
-        <el-select class="w-100px!" v-model="item.type">
+        <el-form-item>
-          <el-option
+          <el-select v-model="item.type" style="width: 160px" @change="handleTypeChange(item)">
-            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+            <el-option
-            :key="types.value"
+              v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
-            :label="types.label"
+              :key="types.value"
-            :value="types.value"
+              :label="types.label"
-          />
+              :value="types.value"
-        </el-select>
+            />
+          </el-select>
+        </el-form-item>
       </div>
       <div class="mr-2">
         <el-form-item
@@ -34,8 +36,8 @@
         >
           <el-input
             v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
-            class="w-160px"
             v-model="item.value"
+            style="width: 200px"
           />
         </el-form-item>
         <el-form-item
@@ -48,8 +50,8 @@
         >
           <el-select
             v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
-            class="w-160px!"
             v-model="item.value"
+            style="width: 200px"
           >
             <el-option
               v-for="(field, fIdx) in formFieldOptions"
@@ -70,7 +72,7 @@
     </el-button>
   </el-form-item>
   <el-form-item label-position="top" label="请求体">
-    <div class="flex pt-2" v-for="(item, index) in props.body" :key="index">
+    <div class="flex pb-4" v-for="(item, index) in props.body" :key="index">
       <div class="mr-2">
         <el-form-item
           :prop="`${bind}.body.${index}.key`"
@@ -80,18 +82,20 @@
             trigger: 'blur'
           }"
         >
-          <el-input class="w-160px" v-model="item.key" />
+          <el-input v-model="item.key" style="width: 160px" />
         </el-form-item>
       </div>
       <div class="mr-2">
-        <el-select class="w-100px!" v-model="item.type">
+        <el-form-item>
-          <el-option
+          <el-select v-model="item.type" style="width: 160px" @change="handleTypeChange(item)">
-            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+            <el-option
-            :key="types.value"
+              v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
-            :label="types.label"
+              :key="types.value"
-            :value="types.value"
+              :label="types.label"
-          />
+              :value="types.value"
-        </el-select>
+            />
+          </el-select>
+        </el-form-item>
       </div>
       <div class="mr-2">
         <el-form-item
@@ -104,8 +108,8 @@
         >
           <el-input
             v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
-            class="w-160px"
             v-model="item.value"
+            style="width: 200px"
           />
         </el-form-item>
         <el-form-item
@@ -118,8 +122,8 @@
         >
           <el-select
             v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
-            class="w-160px!"
             v-model="item.value"
+            style="width: 200px"
           >
             <el-option
               v-for="(field, fIdx) in formFieldOptions"
@@ -170,6 +174,13 @@ const props = defineProps({
 
 // 流程表单字段，发起人字段
 const formFieldOptions = useFormFieldsAndStartUser()
+
+/** 监听类型变化，清空值 */
+const handleTypeChange = (item: HttpRequestParam) => {
+  // 当类型改变时，清空值
+  item.value = ''
+}
+
 /** 添加请求配置项 */
 const addHttpRequestParam = (arr: HttpRequestParam[]) => {
   arr.push({

src/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue

@@ -33,7 +33,7 @@
       />
     </el-form-item>
     <el-form-item>
-      <div class="flex pt-2" v-for="(item, index) in setting.response" :key="index">
+      <div class="flex pt-4" v-for="(item, index) in setting.response" :key="index">
         <div class="mr-2">
           <el-form-item
             :prop="`${formItemPrefix}.response.${index}.key`"
@@ -74,10 +74,12 @@
           />
         </div>
       </div>
+    </el-form-item>
+    <div class="pt-1">
       <el-button type="primary" text @click="addHttpResponseSetting(setting.response!)">
         <Icon icon="ep:plus" class="mr-5px" />添加一行
       </el-button>
-    </el-form-item>
+    </div>
   </div>
 </template>
 <script setup lang="ts">

src/views/bpm/model/form/ExtraSettings.vue

@@ -232,6 +232,34 @@ import { ProcessVariableEnum } from '@/components/SimpleProcessDesignerV2/src/co
 import HttpRequestSetting from '@/components/SimpleProcessDesignerV2/src/nodes-config/components/HttpRequestSetting.vue'
 
 const modelData = defineModel<any>()
+const formFields = ref<string[]>([])
+   
+const props = defineProps({
+  // 流程表单 ID
+  modelFormId: {
+    type: Number,
+    required: false,
+    default: undefined,
+  }
+})
+
+
+// 监听 modelFormId 变化
+watch(
+  () => props.modelFormId,
+  async (newVal) => {
+    if (newVal) {
+      const form = await FormApi.getForm(newVal);
+      formFields.value = form?.fields;
+    } else {
+      // 如果 modelFormId 为空，清空表单字段
+      formFields.value = [];
+    }
+  },
+  { immediate: true },
+);
+// 暴露给子组件使用
+provide('formFields', formFields)
 
 /** 自定义 ID 流程编码 */
 const timeOptions = ref([

src/views/bpm/model/form/index.vue

@@ -77,7 +77,10 @@
 
         <!-- 第四步：更多设置 -->
         <div v-show="currentStep === 3" class="mx-auto w-700px">
-          <ExtraSettings v-model="formData" ref="extraSettingsRef" />
+          <ExtraSettings
+            ref="extraSettingsRef"   
+            v-model="formData" 
+            :model-form-id="formData.formId"/>
         </div>
       </div>
     </div>