iov-pro-components 0.0.26 → 0.0.27

package/lib/iov-pro-components.min.js

@@ -8317,6 +8317,7 @@ var HOOKS = {
 };
 var DEFAULT_SPAN = 6;
 var DEFAULT_SPACE = 18;
+var DEFAULT_PAGE_SIZE = 100;
 var script$j = {
   name: 'IovProForm',
   inject: {
@@ -8362,8 +8363,8 @@ var script$j = {
       DEFAULT_SPAN: DEFAULT_SPAN,
       // 当前表单数据
       modelValue: {},
-      // 下拉框的options是否展示
-      optionVisible: {},
+      // 下拉框的options是否展示以及分页属性
+      optionConfig: {},
       // 当前options请求的参数
       optionParams: {},
       // 被外部过滤后的数据
@@ -8380,7 +8381,9 @@ var script$j = {
       // 需要触发的钩子函数
       hooks: _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, HOOKS.INIT, []), HOOKS.DO_LAYOUT, []), HOOKS.VALUE_CHANGE, []), HOOKS.OPTION_CHANGE, []), HOOKS.PROPS_CHANGE, []),
       // 当前所有的form-item集合
-      formItems: []
+      formItems: [],
+      // 监听器
+      observer: null
     };
   },
   computed: {
@@ -8585,6 +8588,12 @@ var script$j = {
     this.triggerEffect();
     // 触发loader
     this.triggerHooks(HOOKS.INIT, this);
+    // 绑定观察器
+    this.observer = this.bindObserver();
+  },
+  destroyed: function destroyed() {
+    // 移除观察器
+    this.observer.disconnect();
   },
   methods: {
     /**
@@ -8731,6 +8740,57 @@ var script$j = {
         });
       }
     },
+    /**
+     * 绑定数据变化的观察者
+     * @time 2024-11-14 11:01:58
+     */
+    bindObserver: function bindObserver() {
+      // 回调方法
+      var callbackFns = [];
+      // 创建观察器
+      var observer = new IntersectionObserver(function () {
+        callbackFns.forEach(function (fn) {
+          return fn.callback();
+        });
+      });
+      return {
+        /**
+         * 观察
+         * @param  {Element}  el 需要观察的dom元素
+         * @param  {Function} callback 回调方法
+         * @time 2025-06-30 13:59:36
+         */
+        observe: function observe(el, callback) {
+          // 保存回调
+          callbackFns.push({
+            el: el,
+            callback: callback
+          });
+          // 观察对象
+          observer.observe(el);
+        },
+        /**
+         * 取消观察
+         * @param  {Element}  el 需要观察的dom元素
+         * @time 2025-06-30 14:00:22
+         */
+        unobserve: function unobserve(el) {
+          // 取消回调
+          callbackFns = callbackFns.filter(function (item) {
+            return item.el !== el;
+          });
+          // 取消监听
+          observer.unobserve(el);
+        },
+        /**
+         * 关闭观察器
+         * @time 2025-06-30 14:02:29
+         */
+        disconnect: function disconnect() {
+          observer.disconnect();
+        }
+      };
+    },
     /**
      * 添加一个钩子函数，用于在不同的时机对数据做处理
      * @param  {Array｜Object} hooks 当前等待添加的钩子函数
@@ -9078,7 +9138,35 @@ var script$j = {
          * @time 2025-05-13 18:06:45
          */
         'visible-change': function visibleChange(val) {
-          formThis.$set(formThis.optionVisible, key, val);
+          // 记录当前下拉的展示状态
+          formThis.$set(formThis.optionConfig, key, {
+            visible: val,
+            page: 1,
+            throttle: Date.now() + 400
+          });
+          // 如果有监听器，则直接取消监听
+          if (formThis.observer) {
+            // 取消监听
+            formThis.observer.unobserve(formThis.$refs["reach-bottom-".concat(key)]);
+          }
+          // 如果当前下拉的滚动状态
+          if (val) {
+            // 监听滚动
+            formThis.observer.observe(formThis.$refs["reach-bottom-".concat(key)], function (_) {
+              // 结构出分页数据和节流时间
+              var _formThis$optionConfi = formThis.optionConfig[key],
+                page = _formThis$optionConfi.page,
+                throttle = _formThis$optionConfi.throttle;
+              // 如果在节流范围内，则不允许继续累加页码
+              if (Date.now() < throttle) {
+                return;
+              }
+              // 累加页码
+              formThis.$set(formThis.optionConfig[key], 'page', page + 1);
+              // 防止短时间重复触发
+              formThis.$set(formThis.optionConfig[key], 'throttle', Date.now() + 50);
+            });
+          }
         }
       };
       // 如果当前是空，则设置input方法
@@ -9299,9 +9387,21 @@ var script$j = {
      */
     getNiceOptions: function getNiceOptions(options, key) {
       var _this14 = this;
+      // 如果没有下拉
+      if (!options || (options === null || options === void 0 ? void 0 : options.length) === 0) {
+        return [];
+      }
+      // 获取下拉属性
+      var _ref2 = this.optionConfig[key] || {},
+        visible = _ref2.visible,
+        page = _ref2.page,
+        remoteQuery = _ref2.remoteQuery;
       // 如果当前下拉是展示状态
-      if (this.optionVisible[key]) {
-        return options || [];
+      if (visible) {
+        // 如果没有搜索任何内容
+        return ([undefined, null, ''].includes(remoteQuery) ? options : options.filter(function (option) {
+          return option.label.includes(remoteQuery);
+        })).slice(0, page * DEFAULT_PAGE_SIZE);
       }
       // 当前绑定的值
       return options === null || options === void 0 ? void 0 : options.filter(function (option) {
@@ -9311,10 +9411,12 @@ var script$j = {
     },
     /**
      * 通过对象的名称获取对象的引用
-     * @param  {String} compName 组件名
+     * @param  {String} name 字段名
      * @time 2025-06-25 17:46:19
      */
-    getComponentRef: function getComponentRef(fieldName) {
+    getComponentRef: function getComponentRef(name) {
+      // 字段名
+      var fieldName = Array.isArray(name) ? name.join(',') : name;
       // 所有的formItems引用
       var formItems = [];
 
@@ -9431,6 +9533,32 @@ var script$j = {
       return defaultProps[(props === null || props === void 0 ? void 0 : props.type) || 'date'] || {};
     };
 
+    /**
+     * 下拉选择器默认属性
+     * @param  {String} key 当前下拉的key
+     * @time 2025-06-30 11:11:25
+     */
+    var defaultSelectProps = function defaultSelectProps(key) {
+      var defaultProps = {
+        remote: true,
+        remoteMethod: function remoteMethod(query) {
+          // 如果没有下拉配置
+          if (!_this15.optionConfig[key]) {
+            _this15.$set(_this15.optionConfig, key, {
+              page: 1,
+              remoteQuery: query
+            });
+          } else {
+            // 从第一页开始搜索
+            _this15.$set(_this15.optionConfig[key], 'page', 1);
+            // 搜索的关键字
+            _this15.$set(_this15.optionConfig[key], 'remoteQuery', query);
+          }
+        }
+      };
+      return defaultProps || {};
+    };
+
     /**
      * 获取表单输入组件
      * @param  {Object} itemConfig 表单项配置
@@ -9451,7 +9579,10 @@ var script$j = {
       var componentProps = _objectSpread2(_objectSpread2({
         // 默认展示清空操作
         clearable: true
-      }, ['DatePicker'].includes(itemConfig.type) ? defaultDatePickerProps(itemConfig.props) : {}), _this15.evalComponentProps(itemConfig, formItemsProps.props));
+      }, {
+        DatePicker: defaultDatePickerProps(itemConfig.props),
+        Select: defaultSelectProps(itemConfig.key)
+      }[itemConfig.type] || {}), _this15.evalComponentProps(itemConfig, formItemsProps.props));
       // 当前组件的插槽
       var componentSlots = (_itemConfig$slots = itemConfig.slots) === null || _itemConfig$slots === void 0 ? void 0 : _itemConfig$slots.component;
       // 等待渲染的插槽
@@ -9506,6 +9637,9 @@ var script$j = {
                 "value": option.value
               }
             });
+          }), h("div", {
+            "class": 'iov-pro-form__detect-reach-bottom',
+            "ref": "reach-bottom-".concat(itemConfig.key)
           })]);
           break;
         case 'Radio': // 如果是单选
@@ -11551,7 +11685,11 @@ var script$9 = {
     });
   },
   mounted: function mounted() {
-    this.doLayout(this.columns);
+    // 开始渲染布局
+    this.doLayout(this.columns.filter(function (column) {
+      return !column.hidden;
+    }));
+    // 绑定重置事件
     this.reset = this.onReset.bind(this);
   },
   methods: {
@@ -18256,16 +18394,31 @@ var script$8 = {
       // 获取IovProTable示例
       var iovProTable = this.table instanceof Function ? this.table() : this.table;
       // 记录当前表格列
-      this.tableColumns = iovProTable.columns.map(function (column) {
-        return {
+      var tableColumns = [];
+      // 需要选中的列
+      var checkedColumns = [];
+      // 遍历表格的列数据
+      iovProTable.columns.forEach(function (column) {
+        // 当前选中的数据
+        var value = randomString(32);
+        // 非隐藏状态的字段不选中
+        if (!column.hidden) {
+          checkedColumns.push(value);
+        }
+        // 塞到tableColumns中
+        tableColumns.push({
           label: column.label || column.type,
-          value: randomString(32),
+          value: value,
           disabled: column.keepInPlace,
           target: column
-        };
+        });
       });
-      // 设置全选
-      this.onSelectAll(true);
+      // 开始双向绑定
+      this.tableColumns = tableColumns;
+      // 选中的列数据
+      this.checkedColumns = checkedColumns;
+      // 是否展示全选
+      this.selectAll = checkedColumns.length === tableColumns.length;
       // 重置历史数据
       this.prevState = {
         columns: _toConsumableArray$1(this.tableColumns),
@@ -20022,7 +20175,7 @@ var install = function install(Vue, componentConfig) {
 };
 var index = {
   install: install,
-  version: '0.0.26',
+  version: '0.0.27',
   ColumnTooltip: __vue_component__$t,
   Description: __vue_component__$q,
   DialogSelect: __vue_component__$p,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iov-pro-components",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "IOV Pro Components for Vue.js",
   "main": "lib/iov-pro-components.min.js",
   "files": [