已办列表--查看流程记录弹框自由拖拽功能

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',

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' //权限控制
 

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
+    }
+  }
+})

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>