eta_chart_front/src/hooks/sheet/useResizeTable.js

import { ref,nextTick } from 'vue';
import { isMobile } from '@/utils/utils';
import _ from 'lodash';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';


export function useResizeTable(refName) {
  const route = useRoute();

  const minThresholdColWid = 30,
    minThresholdColH = 30,
    moveToDistance=5;

  const MobileCellWID = '120px',MobileCellH = '40px';

  const columnsWArr = ref([])
  const rowsHArr = ref([])
  const dragging = ref(false)
  const dragState=ref({})
  const dragStateHeight = ref({}) 
  
  const handleMouseMove = _.throttle(function(e,rIndex,cIndex) {

    if(isMobile()) return

    // if(rIndex!==0 && cIndex!==0) return

    let target = e.target
    if (!dragging.value) {
        let rect = target.getBoundingClientRect();

        if (rect.width > 12 && rect.right - e.pageX < moveToDistance /* && rIndex===0 */) {
            e.target.style.cursor = 'col-resize'
        }else if (rect.height > 12 && rect.bottom - e.pageY < moveToDistance /* && cIndex===0 */) {
            e.target.style.cursor = 'row-resize'
        } else if (!dragging.value) {
            e.target.style.cursor = ''
        }
    }
  },20)


  const handleMouseDown = _.throttle(function(e,rIndex,cIndex) {
    if(isMobile()) return

    document.onselectstart = function() { return false; };//解决拖动会选中文字的问题

    if(e.button!=0){
      return
    }

    let rect = e.target.getBoundingClientRect();

    if (rect.width > 12 && rect.right - e.pageX < moveToDistance /* && rIndex===0 */) {
      // 开始拖拽
      // 当前拖拽的列所在的表格
      // 当前所在列（单元格）
      let thEL = e.target
      dragging.value = true

      thEL.classList.add('noclick')
      dragState.value = {
          startMouseLeft: e.clientX, // 鼠标开始的地方
          columnWidth: rect.width, // th开始拖拽的宽度
      }

      document.onselectstart = function () {
          return false
      }
      document.ondragstart = function () {
          return false
      }

      const endResize = (event) => {
        if(dragging.value){
            // 拖拽完毕
          const { startMouseLeft, columnWidth } = dragState.value;
          const columnWidthDiff = event.clientX - startMouseLeft;
          columnsWArr.value[cIndex] = Math.max(minThresholdColWid,columnWidthDiff + columnWidth)

          // console.log(columnsWArr.value[cIndex])
          // console.log(e.target.offsetWidth)
          e.target.style.width = columnsWArr.value[cIndex]

          let widthTotal=0
          columnsWArr.value.forEach((item)=>{
            widthTotal+=item
          })
          // console.log(widthTotal)
          //多出来的宽度
          let otherWidth=refName.value.offsetWidth-widthTotal;

          columnsWArr.value.forEach((item,colIndex)=>{
            if(colIndex!=cIndex){
              columnsWArr.value[colIndex]= Number(parseFloat(item + otherWidth/columnsWArr.value.length-1).toFixed(2))
            }
          })

          setTimeout(()=>{
            initTableCellsWid('change')
          },500)

          // event.target.style.cursor = ''

          dragging.value = false
          dragState.value = {}
        }
        document.removeEventListener('mouseup', endResize);
        document.onselectstart = null
        document.ondragstart = null
        thEL.classList.remove('noclick')
      }

      document.addEventListener('mouseup', endResize);
    }


    if (rect.height > 12 && rect.bottom - e.pageY < moveToDistance /* && cIndex===0 */) {
      let thEL = e.target
      dragging.value = true

      thEL.classList.add('noclick')
      dragStateHeight.value = {
          startMouseTop: e.clientY,
          columnHeight: rect.height, 
      }
      document.onselectstart = function () {
          return false
      }
      document.ondragstart = function () {
          return false
      }
  
      const endResize = (event) => {
        if(dragging.value){
          // 拖拽完毕
          const { startMouseTop, columnHeight } = dragStateHeight.value;
          const columnHeightDiff = event.clientY - startMouseTop
          rowsHArr.value[rIndex] = Math.max(minThresholdColH,columnHeightDiff + columnHeight)

          setTimeout(()=>{
            initTableCellsWid('change')
          },500)

          event.target.style.cursor = ''
          dragging.value = false
          dragStateHeight.value = {}
        }
        document.removeEventListener('mouseup', endResize);
        document.onselectstart = null
        document.ondragstart = null
        setTimeout(function () {
            thEL.classList.remove('noclick')
        }, 0)
      }
        document.addEventListener('mouseup', endResize);
    }
  },20)


  function initTableCellsWid(type='init',sceneConfig) {
    if(type=='init'){
      const { HeightList,WidthList } = sceneConfig;

      nextTick(()=>{
        const table = refName.value;
        if (table) {
          if(HeightList&&WidthList) {
            columnsWArr.value = WidthList.split(',').map(_ =>Number(_));
            rowsHArr.value = HeightList.split(',').map(_ =>Number(_));
            nextTick(() => {
              postSheetHeightMsg()
            })
            return
          }

          const rows=table.rows;
          const cells = table.rows[0].cells;
          let widthArr= Array.from(cells).map(cell => cell.offsetWidth);
          console.log(widthArr)

          let heightArr=Array.from(rows).map(row => row.offsetHeight);
          console.log(heightArr)
          
          columnsWArr.value=widthArr
          rowsHArr.value=heightArr
          
          nextTick(() => {
            postSheetHeightMsg()
          }) 
        }
      })
    }else if(type === 'change') {
      changeTableCellWidSave()
    }
  }

  function getSize(index,type) {
    if(type==='width'){
      return isMobile() ?  MobileCellWID : (columnsWArr.value[index]?`${columnsWArr.value[index]}px`:'')
    }else{
      return isMobile() ? MobileCellH : (rowsHArr.value[index]?`${rowsHArr.value[index]}px`:'20px')
    }
  }

  /* 初始化抛出渲染后的表格高度 */
  function postSheetHeightMsg(type="") {
      let ele = document.getElementsByClassName('sheet-show-wrapper')[0];
    
      let params = {
        height: ele.offsetHeight,
        code: route.query.code,
        uid: route.query.uid||""
      }
    
      window.parent.postMessage(params,'*')
      type==='update'&&ElMessage.success('更新样式成功')
  }

  /* 拖拽后抛出参数到外面存储  只在报告编辑页可保存*/
  function changeTableCellWidSave() {
    if(!route.query.sourceId || !route.query.uid) return
    let params = {
      type:'changeCol',
      code: route.query.code,
      sourceId: route.query.sourceId,
      uid: route.query.uid,
      columnsWArr:columnsWArr.value.map(_ =>_),
      rowsHArr:rowsHArr.value.map(_=>_)
    }
    console.log(params)
    window.parent.postMessage(params,'*')
  }

  return {
    columnsWArr,
    rowsHArr,
    handleMouseMove,
    handleMouseDown,
    initTableCellsWid,
    getSize,
    postSheetHeightMsg
  }
}