修改法规清单的拖动

jero-web/src/mixins/header.js

@@ -0,0 +1,229 @@
+import _ from 'lodash'
+
+const events = {
+  start: 'mousedown',
+  move: 'mousemove',
+  stop: 'mouseup'
+}
+var columnsAll = []
+var columnsKey = ''
+const DragHandler = {
+  name: 'nio-drag-handler',
+  //获取混入的方法（重新设置表头宽度）
+  inject: ['onResizeColumn'],
+  props: {
+    column: { type: Object, required: true },
+    minWidth: { type: Number, required: true }
+  },
+
+  data() {
+    return {
+      dragging: false,
+      thWidth: 0,// 列头的宽度，用于计算
+      startX: 0,
+      moveEvent: {
+        remove: function() {
+        }
+      },
+      stopEvent: {
+        remove: function() {
+        }
+      }
+    }
+  },
+  //销毁监听
+  beforeDestroy() {
+    this.removeEvents()
+  },
+  methods: {
+    //鼠标开始拖拽
+    handleMouseDown(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      this.handleStart(e)
+    },
+
+    handleStart(e) {
+      console.log(e)
+      this.dragging = true
+      this.removeEvents()
+      this.thWidth = this.$el.parentNode.getBoundingClientRect().width
+      if (e instanceof MouseEvent && e.which !== 1) {
+        return
+      }
+      if (e.stopPropagation) e.stopPropagation()
+      this.startX = e.pageX
+      this.moveEvent = addEventListenerWrap(document.documentElement, events.move, this.handleMove)
+      this.stopEvent = addEventListenerWrap(document.documentElement, events.stop, this.handleStop)
+    },
+
+    handleMove(e) {
+      this.updateWidth(e)
+    },
+    handleStop(e) {
+      this.dragging = false
+      this.updateWidth(e)
+      this.removeEvents()
+    },
+
+    updateWidth(e) {
+      let pageX = e.pageX
+      const tmpDeltaX = this.startX - pageX
+      let w = Math.max(this.thWidth - tmpDeltaX, this.minWidth)
+      w = Math.min(w, Infinity)
+      this.onResizeColumn(w, this.column)
+    },
+
+    removeEvents() {
+      this.moveEvent.remove()
+      this.stopEvent.remove()
+    }
+  },
+  //渲染div 绑定拖拽
+  render(h) {
+    const line = h('div', { class: 'nio-drag-handler-line' }, [])
+    return h('div', { class: 'nio-drag-handler', on: { mousedown: this.handleMouseDown } }, [line])
+  }
+}
+const ResizeHeaderOne = function(val, name) {
+  columnsAll = val
+  columnsKey = name
+  return (h, props, children) => {
+    const { key, column, ...restProps } = props
+    let col = {}
+    // 处理多级表头
+    col = getRenderCoL(key, val)
+    let content = [].concat(children)
+    if (col) {
+      const handlerVNode = h(DragHandler, {
+        props: {
+          width: col.width,
+          minWidth: Math.min(col.width, 100),
+          column: col
+        }
+      }, [])
+      content = content.concat(
+        handlerVNode
+      )
+    }
+    return h('th', {
+      key,
+      props: { col },
+      ...Object.assign({}, restProps, { class: (restProps.class || '') + ' nio-header-th' })
+    }, content)
+  }
+}
+export const ResizeHeader = {
+  methods: {
+    drag(columns, name) {
+      return {
+        header: {
+          cell: ResizeHeaderOne(columns, name)
+        }
+      }
+    }
+  }
+}
+const getRenderCoL = (key, tbCols) => {
+  let result = ''
+  _.forEach(tbCols, (item) => {
+    if (item.children) {
+      result = getRenderCoL(key, item.children)
+      return !result
+    } else {
+      const k = item.dataIndex || item.key
+      if (k === key) {
+        result = item
+        return false
+      }
+    }
+  })
+  return result
+}
+//拖拽的节流方法
+const throttle2 = (fn, delay) => {
+  let valid = true
+  return (...args) => {
+    if (!valid) {
+      return
+    }
+    valid = false
+    setTimeout(() => {
+      fn(...args)
+      valid = true
+    }, delay)
+  }
+}
+//对table组件进行重构的核心方法组件
+
+
+//监听鼠标移动的方法
+function addEventListenerWrap(target, eventType, cb) {
+  if (target && target.addEventListener) {
+    target.addEventListener(eventType, cb)
+  }
+
+  return {
+    remove: () => {
+      if (target && target.removeEventListener) {
+        target.removeEventListener(eventType, cb)
+      }
+    }
+  }
+}
+
+//在table组件中混入的一个方法 provide => onResizeColumn
+//目的是在table重写中（DragHandler方法）
+//可以用到构造的onResizeColumn方法（重新设置表头的宽度）
+export const ResizeColumnProvide = {
+  name: 'ResizeColumnProvideMixin',
+  provide() {
+    return {
+      onResizeColumn: this.onResizeColumn
+    }
+  },
+
+  data() {
+    const onResizeColumn = throttle2(this._resizeColumn, 30)
+    return {
+      moving: false, //这个属性是为了在拖拽时 阻止表头触发排序的功能
+      onResizeColumn
+    }
+  },
+  methods: {
+    _resizeColumn(w, column) {
+      this.moving = true
+      let time = setTimeout(() => {
+        this.moving = false
+        clearTimeout(time)
+      }, 2000)
+      //在拖拽时找到对应表头 重新设置表头的宽度
+      let num = -1
+      let numOne = -1
+      for (let i = 0; i < columnsAll.length; i++) {
+        if (columnsAll[i].dataIndex === column.dataIndex) {
+          num = i
+          break
+        }
+        if (columnsAll[i].children && columnsAll[i].children.length > 0) {
+          for (let j = 0; j < columnsAll[i].children.length; j++) {
+            if (columnsAll[i].children[j].dataIndex === column.dataIndex) {
+              num = i
+              numOne = j
+              break
+            }
+          }
+        }
+      }
+      // const matchedIndex = columns.findIndex(item => item.dataIndex === column.dataIndex)
+      // console.log(matchedIndex)
+      // columns[matchedIndex].width = w
+      if (numOne > -1) {
+        columnsAll[num].children[numOne].width = w
+      } else {
+        columnsAll[num].width = w
+      }
+      this[columnsKey] = columnsAll
+    }
+  }
+}