@lambo-design-mobile/workflow-approve 1.0.0-beta.3 → 1.0.0-beta.30

package/src/WorkflowDiagram.vue

@@ -10,6 +10,16 @@
       <div class="containers">
         <div ref="canvas" class="canvas"></div>
       </div>
+      <div v-if="predictButtonEnabled" class="predict-toggle">
+        <van-button
+            type="primary"
+            size="small"
+            :loading="loadingFutureNodes"
+            @click="toggleNodeDisplay"
+        >
+          {{ showAllNodes ? '显示预测路线' : '显示设计路线' }}
+        </van-button>
+      </div>
 
       <!--审批流程追踪-->
       <div class="title-info">
@@ -18,75 +28,70 @@
       </div>
       <div v-if="auditData.length > 0">
         <div v-for="(item,index) in auditData" :key="index" class="record-item">
-          <van-cell center>
-            <template v-slot:icon>
-              <div
-                  v-if="['通过', '跳转指定节点'].includes(getAuditStatus(item.auditResult).text)"
-                  class="completed-icon">
-                <van-icon class="iconfont" class-prefix='icon' :name=getAuditStatus(item.auditResult).icon
-                          size="30px" color="#fff"/>
-              </div>
-              <div v-else class="pending-icon">
-                <van-icon class="iconfont" class-prefix='icon' :name=getAuditStatus(item.auditResult).icon
-                          size="30px" color="#fff"/>
-              </div>
-            </template>
-            <template v-slot:title>
-              <div :style="{ color: getAuditStatus(item.auditResult).color }"
-                   style="font-size: 16px;font-weight: bold;padding:5px 0;">
-                {{ item.auditName }}
-              </div>
-              <div>{{ item.taskName }}
-                <span v-if="item.auditComment" @click="showAuditDetail(item.auditComment)">
-               | 审批意见 <van-icon name="comment-circle-o"/>
-              </span>
-              </div>
-            </template>
-            <template v-slot:label>
-              <div>{{ item.auditDate }}</div>
-            </template>
-            <template v-slot:default>
-                        <span :style="{ color: getAuditStatus(item.auditResult).color }">{{
-                            getAuditStatus(item.auditResult).text
-                          }}</span>
-            </template>
-          </van-cell>
+          <flow-node-cell :node-detail="item"/>
         </div>
       </div>
       <div v-else>
         <van-empty description="暂无审批记录"/>
       </div>
-
       <!--审批详情弹出框-->
-      <van-dialog v-model="showTaskNodeDetail" title="审批详情">
-        <van-cell-group>
-
-          <van-field readonly input-align="right" label="审批节点：" :value="nodeDetail.taskName" />
-          <van-field readonly input-align="right" label="审批人：" :value="nodeDetail.auditName" />
-          <van-field readonly input-align="right" label="申请人：" :value="nodeDetail.applyUser ? nodeDetail.applyUser.split(':')[1] : '未定义'" />
-          <van-field readonly input-align="right" :label="nodeDetail.startDate ? '发起时间：':'审批时间：' "
-                     :value="nodeDetail.startDate ? nodeDetail.startDate : nodeDetail.auditDate" />
+      <van-dialog
+          v-model="showTaskNodeDetail"
+          :title="nodeDetailTitle"
+          :close-on-popstate="true"
+      >
+        <!-- 当前记录内容 -->
+        <van-cell-group inset v-if="currentRecord">
+          <van-field readonly input-align="right" label="审批节点：" :value="currentRecord.taskName" />
+          <van-field readonly input-align="right" label="审批人：" :value="currentRecord.auditName" />
+          <van-field readonly input-align="right" label="申请人："
+                     :value="currentRecord.applyUser ? currentRecord.applyUser.split(':')[1] : '未定义'" />
+          <van-field readonly input-align="right"
+                     :label="currentRecord.auditDate ? '审批时间：' : '发起时间：'"
+                     :value="currentRecord.auditDate || currentRecord.createTime" />
           <van-cell title="审批结果：" class="custom-cell" :border="false">
-            <template v-slot:default>
-              <van-tag :type="getAuditStatus(nodeDetail.auditResult).type">
-                {{ getAuditStatus(nodeDetail.auditResult).text }}
+            <template #default>
+              <van-tag :type="getAuditStatus(currentRecord.auditResult).type">
+                {{ getAuditStatus(currentRecord.auditResult).text }}
               </van-tag>
             </template>
           </van-cell>
-          <van-cell v-if="nodeDetail.auditComment" class="custom-cell"
-                    :border="false" title="审批意见："
-                    :value="nodeDetail.auditComment"></van-cell>
+          <van-cell v-if="currentRecord.auditComment" class="custom-cell" :border="false"
+                    title="审批意见：" :value="currentRecord.auditComment" />
         </van-cell-group>
+
+        <!-- 包含多条审批意见时可切换展示 -->
+        <div v-show="nodeDetailsList.length > 1" class="dialog-footer-arrows">
+          <van-button
+              round
+              size="small"
+              :disabled="currentIndex <= 0"
+              @click="prevRecord"
+              icon="arrow-left"
+          />
+          <span class="record-counter">{{ currentIndex + 1 }} / {{ nodeDetailsList.length }}</span>
+          <van-button
+              round
+              size="small"
+              :disabled="currentIndex >= nodeDetailsList.length - 1"
+              @click="nextRecord"
+              icon="arrow"
+          />
+        </div>
       </van-dialog>
     </div>
   </div>
 </template>
 <script>
 import Viewer from "bpmn-js/lib/Viewer";
-import {getHisAudit, getPrintData, printData} from "../api";
-import {Dialog} from "vant";
+import { Toast } from "vant";
+import {getHisAudit, getPrintData, printData, renderFutureNode, getNodeData} from "../api";
+import ApprovalNodeCell from "./ApprovalNodeCell.vue";
+import { getAuditStatus } from './js/global';
+import FlowNodeCell from "./FlowNodeCell.vue";  // 根据路径修改
 
 export default {
+  components: {FlowNodeCell, ApprovalNodeCell},
   props: {
     procId: {
       type: String,
@@ -96,6 +101,11 @@ export default {
       type: String,
       required: false,
     },
+    taskId: {
+      type: String,
+      required: false,
+      default: '',
+    },
     taskNode: {
       type: String,
       required: false,
@@ -104,24 +114,74 @@ export default {
       type: String,
       required: true,
     },
+    predictButtonEnabled: {
+      type: Boolean,
+      required: false,
+    },
   },
   mounted() {
+    if (this.predictButtonEnabled == null && this.taskNode){
+      getNodeData(this.procId, this.taskNode).then(resp => {
+        if (resp.data.code === '200') {
+          const data = resp.data.data[0]
+          this.predictButtonEnabled = data.handleButtons && data.handleButtons.includes("predictiveRoute")
+        }
+      })
+    }
     this.getPrintData()
-    this.getHisAudit()
+    // this.getHisAudit()
     this.onTrack()
   },
+  beforeDestroy() {
+    this.removeTouchGesture();
+    if (this.bpmnViewer) {
+      this.bpmnViewer.destroy();
+      this.bpmnViewer = null;
+    }
+  },
   data() {
     return {
       showTaskNodeDetail: false,
-      nodeDetail: {},
+      nodeDetailsList: [],
+      currentIndex: 0,
       auditData: [],
+      tableData: [],
+
+      bpmnViewer: null,
+      diagramReady: false,
+
+      // 预测路线相关状态
+      showAllNodes: true,
+      loadingFutureNodes: false,
+      futureNodeData: null,
+
+      // 已办/待办集合（用于预测路线显示时保留已执行路径）
+      doneLightSet: new Set(),
+      doneTaskSet: new Set(),
+      donePointIdSet: new Set(),
+      doneNodeIdSet: new Set(),
+      todoPointIdSet: new Set(),
+
+      // 触摸手势事件句柄（用于重复初始化时清理）
+      touchGestureHandlers: null,
+    }
+  },
+  computed: {
+    currentRecord() {
+      return this.nodeDetailsList[this.currentIndex];
+    },
+    nodeDetailTitle() {
+      return this.nodeDetailsList.length > 1 ? `审批详情（ ${this.currentIndex + 1}/ ${this.nodeDetailsList.length}）` : '审批详情'
     }
   },
   methods: {
+    getAuditStatus,
     getPrintData() {
       getPrintData(this.applyId, this.procId).then(resp => {
         if (resp.data.code === '200') {
-          this.tableData = resp.data.data
+          const data = Array.isArray(resp.data.data) ? resp.data.data : [];
+          this.tableData = data;
+          this.auditData = data;
         }
       })
     },
@@ -132,16 +192,317 @@ export default {
         }
       })
     },
-    onTrack() {
+
+    // 切换“设计路线 / 预测路线”显示
+    async toggleNodeDisplay() {
+      if (this.showAllNodes) {
+        const success = await this.loadFutureNodes();
+        if (!success) return;
+        this.showAllNodes = false;
+        this.$emit('toggle-predictive', {showPredictive: true, futureNodeData: this.futureNodeData});
+      } else {
+        this.showAllNodesInDiagram();
+        this.showAllNodes = true;
+        this.$emit('toggle-predictive', {showPredictive: false, futureNodeData: null});
+      }
+    },
+
+    // 加载未来节点（预测路线）数据
+    async loadFutureNodes() {
+      if (!this.instanceId || !this.taskId) {
+        Toast('缺少必要参数：流程实例ID或当前任务ID');
+        return false;
+      }
+      if (!this.diagramReady) {
+        Toast('流程图尚未加载完成，请稍后重试');
+        return false;
+      }
+
+      this.loadingFutureNodes = true;
+      try {
+        const resp = await renderFutureNode(this.instanceId, this.taskId);
+        if (resp.data.code === '200' && resp.data.data) {
+          const futureData = resp.data.data;
+          const currentNodeId = futureData.currentNodeId;
+          const elementRegistry = this.bpmnViewer && this.bpmnViewer.get('elementRegistry');
+          if (currentNodeId && elementRegistry) {
+            const currentElement = elementRegistry.get(currentNodeId);
+            if (currentElement && this.isElementInSubProcess(currentElement)) {
+              Toast('预测路线暂不支持子流程节点，请查看设计路线');
+              return false;
+            }
+          }
+          this.futureNodeData = futureData;
+          this.showFutureNodesOnly();
+          return true;
+        }
+        Toast.fail(`加载预测路线失败：${resp.data.message || '未知错误'}`);
+        return false;
+      } catch (error) {
+        Toast.fail(`加载预测路线失败：${error.message || '未知错误'}`);
+        return false;
+      } finally {
+        this.loadingFutureNodes = false;
+      }
+    },
+
+    // 只显示预测路线相关节点（并保留已办路径）
+    showFutureNodesOnly() {
+      if (!this.futureNodeData || !this.bpmnViewer) return;
+
+      const elementRegistry = this.bpmnViewer.get('elementRegistry');
+
+      // 获取所有元素
+      const allElements = elementRegistry.getAll();
+
+      // 从后端数据中提取节点和边信息
+      const {nodes = [], edges = [], futureNodeIds = []} = this.futureNodeData;
+
+      // 构建节点ID到节点数据的映射
+      const nodeMap = new Map();
+      nodes.forEach(node => {
+        nodeMap.set(node.id, node);
+      });
+
+      // 构建边ID到边数据的映射
+      const edgeMap = new Map();
+      edges.forEach(edge => {
+        edgeMap.set(edge.id, edge);
+      });
+
+      // 已办连线和节点集合（使用 Set 便于判断）
+      const doneLightSet = this.doneLightSet instanceof Set ? this.doneLightSet : new Set(this.doneLightSet || []);
+      const doneNodeSet = this.doneNodeIdSet instanceof Set ? this.doneNodeIdSet : new Set(this.doneNodeIdSet || []);
+      const hiddenNodeSet = new Set(this.futureNodeData.hiddenNodeIds || []);
+      const hiddenEdgeSet = new Set(this.futureNodeData.hiddenEdgeIds || []);
+
+      const futureNodeIdSet = new Set(futureNodeIds || []);
+      void futureNodeIdSet;
+
+      const visibleSubProcessIds = new Set(this.futureNodeData.visibleSubProcessIds || []);
+
+      // 遍历所有元素
+      allElements.forEach(element => {
+        const gfx = elementRegistry.getGraphics(element);
+        if (!gfx) return;
+
+        // 开始事件和结束事件
+        if (element.type === 'bpmn:StartEvent' || element.type === 'bpmn:EndEvent') {
+          const nodeData = nodeMap.get(element.id) || {};
+          const nodeFutureVisible = nodeData.hasOwnProperty('futureVisible')
+              ? nodeData.futureVisible
+              : !hiddenNodeSet.has(element.id);
+          const parentSubProcess = element.parent && element.parent.type === 'bpmn:SubProcess' ? element.parent : null;
+          const parentVisible = parentSubProcess ? visibleSubProcessIds.has(parentSubProcess.id) : true;
+          const parentDone = parentSubProcess && doneNodeSet.has(parentSubProcess.id);
+          if (parentSubProcess && !parentVisible && !parentDone) {
+            gfx.style.display = 'none';
+            return;
+          }
+          const shouldDisplay = nodeFutureVisible || doneNodeSet.has(element.id);
+          if (!shouldDisplay) {
+            gfx.style.display = 'none';
+            return;
+          }
+          gfx.style.display = '';
+          gfx.style.opacity = '1';
+          return;
+        }
+
+        // 处理任务节点
+        if (element.type === 'bpmn:UserTask' ||
+            element.type === 'bpmn:ServiceTask' ||
+            element.type === 'bpmn:Task' ||
+            element.type === 'bpmn:CallActivity') {
+
+          const nodeData = nodeMap.get(element.id) || {};
+          const nodeFutureVisible = nodeData.hasOwnProperty('futureVisible')
+              ? nodeData.futureVisible
+              : !hiddenNodeSet.has(element.id);
+          const parentId = nodeData.parentSubProcessId;
+          const parentIsDone = parentId && doneNodeSet.has(parentId);
+          const isDoneTask = doneNodeSet.has(element.id) || parentIsDone;
+          const shouldDisplay = nodeFutureVisible || isDoneTask;
+
+          if (!shouldDisplay) {
+            gfx.style.display = 'none';
+            return;
+          }
+
+          gfx.style.display = '';
+          gfx.style.opacity = '1';
+
+          if (nodeData.futureHighlight) {
+            const visualElement = gfx.querySelector('.djs-visual > :nth-child(1)');
+            if (visualElement) {
+              visualElement.style.stroke = '#FFD700';
+              visualElement.style.strokeWidth = '2px';
+            }
+          }
+        }
+
+        // 处理连线
+        if (element.type === 'bpmn:SequenceFlow') {
+          const edgeData = edgeMap.get(element.id) || {};
+
+          // 修改：严格判断连线是否已办，只有连线本身在 doneLightSet 中才视为已办
+          const isDoneLine = doneLightSet.has(element.id);
+
+          const edgeFutureVisible = edgeData.hasOwnProperty('futureVisible')
+              ? edgeData.futureVisible
+              : !hiddenEdgeSet.has(element.id);
+
+          if (!(edgeFutureVisible || isDoneLine)) {
+            gfx.style.display = 'none';
+            return;
+          }
+
+          gfx.style.display = '';
+          gfx.style.opacity = '1';
+
+          const shouldHighlight = edgeData.futureHighlight === true;
+          if (shouldHighlight) {
+            const canvas = this.bpmnViewer.get('canvas');
+            if (canvas && canvas.hasMarker(element.id, 'done-line')) {
+              canvas.removeMarker(element.id, 'done-line');
+            }
+            const visualElement = gfx.querySelector('.djs-visual > :nth-child(1)');
+            if (visualElement) {
+              visualElement.style.stroke = '#FFD700';
+              visualElement.style.strokeWidth = '2px';
+            }
+          }
+        }
+
+        // 处理网关节点
+        if (typeof element.type === 'string' && element.type.includes('Gateway')) {
+          const nodeData = nodeMap.get(element.id) || {};
+          const nodeFutureVisible = nodeData.hasOwnProperty('futureVisible')
+              ? nodeData.futureVisible
+              : !hiddenNodeSet.has(element.id);
+
+          // 检查是否同时连接到已办节点和预测路径上的节点
+          const hasIncomingDone = element.incoming?.some(conn => {
+            const source = conn.source;
+            return doneLightSet.has(conn.id) || (source && doneNodeSet.has(source.id));
+          });
+
+          const hasOutgoingFuture = element.outgoing?.some(conn => {
+            const target = conn.target;
+            const connData = edgeMap.get(conn.id) || {};
+            return connData.futureVisible || (target && nodeMap.get(target.id)?.futureVisible);
+          });
+
+          // 严格网关显示条件：预测可见 / 已办 / 同时连接已办与预测（避免孤立网关）
+          const shouldDisplay = nodeFutureVisible || doneNodeSet.has(element.id) || (hasIncomingDone && hasOutgoingFuture);
+          if (!shouldDisplay) {
+            gfx.style.display = 'none';
+            return;
+          }
+          gfx.style.display = '';
+          gfx.style.opacity = '1';
+          const visualElement = gfx.querySelector('.djs-visual > :nth-child(1)');
+          if (visualElement) {
+            if (nodeData.futureHighlight) {
+              visualElement.style.stroke = '#FFD700';
+              visualElement.style.strokeWidth = '2px';
+            } else {
+              visualElement.style.stroke = '#000000';
+              visualElement.style.strokeWidth = '2px';
+            }
+          }
+        }
+
+        // 处理子流程节点（SubProcess）
+        if (element.type === 'bpmn:SubProcess') {
+          const nodeData = nodeMap.get(element.id) || {};
+          const nodeFutureVisible = nodeData.hasOwnProperty('futureVisible')
+              ? nodeData.futureVisible
+              : visibleSubProcessIds.has(element.id);
+          const shouldDisplay = nodeFutureVisible || doneNodeSet.has(element.id);
+          if (!shouldDisplay) {
+            gfx.style.display = 'none';
+            return;
+          }
+          gfx.style.display = '';
+          gfx.style.opacity = '1';
+          const visualElement = gfx.querySelector('.djs-visual > :nth-child(1)');
+          if (visualElement) {
+            if (nodeData.futureHighlight) {
+              visualElement.style.stroke = '#FFD700';
+              visualElement.style.strokeWidth = '2px';
+            } else {
+              visualElement.style.stroke = '#000000';
+              visualElement.style.strokeWidth = '2px';
+            }
+          }
+        }
+
+        // 处理 label（如连线名称）
+        if (element.type === 'label' && element.labelTarget) {
+          const target = element.labelTarget;
+          const targetEdgeData = edgeMap.get(target.id) || {};
+          const futureLabelVisible = targetEdgeData.hasOwnProperty('futureLabelVisible')
+              ? targetEdgeData.futureLabelVisible
+              : false;
+          const targetIsDoneLine = doneLightSet.has(target.id);
+          gfx.style.display = (futureLabelVisible || targetIsDoneLine) ? '' : 'none';
+        }
+      });
+    },
+
+    // 恢复显示全部节点（设计路线）
+    showAllNodesInDiagram() {
+      if (!this.bpmnViewer) return;
+      this.futureNodeData = null;
+      this.showTaskNodeDetail = false;
+      this.nodeDetailsList = [];
+      this.currentIndex = 0;
+
+      // 重新加载流程图是最可靠的恢复方式（避免样式残留）
+      this.onTrack();
+    },
+
+    isElementInSubProcess(element) {
+      let parent = element && element.parent;
+      while (parent) {
+        if (parent.type === 'bpmn:SubProcess') {
+          return true;
+        }
+        parent = parent.parent;
+      }
+      return false;
+    },
+
+    removeTouchGesture() {
+      if (!this.touchGestureHandlers) return;
+      const {container, onTouchStart, onTouchMove, onTouchEnd} = this.touchGestureHandlers;
+      if (container) {
+        container.removeEventListener('touchstart', onTouchStart);
+        container.removeEventListener('touchmove', onTouchMove);
+        container.removeEventListener('touchend', onTouchEnd);
+      }
+      this.touchGestureHandlers = null;
+    },
+
+    async onTrack() {
+      this.removeTouchGesture();
+      if (this.bpmnViewer) {
+        this.bpmnViewer.destroy();
+        this.bpmnViewer = null;
+      }
+      this.diagramReady = false;
+
       // 初始化 Viewer
       this.bpmnViewer = new Viewer({
         container: this.$refs.canvas
       });
 
-      // 获取并加载流程数据
-      printData(this.applyId, this.instanceId, this.procId).then(async resp => {
-        let result = resp.data
-        if (result.code === '200') {
+      try {
+        // 获取并加载流程数据
+        const resp = await printData(this.applyId, this.instanceId, this.procId);
+        const result = resp && resp.data;
+        if (result && result.code === '200') {
           const bpmnXmlStr = result.data.processXml;
           await this.bpmnViewer.importXML(bpmnXmlStr);
 
@@ -149,48 +510,58 @@ export default {
           canvas.zoom('fit-viewport', 'auto');
           canvas.zoom(0.6); // 放大视图
 
-          //给流程节点添加固定样式
+          // 给流程节点添加固定样式
           this.doPrint(result.data.historicData);
+          this.diagramReady = true;
 
           // 添加手势缩放和移动功能
           this.addTouchGesture();
           // 监听元素点击事件
           this.addElementClickListener();
 
+          return;
         }
-      }).catch(err => {
-        console.error("Error fetching BPMN data:", err);
-      });
 
+        this.diagramReady = false;
+        Toast.fail(`加载流程图失败：${(result && result.message) || '未知错误'}`);
+      } catch (err) {
+        this.diagramReady = false;
+        console.error("Error fetching BPMN data:", err);
+        Toast.fail(`加载流程图失败：${err.message || '未知错误'}`);
+      }
     },
     doPrint(printData) {
-      const {doneLightSet, donePointSet, doneTaskSet, todoPointSet} =
-          printData;
+      const {doneLightSet, donePointSet, doneTaskSet, todoPointSet} = printData || {};
+
+      // 保存已办连线和节点集合，供预测路线显示时使用
+      this.doneLightSet = new Set(doneLightSet || []);
+      this.doneTaskSet = new Set(doneTaskSet || []);
+      this.donePointIdSet = new Set(donePointSet || []);
+      this.doneNodeIdSet = new Set([
+        ...this.doneTaskSet,
+        ...this.donePointIdSet
+      ]);
+      this.todoPointIdSet = new Set(todoPointSet || []);
+
       const canvas = this.bpmnViewer.get("canvas");
       const elementRegistry = this.bpmnViewer.get('elementRegistry');
       elementRegistry.filter((item) => item.type === 'bpmn:UserTask');
-      for (let k in doneLightSet) {
-        if (doneLightSet[k]) {
-          canvas.addMarker(doneLightSet[k], "done-line");
-        }
+      for (const id of this.doneLightSet) {
+        if (id) canvas.addMarker(id, "done-line");
       }
-      for (let k in donePointSet) {
-        if (donePointSet[k]) {
-          canvas.addMarker(donePointSet[k], "done-point");
-        }
+      for (const id of this.donePointIdSet) {
+        if (id) canvas.addMarker(id, "done-point");
       }
-      for (let k in doneTaskSet) {
-        if (doneTaskSet[k]) {
-          canvas.addMarker(doneTaskSet[k], "done-task");
-        }
+      for (const id of this.doneTaskSet) {
+        if (id) canvas.addMarker(id, "done-task");
       }
-      for (let k in todoPointSet) {
-        if (todoPointSet[k]) {
-          canvas.addMarker(todoPointSet[k], "todo-point");
-        }
+      for (const id of this.todoPointIdSet) {
+        if (id) canvas.addMarker(id, "todo-point");
       }
     },
     addTouchGesture() {
+      if (!this.bpmnViewer) return;
+      this.removeTouchGesture();
       const canvas = this.bpmnViewer.get('canvas');
       const container = this.$refs.canvas;
       let initialDistance = null;
@@ -203,7 +574,7 @@ export default {
         return Math.sqrt(dx * dx + dy * dy);
       };
 
-      container.addEventListener('touchstart', (event) => {
+      const onTouchStart = (event) => {
         if (event.touches.length === 2) {
           initialDistance = calculateDistance(event.touches[0], event.touches[1]);
         } else if (event.touches.length === 1) {
@@ -213,9 +584,9 @@ export default {
           };
           isPanning = true;
         }
-      });
+      };
 
-      container.addEventListener('touchmove', (event) => {
+      const onTouchMove = (event) => {
         if (event.touches.length === 2 && initialDistance !== null) {
           const currentDistance = calculateDistance(event.touches[0], event.touches[1]);
           const zoomFactor = currentDistance / initialDistance;
@@ -245,60 +616,62 @@ export default {
 
           event.preventDefault(); // 阻止默认的触摸事件
         }
-      });
+      };
 
-      container.addEventListener('touchend', () => {
+      const onTouchEnd = () => {
         initialDistance = null; // 重置初始距离
         isPanning = false; // 停止平移
-      });
+      };
+
+      container.addEventListener('touchstart', onTouchStart);
+      container.addEventListener('touchmove', onTouchMove);
+      container.addEventListener('touchend', onTouchEnd);
+
+      this.touchGestureHandlers = {container, onTouchStart, onTouchMove, onTouchEnd};
     },
     addElementClickListener() {
       const eventBus = this.bpmnViewer.get('eventBus');
       eventBus.on('element.click', (event) => {
         const elementId = event.element.id;
-        // 假设 this.tableData 包含了所有节点的详细信息
-        for (const item of this.tableData) {
-          if (item.taskNode === elementId) {
-            console.log(item);
-            this.showTaskNodeDetail = true;
-            this.nodeDetail = item;
-            break;
-          }
+        const tableData = Array.isArray(this.tableData) ? this.tableData : [];
+        let matchedRecords = tableData.filter(item => item.taskNode === elementId);
+
+        if (matchedRecords.length > 0) {
+          const getTime = (record) => {
+            const timeStr = record.auditDate || record.startDate || record.createTime;
+            return new Date(timeStr).getTime();
+          };
+
+          matchedRecords.sort((a, b) => getTime(a) - getTime(b));
+
+          this.nodeDetailsList = matchedRecords;
+          this.currentIndex = matchedRecords.length - 1;
+          this.showTaskNodeDetail = true;
         }
       });
-
     },
-    getAuditStatus(auditResult) {
-      const statusMap = {
-        '30': {text: '通过', icon: "tongguo", color: '#0d88ff', type: 'success'},
-        '40': {text: '驳回上一节点', icon: "bohui", color: '#ed4014', type: 'danger'},
-        '50': {text: '驳回到原点', icon: "bohui", color: '#ed4014', type: 'danger'},
-        '51': {text: '流程作废', icon: "liuchengzuofei", color: '#ed4014', type: 'danger'},
-        '60': {text: '撤回', icon: "chehui", color: '#ed4014', type: 'warning'},
-        '80': {text: '跳转指定节点', icon: "tiaozhuan", color: '#0d88ff', type: 'primary'},
-        '90': {text: '驳回指定节点', icon: "bohui", color: '#ed4014', type: 'primary'},
-      };
-      return {
-        text: (statusMap[auditResult] && statusMap[auditResult].text) || '待审批',
-        icon: (statusMap[auditResult] && statusMap[auditResult].icon) || 'daishenpi',
-        color: (statusMap[auditResult] && statusMap[auditResult].color) || '#ff9900',
-        type: (statusMap[auditResult] && statusMap[auditResult].type) || 'warning',
-      };
+    prevRecord() {
+      if (this.currentIndex > 0) {
+        this.currentIndex--;
+      }
+    },
+    nextRecord() {
+      if (this.currentIndex < this.nodeDetailsList.length - 1) {
+        this.currentIndex++;
+      }
     },
-    showAuditDetail(auditComment) {
-      Dialog.alert({
-        title: '审批意见',
-        message: auditComment,
-      }).then(() => {
-        // on close
-      });
-    }
   }
 }
 </script>
 <style scoped>
 @import 'styles/global.css';
 
+.predict-toggle {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+}
+
 .canvas {
   width: 100%;
   height: 250px;
@@ -356,38 +729,6 @@ export default {
   background-color: #0d88ff; /* 线条颜色 */
 }
 
-.completed-icon {
-  width: 45px; /* 自定义宽度 */
-  height: 45px; /* 自定义高度 */
-  background-clip: padding-box; /* 使背景不填充边框 */
-
-  border-radius: 50%;
-  margin-right: 15px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: linear-gradient(90deg, #0096FF, #1677FF);
-  border: 5px solid rgb(229, 244, 255); /* 半透明边框，颜色和背景色相同 */
-}
-
-.pending-icon {
-  width: 45px; /* 自定义宽度 */
-  height: 45px; /* 自定义高度 */
-  background-clip: padding-box; /* 使背景不填充边框 */
-
-  border-radius: 50%;
-  margin-right: 15px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: linear-gradient(90deg, #FF7E00, #FFA200);
-  border: 5px solid rgb(255, 245, 229); /* 半透明边框，颜色和背景色相同 */
-}
-
 
 .title-info {
   font-weight: bold;
@@ -408,4 +749,16 @@ export default {
   flex: 0 auto;
 }
 
-</style>
+.dialog-footer-arrows {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+}
+
+.dialog-footer-arrows .record-counter {
+  font-size: 14px;
+  color: #666;
+  margin: 0 12px;
+}
+</style>