vue-ant-patterns/es/d-auto-table/index.js

vue-ant-patterns

import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _extends from 'babel-runtime/helpers/extends';
/*
 * @Author: w.pengfei
 * @Date: 2020-10-13 18:20:14
 * @LastEditTime: 2021-05-20 14:57:01
 * @Description: ''
 * @LastEditors: w.pengfei
 */
import ResizeObserver from 'resize-observer-polyfill';
import Table from 'ant-design-vue/es/table';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import raf from 'ant-design-vue/es/_util/raf';
import classnames from 'classnames';
import DContainer from '../d-container';
var Vertical = DContainer.Vertical,
    Horizontal = DContainer.Horizontal;


var RESIZE_STATUS_NONE = 0;
var RESIZE_STATUS_RESIZING = 1;
var RESIZE_STATUS_RESIZED = 2;

var widgetSizeMaps = {
  small: {
    header: 36,
    pagination: 60
  },
  middle: {
    header: 48,
    pagination: 60
  },
  'default': {
    header: 54,
    pagination: 68
  },
  large: {
    header: 54,
    pagination: 68
  }
};

var depotCls = 'depot';

var AutoTable = {
  name: 'DAutoTable',
  props: _extends({}, Table.props, {
    size: PropTypes.oneOf(['default', 'middle', 'small', 'large']).def('small'),
    isAutoHeight: PropTypes.bool.def(true),
    customComponent: PropTypes.any.def('d-table'),
    /**
     * 是否是斑马线显示表格
     */
    tableStriped: PropTypes.bool.def(false),
    /**
     * 是否隐藏多选后表格上方出现选中项的详细信息，默认显示
     */
    hideSelectedAlert: PropTypes.bool.def(false),
    /**
     * 用于查看选中项显示的标签名字，如果不传，默认从 columns 前往后取非操作的第一列名显示
     */
    rowTitle: PropTypes.string.def('')
  }),
  beforeDestroy: function beforeDestroy() {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
      this.resizeObserver = null;
    }
    raf.cancel(this.nextFrameActionId);
    raf.cancel(this.resizeFrameId);
  },
  created: function created() {
    if (this.isAutoHeight) {
      this.isAnyColumnsFixed();
      this.isAnyColumnsLeftFixed();
      this.isAnyColumnsRightFixed();
    }
  },
  data: function data() {
    var _$props = this.$props,
        response = _$props.response,
        scroll = _$props.scroll;

    var y = scroll ? scroll.y : undefined;
    var isNumY = false;
    if (y !== undefined && y !== null && typeof y !== 'boolean' && (typeof y === 'number' || typeof Number(y) === 'number')) {
      isNumY = true;
    }
    var isPagination = this.hasPagination();
    return {
      cached: {},
      height: 0,
      tableHeight: 0,
      isWin: response === 'window',
      resizeStatus: RESIZE_STATUS_NONE,
      oldHeight: 0,
      htmlOverflowY: '',
      bodyOverflowY: '',
      scrollTop: 0,
      scrollLeft: 0,
      isShowFooter: true,
      isNumY: isNumY,
      isPagination: isPagination
    };
  },
  mounted: function mounted() {
    var _this = this;

    if (this.isAutoHeight && !this.isNumY) {
      this.$nextTick(function () {
        _this.setHeight();
        _this.resizeObserver = new ResizeObserver(_this.handleResize);
        _this.resizeObserver.observe(_this.$el);

        var DAutoTable = _this.$refs.DAutoTable;

        if (DAutoTable) {
          _this.resizeObserverTable = new ResizeObserver(_this.handleResize);
          _this.resizeObserverTable.observe(DAutoTable.$el);
        }
      });
    }
  },

  watch: {
    height: function height(val) {
      this.$emit('resize', val);
    }
  },
  methods: {
    isAnyColumnsFixed: function isAnyColumnsFixed() {
      var columns = this.columns;

      if (!columns || !Array.isArray(columns)) return;
      return this._cache('isAnyColumnsFixed', function () {
        return columns.some(function (column) {
          return !!column.fixed;
        });
      });
    },
    isAnyColumnsLeftFixed: function isAnyColumnsLeftFixed() {
      var columns = this.columns;

      if (!columns || !Array.isArray(columns)) return;
      return this._cache('isAnyColumnsLeftFixed', function () {
        return columns.some(function (column) {
          return column.fixed === 'left' || column.fixed === true;
        });
      });
    },
    isAnyColumnsRightFixed: function isAnyColumnsRightFixed() {
      var columns = this.columns;

      if (!columns || !Array.isArray(columns)) return;
      return this._cache('isAnyColumnsRightFixed', function () {
        return columns.some(function (column) {
          return column.fixed === 'right';
        });
      });
    },
    _cache: function _cache(name, fn) {
      var cached = this.cached;

      if (name in cached) {
        return this.cached[name];
      }
      this.cached[name] = fn();
      return this.cached[name];
    },
    hasPagination: function hasPagination(props) {
      return (props || this.$props).pagination !== false;
    },
    getElSize: function getElSize() {
      var $el = this.$el;

      var sizeObj = $el.getBoundingClientRect();
      return sizeObj;
    },
    getWrapElHeight: function getWrapElHeight() {
      var sizeObj = this.getElSize();
      var tableSizeObj = this.getTableElSize();
      this.oldHeight = tableSizeObj ? parseInt(tableSizeObj.height) : parseInt(sizeObj.height);
      // this.oldHeight = parseInt(sizeObj.height);
    },
    getTableElSize: function getTableElSize() {
      var DAutoTable = this.$refs.DAutoTable;

      var sizeObj = null;
      if (DAutoTable) {
        sizeObj = DAutoTable.$el.getBoundingClientRect();
      }
      return sizeObj;
    },
    setHeight: function setHeight() {
      var isPagination = this.isPagination;
      var _$props2 = this.$props,
          _$props2$size = _$props2.size,
          size = _$props2$size === undefined ? 'small' : _$props2$size,
          pagination = _$props2.pagination,
          showHeader = _$props2.showHeader;

      var sizeMaps = widgetSizeMaps[size];
      var headerHeight = sizeMaps.header,
          paginationHeight = sizeMaps.pagination;


      var sizeObj = this.getElSize();
      var height = sizeObj.height;

      var DAutoTable = this.$refs.DAutoTable;


      var DTableSelectTagsBox = null;
      var selectBoxSize = null;

      if (DAutoTable) {
        DTableSelectTagsBox = DAutoTable.$refs['DTable-SelectTagsBox'];
      }

      if (DTableSelectTagsBox) {
        selectBoxSize = DTableSelectTagsBox.$el.getBoundingClientRect();
      }
      if (showHeader) {
        height = height - headerHeight;
        if (selectBoxSize) {
          height -= selectBoxSize.height;
        }
      }
      if (isPagination) {
        height = height - paginationHeight;
        if (pagination && pagination.position && pagination.position === 'both') {
          height = height - paginationHeight;
        }
      }
      height = parseInt(height);
      this.height = height;
      this.getWrapElHeight();
      this.isShowFooter = true;
    },
    setState: function setState() {
      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var callback = arguments[1];

      var newState = state;
      _extends(this.$data, newState);
      this.$forceUpdate();
      this.$nextTick(function () {
        callback && callback();
      });
    },
    resizeTable: function resizeTable() {
      var _this2 = this;

      var isAutoHeight = this.$props.isAutoHeight;

      if (isAutoHeight) {
        this.setState({ resizeStatus: RESIZE_STATUS_RESIZING }, function () {
          raf.cancel(_this2.resizeFrameId);
          _this2.resizeFrameId = raf(function () {
            _this2.setState({ resizeStatus: RESIZE_STATUS_NONE });
            _this2.setHeight();
          });
        });
      }
    },
    resizeOnNextFrame: function resizeOnNextFrame() {
      raf.cancel(this.nextFrameActionId);
      this.nextFrameActionId = raf(this.resizeTable);
    },
    handleResize: function handleResize(entries) {
      var resizeStatus = this.resizeStatus;
      var target = entries[0].target;

      var _target$getBoundingCl = target.getBoundingClientRect(),
          height = _target$getBoundingCl.height;

      if (resizeStatus !== RESIZE_STATUS_NONE) {
        return;
      }
      var fixedHeight = parseInt(height);
      if (parseInt(this.oldHeight) !== fixedHeight) {
        this.isShowFooter = false;
        this.resizeOnNextFrame();
      }
    },

    /**
     * 根据 pagination position 位置渲染 footer
     */
    renderFooter: function renderFooter(footer, paginationPosition) {
      var _classnames;

      var h = this.$createElement;
      var isPagination = this.isPagination,
          isShowFooter = this.isShowFooter;
      var _$props3 = this.$props,
          pagination = _$props3.pagination,
          size = _$props3.size;


      if (!isPagination) return null;
      var position = pagination.position || 'bottom';
      var isRender = position === paginationPosition || position === 'both';
      var isTop = paginationPosition === 'top';

      var footerProps = {
        'class': classnames((_classnames = {}, _defineProperty(_classnames, depotCls + '-auto-table-footer', 1), _defineProperty(_classnames, depotCls + '-auto-table-footer-' + size, 1), _defineProperty(_classnames, depotCls + '-auto-table-footer-top', position === 'both' && isTop), _classnames))
      };

      return isRender && isShowFooter ? h(
        Horizontal,
        footerProps,
        [footer]
      ) : null;
    }
  },
  render: function render(h) {
    var _classnames2;

    var _$props4 = this.$props,
        isAutoHeight = _$props4.isAutoHeight,
        _$props4$customCompon = _$props4.customComponent,
        customComponent = _$props4$customCompon === undefined ? 'd-table' : _$props4$customCompon,
        tableStriped = _$props4.tableStriped,
        hideSelectedAlert = _$props4.hideSelectedAlert,
        rowTitle = _$props4.rowTitle,
        scroll = _$props4.scroll,
        propsFooter = _$props4.footer,
        tableProps = _objectWithoutProperties(_$props4, ['isAutoHeight', 'customComponent', 'tableStriped', 'hideSelectedAlert', 'rowTitle', 'scroll', 'footer']);

    var $attrs = this.$attrs,
        $scopedSlots = this.$scopedSlots,
        $slots = this.$slots,
        $listeners = this.$listeners,
        height = this.height,
        isNumY = this.isNumY;

    var vScroll = _extends({}, scroll, { y: isAutoHeight ? height : true });
    if (isNumY) {
      vScroll.y = scroll.y;
    }

    var footer = $slots.footer,
        slots = _objectWithoutProperties($slots, ['footer']);
    /**
     * !!! 注意, sFooter 变量即使未用也不可删除
     */


    var sFooter = $scopedSlots.footer,
        scopedSlots = _objectWithoutProperties($scopedSlots, ['footer']);
    /**
     * console.log(sFooter)
     */


    var size = tableProps.size;

    var componentProps = {
      props: _extends({
        hideSelectedAlert: hideSelectedAlert,
        rowTitle: rowTitle
      }, tableProps, {
        scroll: _extends({}, scroll, vScroll)
      }),
      scopedSlots: _extends({}, scopedSlots),
      attrs: _extends({}, $attrs),
      'class': 'flex flex-col flex-grow',
      on: _extends({}, $listeners),
      ref: 'DAutoTable'
    };
    var contProps = {
      props: {
        grow: true,
        flex: true
      },
      style: {
        overflow: 'hidden',
        position: 'relative'
      },
      'class': classnames((_classnames2 = {}, _defineProperty(_classnames2, depotCls + '-auto-table', 1), _defineProperty(_classnames2, depotCls + '-auto-table-' + size, 1), _classnames2))
    };

    var T = h(customComponent, _extends({}, componentProps), [].concat(_toConsumableArray(slots)));
    if (isNumY) {
      return T;
    }
    return h(
      Vertical,
      contProps,
      [T, this.renderFooter(footer, 'top'), this.renderFooter(footer, 'bottom')]
    );
  }
};

AutoTable.install = function (Vue) {
  Vue.component(AutoTable.name, AutoTable);
};

export default AutoTable;