@scenetechnology/cj_iview_table 0.0.67 → 0.0.69

package/README.md

@@ -62,6 +62,9 @@ cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、
 | maxHeight | String | - | 最大高度 |
 | toolBar | Array/Boolean | true | 工具栏配置 |
 | defaultSize | Number | - | 默认分页大小 |
+| rowKey | String/Boolean | id | 开启跨分页保留选中时使用的唯一键，支持如 `id`、`user.id` |
+| selectedRowKeys | Array | [] | 外部传入的已选 rowKey 列表，可用于页面返回后恢复勾选 |
+| reserveSelection | Boolean | false | 是否保留跨分页、跨筛选/搜索的多选结果 |
 | filterGridSpan | Number | 6 | 筛选栏栅格跨度 |
 | filterLabelWidth | Number | 80 | 筛选标签宽度 |
 | fields | Array | [] | 导出数据时需要包含的属性名 |
@@ -84,6 +87,9 @@ cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、
 | 事件名 | 说明 | 回调参数 |
 |--------|------|----------|
 | on-change | 分页、排序等变化时触发 | (pagination, filters, sorter) |
+| on-selection-change | 当前页选中项变化时触发 | (selection) |
+| on-reserve-selection-change | 开启 `reserveSelection` 后，所有已保留选中项变化时触发 | (selection) |
+| on-reserve-selection-keys-change | 开启 `reserveSelection` 后，所有已保留选中的 rowKey 列表变化时触发 | (selectedRowKeys) |
 
 ## 插槽
 | 插槽名 | 说明 |
@@ -110,6 +116,59 @@ cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、
 - 通过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` 返回的是所有分页/筛选范围内累计保留的选中项
+
+### 5. 跨页面返回后恢复勾选
+如果你会在离开列表页后再回来，需要由父页面自己保存已选 rowKey 列表，并在重新进入时通过 `selectedRowKeys` 传回组件。
+
+```vue
+<cj_iview_table
+  :columns="columns"
+  :request="loadData"
+  row-key="id"
+  :reserveSelection="true"
+  :selectedRowKeys="savedSelectedRowKeys"
+  @on-reserve-selection-keys-change="handleReserveSelectionKeysChange"
+/>
+```
+
+```js
+export default {
+  data () {
+    return {
+      savedSelectedRowKeys: JSON.parse(sessionStorage.getItem('table-selected-row-keys') || '[]')
+    }
+  },
+  methods: {
+    handleReserveSelectionKeysChange (selectedRowKeys) {
+      this.savedSelectedRowKeys = selectedRowKeys
+      sessionStorage.setItem('table-selected-row-keys', JSON.stringify(selectedRowKeys))
+    }
+  }
+}
+```
+
+说明：
+- `selectedRowKeys` 传的是 rowKey 数组，不是整行数据
+- 组件会在数据重新加载后自动按这些 key 回显勾选
+- 如果某些 key 在当前数据集中不存在，会被自动忽略
+
 ## 使用示例
 
 ```vue

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=6e06842e&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,18 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
       type: Object,
       required: false
     },
+    rowKey: {
+      type: [String, Boolean],
+      default: 'id'
+    },
+    selectedRowKeys: {
+      type: Array,
+      default: () => []
+    },
+    reserveSelection: {
+      type: Boolean,
+      default: false
+    },
     // 请求-获取数据
     request: {
       type: Function,
@@ -36497,6 +36554,9 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
       filterCount: 0,
       // 选中的数据
       selectionItems: [],
+      reserveSelectionMap: {},
+      reserveSelectionKeys: [],
+      isRestoringSelection: false,
       defToolBar: [{
         text: '新增',
         type: 'primary'
@@ -36887,6 +36947,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 +36991,166 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
         this.page.total = newVal;
       }
     },
+    dataSource() {
+      if (this.shouldReserveSelection()) {
+        this.queueRestoreSelection();
+      }
+    },
+    selectedRowKeys: {
+      immediate: true,
+      deep: true,
+      handler(newVal) {
+        if (this.shouldReserveSelection()) {
+          this.applySelectedRowKeys(newVal);
+        }
+      }
+    },
     requestParams() {
       this.reload();
     }
   },
   methods: {
+    normalizeRowKeyValue(value) {
+      return this.hasValidRowKey(value) ? String(value) : '';
+    },
+    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 !== '';
+    },
+    normalizeSelectedRowKeys(selectedRowKeys = []) {
+      if (!Array.isArray(selectedRowKeys)) {
+        return [];
+      }
+      return Array.from(new Set(selectedRowKeys.map(item => this.normalizeRowKeyValue(item)).filter(Boolean)));
+    },
+    setReserveSelectionState(nextMap = {}, nextKeys = []) {
+      const normalizedKeys = this.normalizeSelectedRowKeys(nextKeys);
+      const normalizedMap = normalizedKeys.reduce((result, key) => {
+        if (nextMap[key]) {
+          result[key] = nextMap[key];
+        }
+        return result;
+      }, {});
+      this.reserveSelectionMap = normalizedMap;
+      this.reserveSelectionKeys = normalizedKeys;
+      this.selectionItems = normalizedKeys.map(key => normalizedMap[key]).filter(Boolean);
+    },
+    applySelectedRowKeys(selectedRowKeys = []) {
+      if (!this.shouldReserveSelection()) {
+        return;
+      }
+      const normalizedKeys = this.normalizeSelectedRowKeys(selectedRowKeys);
+      const selectedKeySet = new Set(normalizedKeys);
+      const nextMap = normalizedKeys.reduce((result, key) => {
+        if (this.reserveSelectionMap[key]) {
+          result[key] = this.reserveSelectionMap[key];
+        }
+        return result;
+      }, {});
+      this.dataSource.forEach(row => {
+        const rowKey = this.normalizeRowKeyValue(this.getRowIdentity(row));
+        if (rowKey && selectedKeySet.has(rowKey)) {
+          nextMap[rowKey] = row;
+        }
+      });
+      this.setReserveSelectionState(nextMap, normalizedKeys);
+      this.queueRestoreSelection();
+    },
+    getReserveSelectionKeys() {
+      return [...this.reserveSelectionKeys];
+    },
+    syncReserveSelection(selectionItems = []) {
+      if (!this.shouldReserveSelection()) {
+        this.selectionItems = selectionItems;
+        return;
+      }
+      const nextMap = {
+        ...this.reserveSelectionMap
+      };
+      const nextKeys = new Set(this.reserveSelectionKeys);
+      const pageKeys = [];
+      this.dataSource.forEach(row => {
+        const rowKey = this.normalizeRowKeyValue(this.getRowIdentity(row));
+        if (rowKey) {
+          pageKeys.push(rowKey);
+        }
+      });
+      pageKeys.forEach(key => {
+        delete nextMap[key];
+        nextKeys.delete(key);
+      });
+      selectionItems.forEach(row => {
+        const rowKey = this.normalizeRowKeyValue(this.getRowIdentity(row));
+        if (rowKey) {
+          nextMap[rowKey] = row;
+          nextKeys.add(rowKey);
+        }
+      });
+      this.setReserveSelectionState(nextMap, Array.from(nextKeys));
+    },
+    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(this.reserveSelectionKeys);
+      const currentSelection = this.getCurrentTableSelection();
+      const currentSelectionKeys = new Set(currentSelection.map(row => this.getRowIdentity(row)).map(rowKey => this.normalizeRowKeyValue(rowKey)).filter(Boolean));
+      this.isRestoringSelection = true;
+      this.dataSource.forEach((row, index) => {
+        const rowKey = this.getRowIdentity(row);
+        const normalizedKey = this.normalizeRowKeyValue(rowKey);
+        if (!normalizedKey) {
+          return;
+        }
+        const shouldBeSelected = selectedKeys.has(normalizedKey);
+        const isSelected = currentSelectionKeys.has(normalizedKey);
+        if (shouldBeSelected !== isSelected) {
+          tableRef.toggleSelect(index, rowKey);
+        }
+      });
+      this.$nextTick(() => {
+        this.isRestoringSelection = false;
+      });
+    },
+    clearReserveSelection() {
+      this.setReserveSelectionState({}, []);
+      const selectedRowKeys = new Set(this.getCurrentTableSelection().map(row => this.getRowIdentity(row)).map(rowKey => this.normalizeRowKeyValue(rowKey)).filter(Boolean));
+      this.dataSource.forEach((row, index) => {
+        const rowKey = this.getRowIdentity(row);
+        const normalizedKey = this.normalizeRowKeyValue(rowKey);
+        if (normalizedKey && selectedRowKeys.has(normalizedKey) && this.$refs.selection && typeof this.$refs.selection.toggleSelect === 'function') {
+          this.$refs.selection.toggleSelect(index, rowKey);
+        }
+      });
+      this.$emit('on-reserve-selection-change', []);
+      this.$emit('on-reserve-selection-keys-change', []);
+    },
     isJsonString(str) {
       if (typeof str !== 'string') return false;
       try {
@@ -37256,7 +37477,16 @@ 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);
+        this.$emit('on-reserve-selection-keys-change', this.getReserveSelectionKeys());
+      } else {
+        this.selectionItems = selectionItems;
+      }
       // 向父组件发射选择变化事件
       this.$emit('on-selection-change', selectionItems);
     },
@@ -37372,7 +37602,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 +38156,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=6e06842e&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=6e06842e&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=6e06842e&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=6e06842e&prod&lang=css
 
 ;// ./packages/components/index.vue
 
@@ -37952,7 +38182,7 @@ var components_component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "694727b8",
+  "6e06842e",
   null
   
 )