文档工具-文档对比-发起对比-列宽可拖拽

2023-02-08 11:33:45 +08:00
parent cc53d27d49
commit 5f66277542
3 changed files with 354 additions and 13 deletions
@@ -0,0 +1,278 @@
+import _ from 'lodash'
+
+const events = {
+  start: 'mousedown',
+  move: 'mousemove',
+  stop: 'mouseup'
+}
+let istableAll = [] // 单个页面存放多个表格的columns
+var tablecolumnsAll = []
+var tablecolumnsKey = ''
+let tableminColumn = [] // 存放设置最小宽的列及宽度
+const tableDragHandler = {
+  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() {
+        }
+      }
+    }
+  },
+  //销毁监听
+  tablebeforeDestroy() {
+    this.removeEvents()
+  },
+  methods: {
+    //鼠标开始拖拽
+    tablehandleMouseDown(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      this.tablehandleStart(e)
+    },
+
+    tablehandleStart(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.tablehandleMouseDown } }, [line])
+  }
+}
+const tableResizeHeaderOne = function(val, name ,minWidths) {
+  tablecolumnsAll = val
+  tablecolumnsKey = name
+  tableminColumn = minWidths
+  if(istableAll.indexOf(val) === -1){
+    istableAll.push(val)
+  }
+  return (h, props, children) => {
+    const { key, column, ...restProps } = props
+    let col = {}
+    // 处理多级表头
+    // col = getRenderCoL(key, val)
+    col = getRenderCoL(key, tablecolumnsAll)
+    let content = [].concat(children)
+    if (col) {
+      let handlerVNode;
+      if(tableminColumn && minWidths !== undefined && tableminColumn.length>0){
+        // 存放所有需要手动设置最小宽度的列的dataIndex
+        let colsdataIndex = []
+        tableminColumn.forEach((item)=>{
+          colsdataIndex.push(item[0].dataIndex)
+          handlerVNode = h(tableDragHandler, {
+            props: {
+              width: col.width,
+              minWidth: Math.min(item[1]),
+              column: col
+            }
+          }, [])
+          content = content.concat(
+            handlerVNode
+          )
+        })
+        // 不需要手动设置最小宽度的列
+        if(colsdataIndex.indexOf(col.dataIndex) === -1){
+          handlerVNode = h(tableDragHandler, {
+            props: {
+              width: col.width,
+              minWidth: Math.min(col.width, 100),
+              column: col
+            }
+          }, [])
+          content = content.concat(
+            handlerVNode
+          )
+        }
+      }else{
+        handlerVNode = h(tableDragHandler, {
+          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 tableResizeHeader = {
+  methods: {
+    tabledrag(columns, name ,minWidths) {
+      console.log(minWidths)
+      return {
+        header: {
+          // minWidths : 最小宽度 => [[需要设置的列,最小宽],[需要设置的列,最小宽],...]
+          cell: tableResizeHeaderOne(columns, name,minWidths)
+        }
+      }
+    }
+  }
+}
+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重写中（tableDragHandler方法）
+//可以用到构造的onResizeColumn方法（重新设置表头的宽度）
+export const tableResizeColumnProvide = {
+  name: 'ResizeColumnProvideMixin',
+  provide() {
+    return {
+      onResizeColumn: this.onResizeColumn
+    }
+  },
+
+  data() {
+    const onResizeColumn = throttle2(this._resizeColumn, 30)
+    return {
+      moving: false, //这个属性是为了在拖拽时 阻止表头触发排序的功能
+      onResizeColumn
+    }
+  },
+  methods: {
+    _resizeColumn(w, column) {
+      console.log(column)
+      istableAll.forEach(item=>{
+        item.forEach((i)=>{
+          if(i === column && i.dataIndex === column.dataIndex){
+            tablecolumnsAll = item
+          }
+        })
+      })
+      this.moving = true
+      let time = setTimeout(() => {
+        this.moving = false
+        clearTimeout(time)
+      }, 2000)
+      //在拖拽时找到对应表头 重新设置表头的宽度
+      let num = -1
+      let numOne = -1
+      for (let i = 0; i < tablecolumnsAll.length; i++) {
+        if (tablecolumnsAll[i].dataIndex === column.dataIndex) {
+          num = i
+          break
+        }
+        if (tablecolumnsAll[i].children && tablecolumnsAll[i].children.length > 0) {
+          for (let j = 0; j < tablecolumnsAll[i].children.length; j++) {
+            if (tablecolumnsAll[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) {
+        tablecolumnsAll[num].children[numOne].width = w
+      } else {
+        tablecolumnsAll[num].width = w
+      }
+      this[tablecolumnsKey] = tablecolumnsAll
+    }
+  }
+}
@@ -42,19 +42,7 @@
               </span>
                </a-row>
              </a-form>
-              <a-table
-                ref="table"
-                size="middle"
-                :components="drag(columns,'columns')"
-                :loading="loadingLeft"
-                :pagination="false"
-                :scroll="{x: '100%',y:340}"
-                rowKey="id"
-                :data-source="dataSourceLeft"
-                :row-selection="{ selectedRowKeys: selectedRowKeysLeft, onChange: onSelectChangeLeft,columnTitle:' ' }"
-                :columns="columns"
-              >
-              </a-table>
+              <table-left :tablecolumns='tablecolumns' :dataSourceLeft='dataSourceLeft' :loadingLeft='loadingLeft'  :selectedRowKeysLeft='selectedRowKeysLeft'  :onSelectChangeLeft='onSelectChangeLeft'></table-left>
              <div class="page">
                <a-pagination
                  :show-total="total => $t('total')+` ${total} `+$t('strip')"
@@ -177,10 +165,14 @@
  import { Base64 } from 'js-base64'
  import { mapGetters } from 'vuex'
  import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
+  import tableLeft from './tableLeft'

  export default {
    name: 'initiateDocumentComparison',
    mixins:[ResizeHeader, ResizeColumnProvide],
+    components:{
+      tableLeft
+    },
    data() {
      return {
        loading: false,
@@ -248,6 +240,44 @@
            width: 79
          }
        ],
+        tablecolumns: [
+          {
+            title: this.$t('number'),
+            align: 'left',
+            width: 70,
+            customRender: function(t, r, index) {
+              return parseInt(index) + 1
+            }
+          },
+          {
+            title: this.$t('standard'),
+            align: 'left',
+            ellipsis: true,
+            dataIndex: 'serialNumber',
+            width: 79
+          },
+          {
+            title: this.$t('title'),
+            align: 'left',
+            ellipsis: true,
+            dataIndex: 'title',
+            width: 79
+          },
+          {
+            title: this.$t('TextStatus'),
+            align: 'left',
+            ellipsis: true,
+            dataIndex: 'fileType',
+            width: 79
+          },
+          {
+            title: this.$t('fileName'),
+            align: 'left',
+            ellipsis: true,
+            dataIndex: 'fileName',
+            width: 79
+          }
+        ],
        dataSourceLeft: [],
        selectedRowKeysLeft: [],
        url: {
@@ -0,0 +1,33 @@
+<template>
+  <a-table
+    ref="table"
+    size="middle"
+    :components="tabledrag(tablecolumns,'tablecolumns')"
+    :loading="loadingLeft"
+    :pagination="false"
+    :scroll="{x: '100%',y:340}"
+    rowKey="id"
+    :data-source="dataSourceLeft"
+    :row-selection="{ selectedRowKeys: selectedRowKeysLeft, onChange: onSelectChangeLeft,columnTitle:' ' }"
+    :columns="tablecolumns"
+  >
+  </a-table>
+</template>
+
+<script>
+import { tableResizeHeader, tableResizeColumnProvide } from '@/mixins/tableheader'
+
+export default {
+  name: 'tableLeft',
+  mixins:[tableResizeHeader, tableResizeColumnProvide],
+  props:['tablecolumns',
+    'dataSourceLeft',
+    'loadingLeft',
+    'selectedRowKeysLeft',
+    'onSelectChangeLeft']
+}
+</script>
+
+<style scoped>
+
+</style>