iov-design 2.15.31 → 2.15.32

package/packages/table/src/table-header.js

@@ -4,6 +4,7 @@ import ElCheckbox from 'iov-design/packages/checkbox';
 import FilterPanel from './filter-panel.vue';
 import LayoutObserver from './layout-observer';
 import { mapStates } from './store/helper';
+import { toggleRowStatus } from './util';
 
 const getAllColumns = (columns) => {
   const result = [];
@@ -187,6 +188,52 @@ export default {
     })
   },
 
+  watch: {
+    'store.states.data': {
+      handler() {
+        const { states } = this.store;
+        const { data = [], selection } = states;
+        const { rowKey } = this.table;
+        // 全选所有页
+        if (this.store.states.isCrossPageSelection) {
+
+          states.isAllSelected = true;
+
+          data.forEach((row, index) => {
+            if (states.selectable) {
+              if (states.selectable.call(null, row, index)) {
+                // 如果已勾选数据中不包含当前页数据(如跳转至新的一页), 则勾选
+                if (!selection.some(o => o[rowKey] === row[rowKey])) {
+                  toggleRowStatus(selection, row, true);
+                }
+                if (states.unSelectedRow.some(o => o[rowKey] === row[rowKey])) {
+                  // 如果取消勾选数据中包含当前页数据项, 则取消勾选
+                  toggleRowStatus(selection, row, false);
+                  states.isAllSelected = false;
+                }
+              }
+            } else {
+              // 如果已勾选数据中不包含当前页数据(如跳转至新的一页), 则勾选
+              if (!selection.some(o => o[rowKey] === row[rowKey])) {
+                toggleRowStatus(selection, row, true);
+              }
+              // 如果取消勾选数据中包含当前页数据项, 则取消勾选
+              if (states.unSelectedRow.some(o => o[rowKey] === row[rowKey])) {
+                toggleRowStatus(selection, row, false);
+                states.isAllSelected = false;
+              }
+            }
+          });
+          // console.log(states, 'states===========================');
+        } else {
+          // states.isAllSelected = false;
+          states.selection = [];
+        }
+      },
+      deep: true
+    }
+  },
+
   created() {
     this.filterPanels = {};
   },
@@ -295,6 +342,108 @@ export default {
       this.store.commit('toggleAllSelection');
     },
 
+    /**
+    * 下拉框出现/隐藏事件
+    * @param  {bol} visible 出现/隐藏
+    */
+    onVisibleChange(v) {
+      this.store.states.showSelectionDropdown = v;
+    },
+
+    /**
+    * 选择数据事件
+    * @param  {num} command 选择事件类型 1-全选当前页 2-清空当前页 3-全选所有页 4-清空所有页
+    */
+    onCommand(command) {
+      this.store.states.selectionType = command;
+      const { states } = this.store;
+      const { data = [], selection } = states;
+      // console.log(this, 'this===========================');
+
+      switch (command) {
+        // 全选当前页
+        case 1:
+          states.isAllSelected = true;
+          data.forEach((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;
+            const oldSelection = states.selection;
+            // 表格中有选中的数据项是disabled状态时，清空时保留该数据
+            const isDisabledSelection = states.data.filter((row, index) => {
+              // 判断selectable是不可选中状态, 且当前数据项已被选中
+              if (states.selectable && !states.selectable.call(null, row, index) && oldSelection.some(item => 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((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(event, column) {
       event.stopPropagation();
       const target = event.target;

package/packages/table/src/table.vue

@@ -325,6 +325,11 @@
         default: true
       },
 
+      crossPageSelection: {
+        type: Boolean,
+        default: false
+      },
+
       indent: {
         type: Number,
         default: 16
@@ -676,6 +681,7 @@
       });
 
       this.$ready = true;
+
     },
 
     destroyed() {

package/packages/theme-chalk/src/table.scss

@@ -36,6 +36,20 @@
     pointer-events: none;
   }
 
+
+  // 跨页选择
+  @include e(cross-page-selection) {
+    .iov-icon-arrow-down {
+      color: $--color-fill-6;
+      cursor: pointer;
+      transition: all ease .2s;
+      &.show-selection-dropdown {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+
   // 展开行
   @include e(expand-column) {
     .cell {
@@ -285,18 +299,18 @@
     .has-gutter {
       .el-table__cell {
         border-bottom: 0 none;
-        &:nth-last-child(2) {
-          border-right: 0 none;
-        }
+        // &:nth-last-child(2) {
+        //   border-right: 0 none;
+        // }
       }
     }
 
     .el-table__row {
-      .el-table__cell {
-        &:last-child {
-          border-right: 0 none;
-        }
-      }
+      // .el-table__cell {
+      //   &:last-child {
+      //     border-right: 0 none;
+      //   }
+      // }
       &:last-child {
         .el-table__cell {
           border-bottom: 0 none;
@@ -384,6 +398,18 @@
     .el-table__fixed-footer-wrapper {
       left: auto;
       right: 0;
+      .el-table__row {
+        .el-table__cell {
+          &:last-child {
+            border-right: 0 none;
+          }
+        }
+        &:last-child {
+          .el-table__cell {
+            border-bottom: 0 none;
+          }
+        }
+      }
     }
   }
 

package/src/index.js

@@ -212,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.31',
+  version: '2.15.32',
   locale: locale.use,
   i18n: locale.i18n,
   install,