修改法规清单的拖动

jero-web/package.json

@@ -27,6 +27,7 @@
     "js-base64": "^3.7.2",
     "js-cookie": "^2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "lodash": "^4.17.21",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "mammoth": "^1.4.21",

jero-web/src/assets/less/common.less

@@ -99,6 +99,26 @@
   line-height: 38px;
 }
 
-.ant-table-fixed-left table, .ant-table-fixed-right table .ant-table-fixed{
+.ant-table-fixed-left table, .ant-table-fixed-right table .ant-table-fixed {
   width: min-content;
+}
+
+.nio-header-th {
+  position: relative;
+  isolation: isolate;
+}
+
+.nio-drag-handler {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 1px;
+  z-index: 1;
+  border-left: 1px #e8e8e8 solid;
+}
+.nio-drag-handler:hover,
+.nio-drag-handler:focus{
+  cursor: col-resize!important;
+  border: 1px solid #0bd9d9!important;
 }

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

jero-web/src/views/projectManagement/components/listOfRegulations.vue

@@ -202,6 +202,7 @@
     <div style="width: 100%">
       <a-table
         ref="table"
+        :components="drag(columns,'columnsAll')"
         class="tableList"
         :loading="loading"
         :pagination="false"
@@ -462,6 +463,7 @@
   import globalAdvancedQuery from '@/components/globalAdvancedQuery/index'
   import batchSettingPersonnel from './batchSettingPersonnel'
   import { getAction, postAction, downloadFile, deleteAction } from '@/api/manage'
+  import {ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
   import moment from 'moment'
   import { mapGetters } from 'vuex'
   import { Base64 } from 'js-base64'
@@ -481,6 +483,7 @@
       batchSettingPersonnel,
       listOfRegulationsView
     },
+    mixins: [ResizeColumnProvide,ResizeHeader],
     data() {
       return {
         roleSwitchingList: [],
@@ -1002,7 +1005,7 @@
       })
       if (this.areaOfResponsibilityList && this.areaOfResponsibilityList.dutyTerritory) {
         this.queryParam.dutyTerritory = this.areaOfResponsibilityList.dutyTerritory
-        this.queryParam = {...this.queryParam}
+        this.queryParam = { ...this.queryParam }
       }
       // } else {
       //   this.isDisplay = false
@@ -2502,7 +2505,7 @@
     overflow: scroll !important;
   }
 </style>
-<style>
+<style lang="less">
   .box-input .ant-select-selection {
     height: 38px !important;
   }
@@ -2535,4 +2538,20 @@
   .tableList .ant-table-thead > tr > th {
     padding: 7px 16px !important;
   }
+</style>
+<style lang="less">
+  /* vue-draggable-resizable@2.1.0 begin */
+  .resize-table-th {
+    position: relative;
+    overflow: hidden;
+  }
+  .resize-table-th .table-draggable-handle {
+    height: 100% !important;
+    bottom: 0;
+    left: auto !important;
+    right: -5px;
+    cursor: col-resize;
+    touch-action: none;
+  }
+  /* 插件 end */
 </style>