zartui 2.1.25 → 2.1.27

package/lib/multiple-picker/index.js

@@ -41,6 +41,10 @@ var _default2 = exports.default = createComponent({
         return [];
       }
     },
+    filteredOptions: {
+      type: Array,
+      default: null
+    },
     toolbarPosition: {
       type: String,
       default: 'bottom'
@@ -64,23 +68,73 @@ var _default2 = exports.default = createComponent({
   }),
   data: function data() {
     return {
+      selectedValues: [],
+      // 基于值的选中状态,用于支持 options 动态变化
       currentIndexs: [],
       confirmIndexs: null
     };
   },
   watch: {
+    options: {
+      handler: function handler(newOptions) {
+        var _this = this;
+        // 当 options 变化时,基于 selectedValues 重新计算索引
+        if (this.selectedValues && this.selectedValues.length > 0) {
+          var newIndexs = [];
+          newOptions.forEach(function (option, index) {
+            var optionValue = _this.getOptionValue(option);
+            if (_this.selectedValues.includes(optionValue)) {
+              newIndexs.push(index);
+            }
+          });
+          this.currentIndexs = newIndexs;
+          this.confirmIndexs = newIndexs.length > 0 ? newIndexs : null;
+        }
+      },
+      immediate: false
+    },
+    filteredOptions: {
+      handler: function handler() {
+        var _this2 = this;
+        // filteredOptions 变化时,需要基于 selectedValues 重新映射到 displayOptions 的索引
+        this.$nextTick(function () {
+          if (_this2.$refs.pickerOptions) {
+            var displayIndexs = [];
+            if (_this2.selectedValues && _this2.selectedValues.length > 0) {
+              _this2.displayOptions.forEach(function (option, index) {
+                var optionValue = _this2.getOptionValue(option);
+                if (_this2.selectedValues.includes(optionValue)) {
+                  displayIndexs.push(index);
+                }
+              });
+            }
+            // 强制更新子组件,即使是空数组也要设置
+            _this2.$refs.pickerOptions.confirmed = false;
+            _this2.$refs.pickerOptions.setConfirmIndex(displayIndexs);
+          }
+        });
+      },
+      immediate: false
+    },
     showPicker: {
       handler: function handler(val) {
-        var _this = this;
+        var _this3 = this;
         if (val) {
           this.$nextTick(function () {
-            if (_this.$refs.pickerOptions && _this.confirmIndexs) {
-              _this.$refs.pickerOptions.setConfirmIndex(_this.confirmIndexs);
-              // 同步 currentIndexs 以更新底部全选和已选状态
-              _this.currentIndexs = [].concat(_this.confirmIndexs);
-            } else if (!_this.confirmIndexs && _this.defaultIndexs && _this.defaultIndexs.length === 0) {
-              _this.$refs.pickerOptions.setConfirmIndex([]);
-              _this.currentIndexs = [];
+            if (_this3.$refs.pickerOptions) {
+              // 基于 selectedValues 计算在 displayOptions 中的索引
+              var displayIndexs = [];
+              if (_this3.selectedValues && _this3.selectedValues.length > 0) {
+                _this3.displayOptions.forEach(function (option, index) {
+                  var optionValue = _this3.getOptionValue(option);
+                  if (_this3.selectedValues.includes(optionValue)) {
+                    displayIndexs.push(index);
+                  }
+                });
+              }
+              _this3.$refs.pickerOptions.setConfirmIndex(displayIndexs);
+              // 同步 currentIndexs(基于原始 options)
+              _this3.currentIndexs = _this3.confirmIndexs || [];
             }
           });
         }
@@ -89,11 +143,32 @@ var _default2 = exports.default = createComponent({
     }
   },
   computed: {
+    displayOptions: function displayOptions() {
+      return this.filteredOptions || this.options;
+    },
     isAllSelected: function isAllSelected() {
-      return this.currentIndexs.length > 0 && this.currentIndexs.length === this.options.length;
+      var _this4 = this;
+      // 判断是否全选应该基于当前显示的 displayOptions
+      if (this.displayOptions.length === 0) return false;
+      var displayValues = this.displayOptions.map(function (opt) {
+        return _this4.getOptionValue(opt);
+      });
+      var selectedDisplayValues = this.selectedValues.filter(function (val) {
+        return displayValues.includes(val);
+      });
+      return selectedDisplayValues.length > 0 && selectedDisplayValues.length === this.displayOptions.length;
     },
     isIndeterminate: function isIndeterminate() {
-      return this.currentIndexs.length > 0 && this.currentIndexs.length < this.options.length;
+      var _this5 = this;
+      // 判断半选状态也应该基于当前显示的 displayOptions
+      if (this.displayOptions.length === 0) return false;
+      var displayValues = this.displayOptions.map(function (opt) {
+        return _this5.getOptionValue(opt);
+      });
+      var selectedDisplayValues = this.selectedValues.filter(function (val) {
+        return displayValues.includes(val);
+      });
+      return selectedDisplayValues.length > 0 && selectedDisplayValues.length < this.displayOptions.length;
     },
     itemPxHeight: function itemPxHeight() {
       return this.itemHeight ? (0, _unit.unitToPx)(this.itemHeight) : _shared.DEFAULT_ITEM_HEIGHT;
@@ -108,21 +183,56 @@ var _default2 = exports.default = createComponent({
     emit: function emit(event) {
       this.$emit(event, this.getOptions());
     },
+    getOptionValue: function getOptionValue(option) {
+      if (typeof option === 'string' || typeof option === 'number') {
+        return option;
+      }
+      return option[this.valueKey] || JSON.stringify(option);
+    },
     getOptions: function getOptions() {
-      var _this2 = this;
+      var _this6 = this;
       var indexs = this.$refs.pickerOptions.currentIndexs;
       var result = [];
+      // 从 displayOptions 中获取选中项
       indexs.forEach(function (index) {
-        result.push((0, _extends2.default)({}, _this2.options[index], {
-          initialIndex: index
-        }));
+        var displayOption = _this6.displayOptions[index];
+        if (displayOption) {
+          // 查找在原始 options 中的索引
+          var originalIndex = _this6.options.findIndex(function (opt) {
+            return _this6.getOptionValue(opt) === _this6.getOptionValue(displayOption);
+          });
+          result.push((0, _extends2.default)({}, displayOption, {
+            initialIndex: originalIndex >= 0 ? originalIndex : index
+          }));
+        }
       });
       return result;
     },
     onChange: function onChange() {
+      var _this7 = this;
       // 同步 currentIndexs 以触发计算属性更新
       if (this.$refs.pickerOptions) {
-        this.currentIndexs = [].concat(this.$refs.pickerOptions.currentIndexs);
+        // 实时更新 selectedValues,需要合并而不是覆盖
+        var displayOptions = this.getOptions();
+        var displayValues = displayOptions.map(function (v) {
+          return _this7.getOptionValue(v);
+        });
+        var displayAllValues = this.displayOptions.map(function (opt) {
+          return _this7.getOptionValue(opt);
+        });
+
+        // 移除当前显示列表中的所有值(无论是否选中),然后添加当前选中的值
+        this.selectedValues = [].concat(this.selectedValues.filter(function (val) {
+          return !displayAllValues.includes(val);
+        }), displayValues);
+
+        // 基于 selectedValues 更新 currentIndexs(用于显示已选数量)
+        this.currentIndexs = [];
+        this.options.forEach(function (option, index) {
+          if (_this7.selectedValues.includes(_this7.getOptionValue(option))) {
+            _this7.currentIndexs.push(index);
+          }
+        });
       }
       this.$emit('change', this.getOptions());
     },
@@ -131,32 +241,96 @@ var _default2 = exports.default = createComponent({
       this.emit('cancel');
     },
     confirm: function confirm() {
-      var options = this.getOptions();
-      this.confirmIndexs = options.map(function (v) {
+      var _this8 = this;
+      // 返回所有已选的数据,而不仅仅是当前显示的
+      var allSelectedOptions = [];
+      this.selectedValues.forEach(function (value) {
+        var option = _this8.options.find(function (opt) {
+          return _this8.getOptionValue(opt) === value;
+        });
+        if (option) {
+          var originalIndex = _this8.options.findIndex(function (opt) {
+            return _this8.getOptionValue(opt) === value;
+          });
+          allSelectedOptions.push((0, _extends2.default)({}, option, {
+            initialIndex: originalIndex
+          }));
+        }
+      });
+      this.confirmIndexs = allSelectedOptions.map(function (v) {
         return v.initialIndex;
       });
-      this.emit('confirm', options);
+      this.$emit('confirm', allSelectedOptions);
     },
     handleSelectAll: function handleSelectAll() {
-      var newIndexs = !this.isAllSelected ? this.options && this.options.map(function (_, index) {
-        return index;
-      }) : [];
-      this.currentIndexs = newIndexs;
-      if (this.$refs.pickerOptions) {
-        this.$refs.pickerOptions.setConfirmIndex(newIndexs);
+      var _this9 = this;
+      // 全选应该基于当前显示的 displayOptions,只选中当前搜索结果
+      var displayValues = this.displayOptions.map(function (opt) {
+        return _this9.getOptionValue(opt);
+      });
+      if (!this.isAllSelected) {
+        // 全选:只选中当前显示的值,清除其他值
+        this.selectedValues = displayValues;
+
+        // 更新 currentIndexs(基于原始 options)
+        this.currentIndexs = [];
+        this.options.forEach(function (option, index) {
+          if (displayValues.includes(_this9.getOptionValue(option))) {
+            _this9.currentIndexs.push(index);
+          }
+        });
+
+        // 设置子组件索引(基于 displayOptions,全选所有显示项)
+        var displayIndexs = this.displayOptions.map(function (_, index) {
+          return index;
+        });
+        if (this.$refs.pickerOptions) {
+          this.$refs.pickerOptions.setConfirmIndex(displayIndexs);
+        }
+      } else {
+        // 取消全选:清空所有选中
+        this.selectedValues = [];
+        this.currentIndexs = [];
+        if (this.$refs.pickerOptions) {
+          this.$refs.pickerOptions.setConfirmIndex([]);
+        }
       }
     },
     onSelectOther: function onSelectOther() {
-      var _this3 = this;
-      var newIndexs = [];
-      this.options && this.options.forEach(function (_, index) {
-        if (!_this3.currentIndexs.includes(index)) {
-          newIndexs.push(index);
+      var _this10 = this;
+      // 反选应该基于当前显示的 displayOptions,只操作当前搜索结果
+      var displayValues = this.displayOptions.map(function (opt) {
+        return _this10.getOptionValue(opt);
+      });
+
+      // 计算当前显示项中未选中的值
+      var displaySelectedValues = this.selectedValues.filter(function (val) {
+        return displayValues.includes(val);
+      });
+      var displayUnselectedValues = displayValues.filter(function (val) {
+        return !displaySelectedValues.includes(val);
+      });
+
+      // 只保留当前显示列表中未选中的项(反选逻辑)
+      this.selectedValues = displayUnselectedValues;
+
+      // 更新 currentIndexs(基于原始 options)
+      this.currentIndexs = [];
+      this.options.forEach(function (option, index) {
+        if (displayUnselectedValues.includes(_this10.getOptionValue(option))) {
+          _this10.currentIndexs.push(index);
+        }
+      });
+
+      // 映射到 displayOptions 的索引(反选后的状态)
+      var displayIndexs = [];
+      this.displayOptions.forEach(function (option, index) {
+        if (displayUnselectedValues.includes(_this10.getOptionValue(option))) {
+          displayIndexs.push(index);
         }
       });
-      this.currentIndexs = newIndexs;
       if (this.$refs.pickerOptions) {
-        this.$refs.pickerOptions.setConfirmIndex(newIndexs);
+        this.$refs.pickerOptions.setConfirmIndex(displayIndexs);
       }
     },
     genTitle: function genTitle() {
@@ -270,18 +444,19 @@ var _default2 = exports.default = createComponent({
       }, [this.genOptionItems()]);
     },
     genOptionItems: function genOptionItems() {
-      var _this4 = this;
+      var _this11 = this;
       var h = this.$createElement;
       var formatOptions = [];
-      if (this.options && this.options[0] && typeof this.options[0] !== 'object') {
-        formatOptions = this.options.map(function (v) {
+      var sourceOptions = this.displayOptions;
+      if (sourceOptions && sourceOptions[0] && typeof sourceOptions[0] !== 'object') {
+        formatOptions = sourceOptions.map(function (v) {
           return {
             value: v,
             text: v
           };
         });
       } else {
-        formatOptions = this.options;
+        formatOptions = sourceOptions;
       }
       return h(_MultiplePickerOptions.default, {
         "ref": "pickerOptions",
@@ -299,7 +474,7 @@ var _default2 = exports.default = createComponent({
         },
         "on": {
           "change": function change() {
-            _this4.onChange();
+            _this11.onChange();
           }
         }
       });