1.组织架构表格拖动实现demo

loulijun2021

2023-01-06 c054516a38a2613a4e7399ba62694fbd99a606fe

1.组织架构表格拖动实现demo

 src/directive/el-drag-dialog/drag.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,77 @@
export default {
  bind(el, binding, vnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'

    // èŽ·å–原有属性 ie dom元素.currentStyle ç«ç‹è°·æ­Œ window.getComputedStyle(dom元素, null);
    const getStyle = (function() {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()

    dialogHeaderEl.onmousedown = (e) => {
      // é¼ æ ‡æŒ‰ä¸‹ï¼Œè®¡ç®—当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      const dragDomWidth = dragDom.offsetWidth
      const dragDomHeight = dragDom.offsetHeight

      const screenWidth = document.body.clientWidth
      const screenHeight = document.body.clientHeight

      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight

      // èŽ·å–到的值带px æ­£åˆ™åŒ¹é…æ›¿æ¢
      let styL = getStyle(dragDom, 'left')
      let styT = getStyle(dragDom, 'top')

      if (styL.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } else {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // é€šè¿‡äº‹ä»¶å§”托，计算移动的距离
        let left = e.clientX - disX
        let top = e.clientY - disY

        // è¾¹ç•Œå¤„理
        if (-(left) > minDragDomLeft) {
          left = -minDragDomLeft
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
          top = -minDragDomTop
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }

        // ç§»åŠ¨å½“前元素
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`

        // emit onDrag event
        vnode.child.$emit('dragDialog')
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}

 src/directive/el-drag-dialog/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
import drag from './drag'

const install = function(Vue) {
  Vue.directive('el-drag-dialog', drag)
}

if (window.Vue) {
  window['el-drag-dialog'] = drag
  Vue.use(install); // eslint-disable-line
}

drag.install = install
export default drag

 src/views/jcsz/zzjg.vue

@@ -85,8 +85,8 @@
            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
          >
            <template slot-scope="{row}">
              <div v-if="row[item.prop]==='D'">部门</div>
              <div v-else-if="row[item.prop]==='W'">车间</div>
              <div v-if="row[item.prop]==='D'&&row.description">部门</div>
              <div v-else-if="row[item.prop]==='W'&&row.description">车间</div>
              <div v-else-if="row[item.prop]===null">/</div>
              <div v-else>{{ row[item.prop] }}</div>
            </template>
@@ -191,6 +191,7 @@
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
@@ -258,6 +259,7 @@
import { getCookie } from '@/utils/auth'
import { validateCode } from '@/utils/global'
import TableColumnSettings from '@/components/TableColumnSettings'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui

// const SER_HZ = /^[\u4e00-\u9fa5]+$/
// const SER_HZ = /^[a-zA-Z0-9_;,.<>() ]{0,}$/
@@ -266,7 +268,7 @@
  components: {
    Pagination, TableColumnSettings
  },

  directives: { elDragDialog },
  data() {
    // const validateName = (rule, value, callback) => {
    //   if (!value) {

 src/views/scgl/gdplgb.vue

@@ -124,6 +124,8 @@
              <div v-if="row.status==='NEW'">新工单</div>
              <!--              <div v-if="row.status==='CREATING'">执行中</div>-->
              <!--              <div v-if="row.status==='CREATED'">已关闭</div>-->
              <div v-if="row.status==='NOSCHED'">未排程</div>
              <div v-if="row.status==='SCHED'">已排程</div>
              <div v-if="row.status==='ALLO'">已派发</div>
              <div v-if="row.status==='START'">开工</div>
              <div v-if="row.status==='CLOSED'">完工</div>
@@ -142,7 +144,12 @@
            show-tooltip-when-overflow
            sortable="custom"
            min-width="160"
          />
          >
            <template slot-scope="{row}">
              <div v-if="row.m_po">{{ row.m_po }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="wotype"
            label="单据类型"
@@ -195,21 +202,36 @@
            show-tooltip-when-overflow
            sortable="custom"
            width="110"
          />
          >
            <template slot-scope="{row}">
              <div v-if="row.good_qty">{{ row.good_qty }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="ng_qty"
            label="不良数量"
            show-tooltip-when-overflow
            sortable="custom"
            width="110"
          />
          >
            <template slot-scope="{row}">
              <div v-if="row.ng_qty">{{ row.ng_qty }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="bad_qty"
            label="报废数量"
            show-tooltip-when-overflow
            sortable="custom"
            width="110"
          />
          >
            <template slot-scope="{row}">
              <div v-if="row.bad_qty">{{ row.bad_qty }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="wkshp_name"
            show-tooltip-when-overflow