iov-design 2.15.31 → 2.15.32

package/lib/select.js

@@ -554,13 +554,6 @@ module.exports = require("iov-design/lib/utils/vue-popper");
 
 /***/ }),
 
-/***/ 6:
-/***/ (function(module, exports) {
-
-module.exports = require("iov-design/lib/mixins/locale");
-
-/***/ }),
-
 /***/ 64:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1071,7 +1064,7 @@ var focus_ = __webpack_require__(22);
 var focus_default = /*#__PURE__*/__webpack_require__.n(focus_);
 
 // EXTERNAL MODULE: external "iov-design/lib/mixins/locale"
-var locale_ = __webpack_require__(6);
+var locale_ = __webpack_require__(7);
 var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
 
 // EXTERNAL MODULE: external "iov-design/lib/input"
@@ -2246,6 +2239,13 @@ src_select.install = function (Vue) {
 
 /* harmony default export */ var packages_select = __webpack_exports__["default"] = (src_select);
 
+/***/ }),
+
+/***/ 7:
+/***/ (function(module, exports) {
+
+module.exports = require("iov-design/lib/mixins/locale");
+
 /***/ })
 
 /******/ });

package/lib/table-column.js

@@ -128,18 +128,88 @@ var cellStarts = {
 var cellForced = {
   selection: {
     renderHeader: function renderHeader(h, _ref) {
+      var _this = this;
+
       var store = _ref.store;
 
-      return h('el-checkbox', {
+      // console.log(store, 'store===========');
+      var _store$states = store.states,
+          isCrossPageSelection = _store$states.isCrossPageSelection,
+          selection = _store$states.selection,
+          data = _store$states.data,
+          rowKey = _store$states.rowKey;
+
+      var indeterminate = selection.length > 0 && !(selection.length === data.length);
+      if (isCrossPageSelection) {
+        // 全选: v-model - true, indeterminate - false
+        // 半选: v-model - false, indeterminate - true
+        // 不选：v-model - false, indeterminate - false
+
+        // 已选择的数据中是否包括当前页的数据项 && !当前页数据全部选中
+        indeterminate = selection.some(function (o) {
+          return data.some(function (row) {
+            return row[rowKey] === o[rowKey];
+          });
+        }) && !data.every(function (row) {
+          return selection.some(function (o) {
+            return row[rowKey] === o[rowKey];
+          });
+        });
+      }
+      // console.log(indeterminate, 'indeterminate===========');
+      return [h('el-checkbox', {
         attrs: {
-          disabled: store.states.data && store.states.data.length === 0,
-          indeterminate: store.states.selection.length > 0 && !this.isAllSelected,
+          disabled: data && data.length === 0,
+          indeterminate: indeterminate,
 
           value: this.isAllSelected },
         on: {
           'input': this.toggleAllSelection
         }
-      });
+      }), this.table.crossPageSelection && h(
+        'el-dropdown',
+        {
+          'class': 'el-table__cross-page-selection',
+          attrs: { placement: 'bottom-start',
+            trigger: 'click'
+          },
+          on: {
+            'command': function command(_command) {
+              return _this.onCommand(_command, _this.scope);
+            },
+            'visible-change': this.onVisibleChange
+          }
+        },
+        [h('i', { 'class': ['iov-icon-arrow-down', this.store.states.showSelectionDropdown ? 'show-selection-dropdown' : ''] }), h(
+          'el-dropdown-menu',
+          { slot: 'dropdown', 'class': 'table-selection__dropdown' },
+          [h(
+            'el-dropdown-item',
+            {
+              attrs: { command: 1 }
+            },
+            ['\u5168\u9009\u5F53\u9875']
+          ), h(
+            'el-dropdown-item',
+            {
+              attrs: { command: 3 }
+            },
+            ['\u5168\u9009\u6240\u6709\u9875']
+          ), h(
+            'el-dropdown-item',
+            {
+              attrs: { command: 2 }
+            },
+            ['\u6E05\u7A7A\u5F53\u9875']
+          ), h(
+            'el-dropdown-item',
+            {
+              attrs: { command: 4 }
+            },
+            ['\u6E05\u7A7A\u6240\u6709\u9875']
+          )]
+        )]
+      )];
     },
     renderCell: function renderCell(h, _ref2) {
       var row = _ref2.row,
@@ -274,7 +344,7 @@ function treeCellPrefix(h, _ref8) {
   return ele;
 }
 // EXTERNAL MODULE: ./packages/table/src/util.js
-var util = __webpack_require__(8);
+var util = __webpack_require__(6);
 
 // EXTERNAL MODULE: external "iov-design/lib/checkbox"
 var checkbox_ = __webpack_require__(18);
@@ -632,7 +702,7 @@ module.exports = require("iov-design/lib/utils/util");
 
 /***/ }),
 
-/***/ 8:
+/***/ 6:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/lib/table.js

@@ -208,18 +208,6 @@ module.exports = require("iov-design/lib/utils/vue-popper");
 
 /***/ }),
 /* 6 */
-/***/ (function(module, exports) {
-
-module.exports = require("iov-design/lib/mixins/locale");
-
-/***/ }),
-/* 7 */
-/***/ (function(module, exports) {
-
-module.exports = require("vue");
-
-/***/ }),
-/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -533,6 +521,18 @@ var objectEquals = function objectEquals(objectA, objectB) {
   return true;
 };
 
+/***/ }),
+/* 7 */
+/***/ (function(module, exports) {
+
+module.exports = require("iov-design/lib/mixins/locale");
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+module.exports = require("vue");
+
 /***/ }),
 /* 9 */
 /***/ (function(module, exports) {
@@ -1151,7 +1151,7 @@ var mousewheel_mousewheel = function mousewheel(element, callback) {
   }
 });
 // EXTERNAL MODULE: external "iov-design/lib/mixins/locale"
-var locale_ = __webpack_require__(6);
+var locale_ = __webpack_require__(7);
 var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
 
 // EXTERNAL MODULE: external "iov-design/lib/mixins/migrating"
@@ -1159,7 +1159,7 @@ var migrating_ = __webpack_require__(11);
 var migrating_default = /*#__PURE__*/__webpack_require__.n(migrating_);
 
 // EXTERNAL MODULE: external "vue"
-var external_vue_ = __webpack_require__(7);
+var external_vue_ = __webpack_require__(8);
 var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
 
 // EXTERNAL MODULE: external "iov-design/lib/utils/merge"
@@ -1167,7 +1167,7 @@ var merge_ = __webpack_require__(9);
 var merge_default = /*#__PURE__*/__webpack_require__.n(merge_);
 
 // EXTERNAL MODULE: ./packages/table/src/util.js
-var util = __webpack_require__(8);
+var util = __webpack_require__(6);
 
 // CONCATENATED MODULE: ./packages/table/src/store/expand.js
 
@@ -1625,6 +1625,15 @@ var doFlattenColumns = function doFlattenColumns(columns) {
         selectOnIndeterminate: false,
         selectable: null,
 
+        // 跨页全选标记
+        isCrossPageSelection: false,
+        // 全选下拉出现/隐藏事件
+        showSelectionDropdown: false,
+        // 1-全选当前页 2-取消全选当前页 3-全选所有页 4-取消全选所有页
+        selectionType: 0,
+        // 已取消勾选的数据
+        unSelectedRow: [],
+
         // 过滤
         filters: {}, // 不可响应的
         filteredData: null,
@@ -1704,9 +1713,19 @@ var doFlattenColumns = function doFlattenColumns(columns) {
       var states = this.states;
       states.isAllSelected = false;
       var oldSelection = states.selection;
+
+      // 表格中有选中的数据项是disabled状态时，清空时保留该数据
+      var isDisabledSelection = states.data.filter(function (row, index) {
+        // 判断selectable是不可选中状态, 且当前数据项已被选中
+        if (states.selectable && !states.selectable.call(null, row, index) && oldSelection.some(function (item) {
+          return item[states.rowKey] === row[states.rowKey];
+        })) {
+          return row;
+        }
+      });
       if (oldSelection.length) {
-        states.selection = [];
-        this.table.$emit('selection-change', []);
+        states.selection = isDisabledSelection;
+        this.table.$emit('selection-change', states.selection, false);
       }
     },
     cleanSelection: function cleanSelection() {
@@ -1735,7 +1754,7 @@ var doFlattenColumns = function doFlattenColumns(columns) {
           return deleted.indexOf(item) === -1;
         });
         states.selection = newSelection;
-        this.table.$emit('selection-change', newSelection.slice());
+        this.table.$emit('selection-change', newSelection.slice(), false);
       }
     },
     toggleRowSelection: function toggleRowSelection(row, selected) {
@@ -1746,11 +1765,65 @@ var doFlattenColumns = function doFlattenColumns(columns) {
         var newSelection = (this.states.selection || []).slice();
         // 调用 API 修改选中值，不触发 select 事件
         if (emitChange) {
+          this.getUnSelectedRow(newSelection);
           this.table.$emit('select', newSelection, row);
         }
-        this.table.$emit('selection-change', newSelection);
+        if (this.states.isCrossPageSelection) {
+          this.table.$emit('selection-change', this.states.unSelectedRow, true);
+        } else {
+          this.table.$emit('selection-change', newSelection, false);
+        }
       }
     },
+
+
+    /**
+    * 获取取消勾选数据项
+    * @param  {arr} selection 当前已选择所有数据项
+    */
+    getUnSelectedRow: function getUnSelectedRow(selection) {
+      var _this = this;
+
+      if (!this.states.isCrossPageSelection) return;
+
+      var rowKey = this.table.rowKey;
+
+      // 从全部勾选数据中过滤出当前页勾选的数据
+
+      var selected = this.table.data.filter(function (item) {
+        return selection.some(function (row) {
+          return row[rowKey] === item[rowKey];
+        });
+      });
+      // 通过当前页数据与当前页已勾选的数据, 过滤出当前页未勾选的数据
+      var unselected = this.table.data.filter(function (item) {
+        return !selected.some(function (row) {
+          return row[rowKey] === item[rowKey];
+        });
+      });
+
+      // 取消勾选数据中是否存在当页面已勾选的数据项, 如有则删除
+      var index = [];
+      this.states.unSelectedRow.forEach(function (item, i) {
+        if (selected.some(function (s) {
+          return s[rowKey] === item[rowKey];
+        })) {
+          index.push(i);
+        }
+      });
+      this.states.unSelectedRow = this.states.unSelectedRow.filter(function (item, i) {
+        return !index.includes(i);
+      });
+
+      // 取消勾选数据中如果不存在当前页未勾选的数据, 则将当前未勾选的数据添push到取消勾选数据中
+      unselected.forEach(function (item) {
+        if (!_this.states.unSelectedRow.some(function (s) {
+          return s[rowKey] === item[rowKey];
+        })) {
+          _this.states.unSelectedRow.push(item);
+        }
+      });
+    },
     _toggleAllSelection: function _toggleAllSelection() {
       var states = this.states;
       var _states$data = states.data,
@@ -1775,8 +1848,15 @@ var doFlattenColumns = function doFlattenColumns(columns) {
         }
       });
 
+      var newSelection = (this.states.selection || []).slice();
+
       if (selectionChanged) {
-        this.table.$emit('selection-change', selection ? selection.slice() : []);
+        if (states.isCrossPageSelection) {
+          this.getUnSelectedRow(newSelection);
+          this.table.$emit('selection-change', states.unSelectedRow || [], true);
+        } else {
+          this.table.$emit('selection-change', selection ? selection.slice() : [], false);
+        }
       }
       this.table.$emit('select-all', selection);
     },
@@ -1862,7 +1942,7 @@ var doFlattenColumns = function doFlattenColumns(columns) {
       this.states.sortOrder = order;
     },
     execFilter: function execFilter() {
-      var _this = this;
+      var _this2 = this;
 
       var states = this.states;
       var _data = states._data,
@@ -1873,7 +1953,7 @@ var doFlattenColumns = function doFlattenColumns(columns) {
       Object.keys(filters).forEach(function (columnId) {
         var values = states.filters[columnId];
         if (!values || values.length === 0) return;
-        var column = Object(util["d" /* getColumnById */])(_this.states, columnId);
+        var column = Object(util["d" /* getColumnById */])(_this2.states, columnId);
         if (column && column.filterMethod) {
           data = data.filter(function (row) {
             return values.some(function (value) {
@@ -3574,6 +3654,7 @@ var table_header_extends = Object.assign || function (target) { for (var i = 1;
 
 
 
+
 var getAllColumns = function getAllColumns(columns) {
   var result = [];
   columns.forEach(function (column) {
@@ -3788,6 +3869,64 @@ var convertToRows = function convertToRows(originColumns) {
     }
   })),
 
+  watch: {
+    'store.states.data': {
+      handler: function handler() {
+        var states = this.store.states;
+        var _states$data = states.data,
+            data = _states$data === undefined ? [] : _states$data,
+            selection = states.selection;
+        var rowKey = this.table.rowKey;
+        // 全选所有页
+
+        if (this.store.states.isCrossPageSelection) {
+
+          states.isAllSelected = true;
+
+          data.forEach(function (row, index) {
+            if (states.selectable) {
+              if (states.selectable.call(null, row, index)) {
+                // 如果已勾选数据中不包含当前页数据(如跳转至新的一页), 则勾选
+                if (!selection.some(function (o) {
+                  return o[rowKey] === row[rowKey];
+                })) {
+                  Object(util["n" /* toggleRowStatus */])(selection, row, true);
+                }
+                if (states.unSelectedRow.some(function (o) {
+                  return o[rowKey] === row[rowKey];
+                })) {
+                  // 如果取消勾选数据中包含当前页数据项, 则取消勾选
+                  Object(util["n" /* toggleRowStatus */])(selection, row, false);
+                  states.isAllSelected = false;
+                }
+              }
+            } else {
+              // 如果已勾选数据中不包含当前页数据(如跳转至新的一页), 则勾选
+              if (!selection.some(function (o) {
+                return o[rowKey] === row[rowKey];
+              })) {
+                Object(util["n" /* toggleRowStatus */])(selection, row, true);
+              }
+              // 如果取消勾选数据中包含当前页数据项, 则取消勾选
+              if (states.unSelectedRow.some(function (o) {
+                return o[rowKey] === row[rowKey];
+              })) {
+                Object(util["n" /* toggleRowStatus */])(selection, row, false);
+                states.isAllSelected = false;
+              }
+            }
+          });
+          // console.log(states, 'states===========================');
+        } else {
+          // states.isAllSelected = false;
+          states.selection = [];
+        }
+      },
+
+      deep: true
+    }
+  },
+
   created: function created() {
     this.filterPanels = {};
   },
@@ -3894,6 +4033,113 @@ var convertToRows = function convertToRows(originColumns) {
     toggleAllSelection: function toggleAllSelection() {
       this.store.commit('toggleAllSelection');
     },
+
+
+    /**
+    * 下拉框出现/隐藏事件
+    * @param  {bol} visible 出现/隐藏
+    */
+    onVisibleChange: function onVisibleChange(v) {
+      this.store.states.showSelectionDropdown = v;
+    },
+
+
+    /**
+    * 选择数据事件
+    * @param  {num} command 选择事件类型 1-全选当前页 2-清空当前页 3-全选所有页 4-清空所有页
+    */
+    onCommand: function onCommand(command) {
+      this.store.states.selectionType = command;
+      var states = this.store.states;
+      var _states$data2 = states.data,
+          data = _states$data2 === undefined ? [] : _states$data2,
+          selection = states.selection;
+      // console.log(this, 'this===========================');
+
+      switch (command) {
+        // 全选当前页
+        case 1:
+          states.isAllSelected = true;
+          data.forEach(function (row, index) {
+            if (states.selectable) {
+              if (states.selectable.call(null, row, index)) {
+                Object(util["n" /* toggleRowStatus */])(selection, row, true);
+              }
+            } else {
+              Object(util["n" /* toggleRowStatus */])(selection, row, true);
+            }
+          });
+          // console.log(states, 'states1===========================');
+          // 先点击跨页全选，再点击清空当前页/取消几条勾选数据, 最后点击全选当前页
+          if (states.isCrossPageSelection) {
+            // 重新计算未选中数据
+            this.store.getUnSelectedRow(states.selection);
+            // 触发el-table的'selection-change'事件
+            this.table.$listeners['selection-change'](states.unSelectedRow, true);
+          } else {
+            this.table.$listeners['selection-change'](this.table.selection, false);
+          }
+          break;
+        // 清空当前页
+        case 2:
+          // 先点击跨页选择，再点击清空当前页
+          if (states.isCrossPageSelection) {
+            // 标记当前页未选中, 如果有选中的数据，清空选中数据
+            states.isAllSelected = false;
+            var oldSelection = states.selection;
+            // 表格中有选中的数据项是disabled状态时，清空时保留该数据
+            var isDisabledSelection = states.data.filter(function (row, index) {
+              // 判断selectable是不可选中状态, 且当前数据项已被选中
+              if (states.selectable && !states.selectable.call(null, row, index) && oldSelection.some(function (item) {
+                return item[states.rowKey] === row[states.rowKey];
+              })) {
+                return row;
+              }
+            });
+            if (oldSelection.length) {
+              states.selection = isDisabledSelection;
+            }
+            // 重新计算未选中数据
+            this.store.getUnSelectedRow(states.selection);
+            // 触发el-table的'selection-change'事件
+            this.table.$listeners['selection-change'](states.unSelectedRow, true);
+          } else {
+            states.unSelectedRow = [];
+            this.table.clearSelection();
+          }
+          // console.log(states, 'states2===========================');
+          break;
+        // 全选所有页
+        case 3:
+          states.isCrossPageSelection = true;
+          states.unSelectedRow = [];
+          states.isAllSelected = true;
+          data.forEach(function (row, index) {
+            if (states.selectable) {
+              if (states.selectable.call(null, row, index)) {
+                Object(util["n" /* toggleRowStatus */])(selection, row, true);
+              }
+            } else {
+              Object(util["n" /* toggleRowStatus */])(selection, row, true);
+            }
+          });
+          // console.log(states, 'states3===========================');
+          // 重新计算未选中数据
+          this.store.getUnSelectedRow(states.selection);
+          // 触发el-table的'selection-change'事件
+          this.table.$listeners['selection-change'](states.unSelectedRow, true);
+          break;
+        // 清空所有页
+        case 4:
+          states.isCrossPageSelection = false;
+          states.unSelectedRow = [];
+          // console.log(states, 'states4===========================');
+          this.table.clearSelection();
+          break;
+        default:
+          break;
+      }
+    },
     handleFilterClick: function handleFilterClick(event, column) {
       event.stopPropagation();
       var target = event.target;
@@ -4601,6 +4847,11 @@ var tableIdSeed = 1;
       default: true
     },
 
+    crossPageSelection: {
+      type: Boolean,
+      default: false
+    },
+
     indent: {
       type: Number,
       default: 16