Element分析（工具篇）——TableStore

说明

这一部分是为 table 相关组件实现的对应的状态信息的管理。

源码解读

import Vue from 'vue';
import debounce from 'throttle-debounce/debounce';
import { orderBy, getColumnById, getRowIdentity } from './util';

/**
 * 对数据进行排序
 * @param data 要排序的数据
 * @param states 状态信息
 */
const sortData = (data, states) => {
  const sortingColumn = states.sortingColumn;  // 要排序的列
  // 如果不存在要排序的列或者 sortable 不是 true
  if (!sortingColumn || typeof sortingColumn.sortable === 'string') {
    return data;
  }
  // 排序
  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod);
};

/**
 * 获取值和 行、索引 的映射
 * @param array 要处理的数列
 * @param rowKey 对应的键名或者搜索函数
 * @returns {{}}
 */
const getKeysMap = function(array, rowKey) {
  const arrayMap = {};
  (array || []).forEach((row, index) => {
    arrayMap[getRowIdentity(row, rowKey)] = { row, index };
  });
  return arrayMap;
};

/**
 * 切换被选中的行
 * @param states 状态信息
 * @param row 要处理的行
 * @param selected 是否选中
 * @returns {boolean} 是否改变
 */
const toggleRowSelection = function(states, row, selected) {
  let changed = false;
  const selection = states.selection;  // 选中的数组
  const index = selection.indexOf(row);  // 查找相应的行
  if (typeof selected === 'undefined') {  // 如果没有规定是否选中
    if (index === -1) {  // 如果之前没有选中过
      selection.push(row);  // 加入到选择列表中
      changed = true;
    } else {  // 否则移除
      selection.splice(index, 1);
      changed = true;
    }
  } else {  // 如果指定了是否选中
    if (selected && index === -1) {  // 选中，并且之前没选中
      selection.push(row);
      changed = true;
    } else if (!selected && index > -1) {  // 没选中，并且之前选中了
      selection.splice(index, 1);
      changed = true;
    }
  }

  return changed;
};

const TableStore = function(table, initialState = {}) {
  if (!table) {  // 必须传入 vue 实例
    throw new Error('Table is required.');
  }
  this.table = table;

  this.states = {
    rowKey: null,
    _columns: [],
    originColumns: [],
    columns: [],
    fixedColumns: [],
    rightFixedColumns: [],
    isComplex: false,
    _data: null,
    filteredData: null,
    data: null,
    sortingColumn: null,
    sortProp: null,
    sortOrder: null,
    isAllSelected: false,
    selection: [],
    reserveSelection: false,
    selectable: null,
    currentRow: null,
    hoverRow: null,
    filters: {},
    expandRows: [],
    defaultExpandAll: false
  };

  // 初始化相应的状态信息
  for (let prop in initialState) {
    if (initialState.hasOwnProperty(prop) && this.states.hasOwnProperty(prop)) {
      this.states[prop] = initialState[prop];
    }
  }
};

/**
 * mutations
 */
TableStore.prototype.mutations = {
  /**
   * 设置数据信息
   * @param states 状态信息
   * @param data 数据
   */
  setData(states, data) {  // 设置数据
    const dataInstanceChanged = states._data !== data;  // 数据发生改变
    states._data = data;  // 保存原始值
    states.data = sortData((data || []), states);  // 排序

    // states.data.forEach((item) => {
    //   if (!item.$extra) {
    //     Object.defineProperty(item, '$extra', {
    //       value: {},
    //       enumerable: false
    //     });
    //   }
    // });

    this.updateCurrentRow();  // 更新当前行的信息

    if (!states.reserveSelection) {  // 如果有保留选择的项
      if (dataInstanceChanged) {  // 如果数据实例发生了改变
        this.clearSelection();  // 清空选择，包括取消全选效果
      } else {
        this.cleanSelection();  // 清理选择
      }
      this.updateAllSelected();  // 更新全选的信息
    } else {
      const rowKey = states.rowKey;
      if (rowKey) {
        const selection = states.selection;
        const selectedMap = getKeysMap(selection, rowKey);

        // 更新选中行的信息
        states.data.forEach((row) => {
          // 行 id
          const rowId = getRowIdentity(row, rowKey);
          const rowInfo = selectedMap[rowId];
          if (rowInfo) {
            selection[rowInfo.index] = row;
          }
        });

        // 更新全选信息
        this.updateAllSelected();
      } else {  // 报错，因为保留选择模式必须有主键
        console.warn('WARN: rowKey is required when reserve-selection is enabled.');
      }
    }

    const defaultExpandAll = states.defaultExpandAll;
    if (defaultExpandAll) {  // 如果默认全部展开
      this.states.expandRows = (states.data || []).slice(0);
    }

    // 在下次 DOM 更新结束后，更新垂直滚动的信息
    Vue.nextTick(() => this.table.updateScrollY());
  },

  /**
   * 更改排序条件
   * @param states
   */
  changeSortCondition(states) {
    states.data = sortData((states.filteredData || states._data || []), states);

    // 触发 sort-change 事件
    this.table.$emit('sort-change', {
      column: this.states.sortingColumn,
      prop: this.states.sortProp,
      order: this.states.sortOrder
    });

    Vue.nextTick(() => this.table.updateScrollY());
  },

  /**
   * 更改筛选器信息
   * @param states
   * @param options
   */
  filterChange(states, options) {
    let { column, values } = options;
    if (values && !Array.isArray(values)) {
      values = [values];
    }

    const prop = column.property;
    const filters = [];

    if (prop) {
      states.filters[column.id] = values;
      filters[column.columnKey || column.id] = values;
    }

    let data = states._data;

    // 对全部有筛选器器的列进行处理
    Object.keys(states.filters).forEach((columnId) => {
      const values = states.filters[columnId];
      if (!values || values.length === 0) return;
      const column = getColumnById(this.states, columnId);
      // 如果存在列，并且该列上有过滤的方法
      if (column && column.filterMethod) {
        data = data.filter((row) => {
              // 至少符合一条筛选条件
          return values.some(value => column.filterMethod.call(null, value, row));
        });
      }
    });

    // 筛选后的信息
    states.filteredData = data;
    // 重新排列数据
    states.data = sortData(data, states);

    this.table.$emit('filter-change', filters);

    Vue.nextTick(() => this.table.updateScrollY());
  },

  /**
   * 插入列
   * @param states 状态信息
   * @param column 列
   * @param index 索引
   * @param parent 父级
   */
  insertColumn(states, column, index, parent) {
    let array = states._columns;  // 全部列
    if (parent) {  // 如果有父级
      array = parent.children;
      if (!array) array = parent.children = [];  // 如果还是不存在，则表明目前该父级还没有孩子
    }

    if (typeof index !== 'undefined') {  // 如果指定了插入的位置
      array.splice(index, 0, column);
    } else {  // 否则加入到最后
      array.push(column);
    }

    if (column.type === 'selection') {  // 如果当前列是多选框的列
      states.selectable = column.selectable;
      states.reserveSelection = column.reserveSelection;
    }

    // 重新规划布局
    this.scheduleLayout();
  },

  /**
   * 移除列
   * @param states 状态信息
   * @param column 要移除的列
   */
  removeColumn(states, column) {
    let _columns = states._columns;
    if (_columns) {  // 如果存在列的数组，移除对应列
      _columns.splice(_columns.indexOf(column), 1);
    }

    this.scheduleLayout();
  },

  /**
   * 设置鼠标悬浮的行
   * @param states 状态信息
   * @param row 鼠标悬浮的行
   */
  setHoverRow(states, row) {
    states.hoverRow = row;
  },

  /**
   * 设置当前行
   * @param states 状态信息
   * @param row 要更新的行
   */
  setCurrentRow(states, row) {
    const oldCurrentRow = states.currentRow;
    states.currentRow = row;

    // 如果发生了改变，则触发 current-change 事件
    if (oldCurrentRow !== row) {
      this.table.$emit('current-change', row, oldCurrentRow);
    }
  },

  /**
   * 改变选中行
   * @param states 状态信息
   * @param row 要改变的行
   */
  rowSelectedChanged(states, row) {
    const changed = toggleRowSelection(states, row);
    const selection = states.selection;

    if (changed) {  // 如果发生了改变
      const table = this.table;
      table.$emit('selection-change', selection);
      table.$emit('select', selection, row);
    }

    // 更新全选信息
    this.updateAllSelected();
  },

  /**
   * 切换展开行
   * @param states 状态信息
   * @param row 行
   * @param expanded 是否展开
   */
  toggleRowExpanded: function(states, row, expanded) {
    const expandRows = states.expandRows;
    if (typeof expanded !== 'undefined') {  // 如果指定了是否展开
      const index = expandRows.indexOf(row);  // 看看之前是否处理过
      if (expanded) {  // 展开
        if (index === -1) expandRows.push(row);  // 不存在就添加当前航
      } else {  // 不展开
        if (index !== -1) expandRows.splice(index, 1);  // 存在就移除当前行
      }
    } else {  // 如果没有指定是否展开
      const index = expandRows.indexOf(row);
      if (index === -1) {  // 如果之前不存在，就加入
        expandRows.push(row);
      } else {  // 之前存在就移除
        expandRows.splice(index, 1);
      }
    }
    // 触发 expand 事件
    this.table.$emit('expand', row, expandRows.indexOf(row) !== -1);
  },

  /**
   * 切换全选，有 10ms 的限制
   */
  toggleAllSelection: debounce(10, function(states) {
    const data = states.data || [];
    const value = !states.isAllSelected;
    const selection = this.states.selection;
    let selectionChanged = false;

    data.forEach((item, index) => {
      if (states.selectable) {  // 如果可选
        // 如果当前行可选，就切换当前行的选项
        if (states.selectable.call(null, item, index) && toggleRowSelection(states, item, value)) {
          selectionChanged = true;
        }
      } else {  // 如果不可选
        if (toggleRowSelection(states, item, value)) {  // 切换该行的选项
          selectionChanged = true;
        }
      }
    });

    const table = this.table;
    if (selectionChanged) {  // 如果所选项发生了改变
      table.$emit('selection-change', selection);
    }
    // 触发全选事件
    table.$emit('select-all', selection);
    states.isAllSelected = value;
  })
};

/**
 * 平整化列，即降嵌套的列变成平级的
 */
const doFlattenColumns = (columns) => {
  const result = [];
  columns.forEach((column) => {
    if (column.children) {
      result.push.apply(result, doFlattenColumns(column.children));
    } else {
      result.push(column);
    }
  });
  return result;
};

/**
 * 更新列
 */
TableStore.prototype.updateColumns = function() {
  const states = this.states;
  const _columns = states._columns || [];
  // 固定在左侧的列
  states.fixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === 'left');
  // 固定在右侧的列
  states.rightFixedColumns = _columns.filter((column) => column.fixed === 'right');

  // 如果有左侧的固定列，并且第一列为未指定固定的勾选列，则让其固定在左侧
  if (states.fixedColumns.length > 0 && _columns[0] && _columns[0].type === 'selection' && !_columns[0].fixed) {
    _columns[0].fixed = true;
    states.fixedColumns.unshift(_columns[0]);
  }
  // 原始列
  states.originColumns = [].concat(states.fixedColumns).concat(_columns.filter((column) => !column.fixed)).concat(states.rightFixedColumns);
  // 将原始列平整化
  states.columns = doFlattenColumns(states.originColumns);
  // 如果存在固定列就是复杂的
  states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;
};

/**
 * 判断某行是否选中
 * @param row 要判断的行
 * @returns {boolean}
 */
TableStore.prototype.isSelected = function(row) {
  return (this.states.selection || []).indexOf(row) > -1;
};

/**
 * 清空选择
 */
TableStore.prototype.clearSelection = function() {
  const states = this.states;
  states.isAllSelected = false;  // 取消全选
  const oldSelection = states.selection;
  states.selection = [];
  if (oldSelection.length > 0) {  // 如果之前有选择过，触发 selection-change
    this.table.$emit('selection-change', states.selection);
  }
};

/**
 * 设置要展开的行
 * @param rowKeys 要展开行的主键
 */
TableStore.prototype.setExpandRowKeys = function(rowKeys) {
  const expandRows = [];
  const data = this.states.data;
  const rowKey = this.states.rowKey;
  if (!rowKey) throw new Error('[Table] prop row-key should not be empty.');
  const keysMap = getKeysMap(data, rowKey);
  // 一次对每一行进行处理
  rowKeys.forEach((key) => {
    const info = keysMap[key];
    if (info) {
      expandRows.push(info.row);
    }
  });

  this.states.expandRows = expandRows;
};

/**
 * 切换行选择
 * @param row 要切换的行
 * @param selected 是否选择
 */
TableStore.prototype.toggleRowSelection = function(row, selected) {
  const changed = toggleRowSelection(this.states, row, selected);
  if (changed) {  // 如果改变了，就触发相应事件
    this.table.$emit('selection-change', this.states.selection);
  }
};

/**
 * 清理选择
 */
TableStore.prototype.cleanSelection = function() {
  const selection = this.states.selection || [];
  const data = this.states.data;
  const rowKey = this.states.rowKey;
  let deleted;
  if (rowKey) {  // 如果有 rowKey
    deleted = [];
    const selectedMap = getKeysMap(selection, rowKey);
    const dataMap = getKeysMap(data, rowKey);
    for (let key in selectedMap) {
      // 如果选择的项不再存在于数据中
      if (selectedMap.hasOwnProperty(key) && !dataMap[key]) {
        deleted.push(selectedMap[key].row);
      }
    }
  } else { 否则
    // 搜索不再存在的
    deleted = selection.filter((item) => {
      return data.indexOf(item) === -1;
    });
  }

  // 取消选择
  deleted.forEach((deletedItem) => {
    selection.splice(selection.indexOf(deletedItem), 1);
  });

  // 如果有需要被删的项，触发 selection-change 事件
  if (deleted.length) {
    this.table.$emit('selection-change', selection);
  }
};

/**
 * 更新是否全部被选中
 */
TableStore.prototype.updateAllSelected = function() {
  const states = this.states;
  const { selection, rowKey, selectable, data } = states;
  // 如果不存在数据，或者数据长度为 0，肯定不可能有被选中的，因此直接设置 false
  if (!data || data.length === 0) {
    states.isAllSelected = false;
    return;
  }

  let selectedMap;
  // 如果存在 rowKey，则获取对应的映射
  if (rowKey) {
    selectedMap = getKeysMap(states.selection, rowKey);
  }

  // 判断是否被选中
  const isSelected = function(row) {
    if (selectedMap) {  // 判断映射中是否存在这一行
      return !!selectedMap[getRowIdentity(row, rowKey)];
    } else {  // 判断选择中是否有这一行
      return selection.indexOf(row) !== -1;
    }
  };

  let isAllSelected = true;
  let selectedCount = 0;
  for (let i = 0, j = data.length; i < j; i++) {
    const item = data[i];
    if (selectable) {  // 如果可选
      const isRowSelectable = selectable.call(null, item, i);  // 判断是否可选
      if (isRowSelectable) {  // 如果可选
        if (!isSelected(item)) {  // 如果当前行没被选中
          isAllSelected = false;
          break;
        } else {  // 当前行被选中
          selectedCount++;
        }
      }
    } else {  // 如果不可选
      if (!isSelected(item)) {  // 如果当前行没被选中了
        isAllSelected = false;
        break;
      } else {  // 当前行被选中
        selectedCount++;
      }
    }
  }

  // 如果被选择的数量仍是 0
  if (selectedCount === 0) isAllSelected = false;

  // 更改状态信息
  states.isAllSelected = isAllSelected;
};

/**
 * 重新规划布局
 */
TableStore.prototype.scheduleLayout = function() {
  this.table.debouncedLayout();
};

/**
 * 设置当前的行 rowKey
 * @param key
 */
TableStore.prototype.setCurrentRowKey = function(key) {
  const states = this.states;
  const rowKey = states.rowKey;
  if (!rowKey) throw new Error('[Table] row-key should not be empty.');
  const data = states.data || [];
  const keysMap = getKeysMap(data, rowKey);
  const info = keysMap[key];  // 找到赌赢的列
  if (info) {
    states.currentRow = info.row;
  }
};

/**
 * 更新当前行的信息
 */
TableStore.prototype.updateCurrentRow = function() {
  const states = this.states;
  const table = this.table;
  const data = states.data || [];
  const oldCurrentRow = states.currentRow;

  // 如果旧的当前行不存在了
  if (data.indexOf(oldCurrentRow) === -1) {
    states.currentRow = null;

    // 如果当前行发生了改变
    if (states.currentRow !== oldCurrentRow) {
      table.$emit('current-change', null, oldCurrentRow);
    }
  }
};

/**
 * commit 触发相应的 mutation
 */
TableStore.prototype.commit = function(name, ...args) {
  const mutations = this.mutations;
  if (mutations[name]) {
    mutations[name].apply(this, [this.states].concat(args));
  } else {
    throw new Error(`Action not found: ${name}`);
  }
};

export default TableStore;