From fbe6120ae9abd3455b0a95c9844104c49649e200 Mon Sep 17 00:00:00 2001
From: yunuo970428 <405378304@qq.com>
Date: Mon, 7 Apr 2025 16:56:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=B2=E5=8A=9E=E5=88=97=E8=A1=A8--=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E6=B5=81=E7=A8=8B=E8=AE=B0=E5=BD=95=E5=BC=B9=E6=A1=86?=
 =?UTF-8?q?=E8=87=AA=E7=94=B1=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/flow/flowRecord.vue        |  2 +-
 anrui-system-ui/src/main.js                   |  2 +
 anrui-system-ui/src/utils/dialog.js           | 69 +++++++++++++++++++
 anrui-system-ui/src/views/flow/doneList.vue   |  9 ++-
 4 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 anrui-system-ui/src/utils/dialog.js

diff --git a/anrui-system-ui/src/components/flow/flowRecord.vue b/anrui-system-ui/src/components/flow/flowRecord.vue
index 995d8fd645..e631743e63 100644
--- a/anrui-system-ui/src/components/flow/flowRecord.vue
+++ b/anrui-system-ui/src/components/flow/flowRecord.vue
@@ -66,7 +66,7 @@
   </div>
 </template>
 <script>
-import flow from '@C/flow/flow'
+import flow from './flow'
 
 export default {
   name: 'flowRecords',
diff --git a/anrui-system-ui/src/main.js b/anrui-system-ui/src/main.js
index d1e34cf2ce..a9ed2579e2 100644
--- a/anrui-system-ui/src/main.js
+++ b/anrui-system-ui/src/main.js
@@ -17,6 +17,8 @@ import App from './App'
 import store from './store'
 import router from './router'
 
+import '@/utils/dialog.js'
+
 import '@/icons' // icon
 //import '@/permission' //权限控制
 
diff --git a/anrui-system-ui/src/utils/dialog.js b/anrui-system-ui/src/utils/dialog.js
new file mode 100644
index 0000000000..00d52efd86
--- /dev/null
+++ b/anrui-system-ui/src/utils/dialog.js
@@ -0,0 +1,69 @@
+import Vue from 'vue'
+
+Vue.directive('dialogDrag', {
+  bind: (el) => {
+    // 获取弹框标题区域DOM节点
+    const headerDOM = el.querySelector('.el-dialog__header')
+    // 修改鼠标图标样式
+    headerDOM.style.curser = 'move'
+    // 禁止拖拽时选中标题文本内容
+    headerDOM.style.userSelect = 'none'
+    // 获取弹框区域DOM节点
+    const dialogDOM = el.querySelector('.el-dialog')
+    let isDown = false, // 是否按下
+      // 鼠标按下时坐标位置
+      clientX = 0,
+      clientY = 0,
+      // 按下时弹框位置
+      dialogLeft = 0,
+      dialogTop = 0
+    // 定义函数判断当前是否在可见范围内
+    function boundingRange() {
+      const bounding = dialogDOM.getBoundingClientRect()
+      return {
+        top: bounding.top >= 0, // 表示顶部在可见范围内
+        left: bounding.left >= 0, // 表示左侧在可见范围内
+        right: bounding.left < window.innerWidth - bounding.width, // 表示右侧在制定范围内
+        bottom: bounding.top < window.innerHeight - bounding.height // 表示底部在制定范围内
+      }
+    }
+    function update(e) {
+      // 获取当前鼠标按钮位置坐标
+      clientX = e.clientX
+      clientY = e.clientY
+      // 获取弹框位置
+      dialogLeft = isNaN(parseFloat(dialogDOM.style.left)) ? 0 : parseFloat(dialogDOM.style.left)
+      dialogTop = isNaN(parseFloat(dialogDOM.style.top)) ? 0 : parseFloat(dialogDOM.style.top)
+    }
+    // 监听鼠标按下事件
+    headerDOM.onmousedown = e => {
+      isDown = true
+      update(e)
+    }
+    // 监听鼠标移动事件
+    headerDOM.onmousemove = e => {
+      // 不按下时执行移动操作
+      if (isDown) {
+        // 获取DOM边界范围
+        const range = boundingRange()
+        // 获取当前
+        const distX = e.clientX - clientX
+        const distY = e.clientY - clientY
+        // 判断左侧或右侧是否可移动
+        if ((range.left && distX < 0) || range.right && distX > 0) {
+          dialogDOM.style.left = (dialogLeft + distX) + 'px'
+        }
+        if ((range.top && distY < 0) || range.bottom && distY > 0) {
+          dialogDOM.style.top = (dialogTop + distY) + 'px'
+        }
+        update(e)
+      }
+    }
+    headerDOM.onmouseup = e => {
+      isDown = false
+    }
+    window.onmouseup = () => {
+      isDown = false
+    }
+  }
+})
diff --git a/anrui-system-ui/src/views/flow/doneList.vue b/anrui-system-ui/src/views/flow/doneList.vue
index 60ae28e8c4..aa8ef81603 100644
--- a/anrui-system-ui/src/views/flow/doneList.vue
+++ b/anrui-system-ui/src/views/flow/doneList.vue
@@ -102,7 +102,7 @@
     <!-- End查看页面-->
 
     <!-- 编辑信息 -->
-    <el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle">
+    <el-dialog v-dialog-drag title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle" :close-on-click-modal="false">
       <!--流程流转记录-->
       <div style="text-align: right">
         <el-button type="primary" size="small" @click="handleComment">评论</el-button>
@@ -498,7 +498,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .scroll_div {
   height: 500px;
   overflow-y: scroll;
@@ -548,6 +548,9 @@ export default {
   margin: 0;
 }
 .dialogStyle /deep/ .el-dialog__body {
-  padding-top: 0px !important;
+  padding-top: 1px !important;
+}
+/deep/ .dialogStyle .el-dialog__header {
+  background-color: #cccccc;
 }
 </style>