前端: 增项申请、已入库列表的准入范围弹框可拖动

src/dashoo.cn/frontend_web/src/components/oilsupplier/businesslist.vue

@@ -53,7 +53,7 @@
       </el-pagination>
     </el-card>
 
-    <el-dialog v-loading="loading" element-loading-text="正在添加请稍后..." :title="Title" :visible.sync="visible" top="5vh">
+    <el-dialog v-dialogDrag v-loading="loading" element-loading-text="正在添加请稍后..." :title="Title" :visible.sync="visible" top="5vh">
       <el-alert
         style="margin-bottom: 5px"
         v-if="lostTableDataInfo.length > 0"
@@ -124,6 +124,7 @@
   import {
     mapGetters
   } from 'vuex'
+  import '@/utils/dialog.js'
   export default {
     name: 'EquipmentList',
     components: {},

src/dashoo.cn/frontend_web/src/components/oilsupplier/goodslist2.vue

@@ -108,6 +108,7 @@
     </el-card>
 
     <el-dialog title="物资类业务列表"
+               v-dialogDrag
                :close-on-click-modal="false"
                :visible.sync="goodsDialog"
                @open="opendialog"
@@ -285,7 +286,7 @@
     mapGetters
   } from 'vuex'
   import api from '@/api/oilsupplier/goodsaptitude'
-
+  import '@/utils/dialog.js'
   export default {
     name: 'GoodsList',
     components: {},

src/dashoo.cn/frontend_web/src/components/oilsupplier/techlist.vue

@@ -46,7 +46,7 @@
       </el-pagination>
     </el-card>
 
-    <el-dialog element-loading-text="正在添加请稍后..." title="服务类业务列表" :close-on-click-modal="false" :visible.sync="techDialog" top="5vh">
+    <el-dialog v-dialogDrag element-loading-text="正在添加请稍后..." title="服务类业务列表" :close-on-click-modal="false" :visible.sync="techDialog" top="5vh">
       <el-row style="margin-top: -10px">
         <el-col :span="12">
           <el-input v-model="keyword" placeholder="请输入名称或代码" size="mini" style="width: 250px;"></el-input>
@@ -108,7 +108,7 @@
   import {
     mapGetters
   } from 'vuex'
-
+  import '@/utils/dialog.js'
   export default {
     name: 'GoodsList',
     components: {},

src/dashoo.cn/frontend_web/src/pages/oilsupplier/supplierappend/_opera/basisdataopera.vue

@@ -647,7 +647,7 @@
       </div>
     </el-dialog>
     <!-- 增项分类添加、修改 -->
-    <el-dialog title="添加" :close-on-click-modal="false" :visible.sync="dialogVisible">
+    <el-dialog title="添加" v-dialogDrag :close-on-click-modal="false" :visible.sync="dialogVisible">
       <el-alert
         style="margin-bottom: 5px"
         v-if="lostTableDataInfo.length > 0"
@@ -891,6 +891,7 @@
   import Vue from 'vue'
   import Viewer from 'v-viewer'
   import 'viewerjs/dist/viewer.css'
+  import '@/utils/dialog.js'
   Vue.use(Viewer)
   Viewer.setDefaults({
     Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }

src/dashoo.cn/frontend_web/src/pages/oilsupplier/supplierappend/_opera/goodsdataopera.vue

@@ -727,6 +727,7 @@
     </el-dialog>
     <el-dialog
                element-loading-text="正在添加请稍后..."
+               v-dialogDrag
                title="物资类业务列表"
                :visible.sync="goodsDialog"
                @open="opendialogadd"
@@ -1087,6 +1088,7 @@
   import Vue from 'vue'
   import Viewer from 'v-viewer'
   import 'viewerjs/dist/viewer.css'
+  import '@/utils/dialog.js'
   Vue.use(Viewer)
   Viewer.setDefaults({
     Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }

src/dashoo.cn/frontend_web/src/pages/oilsupplier/supplierappend/_opera/techdataopera.vue

@@ -649,7 +649,7 @@
       </div>
     </el-dialog>
     <!-- 增项分类添加、修改 -->
-    <el-dialog title="添加" :close-on-click-modal="false" :visible.sync="dialogVisible" @open="opendialogadd">
+    <el-dialog v-dialogDrag title="添加" :close-on-click-modal="false" :visible.sync="dialogVisible" @open="opendialogadd">
       <el-form label-width="150px" ref="dialogFormData" v-loading="dialogloading" :rules="sortEntityFormRules" :model="dialogFormData">
         <el-row style="margin-top: -10px">
           <el-col :span="12">
@@ -893,6 +893,7 @@
   import Vue from 'vue'
   import Viewer from 'v-viewer'
   import 'viewerjs/dist/viewer.css'
+  import '@/utils/dialog.js'
   Vue.use(Viewer)
   Viewer.setDefaults({
     Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }

src/dashoo.cn/frontend_web/src/utils/dialog.js

@@ -0,0 +1,49 @@
+import Vue from 'vue'
+
+// v-dialogDrag: 弹窗拖拽
+Vue.directive('dialogDrag', {
+  bind (el, binding, vnode, oldVnode) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style.cursor = 'move'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      // 获取到的值带px 正则匹配替换
+      let styL, styT
+
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
+      } else {
+        styL = +sty.left.replace(/\px/g, '')
+        styT = +sty.top.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function (e) {
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        const t = e.clientY - disY
+
+        // 移动当前元素
+        dragDom.style.left = `${l + styL}px`
+        dragDom.style.top = `${t + styT}px`
+
+        // 将此时的位置传出去
+        // binding.value({x:e.pageX,y:e.pageY})
+      }
+
+      document.onmouseup = function (e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+})