@scenetechnology/cj_iview_table 0.0.67 → 0.0.68

package/README.md

@@ -61,10 +61,12 @@ cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、
 | height | String | - | 表格高度 |
 | maxHeight | String | - | 最大高度 |
 | toolBar | Array/Boolean | true | 工具栏配置 |
-| defaultSize | Number | - | 默认分页大小 |
-| filterGridSpan | Number | 6 | 筛选栏栅格跨度 |
-| filterLabelWidth | Number | 80 | 筛选标签宽度 |
-| fields | Array | [] | 导出数据时需要包含的属性名 |
+| defaultSize | Number | - | 默认分页大小 |
+| rowKey | String/Boolean | id | 开启跨分页保留选中时使用的唯一键，支持如 `id`、`user.id` |
+| reserveSelection | Boolean | false | 是否保留跨分页、跨筛选/搜索的多选结果 |
+| filterGridSpan | Number | 6 | 筛选栏栅格跨度 |
+| filterLabelWidth | Number | 80 | 筛选标签宽度 |
+| fields | Array | [] | 导出数据时需要包含的属性名 |
 
 ### 列配置项
 每个column支持以下属性：
@@ -81,9 +83,11 @@ cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、
 | slot | Boolean | 是否使用自定义插槽 |
 
 ## 事件
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| on-change | 分页、排序等变化时触发 | (pagination, filters, sorter) |
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| on-change | 分页、排序等变化时触发 | (pagination, filters, sorter) |
+| on-selection-change | 当前页选中项变化时触发 | (selection) |
+| on-reserve-selection-change | 开启 `reserveSelection` 后，所有已保留选中项变化时触发 | (selection) |
 
 ## 插槽
 | 插槽名 | 说明 |
@@ -105,10 +109,28 @@ cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、
 - 列排序
 - 列固定
 
-### 3. 数据请求
-支持两种数据加载方式：
-- 通过data属性直接传入数据
-- 通过request函数异步加载数据
+### 3. 数据请求
+支持两种数据加载方式：
+- 通过data属性直接传入数据
+- 通过request函数异步加载数据
+
+### 4. 跨分页保留选中
+当表格包含 `type: 'selection'` 列时，可通过 `reserveSelection` 开启跨分页、跨搜索/筛选保留勾选。
+
+```vue
+<cj_iview_table
+  :columns="columns"
+  :request="loadData"
+  row-key="id"
+  :reserveSelection="true"
+  @on-reserve-selection-change="handleSelectionChange"
+/>
+```
+
+说明：
+- `rowKey` 必须能唯一标识一行数据，支持多级路径，例如 `user.id`
+- `on-selection-change` 返回的是当前页选中项
+- `on-reserve-selection-change` 返回的是所有分页/筛选范围内累计保留的选中项
 
 ## 使用示例
 

package/dist/cj_iview_table.common.js

@@ -21021,6 +21021,46 @@ module.exports = function (name) {
 };
 
 
+/***/ }),
+
+/***/ 8237:
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var $ = __webpack_require__(6518);
+var iterate = __webpack_require__(2652);
+var aCallable = __webpack_require__(9306);
+var anObject = __webpack_require__(8551);
+var getIteratorDirect = __webpack_require__(1767);
+
+var $TypeError = TypeError;
+
+// `Iterator.prototype.reduce` method
+// https://tc39.es/ecma262/#sec-iterator.prototype.reduce
+$({ target: 'Iterator', proto: true, real: true }, {
+  reduce: function reduce(reducer /* , initialValue */) {
+    anObject(this);
+    aCallable(reducer);
+    var record = getIteratorDirect(this);
+    var noInitial = arguments.length < 2;
+    var accumulator = noInitial ? undefined : arguments[1];
+    var counter = 0;
+    iterate(record, function (value) {
+      if (noInitial) {
+        noInitial = false;
+        accumulator = value;
+      } else {
+        accumulator = reducer(accumulator, value, counter);
+      }
+      counter++;
+    }, { IS_RECORD: true });
+    if (noInitial) throw new $TypeError('Reduce of empty iterator with no initial value');
+    return accumulator;
+  }
+});
+
+
 /***/ }),
 
 /***/ 8469:
@@ -25759,7 +25799,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=template&id=694727b8&scoped=true
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=template&id=514a3b03&scoped=true
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -26151,6 +26191,7 @@ var render = function render() {
     ref: "selection",
     attrs: {
       "border": _vm.border,
+      "row-key": _vm.tableRowKey,
       "columns": _vm.tableColumns,
       "loading": _vm.tableLoading,
       "data": _vm.dataSource,
@@ -26242,6 +26283,8 @@ var es_iterator_find = __webpack_require__(116);
 var es_iterator_for_each = __webpack_require__(7588);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.map.js
 var es_iterator_map = __webpack_require__(1701);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.reduce.js
+var es_iterator_reduce = __webpack_require__(8237);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.some.js
 var es_iterator_some = __webpack_require__(3579);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.set.difference.v2.js
@@ -36362,6 +36405,8 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
 
 
 
+
+
 
 
 
@@ -36461,6 +36506,14 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
       type: Object,
       required: false
     },
+    rowKey: {
+      type: [String, Boolean],
+      default: 'id'
+    },
+    reserveSelection: {
+      type: Boolean,
+      default: false
+    },
     // 请求-获取数据
     request: {
       type: Function,
@@ -36497,6 +36550,8 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
       filterCount: 0,
       // 选中的数据
       selectionItems: [],
+      reserveSelectionMap: {},
+      isRestoringSelection: false,
       defToolBar: [{
         text: '新增',
         type: 'primary'
@@ -36887,6 +36942,12 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
      */
     formKey() {
       return item => item.as ? item.as : item.key;
+    },
+    tableRowKey() {
+      if (!this.reserveSelection) {
+        return false;
+      }
+      return this.rowKey || false;
     }
   },
   watch: {
@@ -36925,11 +36986,113 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
         this.page.total = newVal;
       }
     },
+    dataSource() {
+      if (this.shouldReserveSelection()) {
+        this.queueRestoreSelection();
+      }
+    },
     requestParams() {
       this.reload();
     }
   },
   methods: {
+    hasValidRowKey(value) {
+      return value !== undefined && value !== null && value !== '';
+    },
+    getRowIdentity(row) {
+      if (!row || !this.rowKey || typeof this.rowKey !== 'string') {
+        return undefined;
+      }
+      return this.rowKey.split('.').reduce((result, key) => {
+        return result == null ? undefined : result[key];
+      }, row);
+    },
+    shouldReserveSelection() {
+      return this.reserveSelection && this.columns.some(item => item.type === 'selection') && typeof this.rowKey === 'string' && this.rowKey !== '';
+    },
+    setReserveSelectionMap(nextMap) {
+      this.reserveSelectionMap = nextMap;
+      this.selectionItems = Object.values(nextMap);
+    },
+    syncReserveSelection(selectionItems = []) {
+      if (!this.shouldReserveSelection()) {
+        this.selectionItems = selectionItems;
+        return;
+      }
+      const nextMap = {
+        ...this.reserveSelectionMap
+      };
+      const pageKeys = [];
+      this.dataSource.forEach(row => {
+        const rowKey = this.getRowIdentity(row);
+        if (this.hasValidRowKey(rowKey)) {
+          pageKeys.push(String(rowKey));
+        }
+      });
+      pageKeys.forEach(key => {
+        delete nextMap[key];
+      });
+      selectionItems.forEach(row => {
+        const rowKey = this.getRowIdentity(row);
+        if (this.hasValidRowKey(rowKey)) {
+          nextMap[String(rowKey)] = row;
+        }
+      });
+      this.setReserveSelectionMap(nextMap);
+    },
+    getCurrentTableSelection() {
+      const tableRef = this.$refs.selection;
+      if (tableRef && typeof tableRef.getSelection === 'function') {
+        return tableRef.getSelection();
+      }
+      return [];
+    },
+    queueRestoreSelection() {
+      this.$nextTick(() => {
+        this.restoreSelection();
+      });
+    },
+    restoreSelection() {
+      if (!this.shouldReserveSelection()) {
+        return;
+      }
+      const tableRef = this.$refs.selection;
+      if (!tableRef || typeof tableRef.toggleSelect !== 'function') {
+        return;
+      }
+      const selectedKeys = new Set(Object.keys(this.reserveSelectionMap));
+      if (selectedKeys.size === 0) {
+        return;
+      }
+      const currentSelection = this.getCurrentTableSelection();
+      const currentSelectionKeys = new Set(currentSelection.map(row => this.getRowIdentity(row)).filter(rowKey => this.hasValidRowKey(rowKey)).map(rowKey => String(rowKey)));
+      this.isRestoringSelection = true;
+      this.dataSource.forEach((row, index) => {
+        const rowKey = this.getRowIdentity(row);
+        if (!this.hasValidRowKey(rowKey)) {
+          return;
+        }
+        const normalizedKey = String(rowKey);
+        const shouldBeSelected = selectedKeys.has(normalizedKey);
+        const isSelected = currentSelectionKeys.has(normalizedKey);
+        if (shouldBeSelected !== isSelected) {
+          tableRef.toggleSelect(index, rowKey);
+        }
+      });
+      this.$nextTick(() => {
+        this.isRestoringSelection = false;
+      });
+    },
+    clearReserveSelection() {
+      this.setReserveSelectionMap({});
+      const selectedRowKeys = new Set(this.getCurrentTableSelection().map(row => this.getRowIdentity(row)).filter(rowKey => this.hasValidRowKey(rowKey)).map(rowKey => String(rowKey)));
+      this.dataSource.forEach((row, index) => {
+        const rowKey = this.getRowIdentity(row);
+        if (this.hasValidRowKey(rowKey) && selectedRowKeys.has(String(rowKey)) && this.$refs.selection && typeof this.$refs.selection.toggleSelect === 'function') {
+          this.$refs.selection.toggleSelect(index, rowKey);
+        }
+      });
+    },
     isJsonString(str) {
       if (typeof str !== 'string') return false;
       try {
@@ -37256,7 +37419,15 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
      * @param {*} selectionItems
      */
     onSelectionChange(selectionItems) {
-      this.selectionItems = selectionItems;
+      if (this.shouldReserveSelection()) {
+        this.syncReserveSelection(selectionItems);
+        if (this.isRestoringSelection) {
+          return;
+        }
+        this.$emit('on-reserve-selection-change', this.selectionItems);
+      } else {
+        this.selectionItems = selectionItems;
+      }
       // 向父组件发射选择变化事件
       this.$emit('on-selection-change', selectionItems);
     },
@@ -37372,7 +37543,7 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
      * 刷新
      */
     reload() {
-      if (this.selectionItems.length > 0) {
+      if (!this.shouldReserveSelection() && this.selectionItems.length > 0) {
         this.selectionItems.length = 0;
       }
       this.getDataSource();
@@ -37926,15 +38097,15 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
 });
 ;// ./packages/components/index.vue?vue&type=script&lang=js
  /* harmony default export */ var packages_componentsvue_type_script_lang_js = (componentsvue_type_script_lang_js); 
-;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=style&index=0&id=694727b8&prod&scoped=true&lang=less
+;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=style&index=0&id=514a3b03&prod&scoped=true&lang=less
 // extracted by mini-css-extract-plugin
 
-;// ./packages/components/index.vue?vue&type=style&index=0&id=694727b8&prod&scoped=true&lang=less
+;// ./packages/components/index.vue?vue&type=style&index=0&id=514a3b03&prod&scoped=true&lang=less
 
-;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=style&index=1&id=694727b8&prod&lang=css
+;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=style&index=1&id=514a3b03&prod&lang=css
 // extracted by mini-css-extract-plugin
 
-;// ./packages/components/index.vue?vue&type=style&index=1&id=694727b8&prod&lang=css
+;// ./packages/components/index.vue?vue&type=style&index=1&id=514a3b03&prod&lang=css
 
 ;// ./packages/components/index.vue
 
@@ -37952,7 +38123,7 @@ var components_component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "694727b8",
+  "514a3b03",
   null
   
 )