iov-design 2.15.31 → 2.15.32

package/lib/iov-design.common.js

@@ -10997,6 +10997,15 @@ var doFlattenColumns = function doFlattenColumns(columns) {
         selectOnIndeterminate: false,
         selectable: null,
 
+        // 跨页全选标记
+        isCrossPageSelection: false,
+        // 全选下拉出现/隐藏事件
+        showSelectionDropdown: false,
+        // 1-全选当前页 2-取消全选当前页 3-全选所有页 4-取消全选所有页
+        selectionType: 0,
+        // 已取消勾选的数据
+        unSelectedRow: [],
+
         // 过滤
         filters: {}, // 不可响应的
         filteredData: null,
@@ -11076,9 +11085,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() {
@@ -11107,7 +11126,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) {
@@ -11118,11 +11137,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,
@@ -11147,8 +11220,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);
     },
@@ -11234,7 +11314,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,
@@ -11245,7 +11325,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 = getColumnById(_this.states, columnId);
+        var column = getColumnById(_this2.states, columnId);
         if (column && column.filterMethod) {
           data = data.filter(function (row) {
             return values.some(function (value) {
@@ -12917,6 +12997,7 @@ var table_header_extends = Object.assign || function (target) { for (var i = 1;
 
 
 
+
 var getAllColumns = function getAllColumns(columns) {
   var result = [];
   columns.forEach(function (column) {
@@ -13131,6 +13212,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];
+                })) {
+                  toggleRowStatus(selection, row, true);
+                }
+                if (states.unSelectedRow.some(function (o) {
+                  return o[rowKey] === row[rowKey];
+                })) {
+                  // 如果取消勾选数据中包含当前页数据项, 则取消勾选
+                  toggleRowStatus(selection, row, false);
+                  states.isAllSelected = false;
+                }
+              }
+            } else {
+              // 如果已勾选数据中不包含当前页数据(如跳转至新的一页), 则勾选
+              if (!selection.some(function (o) {
+                return o[rowKey] === row[rowKey];
+              })) {
+                toggleRowStatus(selection, row, true);
+              }
+              // 如果取消勾选数据中包含当前页数据项, 则取消勾选
+              if (states.unSelectedRow.some(function (o) {
+                return o[rowKey] === row[rowKey];
+              })) {
+                toggleRowStatus(selection, row, false);
+                states.isAllSelected = false;
+              }
+            }
+          });
+          // console.log(states, 'states===========================');
+        } else {
+          // states.isAllSelected = false;
+          states.selection = [];
+        }
+      },
+
+      deep: true
+    }
+  },
+
   created: function created() {
     this.filterPanels = {};
   },
@@ -13237,6 +13376,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)) {
+                toggleRowStatus(selection, row, true);
+              }
+            } else {
+              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)) {
+                toggleRowStatus(selection, row, true);
+              }
+            } else {
+              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;
@@ -13944,6 +14190,11 @@ var tableIdSeed = 1;
       default: true
     },
 
+    crossPageSelection: {
+      type: Boolean,
+      default: false
+    },
+
     indent: {
       type: Number,
       default: 16
@@ -14406,18 +14657,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,
@@ -43725,7 +44046,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 /* harmony default export */ var src_0 = __webpack_exports__["default"] = ({
-  version: '2.15.31',
+  version: '2.15.32',
   locale: lib_locale_default.a.use,
   i18n: lib_locale_default.a.i18n,
   install: src_install,

package/lib/loading.js

@@ -210,13 +210,6 @@ module.exports = require("iov-design/lib/utils/after-leave");
 
 /***/ }),
 
-/***/ 7:
-/***/ (function(module, exports) {
-
-module.exports = require("vue");
-
-/***/ }),
-
 /***/ 72:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -224,7 +217,7 @@ module.exports = require("vue");
 __webpack_require__.r(__webpack_exports__);
 
 // 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_);
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/loading/src/loading.vue?vue&type=template&id=eee0a7ac&
@@ -620,6 +613,13 @@ var src_Loading = function Loading() {
 
 /***/ }),
 
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("vue");
+
+/***/ }),
+
 /***/ 9:
 /***/ (function(module, exports) {
 

package/lib/message-box.js

@@ -238,17 +238,10 @@ module.exports = require("iov-design/lib/utils/aria-dialog");
 
 /***/ }),
 
-/***/ 6:
-/***/ (function(module, exports) {
-
-module.exports = require("iov-design/lib/mixins/locale");
-
-/***/ }),
-
 /***/ 7:
 /***/ (function(module, exports) {
 
-module.exports = require("vue");
+module.exports = require("iov-design/lib/mixins/locale");
 
 /***/ }),
 
@@ -259,7 +252,7 @@ module.exports = require("vue");
 __webpack_require__.r(__webpack_exports__);
 
 // 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_);
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/message-box/src/main.vue?vue&type=template&id=6b29b012&
@@ -561,7 +554,7 @@ var popup_ = __webpack_require__(13);
 var popup_default = /*#__PURE__*/__webpack_require__.n(popup_);
 
 // 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"
@@ -1181,6 +1174,13 @@ main_MessageBox.close = function () {
 
 /***/ }),
 
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("vue");
+
+/***/ }),
+
 /***/ 9:
 /***/ (function(module, exports) {
 

package/lib/message.js

@@ -210,13 +210,6 @@ module.exports = require("iov-design/lib/utils/vdom");
 
 /***/ }),
 
-/***/ 7:
-/***/ (function(module, exports) {
-
-module.exports = require("vue");
-
-/***/ }),
-
 /***/ 75:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -224,7 +217,7 @@ module.exports = require("vue");
 __webpack_require__.r(__webpack_exports__);
 
 // 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_);
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/message/src/main.vue?vue&type=template&id=455b9f60&
@@ -542,6 +535,13 @@ main_Message.closeAll = function () {
 
 /* harmony default export */ var message = __webpack_exports__["default"] = (src_main);
 
+/***/ }),
+
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("vue");
+
 /***/ })
 
 /******/ });

package/lib/notification.js

@@ -203,13 +203,6 @@ module.exports = require("iov-design/lib/utils/vdom");
 
 /***/ }),
 
-/***/ 7:
-/***/ (function(module, exports) {
-
-module.exports = require("vue");
-
-/***/ }),
-
 /***/ 74:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -217,7 +210,7 @@ module.exports = require("vue");
 __webpack_require__.r(__webpack_exports__);
 
 // 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_);
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/notification/src/main.vue?vue&type=template&id=43dbc3d8&
@@ -604,6 +597,13 @@ main_Notification.closeAll = function () {
 
 /***/ }),
 
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("vue");
+
+/***/ }),
+
 /***/ 9:
 /***/ (function(module, exports) {
 

package/lib/pagination.js

@@ -217,7 +217,7 @@ module.exports = require("iov-design/lib/option");
 
 /***/ }),
 
-/***/ 6:
+/***/ 7:
 /***/ (function(module, exports) {
 
 module.exports = require("iov-design/lib/mixins/locale");
@@ -513,7 +513,7 @@ var input_ = __webpack_require__(10);
 var input_default = /*#__PURE__*/__webpack_require__.n(input_);
 
 // 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/utils/util"

package/lib/popover.js

@@ -210,13 +210,6 @@ module.exports = require("iov-design/lib/utils/vue-popper");
 
 /***/ }),
 
-/***/ 7:
-/***/ (function(module, exports) {
-
-module.exports = require("vue");
-
-/***/ }),
-
 /***/ 77:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -592,7 +585,7 @@ var getReference = function getReference(el, binding, vnode) {
   }
 });
 // 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_);
 
 // CONCATENATED MODULE: ./packages/popover/index.js
@@ -611,6 +604,13 @@ main.directive = directive;
 
 /* harmony default export */ var popover = __webpack_exports__["default"] = (main);
 
+/***/ }),
+
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("vue");
+
 /***/ })
 
 /******/ });