iov-design 2.15.30 → 2.15.32

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

@@ -58,6 +58,15 @@ export default Vue.extend({
         selectOnIndeterminate: false,
         selectable: null,
 
+        // 跨页全选标记
+        isCrossPageSelection: false,
+        // 全选下拉出现/隐藏事件
+        showSelectionDropdown: false,
+        // 1-全选当前页 2-取消全选当前页 3-全选所有页 4-取消全选所有页
+        selectionType: 0,
+        // 已取消勾选的数据
+        unSelectedRow: [],
+
         // 过滤
         filters: {}, // 不可响应的
         filteredData: null,
@@ -126,9 +135,17 @@ export default Vue.extend({
       const states = this.states;
       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 = [];
-        this.table.$emit('selection-change', []);
+        states.selection = isDisabledSelection;
+        this.table.$emit('selection-change', states.selection, false);
       }
     },
 
@@ -151,7 +168,7 @@ export default Vue.extend({
       if (deleted.length) {
         const newSelection = selection.filter(item => deleted.indexOf(item) === -1);
         states.selection = newSelection;
-        this.table.$emit('selection-change', newSelection.slice());
+        this.table.$emit('selection-change', newSelection.slice(), false);
       }
     },
 
@@ -161,12 +178,48 @@ export default Vue.extend({
         const 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(selection) {
+      if (!this.states.isCrossPageSelection) return;
+
+      const { rowKey } = this.table;
+
+      // 从全部勾选数据中过滤出当前页勾选的数据
+      const selected = this.table.data.filter(item => selection.some(row => row[rowKey] === item[rowKey]));
+      // 通过当前页数据与当前页已勾选的数据, 过滤出当前页未勾选的数据
+      const unselected = this.table.data.filter((item) => !selected.some((row) => row[rowKey] === item[rowKey]));
+
+      // 取消勾选数据中是否存在当页面已勾选的数据项, 如有则删除
+      const index = [];
+      this.states.unSelectedRow.forEach((item, i) => {
+        if (selected.some(s => s[rowKey] === item[rowKey])) {
+          index.push(i);
+        }
+      });
+      this.states.unSelectedRow = this.states.unSelectedRow.filter((item, i) => !index.includes(i));
+
+      // 取消勾选数据中如果不存在当前页未勾选的数据, 则将当前未勾选的数据添push到取消勾选数据中
+      unselected.forEach(item => {
+        if (!this.states.unSelectedRow.some(s => s[rowKey] === item[rowKey])) {
+          this.states.unSelectedRow.push(item);
+        }
+      });
+    },
+
     _toggleAllSelection() {
       const states = this.states;
       const { data = [], selection } = states;
@@ -190,8 +243,15 @@ export default Vue.extend({
         }
       });
 
+      const 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);
     },

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/date-picker/picker.scss

@@ -60,7 +60,7 @@
   }
 
   .el-input__icon {
-    padding: 0 12px 0 0;
+    padding: 0 8px 0 0;
     font-size: 14px;
     color: $--input-icon-color;
     line-height: 36px;

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.30',
+  version: '2.15.32',
   locale: locale.use,
   i18n: locale.i18n,
   install,