iov-pro-components 0.0.17 → 0.0.19

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

@@ -5844,6 +5844,13 @@ var script$p = {
         return [];
       }
     },
+    // 已选择的数据过滤字段
+    filterField2: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
     // 全部列scheme
     unselectColumns: {
       type: Array,
@@ -5872,6 +5879,18 @@ var script$p = {
     visible: {
       type: Boolean,
       default: false
+    },
+    // 自定义搜索表单项
+    customSearchFormItems: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    // 自定义搜索请求
+    customSearchRequest: {
+      type: Object,
+      default: null
     }
   },
   data: function data() {
@@ -5879,6 +5898,7 @@ var script$p = {
       showDialog: false,
       activeName: '0',
       filterText: '',
+      filterText2: '',
       selectedData: [],
       tableHeight: 'auto'
     };
@@ -5909,15 +5929,18 @@ var script$p = {
         return this.selectedData;
       }
       // 如果当前没有过滤数据
-      if ([null, undefined, ''].includes(this.filterText) || this.filterField.length === 0) {
+      if ([null, undefined, ''].includes(this.filterText2) || this.filterField2.length === 0) {
         return this.selectedData;
       }
       // 返回过滤后的数据
       return this.selectedData.filter(function (item) {
-        return _this2.filterField.some(function (name) {
-          return item[name].indexOf(_this2.filterText) >= 0;
+        return _this2.filterField2.some(function (name) {
+          return item[name].indexOf(_this2.filterText2) >= 0;
         });
       });
+    },
+    isCustomSearch: function isCustomSearch() {
+      return _typeof$1(this.customSearchFormItems) === 'object' && Object.keys(this.customSearchFormItems).length;
     }
   },
   watch: {
@@ -5927,21 +5950,23 @@ var script$p = {
       if (val) {
         this.$nextTick(function () {
           _this3.selectedData = _this3.value;
-          _this3.$refs.unselect.$refs.table.clearSelection();
+          _this3.getElTable().clearSelection();
           _this3.selectedData.forEach(function (row) {
-            _this3.$refs.unselect.$refs.table.toggleRowSelection(row);
+            _this3.getElTable().toggleRowSelection(row);
           });
           _this3.initHeight();
         });
       } else {
         this.filterText = '';
+        this.filterText2 = '';
         this.activeName = '0';
         this.selectedData = [];
-        this.$refs.unselect.$refs.table.clearSelection();
+        this.getElTable().clearSelection();
       }
     },
     activeName: function activeName() {
       this.filterText = '';
+      this.filterText2 = '';
     }
   },
   methods: {
@@ -5951,6 +5976,9 @@ var script$p = {
     */
     initHeight: function initHeight() {
       var _this4 = this;
+      if (this.isCustomSearch) {
+        return;
+      }
       if (this.timer) {
         clearTimeout(this.timer);
       }
@@ -5964,7 +5992,7 @@ var script$p = {
           _this4.tableHeight = Math.ceil(dialogBodyHeight - tabHeaderHeight - tabFilterHeight) + 'px';
           // 固定弹窗内容高度
           _this4.$refs.content.style.height = dialogBodyHeight + 'px';
-          _this4.$refs.unselect.$refs.table.doLayout();
+          _this4.getElTable().doLayout();
           _this4.setDialogFooterShadow();
         } else {
           // 固定弹窗内容高度
@@ -6030,10 +6058,10 @@ var script$p = {
         return item[_this5.rowKey] !== row[_this5.rowKey];
       });
       // 清空表格选择的数据
-      this.$refs.unselect.$refs.table.clearSelection();
+      this.getElTable().clearSelection();
       // 重新赋值选择的数据
       selectedData.forEach(function (row) {
-        _this5.$refs.unselect.$refs.table.toggleRowSelection(row);
+        _this5.getElTable().toggleRowSelection(row);
       });
     },
     /**
@@ -6059,13 +6087,57 @@ var script$p = {
         }
         return item;
       });
+      // 如果父组件监听了 confirm 事件，则交由父组件处理（传入数据和关闭方法）
+      if (this.$listeners.confirm) {
+        this.$emit('confirm', selectedData, this.onClose);
+        return;
+      }
       this.$emit('input', selectedData);
       this.onClose();
+    },
+    /**
+     * 獲取 el-table 實例
+     */
+    getElTable: function getElTable() {
+      if (this.isCustomSearch) {
+        return this.$refs.unselect.$refs.table.$refs.table;
+      }
+      return this.$refs.unselect.$refs.table;
+    },
+    /**
+     * 计算 search-table 最大高度
+     */
+    getSearchTableMaxHeight: function getSearchTableMaxHeight() {
+      // 获取 dialog body 最大高
+      var dialogBodyHeight = this.getDialogBodyHeight();
+      // 获取 el-tab header 高
+      var tabHeader = this.$refs.content.querySelector('.el-tabs__header');
+      var tabHeaderStyle = window.getComputedStyle(tabHeader);
+      var tabHeaderHeight = Math.ceil(+tabHeaderStyle.height.replace('px', '')) + Math.ceil(+tabHeaderStyle.marginBottom.replace('px', '') + 1);
+      // 获取分页器高度
+      var elPage = this.$refs.unselect.$el.querySelector('.el-pagination');
+      var elPageHeight = elPage ? Math.ceil(elPage.offsetHeight) : 0;
+      var elTable = this.getElTable();
+      // 表格最大高 = dialog body 最大高 - el-tab header 高 - 分页高 - 表格自身至 el-tab panel body的距离
+      return dialogBodyHeight - tabHeaderHeight - elPageHeight - elTable.$el.offsetTop;
+    },
+    /**
+     * 自定义查询成功后，计算表格最大高度
+     */
+    onAfterCustomSearchHandle: function onAfterCustomSearchHandle() {
+      var _this7 = this;
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      this.timer = setTimeout(function () {
+        _this7.tableHeight = _this7.getSearchTableMaxHeight() + 'px';
+        _this7.getElTable().doLayout();
+        _this7.setDialogFooterShadow();
+      }, 50);
     }
   }
 };
 
-/* script */
 var __vue_script__$p = script$p;
 
 /* template */
@@ -6104,7 +6176,40 @@ var __vue_render__$7 = function __vue_render__() {
       },
       expression: "activeName"
     }
-  }, [_c("div", {
+  }, [_c("el-tab-pane", {
+    attrs: {
+      label: "全部",
+      name: "0"
+    }
+  }, [_vm.isCustomSearch ? [_c("iov-pro-search-table", {
+    ref: "unselect",
+    attrs: {
+      request: _vm.customSearchRequest,
+      "form-items": _vm.customSearchFormItems,
+      "table-columns": _vm.unselectColumns,
+      config: {
+        simple: true,
+        table: {
+          rowKey: _vm.rowKey,
+          maxHeight: _vm.tableHeight
+        }
+      }
+    },
+    on: {
+      "after-request": _vm.onAfterCustomSearchHandle,
+      "selection-change": _vm.onChangeSelection
+    },
+    scopedSlots: _vm._u([_vm._l(_vm.unselectColumns.filter(function (column) {
+      return column.type === "slot";
+    }), function (item) {
+      return {
+        key: item.slotName || item.prop,
+        fn: function fn(scope) {
+          return [_vm._t(item.slotName || item.prop, null, null, scope)];
+        }
+      };
+    })], null, true)
+  })] : [_c("div", {
     staticClass: "iov-pro-dialog-select__filter"
   }, [_c("el-input", {
     attrs: {
@@ -6119,12 +6224,7 @@ var __vue_render__$7 = function __vue_render__() {
       },
       expression: "filterText"
     }
-  })], 1), _vm._v(" "), _c("el-tab-pane", {
-    attrs: {
-      label: "全部",
-      name: "0"
-    }
-  }, [_c("IovProTable", {
+  })], 1), _vm._v(" "), _c("IovProTable", {
     ref: "unselect",
     attrs: {
       columns: _vm.unselectColumns,
@@ -6141,14 +6241,39 @@ var __vue_render__$7 = function __vue_render__() {
     },
     on: {
       "selection-change": _vm.onChangeSelection
-    }
-  })], 1), _vm._v(" "), _c("el-tab-pane", {
+    },
+    scopedSlots: _vm._u([_vm._l(_vm.unselectColumns.filter(function (column) {
+      return column.type === "slot";
+    }), function (item) {
+      return {
+        key: item.slotName || item.prop,
+        fn: function fn(scope) {
+          return [_vm._t(item.slotName || item.prop, null, null, scope)];
+        }
+      };
+    })], null, true)
+  })]], 2), _vm._v(" "), _c("el-tab-pane", {
     attrs: {
       label: "本次已选 (" + _vm.selectedData.length + ")",
       type: "card",
       name: "1"
     }
-  }, [_c("IovProTable", {
+  }, [_c("div", {
+    staticClass: "iov-pro-dialog-select__filter"
+  }, [_c("el-input", {
+    attrs: {
+      placeholder: _vm.placeholder,
+      "prefix-icon": "iov-icon-search",
+      size: "small"
+    },
+    model: {
+      value: _vm.filterText2,
+      callback: function callback($$v) {
+        _vm.filterText2 = $$v;
+      },
+      expression: "filterText2"
+    }
+  })], 1), _vm._v(" "), _c("IovProTable", {
     ref: "selected",
     attrs: {
       columns: _vm.selectedColumns,
@@ -6162,7 +6287,16 @@ var __vue_render__$7 = function __vue_render__() {
         pagination: false
       }
     },
-    scopedSlots: _vm._u([{
+    scopedSlots: _vm._u([_vm._l(_vm.selectedColumns.filter(function (column) {
+      return column.type === "slot";
+    }), function (item) {
+      return {
+        key: item.slotName || item.prop,
+        fn: function fn(scope) {
+          return [_vm._t(item.slotName || item.prop, null, null, scope)];
+        }
+      };
+    }), {
       key: "operation",
       fn: function fn(scope) {
         return [_c("el-link", {
@@ -6176,7 +6310,7 @@ var __vue_render__$7 = function __vue_render__() {
           }
         }, [_vm._v("移除")])];
       }
-    }], null, false, 2554705328)
+    }], null, true)
   })], 1)], 1)], 1) : _vm._e(), _vm._v(" "), _c("template", {
     slot: "footer"
   }, [_c("el-button", {
@@ -19770,7 +19904,7 @@ var install = function install(Vue, componentConfig) {
 };
 var index = {
   install: install,
-  version: '0.0.17',
+  version: '0.0.19',
   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.17",
+  "version": "0.0.19",
   "description": "IOV Pro Components for Vue.js",
   "main": "lib/iov-pro-components.min.js",
   "files": [