From 0e6d92e328277ae5e6baf4dedd3d36b12e8096f3 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 23 Nov 2025 00:06:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20[bpm][ele]=20=E4=BB=BF=E9=92=89?=
 =?UTF-8?q?=E9=92=89=E8=AE=BE=E8=AE=A1=E5=99=A8=E8=BF=81=E7=A7=BB=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nodes-config/copy-task-node-config.vue    |   2 +-
 .../nodes-config/copy-task-node-config.vue    | 270 ++++++++----------
 .../nodes-config/modules/condition.vue        |  73 ++---
 .../modules/http-request-param-setting.vue    | 144 ++++++----
 .../nodes-config/start-user-node-config.vue   |  68 ++---
 .../nodes-config/user-task-node-config.vue    | 128 ++++-----
 6 files changed, 324 insertions(+), 361 deletions(-)

diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
index 4fbea5a5d..673caa68e 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
@@ -206,7 +206,7 @@ onMounted(() => {
 defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
 </script>
 <template>
-  <Drawer class="w-1/3">
+  <Drawer class="w-2/5">
     <template #title>
       <div class="config-header">
         <Input
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
index 8ba7d50a8..461268b09 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
@@ -12,6 +12,21 @@ import { useVbenDrawer } from '@vben/common-ui';
 import { BpmModelFormType, BpmNodeTypeEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
+import {
+  ElCol,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElSelect,
+  ElTabPane,
+  ElTabs,
+  ElTreeSelect,
+} from 'element-plus';
+
 import {
   CANDIDATE_STRATEGY,
   CandidateStrategy,
@@ -190,7 +205,7 @@ onMounted(() => {
 defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
 </script>
 <template>
-  <Drawer class="w-1/3">
+  <Drawer class="w-2/5">
     <template #title>
       <div class="config-header">
         <ElInput
@@ -210,7 +225,7 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
       </div>
     </template>
     <ElTabs v-model="activeTabName">
-      <ElTabPane :label="$t('message.copyTaskNodeConfig.copyUser')" name="user">
+      <ElTabPane label="抄送人" name="user">
         <div>
           <ElForm
             ref="formRef"
@@ -237,27 +252,21 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
               </ElRadioGroup>
             </ElFormItem>
 
-            <FormItem
+            <ElFormItem
               v-if="configForm.candidateStrategy === CandidateStrategy.ROLE"
               label="指定角色"
               name="roleIds"
             >
-              <Select
-                v-model:value="configForm.roleIds"
-                clearable
-                mode="multiple"
-              >
-                <SelectOption
+              <ElSelect v-model="configForm.roleIds" clearable multiple>
+                <ElOption
                   v-for="item in roleOptions"
                   :key="item.id"
                   :label="item.name"
-                  :value="item.id"
-                >
-                  {{ item.name }}
-                </SelectOption>
-              </Select>
-            </FormItem>
-            <FormItem
+                  :value="item.id!"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
               v-if="
                 configForm.candidateStrategy ===
                   CandidateStrategy.DEPT_MEMBER ||
@@ -269,10 +278,10 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
               label="指定部门"
               name="deptIds"
             >
-              <TreeSelect
-                v-model:value="configForm.deptIds"
-                :tree-data="deptTreeOptions"
-                :field-names="{
+              <ElTreeSelect
+                v-model="configForm.deptIds"
+                :data="deptTreeOptions"
+                :props="{
                   label: 'name',
                   value: 'id',
                   children: 'children',
@@ -280,92 +289,72 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
                 empty-text="加载中，请稍候"
                 multiple
                 :check-strictly="true"
-                allow-clear
-                tree-checkable
+                clearable
+                :show-checkbox="true"
               />
-            </FormItem>
-            <FormItem
+            </ElFormItem>
+            <ElFormItem
               v-if="configForm.candidateStrategy === CandidateStrategy.POST"
               label="指定岗位"
               name="postIds"
             >
-              <Select
-                v-model:value="configForm.postIds"
-                clearable
-                mode="multiple"
-              >
-                <SelectOption
+              <ElSelect v-model="configForm.postIds" clearable multiple>
+                <ElOption
                   v-for="item in postOptions"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id!"
-                >
-                  {{ item.name }}
-                </SelectOption>
-              </Select>
-            </FormItem>
-            <FormItem
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
               v-if="configForm.candidateStrategy === CandidateStrategy.USER"
               label="指定用户"
               name="userIds"
             >
-              <Select
-                v-model:value="configForm.userIds"
-                clearable
-                mode="multiple"
-              >
-                <SelectOption
+              <ElSelect v-model="configForm.userIds" clearable multiple>
+                <ElOption
                   v-for="item in userOptions"
                   :key="item.id"
                   :label="item.nickname"
-                  :value="item.id"
-                >
-                  {{ item.nickname }}
-                </SelectOption>
-              </Select>
-            </FormItem>
-            <FormItem
+                  :value="item.id!"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
               v-if="
                 configForm.candidateStrategy === CandidateStrategy.USER_GROUP
               "
               label="指定用户组"
               name="userGroups"
             >
-              <Select
-                v-model:value="configForm.userGroups"
-                clearable
-                mode="multiple"
-              >
-                <SelectOption
+              <ElSelect v-model="configForm.userGroups" clearable multiple>
+                <ElOption
                   v-for="item in userGroupOptions"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id"
-                >
-                  {{ item.name }}
-                </SelectOption>
-              </Select>
-            </FormItem>
-            <FormItem
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
               v-if="
                 configForm.candidateStrategy === CandidateStrategy.FORM_USER
               "
               label="表单内用户字段"
               name="formUser"
             >
-              <Select v-model:value="configForm.formUser" clearable>
-                <SelectOption
+              <ElSelect v-model="configForm.formUser" clearable>
+                <ElOption
                   v-for="(item, idx) in userFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
                   :disabled="!item.required"
-                >
-                  {{ item.title }}
-                </SelectOption>
-              </Select>
-            </FormItem>
-            <FormItem
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
               v-if="
                 configForm.candidateStrategy ===
                 CandidateStrategy.FORM_DEPT_LEADER
@@ -373,19 +362,17 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
               label="表单内部门字段"
               name="formDept"
             >
-              <Select v-model:value="configForm.formDept" clearable>
-                <SelectOption
+              <ElSelect v-model="configForm.formDept" clearable>
+                <ElOption
                   v-for="(item, idx) in deptFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
                   :disabled="!item.required"
-                >
-                  {{ item.title }}
-                </SelectOption>
-              </Select>
-            </FormItem>
-            <FormItem
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
               v-if="
                 configForm.candidateStrategy ===
                   CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
@@ -399,105 +386,84 @@ defineExpose({ showCopyTaskNodeConfig }); // 暴露方法给父组件
               :label="deptLevelLabel!"
               name="deptLevel"
             >
-              <Select v-model:value="configForm.deptLevel" clearable>
-                <SelectOption
+              <ElSelect v-model="configForm.deptLevel" clearable>
+                <ElOption
                   v-for="(item, index) in MULTI_LEVEL_DEPT"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
-                >
-                  {{ item.label }}
-                </SelectOption>
-              </Select>
-            </FormItem>
-            <FormItem
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
               v-if="
                 configForm.candidateStrategy === CandidateStrategy.EXPRESSION
               "
               label="流程表达式"
               name="expression"
             >
-              <Textarea v-model:value="configForm.expression" clearable />
-            </FormItem>
+              <ElInput
+                v-model="configForm.expression"
+                type="textarea"
+                clearable
+              />
+            </ElFormItem>
           </ElForm>
         </div>
       </ElTabPane>
       <ElTabPane
-        tab="表单字段权限"
-        key="fields"
+        label="表单字段权限"
+        name="fields"
         v-if="formType === BpmModelFormType.NORMAL"
       >
         <div class="p-1">
           <div class="mb-4 text-base font-bold">字段权限</div>
 
           <!-- 表头 -->
-          <Row class="border border-gray-200 px-4 py-3">
-            <Col :span="8" class="font-bold">字段名称</Col>
-            <Col :span="16">
-              <Row>
-                <Col :span="8" class="flex items-center justify-center">
-                  <span
-                    class="cursor-pointer font-bold"
-                    @click="updatePermission('READ')"
-                  >
-                    只读
-                  </span>
-                </Col>
-                <Col :span="8" class="flex items-center justify-center">
-                  <span
-                    class="cursor-pointer font-bold"
-                    @click="updatePermission('WRITE')"
-                  >
-                    可编辑
-                  </span>
-                </Col>
-                <Col :span="8" class="flex items-center justify-center">
-                  <span
-                    class="cursor-pointer font-bold"
-                    @click="updatePermission('NONE')"
-                  >
-                    隐藏
-                  </span>
-                </Col>
-              </Row>
-            </Col>
-          </Row>
+          <ElRow class="border border-gray-200 px-4 py-3">
+            <ElCol :span="8" class="font-bold">字段名称</ElCol>
+            <ElCol :span="16" class="!flex">
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('READ')"
+              >
+                只读
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('WRITE')"
+              >
+                可编辑
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('NONE')"
+              >
+                隐藏
+              </span>
+            </ElCol>
+          </ElRow>
 
           <!-- 表格内容 -->
           <div v-for="(item, index) in fieldsPermissionConfig" :key="index">
-            <Row class="border border-t-0 border-gray-200 px-4 py-2">
-              <Col :span="8" class="flex items-center truncate">
+            <ElRow class="border border-t-0 border-gray-200 px-4 py-2">
+              <ElCol :span="8" class="flex items-center truncate">
                 {{ item.title }}
-              </Col>
-              <Col :span="16">
-                <RadioGroup v-model:value="item.permission" class="w-full">
-                  <Row>
-                    <Col :span="8" class="flex items-center justify-center">
-                      <Radio
-                        :value="FieldPermissionType.READ"
-                        size="large"
-                        :label="FieldPermissionType.READ"
-                      />
-                    </Col>
-                    <Col :span="8" class="flex items-center justify-center">
-                      <Radio
-                        :value="FieldPermissionType.WRITE"
-                        size="large"
-                        :label="FieldPermissionType.WRITE"
-                        disabled
-                      />
-                    </Col>
-                    <Col :span="8" class="flex items-center justify-center">
-                      <Radio
-                        :value="FieldPermissionType.NONE"
-                        size="large"
-                        :label="FieldPermissionType.NONE"
-                      />
-                    </Col>
-                  </Row>
-                </RadioGroup>
-              </Col>
-            </Row>
+              </ElCol>
+              <ElCol :span="16">
+                <ElRadioGroup v-model="item.permission" class="flex w-full">
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.READ" />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.WRITE" disabled />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.NONE" />
+                  </div>
+                </ElRadioGroup>
+              </ElCol>
+            </ElRow>
           </div>
         </div>
       </ElTabPane>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
index 68e7bde27..7f80d3eec 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
@@ -159,16 +159,18 @@ defineExpose({ validate });
         <div class="flex items-center">
           <div class="mr-4">条件组关系</div>
           <ElSwitch
-            v-model:checked="condition.conditionGroups.and"
-            checked-children="且"
-            un-checked-children="或"
+            v-model="condition.conditionGroups.and"
+            active-text="且"
+            inactive-text="或"
           />
         </div>
       </div>
-      <ElSpace direction="vertical" size="small" class="w-11/12 pl-1">
-        <template #split>
-          {{ condition.conditionGroups.and ? '且' : '或' }}
-        </template>
+      <ElSpace
+        direction="vertical"
+        size="small"
+        :spacer="condition.conditionGroups.and ? '且' : '或'"
+        class="w-full"
+      >
         <ElCard
           class="group relative w-full hover:border-blue-500"
           v-for="(equation, cIdx) in condition.conditionGroups.conditions"
@@ -193,9 +195,9 @@ defineExpose({ validate });
               <div class="flex">
                 <div class="mr-4">规则关系</div>
                 <ElSwitch
-                  v-model:checked="equation.and"
-                  checked-children="且"
-                  un-checked-children="或"
+                  v-model="equation.and"
+                  active-text="且"
+                  inactive-text="或"
                 />
               </div>
             </div>
@@ -203,11 +205,12 @@ defineExpose({ validate });
 
           <ElRow
             :gutter="8"
+            align="middle"
             class="mb-2"
             v-for="(rule, rIdx) in equation.rules"
             :key="rIdx"
           >
-            <ElCol :span="8">
+            <ElCol :span="7">
               <ElFormItem
                 :name="[
                   'conditionGroups',
@@ -225,7 +228,7 @@ defineExpose({ validate });
               >
                 <ElSelect
                   v-model="rule.leftSide"
-                  allow-clear
+                  clearable
                   placeholder="请选择表单字段"
                 >
                   <ElOption
@@ -236,7 +239,7 @@ defineExpose({ validate });
                     :disabled="!field.required"
                   >
                     <ElTooltip
-                      title="表单字段非必填时不能作为流程分支条件"
+                      content="表单字段非必填时不能作为流程分支条件"
                       placement="right"
                       v-if="!field.required"
                     >
@@ -247,19 +250,21 @@ defineExpose({ validate });
                 </ElSelect>
               </ElFormItem>
             </ElCol>
-            <ElCol :span="6">
-              <ElSelect v-model="rule.opCode" placeholder="请选择操作符">
-                <ElOption
-                  v-for="operator in COMPARISON_OPERATORS"
-                  :key="operator.value"
-                  :label="operator.label"
-                  :value="operator.value"
-                >
-                  {{ operator.label }}
-                </ElOption>
-              </ElSelect>
+            <ElCol :span="5">
+              <ElFormItem>
+                <ElSelect v-model="rule.opCode" placeholder="请选择操作符">
+                  <ElOption
+                    v-for="operator in COMPARISON_OPERATORS"
+                    :key="operator.value"
+                    :label="operator.label"
+                    :value="operator.value"
+                  >
+                    {{ operator.label }}
+                  </ElOption>
+                </ElSelect>
+              </ElFormItem>
             </ElCol>
-            <ElCol :span="7">
+            <ElCol :span="9">
               <ElFormItem
                 :name="[
                   'conditionGroups',
@@ -279,7 +284,7 @@ defineExpose({ validate });
               </ElFormItem>
             </ElCol>
             <ElCol :span="3">
-              <div class="flex h-8 items-center">
+              <div class="flex items-center">
                 <Trash2
                   v-if="equation.rules.length > 1"
                   class="mr-2 size-4 cursor-pointer text-red-500"
@@ -294,11 +299,12 @@ defineExpose({ validate });
           </ElRow>
         </ElCard>
       </ElSpace>
-      <div title="添加条件组" class="mt-4 cursor-pointer">
-        <Plus
-          class="size-6 text-blue-500"
-          @click="addConditionGroup(condition.conditionGroups?.conditions)"
-        />
+      <div
+        class="mt-4 flex cursor-pointer items-center text-blue-500 hover:text-blue-600"
+        @click="addConditionGroup(condition.conditionGroups?.conditions)"
+      >
+        <Plus class="mr-1 size-5" />
+        <span>添加条件组</span>
       </div>
     </ElFormItem>
     <ElFormItem
@@ -308,9 +314,10 @@ defineExpose({ validate });
     >
       <ElInput
         v-model="condition.conditionExpression"
+        type="textarea"
         placeholder="请输入条件表达式"
-        allow-clear
-        :auto-size="{ minRows: 3, maxRows: 6 }"
+        clearable
+        :autosize="{ minRows: 3, maxRows: 6 }"
       />
     </ElFormItem>
   </ElForm>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
index 7e8c7a30d..9c70ae920 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
@@ -5,11 +5,9 @@ import { IconifyIcon } from '@vben/icons';
 
 import {
   ElButton,
-  ElCol,
   ElFormItem,
   ElInput,
   ElOption,
-  ElRow,
   ElSelect,
 } from 'element-plus';
 
@@ -57,8 +55,13 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
 </script>
 <template>
   <ElFormItem label="请求头">
-    <ElRow :gutter="8" v-for="(item, index) in props.header" :key="index">
-      <ElCol :span="7">
+    <div
+      v-for="(item, index) in props.header"
+      :key="index"
+      class="mb-2 flex items-center gap-2"
+    >
+      <!-- 参数名 -->
+      <div class="w-[26%] min-w-32 shrink-0">
         <ElFormItem
           :name="[bind, 'header', index, 'key']"
           :rules="{
@@ -69,20 +72,24 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
         >
           <ElInput placeholder="参数名不能为空" v-model="item.key" />
         </ElFormItem>
-      </ElCol>
-      <ElCol :span="5">
-        <ElSelect v-model="item.type">
-          <ElOption
-            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
-            :key="types.value"
-            :label="types.label"
-            :value="types.value"
-          >
-            {{ types.label }}
-          </ElOption>
-        </ElSelect>
-      </ElCol>
-      <ElCol :span="10">
+      </div>
+
+      <!-- 类型选择 -->
+      <div class="w-[24%] min-w-11 shrink-0">
+        <ElFormItem class="w-full">
+          <ElSelect v-model="item.type">
+            <ElOption
+              v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+              :key="types.value"
+              :label="types.label"
+              :value="types.value"
+            />
+          </ElSelect>
+        </ElFormItem>
+      </div>
+
+      <!-- 参数值 -->
+      <div class="w-[42%] flex-1">
         <ElFormItem
           :name="[bind, 'header', index, 'value']"
           :rules="{
@@ -103,7 +110,11 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
           }"
           v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
         >
-          <ElSelect v-model="item.value" placeholder="请选择表单字段">
+          <ElSelect
+            class="min-w-36"
+            v-model="item.value"
+            placeholder="请选择表单字段"
+          >
             <ElOption
               v-for="(field, fIdx) in formFieldOptions"
               :key="fIdx"
@@ -115,17 +126,17 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
             </ElOption>
           </ElSelect>
         </ElFormItem>
-      </ElCol>
-      <ElCol :span="2">
-        <div class="flex h-8 items-center">
-          <IconifyIcon
-            class="size-4 cursor-pointer text-red-500"
-            icon="lucide:trash-2"
-            @click="deleteHttpRequestParam(props.header, index)"
-          />
-        </div>
-      </ElCol>
-    </ElRow>
+      </div>
+
+      <!-- 删除按钮 -->
+      <div class="flex w-[8%] shrink-0 items-center">
+        <IconifyIcon
+          class="size-4 cursor-pointer text-red-500"
+          icon="lucide:trash-2"
+          @click="deleteHttpRequestParam(props.header, index)"
+        />
+      </div>
+    </div>
     <ElButton
       link
       @click="addHttpRequestParam(props.header)"
@@ -138,8 +149,13 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
     </ElButton>
   </ElFormItem>
   <ElFormItem label="请求体">
-    <ElRow :gutter="8" v-for="(item, index) in props.body" :key="index">
-      <ElCol :span="7">
+    <div
+      v-for="(item, index) in props.body"
+      :key="index"
+      class="mb-2 flex items-center gap-2"
+    >
+      <!-- 参数名 -->
+      <div class="w-[26%] min-w-32 shrink-0">
         <ElFormItem
           :name="[bind, 'body', index, 'key']"
           :rules="{
@@ -150,20 +166,24 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
         >
           <ElInput placeholder="参数名" v-model="item.key" />
         </ElFormItem>
-      </ElCol>
-      <ElCol :span="5">
-        <ElSelect v-model="item.type">
-          <ElOption
-            v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
-            :key="types.value"
-            :label="types.label"
-            :value="types.value"
-          >
-            {{ types.label }}
-          </ElOption>
-        </ElSelect>
-      </ElCol>
-      <ElCol :span="10">
+      </div>
+
+      <!-- 类型选择 -->
+      <div class="w-[24%] min-w-11 shrink-0">
+        <ElFormItem>
+          <ElSelect v-model="item.type">
+            <ElOption
+              v-for="types in BPM_HTTP_REQUEST_PARAM_TYPES"
+              :key="types.value"
+              :label="types.label"
+              :value="types.value"
+            />
+          </ElSelect>
+        </ElFormItem>
+      </div>
+
+      <!-- 参数值 -->
+      <div class="w-[42%] flex-1">
         <ElFormItem
           :name="[bind, 'body', index, 'value']"
           :rules="{
@@ -171,7 +191,7 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
             message: '参数值不能为空',
             trigger: ['blur', 'change'],
           }"
-          v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
+          v-show="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
         >
           <ElInput placeholder="参数值" v-model="item.value" />
         </ElFormItem>
@@ -182,9 +202,13 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
             message: '参数值不能为空',
             trigger: 'change',
           }"
-          v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
+          v-show="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
         >
-          <ElSelect v-model="item.value" placeholder="请选择表单字段">
+          <ElSelect
+            class="min-w-36"
+            v-model="item.value"
+            placeholder="请选择表单字段"
+          >
             <ElOption
               v-for="(field, fIdx) in formFieldOptions"
               :key="fIdx"
@@ -196,17 +220,17 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
             </ElOption>
           </ElSelect>
         </ElFormItem>
-      </ElCol>
-      <ElCol :span="2">
-        <div class="flex h-8 items-center">
-          <IconifyIcon
-            class="size-4 cursor-pointer text-red-500"
-            icon="lucide:trash-2"
-            @click="deleteHttpRequestParam(props.body, index)"
-          />
-        </div>
-      </ElCol>
-    </ElRow>
+      </div>
+
+      <!-- 删除按钮 -->
+      <div class="flex w-[8%] shrink-0 items-center">
+        <IconifyIcon
+          class="size-4 cursor-pointer text-red-500"
+          icon="lucide:trash-2"
+          @click="deleteHttpRequestParam(props.body, index)"
+        />
+      </div>
+    </div>
     <ElButton
       link
       @click="addHttpRequestParam(props.body)"
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/start-user-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/start-user-node-config.vue
index 165467045..bae452fa3 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/start-user-node-config.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/start-user-node-config.vue
@@ -218,33 +218,25 @@ defineExpose({ showStartUserNodeConfig });
           <!-- 表头 -->
           <ElRow class="border border-gray-200 px-4 py-3">
             <ElCol :span="8" class="font-bold">字段名称</ElCol>
-            <ElCol :span="16">
-              <ElRow>
-                <ElCol :span="8" class="flex items-center justify-center">
-                  <span
-                    class="cursor-pointer font-bold"
-                    @click="updatePermission('READ')"
-                  >
-                    只读
-                  </span>
-                </ElCol>
-                <ElCol :span="8" class="flex items-center justify-center">
-                  <span
-                    class="cursor-pointer font-bold"
-                    @click="updatePermission('WRITE')"
-                  >
-                    可编辑
-                  </span>
-                </ElCol>
-                <ElCol :span="8" class="flex items-center justify-center">
-                  <span
-                    class="cursor-pointer font-bold"
-                    @click="updatePermission('NONE')"
-                  >
-                    隐藏
-                  </span>
-                </ElCol>
-              </ElRow>
+            <ElCol :span="16" class="!flex">
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('READ')"
+              >
+                只读
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('WRITE')"
+              >
+                可编辑
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('NONE')"
+              >
+                隐藏
+              </span>
             </ElCol>
           </ElRow>
 
@@ -255,18 +247,16 @@ defineExpose({ showStartUserNodeConfig });
                 {{ item.title }}
               </ElCol>
               <ElCol :span="16">
-                <ElRadioGroup v-model="item.permission" class="w-full">
-                  <ElRow>
-                    <ElCol :span="8" class="flex items-center justify-center">
-                      <ElRadio :value="FieldPermissionType.READ" />
-                    </ElCol>
-                    <ElCol :span="8" class="flex items-center justify-center">
-                      <ElRadio :value="FieldPermissionType.WRITE" />
-                    </ElCol>
-                    <ElCol :span="8" class="flex items-center justify-center">
-                      <ElRadio :value="FieldPermissionType.NONE" />
-                    </ElCol>
-                  </ElRow>
+                <ElRadioGroup v-model="item.permission" class="flex w-full">
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.READ" />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.WRITE" />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.NONE" />
+                  </div>
                 </ElRadioGroup>
               </ElCol>
             </ElRow>
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index 8f6cc6e1a..effa8b404 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -32,7 +32,6 @@ import {
   ElSwitch,
   ElTabPane,
   ElTabs,
-  ElText,
   ElTreeSelect,
 } from 'element-plus';
 
@@ -927,43 +926,30 @@ onMounted(() => {
               <ElFormItem
                 label="超时时间设置"
                 v-if="configForm.timeoutHandlerEnable"
-                class="h-8"
               >
-                <ElRow>
-                  <ElCol>
-                    <ElText class="mr-2 mt-2 inline-flex text-sm">
-                      当超时
-                    </ElText>
-                  </ElCol>
-                  <ElCol>
-                    <ElFormItem name="timeDuration">
-                      <ElInputNumber
-                        class="mr-2 mt-0.5"
-                        v-model="configForm.timeDuration"
-                        :min="1"
-                        controls-position="right"
-                      />
-                    </ElFormItem>
-                  </ElCol>
-                  <ElCol>
-                    <ElSelect
-                      v-model="timeUnit"
-                      class="mr-2"
-                      :style="{ width: '100px' }"
-                      @change="timeUnitChange"
-                    >
-                      <ElOption
-                        v-for="item in TIME_UNIT_TYPES"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </ElSelect>
-                    <ElText class="mr-2 mt-2 inline-flex text-sm">
-                      未处理
-                    </ElText>
-                  </ElCol>
-                </ElRow>
+                <div class="flex items-center gap-2">
+                  <span class="text-sm">当超时</span>
+                  <ElFormItem name="timeDuration" class="!mb-0">
+                    <ElInputNumber
+                      v-model="configForm.timeDuration"
+                      :min="1"
+                      controls-position="right"
+                    />
+                  </ElFormItem>
+                  <ElSelect
+                    v-model="timeUnit"
+                    class="!w-24"
+                    @change="timeUnitChange"
+                  >
+                    <ElOption
+                      v-for="item in TIME_UNIT_TYPES"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </ElSelect>
+                  <span class="text-sm">未处理</span>
+                </div>
               </ElFormItem>
               <ElFormItem
                 label="最大提醒次数"
@@ -1135,33 +1121,25 @@ onMounted(() => {
           <!-- 表头 -->
           <ElRow class="border border-gray-200 px-4 py-3">
             <ElCol :span="8" class="font-bold">字段名称</ElCol>
-            <ElCol :span="16">
-              <ElRow>
-                <ElCol :span="8" class="flex items-center justify-center">
-                  <span
-                    class="cursor-pointer font-bold"
-                    @click="updatePermission('READ')"
-                  >
-                    只读
-                  </span>
-                </ElCol>
-                <ElCol :span="8" class="flex items-center justify-center">
-                  <span
-                    class="cursor-pointer font-bold"
-                    @click="updatePermission('WRITE')"
-                  >
-                    可编�?
-                  </span>
-                </ElCol>
-                <ElCol :span="8" class="flex items-center justify-center">
-                  <span
-                    class="cursor-pointer font-bold"
-                    @click="updatePermission('NONE')"
-                  >
-                    隐藏
-                  </span>
-                </ElCol>
-              </ElRow>
+            <ElCol :span="16" class="!flex">
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('READ')"
+              >
+                只读
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('WRITE')"
+              >
+                可编辑
+              </span>
+              <span
+                class="flex-1 cursor-pointer text-center font-bold"
+                @click="updatePermission('NONE')"
+              >
+                隐藏
+              </span>
             </ElCol>
           </ElRow>
 
@@ -1172,18 +1150,16 @@ onMounted(() => {
                 {{ item.title }}
               </ElCol>
               <ElCol :span="16">
-                <ElRadioGroup v-model="item.permission" class="w-full">
-                  <ElRow>
-                    <ElCol :span="8" class="flex items-center justify-center">
-                      <ElRadio :value="FieldPermissionType.READ" />
-                    </ElCol>
-                    <ElCol :span="8" class="flex items-center justify-center">
-                      <ElRadio :value="FieldPermissionType.WRITE" />
-                    </ElCol>
-                    <ElCol :span="8" class="flex items-center justify-center">
-                      <ElRadio :value="FieldPermissionType.NONE" />
-                    </ElCol>
-                  </ElRow>
+                <ElRadioGroup v-model="item.permission" class="flex w-full">
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.READ" />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.WRITE" />
+                  </div>
+                  <div class="flex flex-1 justify-center">
+                    <ElRadio :value="FieldPermissionType.NONE" />
+                  </div>
                 </ElRadioGroup>
               </ElCol>
             </ElRow>