From 6b6b634f494165fd30e5b937a356f5873485a062 Mon Sep 17 00:00:00 2001
From: Lemon <1599456917@qq.com>
Date: Thu, 13 Feb 2025 18:07:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=80=8E=E5=8A=A0=E5=AE=A1=E7=90=86=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E4=B8=AD=E7=9A=84=E6=B5=81=E7=A8=8B=E5=9B=BE=20?=
 =?UTF-8?q?=E5=B0=8F=E6=89=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceSimpleViewer.vue    | 68 +++++++++++++++++--
 1 file changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
index 8d1d3fc6..afb152da 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -1,10 +1,19 @@
 <template>
   <div v-loading="loading" class="process-viewer-container">
-    <SimpleProcessViewer
-      :flow-node="simpleModel"
-      :tasks="tasks"
-      :process-instance="processInstance"
-    />
+    <div
+      ref="wrapperRef"
+      class="process-viewer-wrapper"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @mouseup="stopDrag"
+      @mouseleave="stopDrag"
+    >
+      <SimpleProcessViewer
+        :flow-node="simpleModel"
+        :tasks="tasks"
+        :process-instance="processInstance"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -25,6 +34,32 @@ const tasks = ref([])
 // 流程实例
 const processInstance = ref()
 
+const wrapperRef = ref<HTMLElement>()
+const isDragging = ref(false)
+const startX = ref(0)
+const startY = ref(0)
+const currentX = ref(0)
+const currentY = ref(0)
+
+const startDrag = (e: MouseEvent) => {
+  if (!wrapperRef.value) return
+  isDragging.value = true
+  startX.value = e.clientX - currentX.value
+  startY.value = e.clientY - currentY.value
+}
+
+const onDrag = (e: MouseEvent) => {
+  if (!isDragging.value || !wrapperRef.value) return
+  e.preventDefault()
+  currentX.value = e.clientX - startX.value
+  currentY.value = e.clientY - startY.value
+  wrapperRef.value.style.transform = `translate(${currentX.value}px, ${currentY.value}px)`
+}
+
+const stopDrag = () => {
+  isDragging.value = false
+}
+
 /** 监控模型视图 包括任务列表、进行中的活动节点编号等 */
 watch(
   () => props.modelView,
@@ -84,8 +119,7 @@ const setSimpleModelNodeTaskStatus = (
   // 审批节点
   if (
     simpleModel.type === NodeType.START_USER_NODE ||
-    simpleModel.type === NodeType.USER_TASK_NODE ||
-    simpleModel.type === NodeType.TRANSACTOR_NODE
+    simpleModel.type === NodeType.USER_TASK_NODE
   ) {
     simpleModel.activityStatus = TaskStatusEnum.NOT_START
     if (rejectedTaskActivityIds.includes(simpleModel.id)) {
@@ -171,4 +205,24 @@ const setSimpleModelNodeTaskStatus = (
 </script>
 
 <style lang="scss" scoped>
+.process-viewer-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+
+  .process-viewer-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-width: 100%;
+    min-height: 100%;
+    cursor: grab;
+    user-select: none;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
 </style>