业务线小程序不用写死，从后端接口获取

王彪总
1 parent 5f7ce1e4
Showing 9 changed files with 560 additions and 122 deletions
common/utils/common.js
components/unified-task-actions/unified-task-actions.vue
pages-sub/daily/maintain-manage/type-list-page.vue
pages-sub/problem/ai-manage/index.vue
pages-sub/problem/regional-order-manage/index.vue
pages-sub/problem/regional-order-manage/list-detail.vue
pages-sub/problem/regional-order-manage/order-detail.vue
pages-sub/problem/work-order-manage/index.vue
pages-sub/problem/work-order-manage/order-detail.vue
@@ -102,6 +102,28 @@ export const buzStatusMap = {
 }
 /**
+ * 工作流节点动作按钮颜色（与统一动作弹窗保持一致）
+ * @param {string} code - 动作编码，如 ASSIGN/REJECT/RETURN_PREV
+ */
+export const getActionButtonType = (code) => {
+  switch (code) {
+    case 'APPROVE':
+    case 'HANDLE':
+    case 'COMPLETE':
+      return 'success'
+    case 'REJECT':
+      return 'error'
+    case 'RETURN':
+    case 'RETURN_PREV':
+      return 'warning'
+    case 'WITHDRAW':
+      return 'info'
+    default:
+      return 'primary'
+  }
+}
+
+/**
  * 计算两个时间的时间差，返回格式化字符串（天/小时/分钟/秒，按需显示，无无效单位）
  * @param {string | Date | number} startTime - 开始时间（时间字符串/Date对象/10位/13位时间戳）
  * @param {string | Date | number} endTime - 结束时间（时间字符串/Date对象/10位/13位时间戳）
@@ -175,7 +175,7 @@ const getButtonType = (code) =&gt; {
     case 'COMPLETE':
       return 'success'
     case 'REJECT':
-      return 'danger'
+      return 'error'
     case 'RETURN':
     case 'RETURN_PREV':
       return 'warning'
@@ -33,8 +33,8 @@
                         <view class="info-text u-line-1">有效期：{{ timeFormat(item.beginTime, 'yyyy-mm-dd') }}—{{
                             timeFormat(item.endTime, 'yyyy-mm-dd') }}
                         </view>
-                        <!-- 仅待完成且存在进行中的本次养护时才显示结束任务（draftCommitId 由后端按 commit_state=1 回填） -->
-                        <view v-if="activeStatus === '1' && item.draftCommitId" class="mini-btn"
+                        <!-- 仅待完成且存在进行中的本次养护时才显示结束任务（commitId 由后端按 commit_state=1 回填） -->
+                        <view v-if="activeStatus === '1' && item.commitId" class="mini-btn"
                             @click.stop="handleEndTask(item)">结束任务</view>
                     </view>
                 </view>
@@ -255,18 +255,18 @@ const handleEndTaskModalCancel = () =&gt; {
 // 确认结束任务，真正调用接口【新增】
 const confirmEndTask = async () => {
     const item = currentEndTaskItem.value
-    // draftCommitId 由明细列表接口回填（commit_state=1），按钮只在有值时渲染
-    if (!item || !item.draftCommitId) return
+    // commitId 由明细列表接口回填（commit_state=1），按钮只在有值时渲染
+    if (!item || !item.commitId) return
     endTaskModalShow.value = false
     uni.showLoading({ title: '提交中...', mask: true })
     try {
         // 后端 /finish 只认 commitId，且要求本次养护至少有一条有效子上报
-        await finishPlan({ commitId: item.draftCommitId })
+        await finishPlan({ commitId: item.commitId })
         // 先关 loading 再弹提示：微信端 showLoading/showToast 共用同一个 toast，顺序反了会把成功提示顶掉
         uni.hideLoading()
         uni.showToast({ title: '结束任务成功', icon: 'success' })
-        // 操作成功，重新加载数据，刷新列表（draftCommitId 随之清空，按钮消失）
+        // 操作成功，重新加载数据，刷新列表（commitId 随之清空，按钮消失）
         await loadData()
         pagingRef.value?.reload()
     } catch (err) {
@@ -94,16 +94,25 @@
                 <view class="u-body-item-title">提交时间：</view>
                 <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
               </view>
-              <!-- 操作按钮行 -->
-              <view class="u-body-item u-flex u-body-item-btn-wrap common-justify-between common-item-center mt-20">
-<!--                <up-button type="success" size="mini" @click="handleRenew(item)" v-show="nextStepMap[item.taskKey].renewShow">重新提交</up-button>-->
-                <up-button type="warning" size="large" @click="handleUnifiedReject(item)"
-                           v-show="showRejectButton(item)">回退
-                </up-button>
-                <up-button type="primary" size="large" @click="handleUnifiedProcess(item)">{{ getProcessButtonText(item) }}</up-button>
-<!--                <up-button type="primary" size="large" @click="handleProcess(item)" v-show="nextStepMap[item.taskKey].ysShow">验收</up-button>-->
-
-                <up-button type="info" size="large" @click="handleDetail(item)">详情</up-button>
+              <!-- 操作按钮行：已配置工作流动作时按配置逐个渲染按钮，点击直接执行对应动作 -->
+              <view class="u-body-item task-btn-row mt-20">
+                <template v-if="hasConfiguredActions(item)">
+                  <view
+                      v-for="action in item.configuredActions"
+                      :key="action.code"
+                      :class="['task-btn', 'task-btn--' + getActionButtonType(action.code)]"
+                      @click.stop="handleUnifiedProcess(item, action)"
+                  >{{ action.name }}</view>
+                  <view class="task-btn task-btn--info" @click.stop="handleDetail(item)">详情</view>
+                </template>
+                <!-- 未配置：沿用原有节点按钮 -->
+                <template v-else>
+                  <view v-if="showRejectButton(item)" class="task-btn task-btn--warning"
+                        @click.stop="handleUnifiedReject(item)">回退</view>
+                  <view class="task-btn task-btn--primary"
+                        @click.stop="handleUnifiedProcess(item)">{{ getProcessButtonText(item) }}</view>
+                  <view class="task-btn task-btn--info" @click.stop="handleDetail(item)">详情</view>
+                </template>
               </view>
             </view>
           </template>
@@ -267,7 +276,7 @@ import {
 } from '@/api/regional-order-manage/regional-order-manage'
 import { getTaskActions } from '@/api/work-order-manage/work-order-manage'
 import { useUserStore } from '@/pinia/user';
-import { nextStepMap, buzStatusMap } from '@/common/utils/common'
+import { nextStepMap, buzStatusMap, getActionButtonType } from '@/common/utils/common'
 import { useUploadImgs } from '@/common/utils/useUploadImgs'
 // ========== 全局实例 & 常量 ==========
@@ -497,14 +506,18 @@ const getProcessButtonText = (item) =&gt; {
   return nextStepMap[item.taskKey]?.btnText || '处理'
 }
-/** 待办-处理工单：已配置统一动作时走新逻辑，否则回退原有处理 */
-const handleUnifiedProcess = async (item) => {
+/** 是否已配置统一动作（配置后按配置逐个渲染动作按钮） */
+const hasConfiguredActions = (item) =>
+    Array.isArray(item?.configuredActions) && item.configuredActions.length > 0
+
+/** 待办-处理工单：已配置统一动作时直接执行点击的配置动作，否则回退原有处理 */
+const handleUnifiedProcess = async (item, action = null) => {
   const actions = Array.isArray(item?.configuredActions)
       ? item.configuredActions
       : await queryUnifiedActions(item)
   if (actions) {
-    // 主按钮文案就是第一个动作，直接执行该动作，不再弹「请选择操作」让用户二次选择
-    unifiedActionsRef.value?.open(item, actions.slice(0, 1))
+    // 传入的动作即用户点击的配置按钮，直接执行该动作，不再弹「请选择操作」二次选择
+    unifiedActionsRef.value?.open(item, [action || actions[0]])
     return
   }
   handleProcess(item)
@@ -730,8 +743,44 @@ onShow(() =&gt; {
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
-.u-body-item-btn-wrap :deep(.u-button--large){
-  height: 28px;
+// 卡片操作按钮：自动换行、右对齐，动作多时每行 3~4 个，不再整行铺满
+.task-btn-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-bottom: -10rpx;
+}
+
+.task-btn {
+  box-sizing: border-box;
+  height: 56rpx;
+  line-height: 56rpx;
+  padding: 0 24rpx;
+  margin: 0 0 10rpx 12rpx;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.task-btn--primary {
+  background-color: #3c9cff;
+}
+
+.task-btn--success {
+  background-color: #5ac725;
+}
+
+.task-btn--warning {
+  background-color: #f9ae3d;
+}
+
+.task-btn--error {
+  background-color: #f56c6c;
+}
+
+.task-btn--info {
+  background-color: #909399;
 }
@@ -106,12 +106,27 @@
                 <view class="u-line-1 u-body-value">{{ item.createTime ? timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') : '-' }}</view>
               </view>
-              <!-- 待办工单(0) 保留原来的操作按钮区 不变 -->
-              <view v-if="activeTab === 0" class="u-body-item u-body-item-btn-wrap u-flex common-justify-between common-item-center mt-20">
-                <up-button type="warning" size="large" @click="handleUnifiedReject(item)" v-show="showRejectButton(item)">回退</up-button>
-                <up-button type="success" size="large" @click="handleRenew(item)" v-show="nextStepMap[item.taskKey]?.renewShow">重新提交</up-button>
-                <up-button type="primary" size="large" @click="handleUnifiedProcess(item)">{{ getProcessButtonText(item) }}</up-button>
-                <up-button type="info" size="large" @click="handleDetail(item)">详情</up-button>
+              <!-- 待办工单(0)：已配置工作流动作时按配置逐个渲染按钮，点击直接执行对应动作 -->
+              <view v-if="activeTab === 0" class="u-body-item task-btn-row mt-20">
+                <template v-if="hasConfiguredActions(item)">
+                  <view
+                      v-for="action in item.configuredActions"
+                      :key="action.code"
+                      :class="['task-btn', 'task-btn--' + getActionButtonType(action.code)]"
+                      @click.stop="handleUnifiedProcess(item, action)"
+                  >{{ action.name }}</view>
+                  <view class="task-btn task-btn--info" @click.stop="handleDetail(item)">详情</view>
+                </template>
+                <!-- 未配置：沿用原有节点按钮 -->
+                <template v-else>
+                  <view v-if="showRejectButton(item)" class="task-btn task-btn--warning"
+                        @click.stop="handleUnifiedReject(item)">回退</view>
+                  <view v-if="nextStepMap[item.taskKey]?.renewShow" class="task-btn task-btn--success"
+                        @click.stop="handleRenew(item)">重新提交</view>
+                  <view class="task-btn task-btn--primary"
+                        @click.stop="handleUnifiedProcess(item)">{{ getProcessButtonText(item) }}</view>
+                  <view class="task-btn task-btn--info" @click.stop="handleDetail(item)">详情</view>
+                </template>
               </view>
               <!-- 已删除：原来单独的【我发起的/已办】按钮区，不需要了 -->
@@ -226,7 +241,7 @@ import {
 } from '@/api/regional-order-manage/regional-order-manage'
 import { getTaskActions } from '@/api/work-order-manage/work-order-manage'
 import { useUserStore } from '@/pinia/user';
-import { nextStepMap, buzStatusMap } from '@/common/utils/common'
+import { nextStepMap, buzStatusMap, getActionButtonType } from '@/common/utils/common'
 import { useUploadImgs } from '@/common/utils/useUploadImgs'
 // ========== 全局实例 & 常量 ==========
@@ -472,14 +487,18 @@ const getProcessButtonText = (item) =&gt; {
   return nextStepMap[item.taskKey]?.btnText
 }
-/** 待办-处理工单：已配置统一动作时走新逻辑，否则回退原有处理 */
-const handleUnifiedProcess = async (item) => {
+/** 是否已配置统一动作（配置后按配置逐个渲染动作按钮） */
+const hasConfiguredActions = (item) =>
+    Array.isArray(item?.configuredActions) && item.configuredActions.length > 0
+
+/** 待办-处理工单：已配置统一动作时直接执行点击的配置动作，否则回退原有处理 */
+const handleUnifiedProcess = async (item, action = null) => {
   const actions = Array.isArray(item?.configuredActions)
       ? item.configuredActions
       : await queryUnifiedActions(item)
   if (actions) {
-    // 主按钮文案就是第一个动作，直接执行该动作，不再弹「请选择操作」让用户二次选择
-    unifiedActionsRef.value?.open(item, actions.slice(0, 1))
+    // 传入的动作即用户点击的配置按钮，直接执行该动作，不再弹「请选择操作」二次选择
+    unifiedActionsRef.value?.open(item, [action || actions[0]])
     return
   }
   handleProcess(item)
@@ -720,8 +739,44 @@ onLoad(() =&gt; {
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
-.u-body-item-btn-wrap :deep(.u-button--large){
-  height: 28px;
+// 卡片操作按钮：自动换行、右对齐，动作多时每行 3~4 个，不再整行铺满
+.task-btn-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-bottom: -10rpx;
+}
+
+.task-btn {
+  box-sizing: border-box;
+  height: 56rpx;
+  line-height: 56rpx;
+  padding: 0 24rpx;
+  margin: 0 0 10rpx 12rpx;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.task-btn--primary {
+  background-color: #3c9cff;
+}
+
+.task-btn--success {
+  background-color: #5ac725;
+}
+
+.task-btn--warning {
+  background-color: #f9ae3d;
+}
+
+.task-btn--error {
+  background-color: #f56c6c;
+}
+
+.task-btn--info {
+  background-color: #909399;
 }
@@ -8,7 +8,7 @@
       color="#3c9cff"
     ></up-loading-page>
-    <view v-else class="main-content">
+    <view v-else class="main-content" :class="'pb-rows-' + actionBarRows">
       <!-- 顶部标签栏 -->
       <up-sticky :bgColor="'#fff'">
         <up-tabs
@@ -223,23 +223,25 @@
     </view>
     <!-- 底部操作按钮 -->
-    <view v-if="activeTab === '0' && (configuredActions || nextStepMap[orderDetail.taskKey])" class="fixed-bottom-btn-wrap">
-      <view class="u-body-item u-flex common-justify-between common-item-center">
-        <up-button
-          type="warning"
-          size="normal"
-          @click="handleUnifiedReject(orderDetail)"
-          v-show="showRejectButton"
-        >回退</up-button>
-        <up-button
-          type="success"
-          size="normal"
-          @click="handleRenew(orderDetail)"
-          v-show="nextStepMap[orderDetail.taskKey]?.renewShow"
-        >重新提交</up-button>
-        <up-button type="primary" size="normal" @click="handleUnifiedProcess(orderDetail)">
-          {{ processButtonText }}
-        </up-button>
+    <view v-if="activeTab === '0' && (configuredActions || nextStepMap[orderDetail.taskKey])"
+          class="fixed-bottom-btn-wrap order-action-bar">
+      <!-- 已配置工作流动作：每行最多 3 个、超出自动换行，点击直接执行对应动作，不再弹「请选择操作」 -->
+      <view v-if="hasConfiguredActions" class="order-action-row">
+        <view
+            v-for="action in configuredActions"
+            :key="action.code"
+            :class="['order-action-btn', 'order-action-btn--' + getActionButtonType(action.code)]"
+            @click.stop="handleUnifiedProcess(orderDetail, action)"
+        >{{ action.name }}</view>
+      </view>
+      <!-- 未配置：沿用原有节点按钮（整行展示） -->
+      <view v-else class="order-action-row order-action-row--single">
+        <view v-if="showRejectButton" class="order-action-btn order-action-btn--warning"
+              @click.stop="handleUnifiedReject(orderDetail)">回退</view>
+        <view v-if="nextStepMap[orderDetail.taskKey]?.renewShow" class="order-action-btn order-action-btn--success"
+              @click.stop="handleRenew(orderDetail)">重新提交</view>
+        <view class="order-action-btn order-action-btn--primary"
+              @click.stop="handleUnifiedProcess(orderDetail)">{{ processButtonText }}</view>
       </view>
     </view>
@@ -335,7 +337,7 @@ import { timeFormat } from &#39;@/uni_modules/uview-plus&#39;
 import { getApprovalDetail,workOrderDetailByID } from '@/api/regional-order-manage/regional-order-manage'
 import { getTaskActions } from '@/api/work-order-manage/work-order-manage'
-import { nextStepMap, calculateFormatTimeDiff } from '@/common/utils/common'
+import { nextStepMap, calculateFormatTimeDiff, getActionButtonType } from '@/common/utils/common'
 import { useUploadImgs } from '@/common/utils/useUploadImgs'
 import { useUserStore } from '@/pinia/user'
@@ -517,6 +519,21 @@ const showRejectButton = computed(() =&gt; {
   return !!nextStepMap[orderDetail.value.taskKey]?.backShow
 })
+/** 是否已配置统一动作（配置后按配置逐个渲染动作按钮） */
+const hasConfiguredActions = computed(() =>
+    Array.isArray(configuredActions.value) && configuredActions.value.length > 0)
+
+/** 底部操作栏行数：详情内容据此预留底部间距，避免按钮遮挡内容 */
+const actionBarRows = computed(() => {
+  if (hasConfiguredActions.value) {
+    return Math.ceil(configuredActions.value.length / 3)
+  }
+  let rows = 1
+  if (showRejectButton.value) rows++
+  if (nextStepMap[orderDetail.value.taskKey]?.renewShow) rows++
+  return rows
+})
+
 /** 主按钮文案：已配置统一动作时取配置的动作名称，未配置时沿用原有节点规则 */
 const processButtonText = computed(() => {
   const actions = configuredActions.value
@@ -529,14 +546,14 @@ const processButtonText = computed(() =&gt; {
 /** 统一动作弹窗 */
 const unifiedActionsRef = ref<any>(null)
-/** 处理：已配置统一动作时走统一接口，否则回退原有处理 */
-const handleUnifiedProcess = async (item: any) => {
+/** 处理：已配置统一动作时直接执行点击的配置动作，否则回退原有处理 */
+const handleUnifiedProcess = async (item: any, action: any = null) => {
   const actions = Array.isArray(configuredActions.value)
       ? configuredActions.value
       : await queryUnifiedActions(item?.taskId)
   if (actions) {
-    // 主按钮文案就是第一个动作，直接执行该动作，不再弹「请选择操作」让用户二次选择
-    unifiedActionsRef.value?.open(item, actions.slice(0, 1))
+    // 传入的动作即用户点击的配置按钮，直接执行该动作，不再弹「请选择操作」二次选择
+    unifiedActionsRef.value?.open(item, [action || actions[0]])
     return
   }
   handleProcess(item)
@@ -1001,4 +1018,74 @@ onLoad((options: any) =&gt; {
   width: 70px !important;
   height: 70px !important;
 }
+
+// 底部动作按钮：动作多时自动换行
+// 底部操作栏：白底 + 顶部投影，按钮每行最多 3 个，避免多动作时整屏遮挡工单详情
+.order-action-bar {
+  background-color: #fff;
+  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
+  padding: 10rpx 14rpx;
+  padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+}
+
+.order-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -6rpx;
+}
+
+.order-action-btn {
+  box-sizing: border-box;
+  width: calc((100% - 36rpx) / 3);
+  height: 68rpx;
+  line-height: 68rpx;
+  margin: 6rpx;
+  padding: 0 8rpx;
+  border-radius: 8rpx;
+  font-size: 26rpx;
+  text-align: center;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// 未配置统一动作时按钮整行展示，保持原有观感
+.order-action-row--single .order-action-btn {
+  width: 100%;
+}
+
+.order-action-btn--primary {
+  background-color: #3c9cff;
+}
+
+.order-action-btn--success {
+  background-color: #5ac725;
+}
+
+.order-action-btn--warning {
+  background-color: #f9ae3d;
+}
+
+.order-action-btn--error {
+  background-color: #f56c6c;
+}
+
+.order-action-btn--info {
+  background-color: #909399;
+}
+
+// 按操作栏行数给内容预留底部间距
+.main-content.pb-rows-1 {
+  padding-bottom: 190rpx;
+}
+
+.main-content.pb-rows-2 {
+  padding-bottom: 290rpx;
+}
+
+.main-content.pb-rows-3 {
+  padding-bottom: 390rpx;
+}
 </style>
 \ No newline at end of file
@@ -9,7 +9,7 @@
     ></up-loading-page>
     <!-- 主内容容器 -->
-    <view v-else class="main-content">
+    <view v-else class="main-content" :class="'pb-rows-' + actionBarRows">
       <!-- 顶部固定Tabs -->
       <up-sticky :bgColor="'#fff'">
         <up-tabs
@@ -253,21 +253,25 @@
     </view>
     <!-- activeTab==0的时候才出现， 也就是待办 -->
-    <view v-if="activeTab==0&&(configuredActions||nextStepMap[orderDetail.taskKey])" class="fixed-bottom-btn-wrap">
-      <view class="u-body-item u-flex common-justify-between common-item-center ">
-        <up-button type="warning" size="normal" @click="handleUnifiedReject(orderDetail)"
-                   v-show="showRejectButton">回退
-        </up-button>
-
-        <up-button type="success" size="normal" @click="handleRenew(orderDetail)"
-                   v-show="nextStepMap[orderDetail.taskKey]?.renewShow">重新提交
-        </up-button>
-
-        <up-button type="primary" size="normal" @click="handleUnifiedProcess(orderDetail)">{{
-            processButtonText
-          }}
-        </up-button>
-
+    <view v-if="activeTab==0&&(configuredActions||nextStepMap[orderDetail.taskKey])"
+          class="fixed-bottom-btn-wrap order-action-bar">
+      <!-- 已配置工作流动作：每行最多 3 个、超出自动换行，点击直接执行对应动作，不再弹「请选择操作」 -->
+      <view v-if="hasConfiguredActions" class="order-action-row">
+        <view
+            v-for="action in configuredActions"
+            :key="action.code"
+            :class="['order-action-btn', 'order-action-btn--' + getActionButtonType(action.code)]"
+            @click.stop="handleUnifiedProcess(orderDetail, action)"
+        >{{ action.name }}</view>
+      </view>
+      <!-- 未配置：沿用原有节点按钮（整行展示） -->
+      <view v-else class="order-action-row order-action-row--single">
+        <view v-if="showRejectButton" class="order-action-btn order-action-btn--warning"
+              @click.stop="handleUnifiedReject(orderDetail)">回退</view>
+        <view v-if="nextStepMap[orderDetail.taskKey]?.renewShow" class="order-action-btn order-action-btn--success"
+              @click.stop="handleRenew(orderDetail)">重新提交</view>
+        <view class="order-action-btn order-action-btn--primary"
+              @click.stop="handleUnifiedProcess(orderDetail)">{{ processButtonText }}</view>
       </view>
     </view>
@@ -377,7 +381,7 @@ import {
   dcyUniversalApproval,
   aiUniversalApproval
 } from '@/api/regional-order-manage/regional-order-manage';
-import {nextStepMap, buzStatusMap, calculateFormatTimeDiff} from '@/common/utils/common'
+import {nextStepMap, buzStatusMap, calculateFormatTimeDiff, getActionButtonType} from '@/common/utils/common'
 import {getTaskActions} from '@/api/work-order-manage/work-order-manage';
 import {useUploadImgs} from '@/common/utils/useUploadImgs'
 import { useUserStore } from '@/pinia/user';
@@ -585,6 +589,21 @@ const showRejectButton = computed(() =&gt; {
   return !!nextStepMap[orderDetail.value.taskKey]?.backShow
 })
+/** 是否已配置统一动作（配置后按配置逐个渲染动作按钮） */
+const hasConfiguredActions = computed(() =>
+    Array.isArray(configuredActions.value) && configuredActions.value.length > 0)
+
+/** 底部操作栏行数：详情内容据此预留底部间距，避免按钮遮挡内容 */
+const actionBarRows = computed(() => {
+  if (hasConfiguredActions.value) {
+    return Math.ceil(configuredActions.value.length / 3)
+  }
+  let rows = 1
+  if (showRejectButton.value) rows++
+  if (nextStepMap[orderDetail.value.taskKey]?.renewShow) rows++
+  return rows
+})
+
 /** 主按钮文案：已配置统一动作时取配置的动作名称，未配置时沿用原有节点规则 */
 const processButtonText = computed(() => {
   const actions = configuredActions.value
@@ -597,14 +616,14 @@ const processButtonText = computed(() =&gt; {
 /** 统一动作弹窗 */
 const unifiedActionsRef = ref<any>(null)
-/** 处理：已配置统一动作时走统一接口，否则回退原有处理 */
-const handleUnifiedProcess = async (item: any) => {
+/** 处理：已配置统一动作时直接执行点击的配置动作，否则回退原有处理 */
+const handleUnifiedProcess = async (item: any, action: any = null) => {
   const actions = Array.isArray(configuredActions.value)
       ? configuredActions.value
       : await queryUnifiedActions(item?.taskId)
   if (actions) {
-    // 主按钮文案就是第一个动作，直接执行该动作，不再弹「请选择操作」让用户二次选择
-    unifiedActionsRef.value?.open(item, actions.slice(0, 1))
+    // 传入的动作即用户点击的配置按钮，直接执行该动作，不再弹「请选择操作」二次选择
+    unifiedActionsRef.value?.open(item, [action || actions[0]])
     return
   }
   handleProcess(item)
@@ -1146,4 +1165,74 @@ onShow(() =&gt; {});
   width: 70px !important;
   height: 70px !important;
 }
+
+// 底部动作按钮：动作多时自动换行
+// 底部操作栏：白底 + 顶部投影，按钮每行最多 3 个，避免多动作时整屏遮挡工单详情
+.order-action-bar {
+  background-color: #fff;
+  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
+  padding: 10rpx 14rpx;
+  padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+}
+
+.order-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -6rpx;
+}
+
+.order-action-btn {
+  box-sizing: border-box;
+  width: calc((100% - 36rpx) / 3);
+  height: 68rpx;
+  line-height: 68rpx;
+  margin: 6rpx;
+  padding: 0 8rpx;
+  border-radius: 8rpx;
+  font-size: 26rpx;
+  text-align: center;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// 未配置统一动作时按钮整行展示，保持原有观感
+.order-action-row--single .order-action-btn {
+  width: 100%;
+}
+
+.order-action-btn--primary {
+  background-color: #3c9cff;
+}
+
+.order-action-btn--success {
+  background-color: #5ac725;
+}
+
+.order-action-btn--warning {
+  background-color: #f9ae3d;
+}
+
+.order-action-btn--error {
+  background-color: #f56c6c;
+}
+
+.order-action-btn--info {
+  background-color: #909399;
+}
+
+// 按操作栏行数给内容预留底部间距
+.main-content.pb-rows-1 {
+  padding-bottom: 190rpx;
+}
+
+.main-content.pb-rows-2 {
+  padding-bottom: 290rpx;
+}
+
+.main-content.pb-rows-3 {
+  padding-bottom: 390rpx;
+}
 </style>
 \ No newline at end of file
@@ -101,20 +101,27 @@
                 <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
               </view>
               <!-- 操作按钮行 -->
-              <view class="u-body-item u-body-item-btn-wrap u-flex common-justify-between common-item-center mt-20">
-                <up-button type="warning" size="large" @click="handleUnifiedReject(item)"
-                           v-show="showRejectButton(item)">回退
-                </up-button>
-
-                <up-button type="success" size="large" @click="handleRenew(item)"
-                           v-show="nextStepMap[item.taskKey]?.renewShow">重新提交
-                </up-button>
-
-                <up-button type="primary" size="large" @click="handleUnifiedProcess(item)">{{
-                    getProcessButtonText(item)
-                  }}
-                </up-button>
-                <up-button type="info" size="large" @click="handleDetail(item)">详情</up-button>
+              <view class="u-body-item task-btn-row mt-20">
+                <!-- 已配置工作流动作：按配置逐个渲染按钮，点击直接执行对应动作，不再弹「请选择操作」 -->
+                <template v-if="hasConfiguredActions(item)">
+                  <view
+                      v-for="action in item.configuredActions"
+                      :key="action.code"
+                      :class="['task-btn', 'task-btn--' + getActionButtonType(action.code)]"
+                      @click.stop="handleUnifiedProcess(item, action)"
+                  >{{ action.name }}</view>
+                  <view class="task-btn task-btn--info" @click.stop="handleDetail(item)">详情</view>
+                </template>
+                <!-- 未配置：沿用原有节点按钮 -->
+                <template v-else>
+                  <view v-if="showRejectButton(item)" class="task-btn task-btn--warning"
+                        @click.stop="handleUnifiedReject(item)">回退</view>
+                  <view v-if="nextStepMap[item.taskKey]?.renewShow" class="task-btn task-btn--success"
+                        @click.stop="handleRenew(item)">重新提交</view>
+                  <view class="task-btn task-btn--primary"
+                        @click.stop="handleUnifiedProcess(item)">{{ getProcessButtonText(item) }}</view>
+                  <view class="task-btn task-btn--info" @click.stop="handleDetail(item)">详情</view>
+                </template>
               </view>
             </view>
           </template>
@@ -291,7 +298,7 @@ import {
 } from '@/api/work-order-manage/work-order-manage'
 // 从用户store获取角色信息
 import { useUserStore } from '@/pinia/user';
-import { nextStepMap, buzStatusMap } from '@/common/utils/common'
+import { nextStepMap, buzStatusMap, getActionButtonType } from '@/common/utils/common'
 // 引入图片上传组合式函数（与参考页面一致）
 import { useUploadImgs } from '@/common/utils/useUploadImgs'
@@ -539,14 +546,18 @@ const getProcessButtonText = (item) =&gt; {
   return nextStepMap[item.taskKey]?.btnText
 }
-/** 待办-处理工单：已配置统一动作时走新逻辑，否则回退原有处理 */
-const handleUnifiedProcess = async (item) => {
+/** 是否已配置统一动作（配置后按配置逐个渲染动作按钮） */
+const hasConfiguredActions = (item) =>
+    Array.isArray(item?.configuredActions) && item.configuredActions.length > 0
+
+/** 待办-处理工单：已配置统一动作时直接执行点击的配置动作，否则回退原有处理 */
+const handleUnifiedProcess = async (item, action = null) => {
   const actions = Array.isArray(item?.configuredActions)
       ? item.configuredActions
       : await queryUnifiedActions(item)
   if (actions) {
-    // 主按钮文案就是第一个动作，直接执行该动作，不再弹「请选择操作」让用户二次选择
-    unifiedActionsRef.value?.open(item, actions.slice(0, 1))
+    // 传入的动作即用户点击的配置按钮，直接执行该动作，不再弹「请选择操作」二次选择
+    unifiedActionsRef.value?.open(item, [action || actions[0]])
     return
   }
   handleProcess(item)
@@ -842,9 +853,44 @@ onUnload(() =&gt; {
   border-radius: 12rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
-.u-body-item-btn-wrap :deep(.u-button--large){
+// 卡片操作按钮：自动换行、右对齐，动作多时每行 3~4 个，不再整行铺满
+.task-btn-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-bottom: -10rpx;
+}
+
+.task-btn {
+  box-sizing: border-box;
+  height: 56rpx;
+  line-height: 56rpx;
+  padding: 0 24rpx;
+  margin: 0 0 10rpx 12rpx;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.task-btn--primary {
+  background-color: #3c9cff;
+}
+
+.task-btn--success {
+  background-color: #5ac725;
+}
+
+.task-btn--warning {
+  background-color: #f9ae3d;
+}
+
+.task-btn--error {
+  background-color: #f56c6c;
+}
-  height: 28px;
+.task-btn--info {
+  background-color: #909399;
 }
@@ -9,7 +9,7 @@
     ></up-loading-page>
     <!-- 主内容容器 -->
-    <view v-else class="main-content">
+    <view v-else class="main-content" :class="'pb-rows-' + actionBarRows">
       <!-- 顶部固定Tabs -->
       <up-sticky :bgColor="'#fff'">
         <up-tabs
@@ -256,20 +256,25 @@
     </view>
     <!-- activeTab==0的时候才出现， 也就是待办 -->
-    <view v-if="activeTab==0&&(configuredActions||nextStepMap[orderDetail.taskKey])" class="fixed-bottom-btn-wrap">
-      <view class="u-body-item u-flex common-justify-between common-item-center ">
-        <up-button type="warning" size="normal" @click="handleUnifiedReject(orderDetail)"
-                   v-show="showRejectButton">回退
-        </up-button>
-
-        <up-button type="success" size="normal" @click="handleRenew(orderDetail)"
-                   v-show="nextStepMap[orderDetail.taskKey]?.renewShow">重新提交
-        </up-button>
-
-        <up-button type="primary" size="normal" @click="handleUnifiedProcess(orderDetail)">{{
-            processButtonText
-          }}
-        </up-button>
+    <view v-if="activeTab==0&&(configuredActions||nextStepMap[orderDetail.taskKey])"
+          class="fixed-bottom-btn-wrap order-action-bar">
+      <!-- 已配置工作流动作：每行最多 3 个、超出自动换行，点击直接执行对应动作，不再弹「请选择操作」 -->
+      <view v-if="hasConfiguredActions" class="order-action-row">
+        <view
+            v-for="action in configuredActions"
+            :key="action.code"
+            :class="['order-action-btn', 'order-action-btn--' + getActionButtonType(action.code)]"
+            @click.stop="handleUnifiedProcess(orderDetail, action)"
+        >{{ action.name }}</view>
+      </view>
+      <!-- 未配置：沿用原有节点按钮（整行展示） -->
+      <view v-else class="order-action-row order-action-row--single">
+        <view v-if="showRejectButton" class="order-action-btn order-action-btn--warning"
+              @click.stop="handleUnifiedReject(orderDetail)">回退</view>
+        <view v-if="nextStepMap[orderDetail.taskKey]?.renewShow" class="order-action-btn order-action-btn--success"
+              @click.stop="handleRenew(orderDetail)">重新提交</view>
+        <view class="order-action-btn order-action-btn--primary"
+              @click.stop="handleUnifiedProcess(orderDetail)">{{ processButtonText }}</view>
       </view>
     </view>
@@ -376,7 +381,7 @@ import {
   universalApproval,
   getTaskActions
 } from '@/api/work-order-manage/work-order-manage';
-import {nextStepMap, buzStatusMap, calculateFormatTimeDiff} from '@/common/utils/common'
+import {nextStepMap, buzStatusMap, calculateFormatTimeDiff, getActionButtonType} from '@/common/utils/common'
 // 引入图片上传组合式函数
 import {useUploadImgs} from '@/common/utils/useUploadImgs'
@@ -722,6 +727,21 @@ const showRejectButton = computed(() =&gt; {
   return !!nextStepMap[orderDetail.value.taskKey]?.backShow
 })
+/** 是否已配置统一动作（配置后按配置逐个渲染动作按钮） */
+const hasConfiguredActions = computed(() =>
+    Array.isArray(configuredActions.value) && configuredActions.value.length > 0)
+
+/** 底部操作栏行数：详情内容据此预留底部间距，避免按钮遮挡内容 */
+const actionBarRows = computed(() => {
+  if (hasConfiguredActions.value) {
+    return Math.ceil(configuredActions.value.length / 3)
+  }
+  let rows = 1
+  if (showRejectButton.value) rows++
+  if (nextStepMap[orderDetail.value.taskKey]?.renewShow) rows++
+  return rows
+})
+
 /** 主按钮文案：已配置统一动作时取配置的动作名称，未配置时沿用原有节点规则 */
 const processButtonText = computed(() => {
   const actions = configuredActions.value
@@ -745,14 +765,14 @@ const queryUnifiedActions = async (item: any) =&gt; {
   return null
 }
-/** 处理工单：已配置统一动作时走新逻辑，否则回退原有处理 */
-const handleUnifiedProcess = async (item: any) => {
+/** 处理工单：已配置统一动作时直接执行点击的配置动作，否则回退原有处理 */
+const handleUnifiedProcess = async (item: any, action: any = null) => {
   const actions = Array.isArray(configuredActions.value)
       ? configuredActions.value
       : await queryUnifiedActions(item)
   if (actions) {
-    // 主按钮文案就是第一个动作，直接执行该动作，不再弹「请选择操作」让用户二次选择
-    unifiedActionsRef.value?.open(item, actions.slice(0, 1))
+    // 传入的动作即用户点击的配置按钮，直接执行该动作，不再弹「请选择操作」二次选择
+    unifiedActionsRef.value?.open(item, [action || actions[0]])
     return
   }
   handleProcess(item)
@@ -1151,4 +1171,74 @@ onShow(() =&gt; {
   width: 70px !important;  // 与多图保持一致
   height: 70px !important;
 }
+
+// 底部动作按钮：动作多时自动换行
+// 底部操作栏：白底 + 顶部投影，按钮每行最多 3 个，避免多动作时整屏遮挡工单详情
+.order-action-bar {
+  background-color: #fff;
+  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
+  padding: 10rpx 14rpx;
+  padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
+}
+
+.order-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -6rpx;
+}
+
+.order-action-btn {
+  box-sizing: border-box;
+  width: calc((100% - 36rpx) / 3);
+  height: 68rpx;
+  line-height: 68rpx;
+  margin: 6rpx;
+  padding: 0 8rpx;
+  border-radius: 8rpx;
+  font-size: 26rpx;
+  text-align: center;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// 未配置统一动作时按钮整行展示，保持原有观感
+.order-action-row--single .order-action-btn {
+  width: 100%;
+}
+
+.order-action-btn--primary {
+  background-color: #3c9cff;
+}
+
+.order-action-btn--success {
+  background-color: #5ac725;
+}
+
+.order-action-btn--warning {
+  background-color: #f9ae3d;
+}
+
+.order-action-btn--error {
+  background-color: #f56c6c;
+}
+
+.order-action-btn--info {
+  background-color: #909399;
+}
+
+// 按操作栏行数给内容预留底部间距
+.main-content.pb-rows-1 {
+  padding-bottom: 190rpx;
+}
+
+.main-content.pb-rows-2 {
+  padding-bottom: 290rpx;
+}
+
+.main-content.pb-rows-3 {
+  padding-bottom: 390rpx;
+}
 </style>
 \ No newline at end of file