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

王彪总
1 parent 5902ef3e
Showing 12 changed files with 196 additions and 131 deletions
App.vue
common/config/env.js
common/utils/common.js
pages-sub/daily/maintain-manage/index.vue
pages-sub/daily/maintain-manage/now-list-page.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
@@ -136,7 +136,7 @@ page {
   top: var(--btn-top, 100px);
   right: 15px;
   //transform: translateX(-50%);
-  background-color: #3c9cff;
+  background-color: #3b9dff;
   color: #ffffff;
   border: none;
   border-radius: 4px;
@@ -2,12 +2,12 @@
 const env = {
   // 开发环境
   development: {
-       baseUrl: 'https://test.jichengshanshui.com.cn:28302',
+      // baseUrl: 'https://test.jichengshanshui.com.cn:28302',
     // https://test.jichengshanshui.com.cn:28302
-    // baseUrl: 'http://192.168.1.111:48081',
+     baseUrl: 'http://192.168.1.163:48081',
-    uploadUrl: 'https://test.jichengshanshui.com.cn:28302',
+    uploadUrl: 'http://192.168.1.163:48081',
     // baseApi:'admin-api',
     // appApi:'app-api'
   },
@@ -124,6 +124,17 @@ export const getActionButtonType = (code) =&gt; {
 }
 /**
+ * 操作按钮行每行按钮数：单个按钮占一半宽度（左对齐），多个按钮等分，最多 5 个一行
+ * @param {number} count - 按钮总数
+ * @returns {number} 栅格列数
+ */
+export const getActionRowCols = (count) => {
+  const total = Number(count) || 0
+  // 1 个按钮时用 2 列，按钮占 1 列即页面一半
+  return total <= 1 ? 2 : Math.min(total, 5)
+}
+
+/**
  * 计算两个时间的时间差，返回格式化字符串（天/小时/分钟/秒，按需显示，无无效单位）
  * @param {string | Date | number} startTime - 开始时间（时间字符串/Date对象/10位/13位时间戳）
  * @param {string | Date | number} endTime - 结束时间（时间字符串/Date对象/10位/13位时间戳）
@@ -82,7 +82,7 @@
 <!--              </view>-->
               <view class="common-custom-btn" style="--btn-top: 48px;"  @click="goToDetail(item)">
-                养护任务
+                执行任务
               </view>
 <!--              <view class="u-body-item u-flex">-->
 <!--                <view class="u-body-item-title">批次号：</view>-->
@@ -145,9 +145,18 @@ const handleAddReport = () =&gt; {
         align-items: center;
         margin-bottom: 0;
     }
+    // 查看按钮：与其他操作按钮统一蓝色样式
     .look-btn {
-        font-size: 28rpx;
-        color: #1989fa;
+        box-sizing: border-box;
+        width: 132rpx;
+        height: 48rpx;
+        line-height: 48rpx;
+        font-size: 24rpx;
+        text-align: center;
+        color: #fff;
+        background-color: #3b9dff;
+        border-radius: 6rpx;
+        flex-shrink: 0;
     }
 }
 .empty-wrap {
@@ -348,13 +348,18 @@ onUnload(() =&gt; {
     color: #666;
     flex: 1;
 }
+// 统一样式：去作业/去查看/结束任务 统一蓝色，固定宽高保证上下对齐时大小一致
 .mini-btn {
+    box-sizing: border-box;
+    width: 132rpx;
+    height: 48rpx;
+    line-height: 48rpx;
     font-size: 24rpx;
-    color: #333;
-    background: #f5f5f5;
-    border: 1rpx solid #ddd;
+    text-align: center;
+    color: #fff;
+    background: #3b9dff;
     border-radius: 6rpx;
-    padding: 8rpx 20rpx;
+    padding: 0;
     flex-shrink: 0;
 }
 .invalid-modal-content {
@@ -95,7 +95,8 @@
                 <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
               </view>
               <!-- 操作按钮行：已配置工作流动作时按配置逐个渲染按钮，点击直接执行对应动作 -->
-              <view class="u-body-item task-btn-row mt-20">
+              <view class="u-body-item task-btn-row mt-20"
+                    :style="{'--cols': getActionRowCols(actionBtnCount(item))}">
                 <template v-if="hasConfiguredActions(item)">
                   <view
                       v-for="action in item.configuredActions"
@@ -103,7 +104,7 @@
                       :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>
+                  <view class="task-btn task-btn--primary" @click.stop="handleDetail(item)">详情</view>
                 </template>
                 <!-- 未配置：沿用原有节点按钮 -->
                 <template v-else>
@@ -111,7 +112,7 @@
                         @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>
+                  <view class="task-btn task-btn--primary" @click.stop="handleDetail(item)">详情</view>
                 </template>
               </view>
             </view>
@@ -276,7 +277,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, getActionButtonType, toWorkerImplementPage } from '@/common/utils/common'
+import { nextStepMap, buzStatusMap, getActionButtonType, getActionRowCols, toWorkerImplementPage } from '@/common/utils/common'
 import { useUploadImgs } from '@/common/utils/useUploadImgs'
 // ========== 全局实例 & 常量 ==========
@@ -510,6 +511,16 @@ const getProcessButtonText = (item) =&gt; {
 const hasConfiguredActions = (item) =>
     Array.isArray(item?.configuredActions) && item.configuredActions.length > 0
+/** 操作按钮行按钮数量：单个占一半宽度，多个等分，最多 5 个一行 */
+const actionBtnCount = (item) => {
+  if (hasConfiguredActions(item)) {
+    return item.configuredActions.length + 1 // 配置动作 + 详情
+  }
+  let count = 2 // 主按钮 + 详情
+  if (showRejectButton(item)) count++
+  return count
+}
+
 /** 待办-处理工单：已配置统一动作时直接执行点击的配置动作，否则回退原有处理 */
 const handleUnifiedProcess = async (item, action = null) => {
   const actions = Array.isArray(item?.configuredActions)
@@ -749,11 +760,12 @@ onShow(() =&gt; {
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
-// 卡片操作按钮：自动换行、右对齐，动作多时每行 3~4 个，不再整行铺满
+// 卡片操作按钮：单个占一半宽度，多个等分，每行最多 5 个
 .task-btn-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
+  column-gap: 12rpx;
+  row-gap: 10rpx;
   margin-bottom: -10rpx;
 }
@@ -761,20 +773,23 @@ onShow(() =&gt; {
   box-sizing: border-box;
   height: 56rpx;
   line-height: 56rpx;
-  padding: 0 24rpx;
-  margin: 0 0 10rpx 12rpx;
+  padding: 0 12rpx;
   border-radius: 8rpx;
   font-size: 24rpx;
   color: #fff;
+  text-align: center;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
+/* 按动作编码配色：通过/实施/结束类动作绿色，退回类橙色 */
 .task-btn--primary {
-  background-color: #3c9cff;
+  background-color: #3b9dff;
 }
 .task-btn--success {
-  background-color: #5ac725;
+  background-color: #078d0a;
 }
 .task-btn--warning {
@@ -789,7 +804,6 @@ onShow(() =&gt; {
   background-color: #909399;
 }
-
 // 弹窗公共样式
 .reject-modal-content, .accept-modal-content {
   width: 100%;
@@ -107,7 +107,8 @@
               </view>
               <!-- 待办工单(0)：已配置工作流动作时按配置逐个渲染按钮，点击直接执行对应动作 -->
-              <view v-if="activeTab === 0" class="u-body-item task-btn-row mt-20">
+              <view v-if="activeTab === 0" class="u-body-item task-btn-row mt-20"
+                    :style="{'--cols': getActionRowCols(actionBtnCount(item))}">
                 <template v-if="hasConfiguredActions(item)">
                   <view
                       v-for="action in item.configuredActions"
@@ -115,7 +116,7 @@
                       :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>
+                  <view class="task-btn task-btn--primary" @click.stop="handleDetail(item)">详情</view>
                 </template>
                 <!-- 未配置：沿用原有节点按钮 -->
                 <template v-else>
@@ -125,7 +126,7 @@
                         @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>
+                  <view class="task-btn task-btn--primary" @click.stop="handleDetail(item)">详情</view>
                 </template>
               </view>
@@ -241,7 +242,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, getActionButtonType, toWorkerImplementPage } from '@/common/utils/common'
+import { nextStepMap, buzStatusMap, getActionButtonType, getActionRowCols, toWorkerImplementPage } from '@/common/utils/common'
 import { useUploadImgs } from '@/common/utils/useUploadImgs'
 // ========== 全局实例 & 常量 ==========
@@ -491,6 +492,17 @@ const getProcessButtonText = (item) =&gt; {
 const hasConfiguredActions = (item) =>
     Array.isArray(item?.configuredActions) && item.configuredActions.length > 0
+/** 操作按钮行按钮数量：单个占一半宽度，多个等分，最多 5 个一行 */
+const actionBtnCount = (item) => {
+  if (hasConfiguredActions(item)) {
+    return item.configuredActions.length + 1 // 配置动作 + 详情
+  }
+  let count = 2 // 主按钮 + 详情
+  if (showRejectButton(item)) count++
+  if (nextStepMap[item.taskKey]?.renewShow) count++
+  return count
+}
+
 /** 待办-处理工单：已配置统一动作时直接执行点击的配置动作，否则回退原有处理 */
 const handleUnifiedProcess = async (item, action = null) => {
   const actions = Array.isArray(item?.configuredActions)
@@ -576,7 +588,6 @@ const handleProcess = async (item) =&gt; {
       });
     }
-
     // 验收弹窗
     else if (['巡查员验收', '养护组长验收'].includes(stepName)) {
       currentAcceptItem.value = item;
@@ -745,11 +756,12 @@ onLoad(() =&gt; {
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
-// 卡片操作按钮：自动换行、右对齐，动作多时每行 3~4 个，不再整行铺满
+// 卡片操作按钮：单个占页面一半宽度（左对齐），多个等分，每行最多 5 个，超出自动换行
 .task-btn-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
+  column-gap: 12rpx;
+  row-gap: 10rpx;
   margin-bottom: -10rpx;
 }
@@ -757,20 +769,23 @@ onLoad(() =&gt; {
   box-sizing: border-box;
   height: 56rpx;
   line-height: 56rpx;
-  padding: 0 24rpx;
-  margin: 0 0 10rpx 12rpx;
+  padding: 0 12rpx;
   border-radius: 8rpx;
   font-size: 24rpx;
   color: #fff;
+  text-align: center;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
+/* 按动作编码配色：通过/实施/结束类动作绿色，退回类橙色 */
 .task-btn--primary {
-  background-color: #3c9cff;
+  background-color: #3b9dff;
 }
 .task-btn--success {
-  background-color: #5ac725;
+  background-color: #078d0a;
 }
 .task-btn--warning {
@@ -785,7 +800,6 @@ onLoad(() =&gt; {
   background-color: #909399;
 }
-
 // 新增样式：解决按钮和文字间距、排版问题
 .flex-1 { flex: 1; }
 .text-right { text-align: right; }
@@ -178,7 +178,7 @@
                 <template #content>
                   <view class="step-content-wrap">
                     <view class="step-title">
-                      {{ item.name ? item.name.replace('大区经理', '业务调度员') : item.name }}
+                      {{ item.name }}
                     </view>
                     <view class="step-desc">
                       <view class="operator-name up-line-1" v-if="item.tasks">
@@ -225,8 +225,9 @@
     <!-- 底部操作按钮 -->
     <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">
+      <!-- 已配置工作流动作：每行最多 5 个、超出自动换行，点击直接执行对应动作，不再弹「请选择操作」 -->
+      <view v-if="hasConfiguredActions" class="order-action-row"
+            :style="{'--cols': getActionRowCols(configuredActions.length)}">
         <view
             v-for="action in configuredActions"
             :key="action.code"
@@ -234,8 +235,8 @@
             @click.stop="handleUnifiedProcess(orderDetail, action)"
         >{{ action.name }}</view>
       </view>
-      <!-- 未配置：沿用原有节点按钮（整行展示） -->
-      <view v-else class="order-action-row order-action-row--single">
+      <!-- 未配置：沿用原有节点按钮 -->
+      <view v-else class="order-action-row" :style="{'--cols': getActionRowCols(legacyActionCount)}">
         <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"
@@ -337,7 +338,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, getActionButtonType, toWorkerImplementPage } from '@/common/utils/common'
+import { nextStepMap, calculateFormatTimeDiff, getActionButtonType, getActionRowCols, toWorkerImplementPage } from '@/common/utils/common'
 import { useUploadImgs } from '@/common/utils/useUploadImgs'
 import { useUserStore } from '@/pinia/user'
@@ -523,15 +524,20 @@ const showRejectButton = computed(() =&gt; {
 const hasConfiguredActions = computed(() =>
     Array.isArray(configuredActions.value) && configuredActions.value.length > 0)
+/** 未配置统一动作时的按钮个数（与模板渲染顺序一致） */
+const legacyActionCount = computed(() => {
+  let count = 1
+  if (showRejectButton.value) count++
+  if (nextStepMap[orderDetail.value.taskKey]?.renewShow) count++
+  return count
+})
+
 /** 底部操作栏行数：详情内容据此预留底部间距，避免按钮遮挡内容 */
 const actionBarRows = computed(() => {
   if (hasConfiguredActions.value) {
-    return Math.ceil(configuredActions.value.length / 3)
+    return Math.ceil(configuredActions.value.length / 5)
   }
-  let rows = 1
-  if (showRejectButton.value) rows++
-  if (nextStepMap[orderDetail.value.taskKey]?.renewShow) rows++
-  return rows
+  return 1
 })
 /** 主按钮文案：已配置统一动作时取配置的动作名称，未配置时沿用原有节点规则 */
@@ -1025,8 +1031,7 @@ onLoad((options: any) =&gt; {
   height: 70px !important;
 }
-// 底部动作按钮：动作多时自动换行
-// 底部操作栏：白底 + 顶部投影，按钮每行最多 3 个，避免多动作时整屏遮挡工单详情
+// 底部操作栏：白底 + 顶部投影，按钮每行最多 5 个，避免多动作时整屏遮挡工单详情
 .order-action-bar {
   background-color: #fff;
   box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
@@ -1035,18 +1040,17 @@ onLoad((options: any) =&gt; {
   padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
 }
+// 底部操作按钮：单按钮占一半宽度，多个按钮等分，每行最多 5 个
 .order-action-row {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -6rpx;
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
+  gap: 12rpx;
 }
 .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;
@@ -1057,17 +1061,13 @@ onLoad((options: any) =&gt; {
   text-overflow: ellipsis;
 }
-// 未配置统一动作时按钮整行展示，保持原有观感
-.order-action-row--single .order-action-btn {
-  width: 100%;
-}
-
+/* 按动作编码配色：通过/实施/结束类动作绿色，退回类橙色 */
 .order-action-btn--primary {
-  background-color: #3c9cff;
+  background-color: #3b9dff;
 }
 .order-action-btn--success {
-  background-color: #5ac725;
+  background-color: #078d0a;
 }
 .order-action-btn--warning {
@@ -198,7 +198,7 @@
                   <view class="step-content-wrap">
                     <!-- 1. 原标题内容：节点名称 + 操作人 -->
                     <view class="step-title">
-                      {{ item.name ? item.name.replace('大区经理', '业务调度员') : item.name }}
+                      {{ item.name }}
                     </view>
                     <!-- 2. 原描述内容：时间 + 处理说明（最多200字） -->
@@ -255,8 +255,9 @@
     <!-- activeTab==0的时候才出现， 也就是待办 -->
     <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">
+      <!-- 已配置工作流动作：每行最多 5 个、超出自动换行，点击直接执行对应动作，不再弹「请选择操作」 -->
+      <view v-if="hasConfiguredActions" class="order-action-row"
+            :style="{'--cols': getActionRowCols(configuredActions.length)}">
         <view
             v-for="action in configuredActions"
             :key="action.code"
@@ -264,8 +265,8 @@
             @click.stop="handleUnifiedProcess(orderDetail, action)"
         >{{ action.name }}</view>
       </view>
-      <!-- 未配置：沿用原有节点按钮（整行展示） -->
-      <view v-else class="order-action-row order-action-row--single">
+      <!-- 未配置：沿用原有节点按钮 -->
+      <view v-else class="order-action-row" :style="{'--cols': getActionRowCols(legacyActionCount)}">
         <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"
@@ -381,7 +382,7 @@ import {
   dcyUniversalApproval,
   aiUniversalApproval
 } from '@/api/regional-order-manage/regional-order-manage';
-import {nextStepMap, buzStatusMap, calculateFormatTimeDiff, getActionButtonType, toWorkerImplementPage} from '@/common/utils/common'
+import {nextStepMap, buzStatusMap, calculateFormatTimeDiff, getActionButtonType, getActionRowCols, toWorkerImplementPage} 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';
@@ -392,7 +393,6 @@ const USER_ROLES = userStore.userInfo?.roles || [];
 // ========== 页面通信事件通道 解决未定义BUG ==========
 const eventChannel = ref<any>(null);
-
 // ========== 公共封装方法 (和列表页完全一致) ==========
 /**
  * 统一提示方法
@@ -593,15 +593,20 @@ const showRejectButton = computed(() =&gt; {
 const hasConfiguredActions = computed(() =>
     Array.isArray(configuredActions.value) && configuredActions.value.length > 0)
-/** 底部操作栏行数：详情内容据此预留底部间距，避免按钮遮挡内容 */
+/** 未配置统一动作时的按钮数量：主按钮 + 可选的回退/重新提交 */
+const legacyActionCount = computed(() => {
+  let count = 1
+  if (showRejectButton.value) count++
+  if (nextStepMap[orderDetail.value.taskKey]?.renewShow) count++
+  return count
+})
+
+/** 底部操作栏行数：详情内容据此预留底部间距，避免按钮遮挡内容（每行最多 5 个） */
 const actionBarRows = computed(() => {
   if (hasConfiguredActions.value) {
-    return Math.ceil(configuredActions.value.length / 3)
+    return Math.ceil(configuredActions.value.length / 5)
   }
-  let rows = 1
-  if (showRejectButton.value) rows++
-  if (nextStepMap[orderDetail.value.taskKey]?.renewShow) rows++
-  return rows
+  return 1
 })
 /** 主按钮文案：已配置统一动作时取配置的动作名称，未配置时沿用原有节点规则 */
@@ -1173,7 +1178,7 @@ onShow(() =&gt; {});
 }
 // 底部动作按钮：动作多时自动换行
-// 底部操作栏：白底 + 顶部投影，按钮每行最多 3 个，避免多动作时整屏遮挡工单详情
+// 底部操作栏：白底 + 顶部投影，按钮每行最多 5 个，避免多动作时整屏遮挡工单详情
 .order-action-bar {
   background-color: #fff;
   box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
@@ -1183,17 +1188,16 @@ onShow(() =&gt; {});
 }
 .order-action-row {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -6rpx;
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
+  column-gap: 12rpx;
+  row-gap: 12rpx;
 }
 .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;
@@ -1204,17 +1208,13 @@ onShow(() =&gt; {});
   text-overflow: ellipsis;
 }
-// 未配置统一动作时按钮整行展示，保持原有观感
-.order-action-row--single .order-action-btn {
-  width: 100%;
-}
-
+/* 按动作编码配色：通过/实施/结束类动作绿色，退回类橙色 */
 .order-action-btn--primary {
-  background-color: #3c9cff;
+  background-color: #3b9dff;
 }
 .order-action-btn--success {
-  background-color: #5ac725;
+  background-color: #078d0a;
 }
 .order-action-btn--warning {
@@ -101,7 +101,8 @@
                 <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
               </view>
               <!-- 操作按钮行 -->
-              <view class="u-body-item task-btn-row mt-20">
+              <view class="u-body-item task-btn-row mt-20"
+                    :style="{'--cols': getActionRowCols(actionBtnCount(item))}">
                 <!-- 已配置工作流动作：按配置逐个渲染按钮，点击直接执行对应动作，不再弹「请选择操作」 -->
                 <template v-if="hasConfiguredActions(item)">
                   <view
@@ -110,7 +111,7 @@
                       :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>
+                  <view class="task-btn task-btn--primary" @click.stop="handleDetail(item)">详情</view>
                 </template>
                 <!-- 未配置：沿用原有节点按钮 -->
                 <template v-else>
@@ -120,7 +121,7 @@
                         @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>
+                  <view class="task-btn task-btn--primary" @click.stop="handleDetail(item)">详情</view>
                 </template>
               </view>
             </view>
@@ -298,7 +299,7 @@ import {
 } from '@/api/work-order-manage/work-order-manage'
 // 从用户store获取角色信息
 import { useUserStore } from '@/pinia/user';
-import { nextStepMap, buzStatusMap, getActionButtonType, toWorkerImplementPage } from '@/common/utils/common'
+import { nextStepMap, buzStatusMap, getActionButtonType, getActionRowCols, toWorkerImplementPage } from '@/common/utils/common'
 // 引入图片上传组合式函数（与参考页面一致）
 import { useUploadImgs } from '@/common/utils/useUploadImgs'
@@ -346,7 +347,6 @@ const rejectImgs = useUploadImgs({
   fieldName: 'rejectImgs' // 自定义字段名
 })
-
 // ========== 验收弹窗相关状态（含图片上传） ==========
 const acceptModalShow = ref(false); // 验收弹窗显示开关
 const acceptRadioValue = ref('0'); // 单选框值，默认0（通过）
@@ -389,7 +389,6 @@ const openMapNav = (item) =&gt; {
   // });
 };
-
 // 分页查询列表
 const queryList = async (pageNo, pageSize) => {
   try {
@@ -550,6 +549,17 @@ const getProcessButtonText = (item) =&gt; {
 const hasConfiguredActions = (item) =>
     Array.isArray(item?.configuredActions) && item.configuredActions.length > 0
+/** 操作按钮行按钮数量：单个占一半宽度，多个等分，最多 5 个一行 */
+const actionBtnCount = (item) => {
+  if (hasConfiguredActions(item)) {
+    return item.configuredActions.length + 1 // 配置动作 + 详情
+  }
+  let count = 2 // 主按钮 + 详情
+  if (showRejectButton(item)) count++
+  if (nextStepMap[item.taskKey]?.renewShow) count++
+  return count
+}
+
 /** 待办-处理工单：已配置统一动作时直接执行点击的配置动作，否则回退原有处理 */
 const handleUnifiedProcess = async (item, action = null) => {
   const actions = Array.isArray(item?.configuredActions)
@@ -859,11 +869,12 @@ onUnload(() =&gt; {
   border-radius: 12rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
-// 卡片操作按钮：自动换行、右对齐，动作多时每行 3~4 个，不再整行铺满
+// 卡片操作按钮：单个占页面一半宽度（左对齐），多个等分，每行最多 5 个，超出自动换行
 .task-btn-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
+  column-gap: 12rpx;
+  row-gap: 10rpx;
   margin-bottom: -10rpx;
 }
@@ -871,20 +882,23 @@ onUnload(() =&gt; {
   box-sizing: border-box;
   height: 56rpx;
   line-height: 56rpx;
-  padding: 0 24rpx;
-  margin: 0 0 10rpx 12rpx;
+  padding: 0 12rpx;
   border-radius: 8rpx;
   font-size: 24rpx;
   color: #fff;
+  text-align: center;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
+/* 按动作编码配色：通过/实施/结束类动作绿色，退回类橙色 */
 .task-btn--primary {
-  background-color: #3c9cff;
+  background-color: #3b9dff;
 }
 .task-btn--success {
-  background-color: #5ac725;
+  background-color: #078d0a;
 }
 .task-btn--warning {
@@ -899,8 +913,6 @@ onUnload(() =&gt; {
   background-color: #909399;
 }
-
-
 // 回退modal样式
 .reject-modal-content {
   width: 100%;
@@ -116,7 +116,6 @@
               </template>
             </up-cell>
-
              <up-cell title="重点巡检区域" :value="orderDetail.keyInspection==0?'否':'是'" align="middle"></up-cell>
@@ -237,7 +236,7 @@
                   <view class="step-content-wrap">
                     <!-- 1. 原标题内容：节点名称 + 操作人 -->
                     <view class="step-title">
-                      {{ item.name ? item.name.replace('大区经理', '业务调度员') : item.name }}
+                      {{ item.name }}
                     </view>
                     <!-- 2. 原描述内容：时间 + 处理说明（最多200字） -->
@@ -294,8 +293,9 @@
     <!-- activeTab==0的时候才出现， 也就是待办 -->
     <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">
+      <!-- 已配置工作流动作：每行最多 5 个、超出自动换行，点击直接执行对应动作，不再弹「请选择操作」 -->
+      <view v-if="hasConfiguredActions" class="order-action-row"
+            :style="{'--cols': getActionRowCols(configuredActions.length)}">
         <view
             v-for="action in configuredActions"
             :key="action.code"
@@ -303,8 +303,8 @@
             @click.stop="handleUnifiedProcess(orderDetail, action)"
         >{{ action.name }}</view>
       </view>
-      <!-- 未配置：沿用原有节点按钮（整行展示） -->
-      <view v-else class="order-action-row order-action-row--single">
+      <!-- 未配置：沿用原有节点按钮 -->
+      <view v-else class="order-action-row" :style="{'--cols': getActionRowCols(legacyActionCount)}">
         <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"
@@ -418,7 +418,7 @@ import {
   getTaskActions
 } from '@/api/work-order-manage/work-order-manage';
 import {getWorkRecordValues} from '@/api/common'
-import {nextStepMap, buzStatusMap, calculateFormatTimeDiff, getActionButtonType, toWorkerImplementPage} from '@/common/utils/common'
+import {nextStepMap, buzStatusMap, calculateFormatTimeDiff, getActionButtonType, getActionRowCols, toWorkerImplementPage} from '@/common/utils/common'
 // 引入图片上传组合式函数
 import {useUploadImgs} from '@/common/utils/useUploadImgs'
@@ -813,15 +813,20 @@ const showRejectButton = computed(() =&gt; {
 const hasConfiguredActions = computed(() =>
     Array.isArray(configuredActions.value) && configuredActions.value.length > 0)
-/** 底部操作栏行数：详情内容据此预留底部间距，避免按钮遮挡内容 */
+/** 未配置统一动作时的按钮数量：主按钮 + 可选的回退/重新提交 */
+const legacyActionCount = computed(() => {
+  let count = 1
+  if (showRejectButton.value) count++
+  if (nextStepMap[orderDetail.value.taskKey]?.renewShow) count++
+  return count
+})
+
+/** 底部操作栏行数：详情内容据此预留底部间距，避免按钮遮挡内容（每行最多 5 个） */
 const actionBarRows = computed(() => {
   if (hasConfiguredActions.value) {
-    return Math.ceil(configuredActions.value.length / 3)
+    return Math.ceil(configuredActions.value.length / 5)
   }
-  let rows = 1
-  if (showRejectButton.value) rows++
-  if (nextStepMap[orderDetail.value.taskKey]?.renewShow) rows++
-  return rows
+  return 1
 })
 /** 主按钮文案：已配置统一动作时取配置的动作名称，未配置时沿用原有节点规则 */
@@ -1261,7 +1266,7 @@ onShow(() =&gt; {
 }
 // 底部动作按钮：动作多时自动换行
-// 底部操作栏：白底 + 顶部投影，按钮每行最多 3 个，避免多动作时整屏遮挡工单详情
+// 底部操作栏：白底 + 顶部投影，按钮每行最多 5 个，避免多动作时整屏遮挡工单详情
 .order-action-bar {
   background-color: #fff;
   box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
@@ -1271,17 +1276,16 @@ onShow(() =&gt; {
 }
 .order-action-row {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -6rpx;
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
+  column-gap: 12rpx;
+  row-gap: 12rpx;
 }
 .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;
@@ -1292,17 +1296,13 @@ onShow(() =&gt; {
   text-overflow: ellipsis;
 }
-// 未配置统一动作时按钮整行展示，保持原有观感
-.order-action-row--single .order-action-btn {
-  width: 100%;
-}
-
+/* 按动作编码配色：通过/实施/结束类动作绿色，退回类橙色 */
 .order-action-btn--primary {
-  background-color: #3c9cff;
+  background-color: #3b9dff;
 }
 .order-action-btn--success {
-  background-color: #5ac725;
+  background-color: #078d0a;
 }
 .order-action-btn--warning {