rw-admin-ui 1.0.0

package/packages/table/src/store/tree.js

@@ -0,0 +1,209 @@
+import { walkTreeNode, getRowIdentity } from '../util';
+
+export default {
+  data() {
+    return {
+      states: {
+        // defaultExpandAll 存在于 expand.js 中，这里不重复添加
+        // 在展开行中，expandRowKeys 会被转化成 expandRows，expandRowKeys 这个属性只是记录了 TreeTable 行的展开
+        // TODO: 拆分为独立的 TreeTable，统一用法
+        expandRowKeys: [],
+        treeData: {},
+        indent: 16,
+        lazy: false,
+        lazyTreeNodeMap: {},
+        lazyColumnIdentifier: 'hasChildren',
+        childrenColumnName: 'children'
+      }
+    };
+  },
+
+  computed: {
+    // 嵌入型的数据，watch 无法是检测到变化 https://github.com/ElemeFE/element/issues/14998
+    // TODO: 使用 computed 解决该问题，是否会造成性能问题？
+    // @return { id: { level, children } }
+    normalizedData() {
+      if (!this.states.rowKey) return {};
+      const data = this.states.data || [];
+      return this.normalize(data);
+    },
+    // @return { id: { children } }
+    // 针对懒加载的情形，不处理嵌套数据
+    normalizedLazyNode() {
+      const { rowKey, lazyTreeNodeMap, lazyColumnIdentifier } = this.states;
+      const keys = Object.keys(lazyTreeNodeMap);
+      const res = {};
+      if (!keys.length) return res;
+      keys.forEach(key => {
+        if (lazyTreeNodeMap[key].length) {
+          const item = { children: [] };
+          lazyTreeNodeMap[key].forEach(row => {
+            const currentRowKey = getRowIdentity(row, rowKey);
+            item.children.push(currentRowKey);
+            if (row[lazyColumnIdentifier] && !res[currentRowKey]) {
+              res[currentRowKey] = { children: [] };
+            }
+          });
+          res[key] = item;
+        }
+      });
+      return res;
+    }
+  },
+
+  watch: {
+    normalizedData: 'updateTreeData',
+    normalizedLazyNode: 'updateTreeData'
+  },
+
+  methods: {
+    normalize(data) {
+      const {
+        childrenColumnName,
+        lazyColumnIdentifier,
+        rowKey,
+        lazy
+      } = this.states;
+      const res = {};
+      walkTreeNode(
+        data,
+        (parent, children, level) => {
+          const parentId = getRowIdentity(parent, rowKey);
+          if (Array.isArray(children)) {
+            res[parentId] = {
+              children: children.map(row => getRowIdentity(row, rowKey)),
+              level
+            };
+          } else if (lazy) {
+            // 当 children 不存在且 lazy 为 true，该节点即为懒加载的节点
+            res[parentId] = {
+              children: [],
+              lazy: true,
+              level
+            };
+          }
+        },
+        childrenColumnName,
+        lazyColumnIdentifier
+      );
+      return res;
+    },
+
+    updateTreeData() {
+      const nested = this.normalizedData;
+      const normalizedLazyNode = this.normalizedLazyNode;
+      const keys = Object.keys(nested);
+      const newTreeData = {};
+      if (keys.length) {
+        const {
+          treeData: oldTreeData,
+          defaultExpandAll,
+          expandRowKeys,
+          lazy
+        } = this.states;
+        const rootLazyRowKeys = [];
+        const getExpanded = (oldValue, key) => {
+          const included =
+            defaultExpandAll ||
+            (expandRowKeys && expandRowKeys.indexOf(key) !== -1);
+          return !!((oldValue && oldValue.expanded) || included);
+        };
+        // 合并 expanded 与 display，确保数据刷新后，状态不变
+        keys.forEach(key => {
+          const oldValue = oldTreeData[key];
+          const newValue = { ...nested[key] };
+          newValue.expanded = getExpanded(oldValue, key);
+          if (newValue.lazy) {
+            const { loaded = false, loading = false } = oldValue || {};
+            newValue.loaded = !!loaded;
+            newValue.loading = !!loading;
+            rootLazyRowKeys.push(key);
+          }
+          newTreeData[key] = newValue;
+        });
+        // 根据懒加载数据更新 treeData
+        const lazyKeys = Object.keys(normalizedLazyNode);
+        if (lazy && lazyKeys.length && rootLazyRowKeys.length) {
+          lazyKeys.forEach(key => {
+            const oldValue = oldTreeData[key];
+            const lazyNodeChildren = normalizedLazyNode[key].children;
+            if (rootLazyRowKeys.indexOf(key) !== -1) {
+              // 懒加载的 root 节点，更新一下原有的数据，原来的 children 一定是空数组
+              if (newTreeData[key].children.length !== 0) {
+                throw new Error('[ElTable]children must be an empty array.');
+              }
+              newTreeData[key].children = lazyNodeChildren;
+            } else {
+              const { loaded = false, loading = false } = oldValue || {};
+              newTreeData[key] = {
+                lazy: true,
+                loaded: !!loaded,
+                loading: !!loading,
+                expanded: getExpanded(oldValue, key),
+                children: lazyNodeChildren,
+                level: ''
+              };
+            }
+          });
+        }
+      }
+      this.states.treeData = newTreeData;
+      this.updateTableScrollY();
+    },
+
+    updateTreeExpandKeys(value) {
+      this.states.expandRowKeys = value;
+      this.updateTreeData();
+    },
+
+    toggleTreeExpansion(row, expanded) {
+      this.assertRowKey();
+
+      const { rowKey, treeData } = this.states;
+      const id = getRowIdentity(row, rowKey);
+      const data = id && treeData[id];
+      if (id && data && ('expanded' in data)) {
+        const oldExpanded = data.expanded;
+        expanded = typeof expanded === 'undefined' ? !data.expanded : expanded;
+        treeData[id].expanded = expanded;
+        if (oldExpanded !== expanded) {
+          this.table.$emit('expand-change', row, expanded);
+        }
+        this.updateTableScrollY();
+      }
+    },
+
+    loadOrToggle(row) {
+      this.assertRowKey();
+      const { lazy, treeData, rowKey } = this.states;
+      const id = getRowIdentity(row, rowKey);
+      const data = treeData[id];
+      if (lazy && data && 'loaded' in data && !data.loaded) {
+        this.loadData(row, id, data);
+      } else {
+        this.toggleTreeExpansion(row);
+      }
+    },
+
+    loadData(row, key, treeNode) {
+      const { load } = this.table;
+      const { treeData: rawTreeData } = this.states;
+      if (load && !rawTreeData[key].loaded) {
+        rawTreeData[key].loading = true;
+        load(row, treeNode, data => {
+          if (!Array.isArray(data)) {
+            throw new Error('[ElTable] data must be an array');
+          }
+          const { lazyTreeNodeMap, treeData } = this.states;
+          treeData[key].loading = false;
+          treeData[key].loaded = true;
+          treeData[key].expanded = true;
+          if (data.length) {
+            this.$set(lazyTreeNodeMap, key, data);
+          }
+          this.table.$emit('expand-change', row, true);
+        });
+      }
+    }
+  }
+};

package/packages/table/src/store/watcher.js

@@ -0,0 +1,381 @@
+import Vue from 'vue';
+import merge from 'rowinself-ui/src/utils/merge';
+import { getKeysMap, getRowIdentity, getColumnById, getColumnByKey, orderBy, toggleRowStatus } from '../util';
+import expand from './expand';
+import current from './current';
+import tree from './tree';
+
+const sortData = (data, states) => {
+  const sortingColumn = states.sortingColumn;
+  if (!sortingColumn || typeof sortingColumn.sortable === 'string') {
+    return data;
+  }
+  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
+};
+
+const doFlattenColumns = (columns) => {
+  const result = [];
+  columns.forEach((column) => {
+    if (column.children) {
+      result.push.apply(result, doFlattenColumns(column.children));
+    } else {
+      result.push(column);
+    }
+  });
+  return result;
+};
+
+export default Vue.extend({
+
+  mixins: [expand, current, tree],
+  data() {
+    return {
+      states: {
+        // 3.0 版本后要求必须设置该属性
+        rowKey: null,
+
+        // 渲染的数据来源，是对 table 中的 data 过滤排序后的结果
+        data: [],
+
+        // 是否包含固定列
+        isComplex: false,
+
+        // 列
+        _columns: [], // 不可响应的
+        originColumns: [],
+        columns: [],
+        fixedColumns: [],
+        rightFixedColumns: [],
+        leafColumns: [],
+        fixedLeafColumns: [],
+        rightFixedLeafColumns: [],
+        leafColumnsLength: 0,
+        fixedLeafColumnsLength: 0,
+        rightFixedLeafColumnsLength: 0,
+
+        // 选择
+        isAllSelected: false,
+        selection: [],
+        reserveSelection: false,
+        selectOnIndeterminate: false,
+        selectable: null,
+
+        // 过滤
+        filters: {}, // 不可响应的
+        filteredData: null,
+
+        // 排序
+        sortingColumn: null,
+        sortProp: null,
+        sortOrder: null,
+
+        hoverRow: null
+      }
+    };
+  },
+
+  methods: {
+    // 检查 rowKey 是否存在
+    assertRowKey() {
+      const rowKey = this.states.rowKey;
+      if (!rowKey) throw new Error('[ElTable] prop row-key is required');
+    },
+
+    // 更新列
+    updateColumns() {
+      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]);
+      }
+
+      const notFixedColumns = _columns.filter(column => !column.fixed);
+      states.originColumns = [].concat(states.fixedColumns).concat(notFixedColumns).concat(states.rightFixedColumns);
+
+      const leafColumns = doFlattenColumns(notFixedColumns);
+      const fixedLeafColumns = doFlattenColumns(states.fixedColumns);
+      const rightFixedLeafColumns = doFlattenColumns(states.rightFixedColumns);
+
+      states.leafColumnsLength = leafColumns.length;
+      states.fixedLeafColumnsLength = fixedLeafColumns.length;
+      states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
+
+      states.columns = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);
+      states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;
+    },
+
+    // 更新 DOM
+    scheduleLayout(needUpdateColumns) {
+      if (needUpdateColumns) {
+        this.updateColumns();
+      }
+      this.table.debouncedUpdateLayout();
+    },
+
+    // 选择
+    isSelected(row) {
+      const { selection = [] } = this.states;
+      return selection.indexOf(row) > -1;
+    },
+
+    clearSelection() {
+      const states = this.states;
+      states.isAllSelected = false;
+      const oldSelection = states.selection;
+      if (oldSelection.length) {
+        states.selection = [];
+        this.table.$emit('selection-change', []);
+      }
+    },
+
+    cleanSelection() {
+      const states = this.states;
+      const { data, rowKey, selection } = states;
+      let deleted;
+      if (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 => data.indexOf(item) === -1);
+      }
+      if (deleted.length) {
+        const newSelection = selection.filter(item => deleted.indexOf(item) === -1);
+        states.selection = newSelection;
+        this.table.$emit('selection-change', newSelection.slice());
+      }
+    },
+
+    toggleRowSelection(row, selected, emitChange = true) {
+      const changed = toggleRowStatus(this.states.selection, row, selected);
+      if (changed) {
+        const newSelection = (this.states.selection || []).slice();
+        // 调用 API 修改选中值，不触发 select 事件
+        if (emitChange) {
+          this.table.$emit('select', newSelection, row);
+        }
+        this.table.$emit('selection-change', newSelection);
+      }
+    },
+
+    _toggleAllSelection() {
+      const states = this.states;
+      const { data = [], selection } = states;
+      // when only some rows are selected (but not all), select or deselect all of them
+      // depending on the value of selectOnIndeterminate
+      const value = states.selectOnIndeterminate
+        ? !states.isAllSelected
+        : !(states.isAllSelected || selection.length);
+      states.isAllSelected = value;
+
+      let selectionChanged = false;
+      data.forEach((row, index) => {
+        if (states.selectable) {
+          if (states.selectable.call(null, row, index) && toggleRowStatus(selection, row, value)) {
+            selectionChanged = true;
+          }
+        } else {
+          if (toggleRowStatus(selection, row, value)) {
+            selectionChanged = true;
+          }
+        }
+      });
+
+      if (selectionChanged) {
+        this.table.$emit('selection-change', selection ? selection.slice() : []);
+      }
+      this.table.$emit('select-all', selection);
+    },
+
+    updateSelectionByRowKey() {
+      const states = this.states;
+      const { selection, rowKey, data } = states;
+      const selectedMap = getKeysMap(selection, rowKey);
+      data.forEach(row => {
+        const rowId = getRowIdentity(row, rowKey);
+        const rowInfo = selectedMap[rowId];
+        if (rowInfo) {
+          selection[rowInfo.index] = row;
+        }
+      });
+    },
+
+    updateAllSelected() {
+      const states = this.states;
+      const { selection, rowKey, selectable } = states;
+      // data 为 null 时，解构时的默认值会被忽略
+      const data = states.data || [];
+      if (data.length === 0) {
+        states.isAllSelected = false;
+        return;
+      }
+
+      let selectedMap;
+      if (rowKey) {
+        selectedMap = getKeysMap(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];
+        const isRowSelectable = selectable && selectable.call(null, item, i);
+        if (!isSelected(item)) {
+          if (!selectable || isRowSelectable) {
+            isAllSelected = false;
+            break;
+          }
+        } else {
+          selectedCount++;
+        }
+      }
+
+      if (selectedCount === 0) isAllSelected = false;
+      states.isAllSelected = isAllSelected;
+    },
+
+    // 过滤与排序
+    updateFilters(columns, values) {
+      if (!Array.isArray(columns)) {
+        columns = [columns];
+      }
+      const states = this.states;
+      const filters = {};
+      columns.forEach(col => {
+        states.filters[col.id] = values;
+        filters[col.columnKey || col.id] = values;
+      });
+
+      return filters;
+    },
+
+    updateSort(column, prop, order) {
+      if (this.states.sortingColumn && this.states.sortingColumn !== column) {
+        this.states.sortingColumn.order = null;
+      }
+      this.states.sortingColumn = column;
+      this.states.sortProp = prop;
+      this.states.sortOrder = order;
+    },
+
+    execFilter() {
+      const states = this.states;
+      const { _data, filters } = states;
+      let data = _data;
+
+      Object.keys(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, column));
+          });
+        }
+      });
+
+      states.filteredData = data;
+    },
+
+    execSort() {
+      const states = this.states;
+      states.data = sortData(states.filteredData, states);
+    },
+
+    // 根据 filters 与 sort 去过滤 data
+    execQuery(ignore) {
+      if (!(ignore && ignore.filter)) {
+        this.execFilter();
+      }
+      this.execSort();
+    },
+
+    clearFilter(columnKeys) {
+      const states = this.states;
+      const { tableHeader, fixedTableHeader, rightFixedTableHeader } = this.table.$refs;
+
+      let panels = {};
+      if (tableHeader) panels = merge(panels, tableHeader.filterPanels);
+      if (fixedTableHeader) panels = merge(panels, fixedTableHeader.filterPanels);
+      if (rightFixedTableHeader) panels = merge(panels, rightFixedTableHeader.filterPanels);
+
+      const keys = Object.keys(panels);
+      if (!keys.length) return;
+
+      if (typeof columnKeys === 'string') {
+        columnKeys = [columnKeys];
+      }
+
+      if (Array.isArray(columnKeys)) {
+        const columns = columnKeys.map(key => getColumnByKey(states, key));
+        keys.forEach(key => {
+          const column = columns.find(col => col.id === key);
+          if (column) {
+            // TODO: 优化这里的代码
+            panels[key].filteredValue = [];
+          }
+        });
+        this.commit('filterChange', {
+          column: columns,
+          values: [],
+          silent: true,
+          multi: true
+        });
+      } else {
+        keys.forEach(key => {
+          // TODO: 优化这里的代码
+          panels[key].filteredValue = [];
+        });
+
+        states.filters = {};
+        this.commit('filterChange', {
+          column: {},
+          values: [],
+          silent: true
+        });
+      }
+    },
+
+    clearSort() {
+      const states = this.states;
+      if (!states.sortingColumn) return;
+
+      this.updateSort(null, null, null);
+      this.commit('changeSortCondition', {
+        silent: true
+      });
+    },
+
+    // 适配层，expand-row-keys 在 Expand 与 TreeTable 中都有使用
+    setExpandRowKeysAdapter(val) {
+      // 这里会触发额外的计算，但为了兼容性，暂时这么做
+      this.setExpandRowKeys(val);
+      this.updateTreeExpandKeys(val);
+    },
+
+    // 展开行与 TreeTable 都要使用
+    toggleRowExpansionAdapter(row, expanded) {
+      const hasExpandColumn = this.states.columns.some(({ type }) => type === 'expand');
+      if (hasExpandColumn) {
+        this.toggleRowExpansion(row, expanded);
+      } else {
+        this.toggleTreeExpansion(row, expanded);
+      }
+    }
+  }
+});