mt-ui-components-vue3/es/DataTable/util.js

玛果添实UI组件库(Vue3)

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
var _excluded = ["_uuid", "index", "_sortIndex"];
import Sortable from 'sortablejs';
import { cloneDeep, isArray, omit, uniqueId } from 'lodash-es';
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import '@vueuse/core';
export var draggableClassName = 'draggable-item';
export var sortTableHandle = function sortTableHandle(ele, _onEnd) {
  var sortTable = new Sortable(ele, {
    handle: ".".concat(draggableClassName),
    draggable: '.ant-table-row',
    animation: 200,
    ghostClass: 'draggable-ghost',
    sort: true,
    onEnd: function onEnd(_ref) {
      var oldIndex = _ref.oldIndex,
        newIndex = _ref.newIndex;
      _onEnd(oldIndex, newIndex);
    }
  });
  return sortTable;
};
/**
 * 方向操作
 */
export var useDirection = function useDirection(cb) {
  var keyDown = function keyDown(e) {
    // 判断当前标签页状态, 标签未激活禁止操作
    var isHidden = document.hidden;
    if (isHidden) return;
    var keyCode = e.keyCode;
    switch (keyCode) {
      case 37:
        cb('left');
        break;
      case 38:
        cb('up');
        break;
      case 39:
        cb('right');
        break;
      case 40:
      case 13:
        cb('down');
        break;
    }
  };
  onMounted(function () {
    document.addEventListener('keydown', keyDown);
  });
  onBeforeUnmount(function () {
    document.removeEventListener('keydown', keyDown);
  });
};
export var getUUID = function getUUID() {
  return uniqueId('control');
};
export var setUUIDbyDataSource = function setUUIDbyDataSource(data) {
  return isArray(data) ? cloneDeep(data).map(function (item, index) {
    if (item._sortIndex === undefined) {
      item['_sortIndex'] = index;
    }
    if (item._uuid) {
      return item;
    } else {
      var uuid = getUUID();
      return _objectSpread(_objectSpread({}, item), {}, {
        index: index + 1,
        _uuid: uuid
      });
    }
  }) : data;
};
export var cleanUUIDbyData = function cleanUUIDbyData(data) {
  return isArray(data) ? cloneDeep(data).map(function (item) {
    var _uuid = item._uuid,
      index = item.index,
      _sortIndex = item._sortIndex,
      extra = _objectWithoutProperties(item, _excluded);
    return extra;
  }) : data;
};
export var initControlDataSource = function initControlDataSource() {
  var controlDataMap = ref(new Map());
  var setControlData = function setControlData(data) {
    if (isArray(data)) {
      controlDataMap.value.clear();
      data.forEach(function (item) {
        if (item._uuid) {
          controlDataMap.value.set(item._uuid, omit(item, ['_uuid']));
        }
      });
    }
  };
  var getControlData = function getControlData(record) {
    var _uuid = record._uuid;
    if (_uuid && controlDataMap.value.has(_uuid)) {
      return controlDataMap.value.get(_uuid);
    }
    return undefined;
  };
  return {
    setControlData: setControlData,
    getControlData: getControlData
  };
};
export var getElData = function getElData(target) {
  var _target$className;
  var currentEl = target;
  var off = true;
  var position = [];
  if (!target || !(target !== null && target !== void 0 && target.className) || !(target !== null && target !== void 0 && (_target$className = target.className) !== null && _target$className !== void 0 && _target$className.includes)) return [];
  if (target.className.includes('ant-table-cell')) {
    var _target$querySelector;
    var _dataset = (_target$querySelector = target.querySelector('.j-row-click')) === null || _target$querySelector === void 0 ? void 0 : _target$querySelector.dataset;
    position = ['td', Number(_dataset.index), _dataset.name];
  } else if (target.className.includes('j-row-click')) {
    var _dataset2 = target.dataset;
    position = ['td', Number(_dataset2.index), _dataset2.name];
  } else {
    while (off) {
      if (!currentEl.parentNode.className || currentEl.parentNode.className.includes('ant-table-cell')) {
        off = false;
      } else if (currentEl.parentNode.className.includes('j-row-click')) {
        off = false;
        var _dataset3 = currentEl.parentNode.dataset;
        position = ['td', Number(_dataset3.index), _dataset3.name];
      } else {
        currentEl = currentEl.parentNode;
      }
    }
  }
  return position;
};
export var useVirtualScrolling = function useVirtualScrolling(target, dataSource, height, cb) {
  var buffer = 200;
  var renderTable = ref([]);
  var currentData = ref(dataSource || []);
  var top = ref();
  var bottom = ref();
  var start = ref(0);
  var end = ref();
  var toTop = ref(0);
  var scrollBox = ref();
  var sizes = ref({});
  var itemHeight = 46;
  var offsetMap = computed(function () {
    var total = 0;
    var res = currentData.value.reduce(function (prev, current) {
      var key = current['_uuid'];
      prev[key] = total;
      var curSize = sizes.value[key] || itemHeight;
      total += curSize;
      return prev;
    }, {});
    return res;
  });
  var setTop = function setTop() {
    var _scrollBox$value;
    toTop.value = target.getBoundingClientRect().top - ((_scrollBox$value = scrollBox.value) === null || _scrollBox$value === void 0 ? void 0 : _scrollBox$value.getBoundingClientRect().top) + scrollBox.value.offsetTop;
  };
  var getItemOffsetTop = function getItemOffsetTop(index) {
    var item = currentData.value[index];
    if (item) {
      var key = item['_uuid'];
      return offsetMap.value[key] || 0;
    }
    return 0;
  };
  var updateSizes = function updateSizes() {
    var rows = target.querySelectorAll('.ant-table-row');
    Array.from(rows).forEach(function (row, index) {
      var item = renderTable.value[index];
      if (!item) return;
      // 计算表格行的高度
      var offsetHeight = row.offsetHeight;
      var key = item['_uuid'];
      if (sizes.value[key] !== offsetHeight) {
        sizes.value[key] = offsetHeight;
      }
    });
  };
  var calcRenderData = function calcRenderData() {
    var _top = scrollBox.value.scrollTop - toTop.value - buffer;
    var _bottom = scrollBox.value.scrollTop + scrollBox.value.offsetHeight + buffer - toTop.value;
    if (_bottom < height) {
      _bottom = height;
    }
    var _start;
    var _end;
    var l = 0;
    var r = currentData.value.length - 1;
    var mid = 0;
    while (l <= r) {
      mid = Math.floor((l + r) / 2);
      var mindVal = getItemOffsetTop(mid);
      if (mindVal < _top) {
        var mindNextVal = getItemOffsetTop(mid + 1);
        if (mindNextVal > _top) break;
        l = mid + 1;
      } else {
        r = mid - 1;
      }
    }
    _start = mid;
    _end = currentData.value.length - 1;
    for (var i = _start + 1; i < currentData.value.length; i++) {
      var offsetTop = getItemOffsetTop(i);
      if (offsetTop >= _bottom) {
        _end = i;
        break;
      }
    }
    if (_start % 2) {
      _start = _start - 1;
    }
    top.value = _top;
    bottom.value = _bottom;
    start.value = _start;
    end.value = _end;
    console.log(currentData.value);
    renderTable.value = currentData.value.slice(_start, _end + 1);
    cb === null || cb === void 0 ? void 0 : cb(renderTable.value);
  };
  var getItemSize = function getItemSize(index) {
    if (index <= -1) return 0;
    var item = currentData.value[index];
    if (item) {
      var key = item['_uuid'];
      return sizes.value[key] || itemHeight;
    }
    return itemHeight;
  };
  var calcPosition = function calcPosition() {
    var last = currentData.value.length - 1;
    var warpHeight = getItemOffsetTop(last) + getItemSize(last);
    var offsetTop = getItemOffsetTop(start.value);
    var tableEl = target.querySelector('.ant-table-body');
    if (!tableEl) return;
    if (!tableEl.warpEl) {
      var warpEl = document.createElement('div');
      var innerEl = document.createElement('div');
      warpEl.appendChild(innerEl);
      innerEl.appendChild(tableEl.children[0]);
      tableEl.insertBefore(warpEl, tableEl.firstChild);
      tableEl.warpEl = warpEl;
      tableEl.innerEl = innerEl;
    }
    if (tableEl.warpEl) {
      tableEl.warpEl.style.height = warpHeight + 'px';
      tableEl.innerEl.style.transform = "translateY(".concat(offsetTop, "px)");
    }
  };
  var onScroll = function onScroll() {
    // 移动选中状态项
    // 删除编辑项
    // 更新当前尺寸
    updateSizes();
    // 计算数据
    calcRenderData();
    // 计算位置
    calcPosition();
  };
  var initScroll = function initScroll() {
    scrollBox.value.addEventListener('scroll', onScroll);
    setTop();
    setTimeout(function () {
      onScroll();
    }, 2000);
  };
  var update = function update() {
    var newData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
    console.log('update');
    currentData.value = newData;
    setTop();
    onScroll();
  };
  if (height) {
    scrollBox.value = target === null || target === void 0 ? void 0 : target.querySelector('.ant-table-body');
    initScroll();
  }
  watch(dataSource, function () {
    console.log('dataSource');
    update(dataSource);
  }, {
    deep: true
  });
  return {
    update: update
  };
};