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-option
-            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
-            :key="types.value"
-            :label="types.label"
-            :value="types.value"
-          />
-        </el-select>
+        <el-form-item>
+          <el-select v-model="item.type" style="width: 160px" @change="handleTypeChange(item)">
+            <el-option
+              v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+              :key="types.value"
+              :label="types.label"
+              :value="types.value"
+            />
+          </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-option
-            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
-            :key="types.value"
-            :label="types.label"
-            :value="types.value"
-          />
-        </el-select>
+        <el-form-item>
+          <el-select v-model="item.type" style="width: 160px" @change="handleTypeChange(item)">
+            <el-option
+              v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+              :key="types.value"
+              :label="types.label"
+              :value="types.value"
+            />
+          </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">