流程节点

刘淇
1 parent dacff5e3
Showing 2 changed files with 236 additions and 53 deletions
pages-sub/problem/work-order-manage/add-maintain-order.vue
pages-sub/problem/work-order-manage/order-detail.vue
@@ -28,7 +28,7 @@
             @click="handleActionSheetOpen('coProcessor'); hideKeyboard()"
         >
           <up-input
-              v-model="workOrderForm.coProcessorName"
+              v-model="workOrderForm.coProcessorNameStr"
               disabled
               disabled-color="#ffffff"
               placeholder="请选择共同处理人"
@@ -203,13 +203,14 @@ const tabList = ref([
 // 共同处理人列表
 const coProcessorList = ref([])
  
-// 工单表单数据（仅保留需要的字段）
+// 工单表单数据（修改：新增coProcessorName数组，coProcessorNameStr用于页面展示）
 const workOrderForm = reactive({
   workerDataId:'',
   taskId:'', // 任务id
   orderNo: '',                  // 工单编号
-  coProcessorId: '',            // 共同处理人ID数组（多选）
-  coProcessorName: '',          // 共同处理人名称数组（多选）
+  coProcessorId: [],            // 共同处理人ID数组（多选，改为数组格式）
+  coProcessorName: [],          // 共同处理人名称数组（多选，数组格式，用于提交）
+  coProcessorNameStr: '',       // 共同处理人名称字符串（用于页面输入框展示）
   reason: '',                   // 处理情况描述
 })
  
@@ -313,8 +314,6 @@ onLoad((options) =&gt; {
         duration: 3000
       });
       console.error('onLoad异常：工单缓存数据为空');
-      // 可选：返回上一页
-      // setTimeout(() => uni.navigateBack(), 1500);
       return;
     }
  
@@ -352,10 +351,18 @@ onLoad((options) =&gt; {
     workOrderForm.orderNo = orderItem.orderNo || '';
     workOrderForm.reason = orderItem.handleResult || ''; // 处理情况回显
  
-    // 共同处理人（如有数据则回显）
+    // 共同处理人（如有数据则回显，转换为数组格式）
     if (orderItem.coHandlers && orderItem.coHandlersName) {
-      workOrderForm.coProcessorId = orderItem.coHandlers;
-      workOrderForm.coProcessorName = orderItem.coHandlersName;
+      // 处理ID：如果是字符串（逗号分隔），转为数组；本身是数组则直接赋值
+      workOrderForm.coProcessorId = Array.isArray(orderItem.coHandlers)
+          ? orderItem.coHandlers
+          : (orderItem.coHandlers.split(',').filter(Boolean) || []);
+      // 处理名称：同理，转为数组格式（用于提交），并拼接为字符串（用于展示）
+      workOrderForm.coProcessorName = Array.isArray(orderItem.coHandlersName)
+          ? orderItem.coHandlersName
+          : (orderItem.coHandlersName.split(',').filter(Boolean) || []);
+      // 拼接名称为字符串，用于输入框展示
+      workOrderForm.coProcessorNameStr = workOrderForm.coProcessorName.join('，');
     } else {
       console.warn('工单数据提示：无共同处理人信息');
     }
@@ -418,8 +425,6 @@ onLoad((options) =&gt; {
       duration: 3000
     });
     console.error('获取工单缓存数据失败：', error);
-    // 可选：返回上一页
-    // setTimeout(() => uni.navigateBack(), 1500);
   }
 })
  
@@ -551,7 +556,7 @@ const handleActionSheetClose = () =&gt; {
   currentActionSheetData.title = ''
 }
  
-// 下拉弹窗选择事件（仅处理共同处理人多选）
+// 下拉弹窗选择事件（修改：支持多选，存储名称和ID为数组）
 const handleActionSheetSelect = (e) => {
   // 校验事件参数是否有效
   if (!e || !e.name || !e.id) {
@@ -566,10 +571,23 @@ const handleActionSheetSelect = (e) =&gt; {
   }
  
   const { type } = currentActionSheetData
-  // 多选场景（仅共同处理人）
+  // 多选场景（仅共同处理人，存储数组格式）
   if (type === 'coProcessor') {
-    workOrderForm.coProcessorName = e.name
-    workOrderForm.coProcessorId = e.id
+    // 若已选中该处理人，移除（实现切换选择）；未选中则添加
+    const idIndex = workOrderForm.coProcessorId.findIndex(id => id === e.id);
+    if (idIndex > -1) {
+      // 移除已选中的ID和名称
+      workOrderForm.coProcessorId.splice(idIndex, 1);
+      workOrderForm.coProcessorName.splice(idIndex, 1);
+    } else {
+      // 添加新选中的ID和名称（数组格式）
+      workOrderForm.coProcessorId.push(e.id);
+      workOrderForm.coProcessorName.push(e.name);
+    }
+
+    // 拼接名称数组为字符串，用于输入框展示
+    workOrderForm.coProcessorNameStr = workOrderForm.coProcessorName.join('，');
+
     // 校验表单实例是否存在，再执行字段校验
     if (workOrderFormRef.value) {
       workOrderFormRef.value?.validateField('coProcessorName')
@@ -600,7 +618,7 @@ const hideKeyboard = () =&gt; {
   uni.hideKeyboard()
 }
  
-// 提交工单（整合所有图片URL，增加开始/结束图片必填校验）
+// 提交工单（修改：将coProcessorName数组一并传入提交参数）
 const submitWorkOrder = async () => {
   try {
     // ========== 前置校验：表单实例是否存在 ==========
@@ -696,14 +714,15 @@ const submitWorkOrder = async () =&gt; {
       materialImgs: materialImgs.getSuccessImgUrls() || []
     }
  
-    // 构造提交参数
+    // 构造提交参数（修改：添加coProcessorName数组一并提交）
     const submitData = {
       taskId: workOrderForm.taskId,
       taskKey:'ylWorker',
       operateType: nextStepMap['ylWorker']?.operateTypePass || '', // 兜底：防止nextStepMap缺失属性
       workerDataId: Number(workOrderForm.workerDataId) || '',
       handleResult: workOrderForm.reason.trim(),
-      coHandlers: workOrderForm.coProcessorId ? [String(workOrderForm.coProcessorId)] : [],
+      coHandlers: workOrderForm.coProcessorId || [], // ID数组
+      coHandlersName: workOrderForm.coProcessorName || [], // 名称数组（一并提交）
       startImgs: allImgs.startImgs,
       processingImgs: allImgs.processingImgs,
       endImgs: allImgs.endImgs,
@@ -712,6 +731,9 @@ const submitWorkOrder = async () =&gt; {
       problemsImgs:[]
     }
  
+    // 打印提交参数，验证coProcessorName是否为数组
+    console.log('提交参数（含名称数组）：', submitData);
+
     // 校验operateType是否有效
     if (!submitData.operateType) {
       uni.showToast({
@@ -24,7 +24,6 @@
         ></up-tabs>
       </up-sticky>
  
-
       <!-- 顶部Tab内容区 -->
       <view class="tab-content">
         <!-- 1. 工单详情Tab -->
@@ -110,20 +109,18 @@
             ></up-cell>
           </up-cell-group>
  
-
           <!-- 图片分类Tabs区块 -->
           <view class="img-tabs-block" v-if="orderDetail.startImgs.length>0">
             <up-cell-group :border="false">
               <up-cell>
-              <template #title>
-                <view style="min-width: 200rpx">共同处理人</view>
-              </template>
-              <template #value>
-                <view class="common-text-color up-line-1">{{ orderDetail.coHandlersName || '--' }}</view>
-              </template>
+                <template #title>
+                  <view style="min-width: 200rpx">共同处理人</view>
+                </template>
+                <template #value>
+                  <view class="common-text-color up-line-1">{{ orderDetail.coHandlersName || '--' }}</view>
+                </template>
               </up-cell>
             </up-cell-group>
-            <!--            coHandlersName-->
             <up-tabs
                 @change='imgTabChange'
                 v-model="activeImgTab"
@@ -151,10 +148,68 @@
  
         <!-- 2. 流程节点Tab -->
         <view v-show="activeTopTab == 1" class="process-content">
-          <!--          <up-empty-->
-          <!--              mode="data"-->
-          <!--          ></up-empty>-->
-          <!--          &lt;!&ndash; 可根据实际需求补充流程节点展示逻辑 &ndash;&gt;-->
+          <!-- 竖向步骤条：动态绑定current属性 -->
+          <up-steps
+              v-if="processData.activityNodes && processData.activityNodes.length"
+              :list="processData.activityNodes"
+              :current="getCurrentStepIndex()"
+          direction="column"
+          active-color="#3c9cff"
+          inactive-color="#999"
+          class="vertical-steps"
+          >
+          <up-steps-item
+              v-for="(item, index) in processData.activityNodes"
+              :key="`${item.id}_${index}`"
+          >
+            <!-- 唯一自定义模板：content，包含标题、描述、相册所有内容 -->
+            <template #content>
+              <view class="step-content-wrap">
+                <!-- 1. 原标题内容：节点名称 + 操作人 -->
+                <view class="step-title">
+                  {{ item.name }}
+                  <text class="operator-name">
+                    {{ item.tasks && item.tasks[0]?.assigneeUser?.nickname ? '（' + item.tasks[0].assigneeUser.nickname + '）' : '（未知操作人）' }}
+                  </text>
+                </view>
+
+                <!-- 2. 原描述内容：时间 + 处理说明（最多200字） -->
+                <view class="step-desc">
+                  <!-- 时间行 -->
+                  <view class="time-line">
+                    处理时间：{{ timeFormat(item.startTime, 'yyyy-mm-dd hh:MM:ss') }}
+                    <text v-if="item.endTime"> - {{ timeFormat(item.endTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
+                    <text v-else class="processing-tag">（处理中）</text>
+                  </view>
+                  <!-- 原因行 -->
+                  <view class="reason-line up-line-2" v-if="item.tasks && item.tasks[0]?.reason">
+                    描述：{{ getLimitReason(item.tasks && item.tasks[0]?.reason) }}
+                  </view>
+                </view>
+
+                <!-- 3. 原相册内容：预留up-album -->
+                <view class="step-album-wrap">
+                  <up-album
+                      v-if="item.tasks && item.tasks[0]?.signPicUrl && item.tasks[0].signPicUrl.length"
+                      :urls="item.tasks[0].signPicUrl.slice(0, 3)"
+                      singleSize="60"
+                      multipleSize="60"
+                      :preview-full-image="true"
+                      class="step-album"
+                  ></up-album>
+                </view>
+              </view>
+            </template>
+          </up-steps-item>
+          </up-steps>
+
+          <!-- 流程节点为空时的提示 -->
+          <up-empty
+              v-else
+              mode="data"
+              title="暂无流程节点数据"
+              class="empty-process"
+          ></up-empty>
         </view>
       </view>
     </view>
@@ -183,6 +238,14 @@ const topTabList = ref([
   {name: '流程节点'}
 ]);
  
+// 流程节点数据（初始化适配接口格式）
+const processData = ref<any>({
+  status: 2,
+  activityNodes: [],
+  formFieldsPermission: null,
+  todoTask: null
+});
+
 const activeTopTabClick = async (item: any) => {
   console.log(item)
   activeTopTab.value = item.index
@@ -192,6 +255,19 @@ const activeTopTabClick = async (item: any) =&gt; {
     }
     const res = await getApprovalDetail(getData)
     console.log(res)
+    // 关键：格式化数据，补充up-steps要求的title字段
+    if (res && res.activityNodes && res.activityNodes.length) {
+      const formatActivityNodes = res.activityNodes.map(node => ({
+        ...node,
+        title: node.name // 补充强制字段，满足3.3.48版本组件要求
+      }));
+      processData.value = {
+        ...res,
+        activityNodes: formatActivityNodes
+      };
+    } else {
+      processData.value = res;
+    }
   }
 }
  
@@ -270,6 +346,36 @@ const imgTabChange = (({index}) =&gt; {
   currentImgList.value = orderDetail.value[currentKey]
 })
  
+/**
+ * 截取reason最多200字
+ * @param reason 处理说明
+ * @returns 截取后的字符串
+ */
+const getLimitReason = (reason: string | null | undefined) => {
+  if (!reason) return '无处理说明';
+  if (reason.length <= 200) return reason;
+  return reason.substring(0, 200) + '...';
+}
+
+/**
+ * 动态获取当前步骤索引（核心：根据接口数据的status字段判断）
+ * status=1：当前步骤（处理中）
+ * status=2：已完成步骤
+ * @returns {number} 当前激活的步骤索引（从0开始）
+ */
+const getCurrentStepIndex = () => {
+  const { activityNodes } = processData.value;
+  if (!activityNodes || !activityNodes.length) return 0;
+
+  // 1. 查找第一个状态为1（处理中）的节点，即为当前步骤
+  const processingNodeIndex = activityNodes.findIndex(node => node.status === 1);
+  if (processingNodeIndex !== -1) {
+    return processingNodeIndex;
+  }
+
+  // 2. 若没有处理中的节点（全部已完成），则激活最后一个节点
+  return activityNodes.length - 1;
+}
  
 /**
  * 获取工单详情
@@ -321,12 +427,7 @@ onLoad((options: any) =&gt; {
 });
  
 onShow(() => {
-  // if (taskId.value) {
-  //   DetailQuery(taskId.value);
-  // } else {
-  //   loading.value = false;
-  //   uni.showToast({title: '缺少工单ID参数', icon: 'none'});
-  // }
+  // 注释原有逻辑，避免重复加载
 });
 </script>
  
@@ -371,20 +472,12 @@ onShow(() =&gt; {
 // 图片分类Tabs区块
 .img-tabs-block {
   background-color: #fff;
-  border-radius: 12rpx;
-  padding: 16rpx;
-
-  //// 图片Tabs样式（平均分配空间）
-  //.img-tabs {
-  //  --u-tabs-item-flex: 1; // 平均分配空间
-  //  --u-tabs-item-font-size: 26rpx;
-  //  --u-tabs-item-height: 72rpx;
-  //  margin-bottom: 16rpx;
-  //}
+  //border-radius: 12rpx;
+  //padding: 16rpx;
  
   // 图片内容区
   .img-tab-content {
-    padding: 10rpx 0;
+    padding: 20rpx 15px ;
     min-height: 120rpx;
     display: flex;
     align-items: center;
@@ -403,15 +496,83 @@ onShow(() =&gt; {
   }
 }
  
-// 流程节点空状态
+// 流程节点区域（完整样式，确保内容可见）
 .process-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 400rpx;
+  //padding: 16rpx;
+  //min-height: 400rpx;
  
   .empty-process {
     margin-top: 100rpx;
   }
+
+  // 竖向步骤条容器样式
+  .vertical-steps {
+    //width: 100%;
+    background-color: #fff;
+    padding: 20rpx;
+    border-radius: 12rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx; // 步骤项间距
+  }
+
+  // 自定义内容容器样式
+  .step-content-wrap {
+    width: 100%;
+    //padding: 10rpx 0;
+    box-sizing: border-box;
+
+    // 节点标题 + 操作人样式
+    .step-title {
+      font-size: 30rpx;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 12rpx;
+
+      .operator-name {
+        font-size: 30rpx;
+        font-weight: 600;
+        color: #333;
+        margin-left: 20rpx;
+      }
+    }
+
+    // 描述（时间 + 处理说明）样式
+    .step-desc {
+      font-size: 24rpx;
+      color: #666;
+      line-height: 1.6;
+      margin-bottom: 12rpx;
+
+      .time-line {
+        margin-bottom: 8rpx;
+
+        .processing-tag {
+          color: #f59e0b;
+          margin-left: 10rpx;
+        }
+      }
+
+      .reason-line {
+        word-break: break-all; // 长文本自动换行
+      }
+    }
+
+    // 相册容器样式
+    .step-album-wrap {
+      padding: 10rpx 0;
+
+      .step-album {
+        width: 100%;
+        max-width: 300rpx;
+      }
+
+      .no-img-tip {
+        font-size: 24rpx;
+        color: #999;
+        margin-top: 10rpx;
+      }
+    }
+  }
 }
 </style>
 \ No newline at end of file