ten-design-vue/lib/table/table.js

ten-vue

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _loading = _interopRequireDefault(require("../loading"));

var _tableTable = _interopRequireDefault(require("./table-table.js"));

var _emitter = _interopRequireDefault(require("../scripts/mixins/emitter"));

var _util = require("./util");

var _resizeObserver = require("../scripts/utils/resize-observer");

var _helper = require("../scripts/utils/helper");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

var name = 'ten-table';
var _default2 = {
  name: name,
  provide: function provide() {
    return {
      table: this
    };
  },
  mixins: [_emitter.default],
  props: {
    /**
     * 表格数据
     */
    data: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * column配置对象数组
     * 与使用<ten-table-column>效果相同
     */
    columns: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * 行的唯一标识，必填,
     * 展开时候需要通过 rowKe y获取指定的折叠行
     * 字符串支持 data.rowKey
     */
    rowKey: {
      type: [String, Function],
      default: 'id'
    },

    /**
     * 自定义行配置，可以配置对象或者是返回配置的函数 (row, $index) => rowProps
     */
    rowProps: [Object, Function],

    /**
     * 最小宽度，小于时才触发折叠
     */
    minWidth: Number,

    /**
     * 表格高度。
     * 合法的值为数字或者单位为 px 的高度。
     */
    height: [Number, String],

    /**
     * Table 的最大高度。
     * 合法的值为数字或者单位为 px 的高度。
     */
    maxHeight: [Number, String],

    /**
     * 是否加载中
     */
    loading: Boolean,

    /**
     * 无数据提醒,
     * 支持同名slot
     */
    emptyText: {
      type: String,
      default: '暂无数据'
    },

    /**
     * 已选中的行rowKey数组,
     * 支持.sync
     */
    selectedRowKeys: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * 隐藏表头
     */
    hideHeader: Boolean,

    /**
     * 已展开的行rowKey数组,
     * 有列配置设置了type="expand"有效，
     * 支持.sync
     */
    expandedRowKeys: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * 是否可伸缩列
     */
    resizable: {
      type: Boolean,
      default: false
    },

    /**
     * resizable 光标类名
     */
    resizableHandleClass: {
      type: String,
      default: 'resizable-handle'
    },

    /**
     * 拖拽排序（行）
     */
    dragSort: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      tbodyScrollTop: 0,
      tableWrapperWidth: undefined,
      sortOrder: undefined,
      sortColumn: {},
      scrollStatus: undefined,
      hoverRowIndex: undefined,
      cells: {},
      selectionMap: {}
    };
  },
  computed: {
    className: function className() {
      return ['ten-table', 'ten-table--vue'];
    },
    innderTableWidth: function innderTableWidth() {
      return this.scrollableX ? this.minWidth : this.tableWrapperWidth;
    },
    scrollableX: function scrollableX() {
      return this.tableWrapperWidth < this.minWidth;
    },
    sortedData: function sortedData() {
      var _this = this;

      if (typeof this.sortColumn.sorter === 'function' && this.sortOrder && this.sortColumn.sortable) {
        return this.data.slice(0).sort(function (a, b) {
          return _this.sortColumn.sorter(a, b, _this.sortOrder);
        });
      }

      return this.data;
    }
  },
  watch: {
    scrollStatus: function scrollStatus(newStatus, oldStatus) {
      this.$refs["".concat(oldStatus, "Table")] && this.$refs["".concat(oldStatus, "Table")].onResize();
      this.$refs["".concat(oldStatus, "Table")] && this.$refs["".concat(oldStatus, "Table")].$el.classList.remove("is-scrolling--".concat(oldStatus));
      this.$refs["".concat(newStatus, "Table")] && this.$refs["".concat(newStatus, "Table")].$el.classList.add("is-scrolling--".concat(newStatus));
    },
    minWidth: function minWidth() {
      this.resize();
    },
    height: function height() {
      this.resize();
    },
    maxHeight: function maxHeight() {
      this.resize();
    }
  },
  created: function created() {
    this.$on('sort-change', this.onSortChange);
  },
  mounted: function mounted() {
    if (this.$el) {
      (0, _resizeObserver.addResizeListener)(this.$el, this.resize);
    }
  },
  beforeDestroy: function beforeDestroy() {
    if (this.$el) {
      (0, _resizeObserver.removeResizeListener)(this.$el, this.resize);
    }
  },
  render: function render() {
    var h = arguments[0];
    var columnsTree = [];
    var defaultSlots;
    var sortInfo = {
      order: this.sortOrder,
      column: this.sortColumn
    };

    if (this.$scopedSlots.default) {
      defaultSlots = this.$scopedSlots.default();
      columnsTree = (0, _util.getColumnsTree)(defaultSlots, {
        sortInfo: sortInfo
      });
    } else if (this.columns && this.columns.length > 0) {
      columnsTree = (0, _util.getColumnsTreeByProps)(this.columns, {
        sortInfo: sortInfo
      });
    }

    if (this.resizable) {
      columnsTree = this._resizableColumns(columnsTree);
    }

    if (columnsTree.length > 0) {
      // 只允许第一层表头设置fixed，其子节点跟随父节点
      var fixedLeft = columnsTree.filter(function (v) {
        return v.fixed === 'left';
      });
      var fixedRight = columnsTree.filter(function (v) {
        return v.fixed === 'right';
      });
      columnsTree = fixedLeft.concat(columnsTree.filter(function (v) {
        return v.fixed === undefined;
      }), fixedRight);
      var columns = [];
      var columnDepth = (0, _util.traverseTree)(columnsTree, 1, columns);
      return h("div", {
        "class": this.className
      }, [defaultSlots ? h("div", [defaultSlots]) : null, h(_loading.default, {
        attrs: {
          loading: this.loading
        }
      }, [h(_tableTable.default, {
        ref: "baseTable",
        attrs: {
          columnsTree: columnsTree,
          columns: columns,
          depth: columnDepth,
          data: this.sortedData,
          rowProps: this.rowPropsFun,
          emptyText: this.$scopedSlots.emptyText || this.emptyText,
          scrollTop: this.tbodyScrollTop,
          innderTableWidth: this.innderTableWidth,
          hoverRowIndex: this.hoverRowIndex
        },
        on: {
          "scroll": this.onScroll,
          "resize": this.onResize,
          "hoverChange": this.onHoverChange
        }
      }), fixedLeft.length > 0 && this.scrollableX ? h(_tableTable.default, {
        ref: "leftTable",
        attrs: {
          columnsTree: columnsTree,
          columns: columns,
          depth: columnDepth,
          data: this.sortedData,
          rowProps: this.rowPropsFun,
          emptyText: this.$scopedSlots.emptyText || this.emptyText,
          scrollTop: this.tbodyScrollTop,
          innderTableWidth: this.innderTableWidth,
          hoverRowIndex: this.hoverRowIndex,
          fixedColumns: fixedLeft,
          fixed: "left",
          sizeData: this.sizeData
        },
        on: {
          "scroll": this.onScroll,
          "hoverChange": this.onHoverChange
        }
      }) : null, fixedRight.length > 0 && this.scrollableX ? h(_tableTable.default, {
        ref: "rightTable",
        attrs: {
          columnsTree: columnsTree,
          columns: columns,
          depth: columnDepth,
          data: this.sortedData,
          rowProps: this.rowPropsFun,
          emptyText: this.$scopedSlots.emptyText || this.emptyText,
          scrollTop: this.tbodyScrollTop,
          innderTableWidth: this.innderTableWidth,
          hoverRowIndex: this.hoverRowIndex,
          fixedColumns: fixedRight,
          fixed: "right",
          sizeData: this.sizeData
        },
        on: {
          "scroll": this.onScroll,
          "hoverChange": this.onHoverChange
        }
      }) : null])]);
    }

    return null;
  },
  methods: {
    getRowKey: function getRowKey(row) {
      if (typeof this.rowKey === 'function') {
        return this.rowKey(row);
      }

      if (typeof this.rowKey === 'string') {
        var path = "".concat(this.rowKey);
        return (0, _helper.getValueByPath)(row, path);
      }
    },
    changeSelected: function changeSelected(selectedKeys) {
      var _this2 = this;

      var data = this.data,
          getRowKey = this.getRowKey,
          selectionMap = this.selectionMap;
      var selections = selectedKeys.map(function (key) {
        if (typeof key === 'undefined') return undefined; // 缓存之前获取到的值 防止 data 更改后获取不到

        var value = data.find(function (row) {
          return getRowKey(row) === key;
        }) || undefined;

        if (value) {
          _this2.selectionMap[key] = value;
        } else {
          value = selectionMap[key];
        }

        return value;
      });
      /**
       * 选中变化事件
       * @param {Array} selectedKeys 选中的 keys
       * @param {Array} selections 选中值对应的数据，如果没有则是 undefined
       */

      this.$emit('selectedChange', selectedKeys, selections);
    },
    rowPropsFun: function rowPropsFun() {
      if (_typeof(this.rowProps) === 'object') {
        return this.rowProps;
      }

      if (typeof this.rowProps === 'function') {
        return this.rowProps.apply(this, arguments);
      }

      return this.rowProps;
    },
    setRefTables: function setRefTables(fn) {
      var _this3 = this;

      var refTables = ['baseTable', 'leftTable', 'rightTable'];
      refTables.forEach(function (refTable) {
        if (_this3.$refs[refTable]) {
          fn(_this3.$refs[refTable]);
        }
      });
    },

    /**
     * @public
     *
     * Table 隐藏切换为显示时，需要重新计算尺寸。默认已经对 ten 组件触发的切换（如 modal, tabs ）与路由切换做了处理
     */
    resize: function resize() {
      this.broadcastAll('do-layout');
    },
    addCell: function addCell(cell) {
      this.cells[cell.id] = cell;
    },
    removeCell: function removeCell(cell) {
      if (cell === this.cells[cell.id]) {
        delete this.cells[cell.id];
      }
    },
    updateInvisibleCell: function updateInvisibleCell(pureId, visibleCell) {
      var _this4 = this;

      var ids = ['base', 'left', 'right'].map(function (item) {
        return "".concat(item, "-").concat(pureId);
      });
      ids.forEach(function (id) {
        if (_this4.cells[id] && _this4.cells[id].invisible && visibleCell.$el) {
          _this4.cells[id].syncFromVisibleCell(visibleCell);
        }
      });
    },
    onScroll: function onScroll(_ref) {
      var tbodyScrollTop = _ref.tbodyScrollTop,
          scrollStatus = _ref.scrollStatus,
          target = _ref.target;

      if (scrollStatus && this.scrollStatus !== scrollStatus) {
        this.scrollStatus = scrollStatus;
      }

      this.setRefTables(function (refTable) {
        if (refTable !== target) {
          refTable.setScrollTop(tbodyScrollTop);
        }
      });
    },
    onResize: function onResize(tableWrapperEl) {
      if (tableWrapperEl) {
        this.tableWrapperWidth = tableWrapperEl.offsetWidth;
      }
    },
    onSortChange: function onSortChange(order, column) {
      this.sortOrder = order;
      this.sortColumn = column;
      /**
       * 排序改变事件
       * @param {Object} column 触发排序的列
       * @param {String} order 新的排序方式
       */

      this.$emit('sort', column, order);
    },
    onHoverChange: function onHoverChange(i) {
      // this.hoverRowIndex = i;
      this.setRefTables(function (refTable) {
        refTable.setBodyHover(i);
      });
    },
    // 增强 columns 的功能，让其适合控制单元格的宽度
    _resizableColumns: function _resizableColumns() {
      var _this5 = this;

      var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
      // 为了适配带 children 的 column 而另外计算下标
      var colIndex = 0;

      var enhanceColumns = function enhanceColumns(columns) {
        return columns.map(function (_column) {
          var column = _column;

          if (!column.children) {
            // 给表头的 th 节点添加 resizable 的 class 名
            var _className = column.className;

            if (_className === undefined) {
              column.className = 'resizable';
            } else if (typeof _className === 'string') {
              column.className += ' resizable';
            } else {
              column.className = [].concat(_toConsumableArray(_className), ['resizable']);
            } // 这是为了在不改变原有数据的情况下，增强 title


            var _title = column.title; // 保存当前的 col 下标

            var _i = colIndex;
            colIndex += 1;

            column.title = function (h) {
              return h('div', {
                class: 'resizable-content'
              }, [typeof _title === 'function' ? _title(h) : _title, _this5._resizableDom(column, _i)]);
            };
          } else {
            column.children = enhanceColumns(column.children);
          }

          return column;
        });
      };

      return enhanceColumns(columns);
    },
    // 单元格边界的节点
    _resizableDom: function _resizableDom(column, i) {
      var _this6 = this;

      var h = this.$createElement;
      return h("span", {
        "class": this.resizableHandleClass,
        on: {
          "click": function click(e) {
            return e.stopPropagation();
          },
          "mousedown": function mousedown(e) {
            return _this6._handelResizableWidth(e, i, column);
          }
        }
      });
    },
    // 控制宽度变化
    _handelResizableWidth: function _handelResizableWidth(event, index, _column) {
      var _this7 = this;

      var column = _column;
      event.stopPropagation(); // col 的节点

      var colgroups = [];
      this.$el.querySelectorAll('colgroup').forEach(function (colgroup) {
        colgroups.push(colgroup.querySelectorAll('col'));
      }); // 获取节点实际宽度

      var thDom = event.path.find(function (dom) {
        return dom.className.indexOf('resizable') > 0;
      });
      column.width = thDom.offsetWidth;
      var initailWidth = column.width;
      var startX = event.pageX; // 监听位置的变化，并计算长度

      var stop = true;

      var mousemoveFn = function mousemoveFn(e) {
        if (!stop) return false; // 控制宽度变化度的关键

        colgroups.forEach(function (_colgroup) {
          var colgroup = _colgroup;
          column.width = "".concat(initailWidth + e.pageX - startX, "px");
          colgroup[index].style.width = column.width;
        });
      };

      var mouseupFn = function mouseupFn() {
        stop = false;
        /**
         * 可伸缩列在拖拽结束后的事件
         * @param {string} width 拖拽后的列宽
         * @param {object} column 发生拖拽所在列
         */

        _this7.$emit('columnWidthChange', column.width, column);

        document.removeEventListener('mousemove', mousemoveFn);
        document.removeEventListener('mouseup', mouseupFn);
      };

      document.addEventListener('mousemove', mousemoveFn);
      document.addEventListener('mouseup', mouseupFn);
    }
  }
};
exports.default = _default2;