cloud-b2b 1.0.0 → 1.0.1

package/lib/Search/Search.js

@@ -0,0 +1,603 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
+
+var _Object$keys2 = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _sort = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/sort"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _stringify = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/json/stringify"));
+
+var _row = _interopRequireDefault(require("antd/lib/row"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _col = _interopRequireDefault(require("antd/lib/col"));
+
+var _icon = _interopRequireDefault(require("antd/lib/icon"));
+
+var _button = _interopRequireDefault(require("antd/lib/button"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _form = _interopRequireDefault(require("antd/lib/form"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _Control = _interopRequireWildcard(require("../Control"));
+
+var _helper = require("../helper");
+
+var _variables = _interopRequireDefault(require("../variables"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys2(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context12, _context13; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context12 = ownKeys(Object(source), !0)).call(_context12, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context13 = ownKeys(Object(source))).call(_context13, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var FormItem = _form["default"].Item;
+var defaultSize = 'small';
+var defaultColNum = 4;
+var TYPE = ['text', 'search', 'select', 'number', 'date', 'readonly', 'selectSearch', 'cascader' //级联选择下拉
+];
+/**
+ * search: 搜索按钮的标题
+ * more：更多按钮的标题
+ * reset：重置按钮的标题
+ * sort：排序按钮的标题
+ */
+
+var ConfigType = {
+  search: _propTypes["default"].string.isRequired,
+  reset: _propTypes["default"].string,
+  sort: _propTypes["default"].string,
+  more: _propTypes["default"].string
+};
+/**
+ * key: 唯一标识一个表单元素
+ * title：表单元素旁边的标题
+ * type：表单元素的类型
+ * props：传递给表单元素的额外属性
+ */
+
+var FilterType = {
+  key: _propTypes["default"].string.isRequired,
+  title: _propTypes["default"].string.isRequired,
+  type: _propTypes["default"].oneOf(TYPE).isRequired,
+  options: _propTypes["default"].array,
+  props: _propTypes["default"].object
+};
+/**
+ * data：传递给filters的默认值，为key:value的形式，此处的key为FilterType中的key
+ * isSort：是否需要排序按钮，默认false，当设置为true时，onClick函数需要实现key为sort的响应函数
+ * options: 作用同FilterType.options类似，但优先级高于它
+ * onClick：按钮点击事件，原型为func(key)
+ * onChange：表单控件内容改变时触发，原型为func(key, value)
+ * onSearch：search控件发出的事件，原型为func(key, value)
+ * displayRow：折叠时需要展示的行数，整数，默认为1
+ */
+
+var Search = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Search, _React$Component);
+
+  var _super = _createSuper(Search);
+
+  function Search() {
+    var _context;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Search);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, (0, _concat["default"])(_context = [this]).call(_context, args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      more: false
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (key) {
+      var onClick = _this.props.onClick;
+      onClick && onClick(key);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMore", function () {
+      var onHeightChange = _this.props.onHeightChange;
+
+      _this.setState({
+        more: !_this.state.more
+      });
+
+      onHeightChange && onHeightChange(_this.calHeight(!_this.state.more));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (dictionary, key, value) {
+      var _context2, _context3;
+
+      var onChange = _this.props.onChange;
+
+      if (value && key === 'queryGroup' && dictionary && global.dictionary && global.dictionary[dictionary] && !(0, _includes["default"])(_context2 = (0, _map["default"])(_context3 = global.dictionary[dictionary]).call(_context3, function (item) {
+        return item.value;
+      })).call(_context2, value)) {
+        var _context4;
+
+        var realValue = JSON.parse(value);
+
+        _this.onClick('reset');
+
+        (0, _map["default"])(_context4 = (0, _keys["default"])(realValue)).call(_context4, function (objectKey) {
+          onChange && objectKey !== 'queryId' && onChange(objectKey, realValue[objectKey]);
+        });
+      }
+
+      onChange && onChange(key, value);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPressEnter", function () {
+      _reactDom["default"].findDOMNode(_this.refs.search).click();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toButton", function (key) {
+      var _context5;
+
+      var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var config = _this.props.config;
+      var onClick = (0, _bind["default"])(_context5 = _this.onClick).call(_context5, (0, _assertThisInitialized2["default"])(_this), key);
+      return /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _extends2["default"])({
+        size: defaultSize,
+        onClick: onClick
+      }, props), config[key]);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toMore", function () {
+      return /*#__PURE__*/_react["default"].createElement("a", {
+        role: "more",
+        onClick: _this.onMore
+      }, _this.props.config.more, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        type: "down",
+        "data-status": !_this.state.more ? 'down' : 'up'
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toButtons", function () {
+      var config = _this.props.config;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        role: "buttons"
+      }, _this.toButton('search', {
+        ref: 'search',
+        type: 'primary'
+      }), config.reset ? _this.toButton('reset') : null, _this.isSort() ? _this.toButton('sort') : null, _this.isMore() ? _this.toMore() : null);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isSort", function () {
+      var _this$props = _this.props,
+          config = _this$props.config,
+          _this$props$colNum = _this$props.colNum,
+          colNum = _this$props$colNum === void 0 ? defaultColNum : _this$props$colNum,
+          filters = _this$props.filters,
+          _this$props$isSort = _this$props.isSort,
+          isSort = _this$props$isSort === void 0 ? false : _this$props$isSort;
+      return isSort && (0, _sort["default"])(config) && filters.length > colNum;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isMore", function () {
+      var _this$props2 = _this.props,
+          config = _this$props2.config,
+          _this$props2$colNum = _this$props2.colNum,
+          colNum = _this$props2$colNum === void 0 ? defaultColNum : _this$props2$colNum,
+          filters = _this$props2.filters,
+          _this$props2$displayR = _this$props2.displayRow,
+          displayRow = _this$props2$displayR === void 0 ? 1 : _this$props2$displayR;
+      return config.more && (0, _filter["default"])(filters).call(filters, function (item) {
+        return !item.hide;
+      }).length > colNum * displayRow;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOptions", function (filter) {
+      var options = _this.props.options;
+
+      if (options && (0, _isArray["default"])(options[filter.key])) {
+        return options[filter.key];
+      } else {
+        return filter.options || filter.typeRelated || [];
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getContainer", function () {
+      return _this.props.getContainer;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getControlProps", function (control) {
+      var _context6;
+
+      var _this$props$data = _this.props.data,
+          data = _this$props$data === void 0 ? {} : _this$props$data;
+      return _objectSpread(_objectSpread({}, control.props || {}), {}, {
+        size: defaultSize,
+        type: control.type,
+        value: (0, _Control.makeString)(data[control.key]),
+        onChange: (0, _bind["default"])(_context6 = _this.onChange).call(_context6, (0, _assertThisInitialized2["default"])(_this), control.dictionary, control.key)
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "validDate", function (_ref) {
+      var key = _ref.key,
+          type = _ref.type;
+      return function (date) {
+        var _this$props$data2 = _this.props.data,
+            data = _this$props$data2 === void 0 ? {} : _this$props$data2;
+
+        if (!date || !data[key]) {
+          return false;
+        } else {
+          if (type === '>') {
+            return date.format('YYYY-MM-DD HH:mm:ss') <= data[key].valueOf();
+          } else if (type === '<') {
+            return date.format('YYYY-MM-DD HH:mm:ss') >= data[key].valueOf();
+          } else {
+            return false;
+          }
+        }
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toText", function (props) {
+      props.onPressEnter = _this.onPressEnter;
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toNumber", function (props) {
+      props.defaultValue = props.value;
+      delete props.value;
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getQueryGroupOptions", function (_ref2) {
+      var dictionary = _ref2.dictionary,
+          _ref2$configCode = _ref2.configCode,
+          configCode = _ref2$configCode === void 0 ? 'unknown' : _ref2$configCode;
+      var realOptions = [];
+
+      if (dictionary && global.dictionary) {
+        var dicOptions = global.dictionary[dictionary] || [];
+        realOptions = (0, _concat["default"])(realOptions).call(realOptions, dicOptions);
+      }
+
+      var state = global.store.getState();
+      var path = ['layout', 'tableColsSetting', configCode];
+
+      var _ref3 = (0, _helper.getPathValue)(state, path) || {},
+          _ref3$queryList = _ref3.queryList,
+          queryList = _ref3$queryList === void 0 ? [] : _ref3$queryList;
+
+      return (0, _concat["default"])(realOptions).call(realOptions, (0, _map["default"])(queryList).call(queryList, function (item) {
+        return {
+          title: item.name,
+          value: (0, _stringify["default"])(item.query)
+        };
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toSelect", function (props, filter) {
+      var container = _this.getContainer();
+
+      container && (props.getPopupContainer = container);
+      props.options = filter.key === 'queryGroup' ? _this.getQueryGroupOptions(filter) : _this.getOptions(filter);
+      props.dropdownMatchSelectWidth = false;
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createSearchEvent", function (filter) {
+      if (_this.props.onSearch) {
+        return function (value) {
+          return _this.props.onSearch(filter.key, value, filter);
+        };
+      } else {
+        return null;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toSearch", function (props, filter) {
+      var container = _this.getContainer();
+
+      container && (props.getPopupContainer = container);
+      props.options = _this.getOptions(filter);
+      props.onSearch = _this.createSearchEvent(filter);
+      props.dropdownMatchSelectWidth = false;
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "selectSearch", function (props, filter) {
+      var container = _this.getContainer();
+
+      container && (props.getPopupContainer = container);
+      props.options = _this.getOptions(filter);
+      props.onSearch = _this.createSearchEvent(filter);
+      props.dropdownMatchSelectWidth = false;
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toDate", function (props, _ref4) {
+      var rule = _ref4.rule;
+
+      var container = _this.getContainer();
+
+      container && (props.getCalendarContainer = container);
+      rule && (props.disabledDate = _this.validDate(rule));
+      props.style = {
+        width: '100%'
+      };
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toReadonly", function (props, filter) {
+      props.value = (0, _Control.getTitle)(props.value, _this.getOptions(filter));
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toCascader", function (props, filter) {
+      var container = _this.getContainer();
+
+      container && (props.getPopupContainer = container);
+      props.options = _this.getOptions(filter);
+      props.onSearch = _this.createSearchEvent(filter);
+      props.placeholder = filter.placeholder || '';
+      return /*#__PURE__*/_react["default"].createElement(_Control["default"], props);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toControl", function (control) {
+      var props = _this.getControlProps(control);
+
+      switch (control.type) {
+        case 'text':
+          return _this.toText(props, control);
+
+        case 'number':
+          return _this.toNumber(props, control);
+
+        case 'select':
+          return _this.toSelect(props, control);
+
+        case 'selectSearch':
+          return _this.selectSearch(props, control);
+
+        case 'search':
+          return _this.toSearch(props, control);
+
+        case 'date':
+          return _this.toDate(props, control);
+
+        case 'readonly':
+          return _this.toReadonly(props, control);
+
+        case 'cascader':
+          return _this.toCascader(props, control);
+
+        default:
+          return 'type error';
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toLabel", function (_ref5) {
+      var title = _ref5.title,
+          key = _ref5.key,
+          dictionary = _ref5.dictionary,
+          _ref5$configCode = _ref5.configCode,
+          configCode = _ref5$configCode === void 0 ? 'unknown' : _ref5$configCode;
+
+      if (key === 'queryGroup') {
+        var _context7, _context8;
+
+        //查询组合
+        return /*#__PURE__*/_react["default"].createElement("span", null, title, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+          role: "icon",
+          type: "plus-circle-o",
+          onClick: (0, _bind["default"])(_context7 = _this.onAddQueryGroup).call(_context7, (0, _assertThisInitialized2["default"])(_this), configCode, _this.props.data, dictionary)
+        }), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+          role: "icon",
+          type: "minus-circle-o",
+          onClick: (0, _bind["default"])(_context8 = _this.onDelQueryGroup).call(_context8, (0, _assertThisInitialized2["default"])(_this), configCode, _this.props.data, dictionary)
+        }));
+      } else {
+        return title;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toCol", function (span, control, more) {
+      var factor = control.span || 1;
+      return /*#__PURE__*/_react["default"].createElement(_col["default"], {
+        span: span * factor,
+        key: control.key,
+        onFocus: more ? function () {
+          _this.setState({
+            more: true
+          });
+        } : undefined
+      }, /*#__PURE__*/_react["default"].createElement(FormItem, {
+        label: _this.toLabel(control),
+        required: control.required
+      }, _this.toControl(control)));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toCols", function () {
+      var _context9;
+
+      var _this$props3 = _this.props,
+          _this$props3$colNum = _this$props3.colNum,
+          colNum = _this$props3$colNum === void 0 ? defaultColNum : _this$props3$colNum,
+          filters = _this$props3.filters,
+          _this$props3$displayR = _this$props3.displayRow,
+          displayRow = _this$props3$displayR === void 0 ? 1 : _this$props3$displayR;
+      var span = 24 / Math.min(colNum, (0, _filter["default"])(filters).call(filters, function (item) {
+        return !item.hide;
+      }).length);
+      return (0, _map["default"])(_context9 = (0, _filter["default"])(filters).call(filters, function (item) {
+        return !item.hide;
+      })).call(_context9, function (control, index) {
+        return _this.toCol(span, control, index >= colNum * displayRow);
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "calWidth", function () {
+      var _this$props4 = _this.props,
+          _this$props4$colNum = _this$props4.colNum,
+          colNum = _this$props4$colNum === void 0 ? defaultColNum : _this$props4$colNum,
+          filters = _this$props4.filters;
+      var length = (0, _filter["default"])(filters).call(filters, function (item) {
+        return !item.hide;
+      }).length;
+
+      if (length < colNum) {
+        return "".concat(length * 18, "%");
+      } else {
+        return "".concat(defaultColNum * 18, "%");
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "calHeight", function (more) {
+      var _this$props5 = _this.props,
+          _this$props5$colNum = _this$props5.colNum,
+          colNum = _this$props5$colNum === void 0 ? defaultColNum : _this$props5$colNum,
+          filters = _this$props5.filters,
+          _this$props5$displayR = _this$props5.displayRow,
+          displayRow = _this$props5$displayR === void 0 ? 1 : _this$props5$displayR;
+
+      if (more) {
+        var row = Math.ceil((0, _filter["default"])(filters).call(filters, function (item) {
+          return !item.hide;
+        }).length / colNum);
+        return row * 36 + (row - 1) * 10;
+      } else {
+        return displayRow * 36 + (displayRow - 1) * 10;
+      }
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Search, [{
+    key: "onAddQueryGroup",
+    value: function () {
+      var _onAddQueryGroup = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(configCode, searchData, dictionary) {
+        var onAddQueryGroup;
+        return _regenerator["default"].wrap(function _callee$(_context10) {
+          while (1) {
+            switch (_context10.prev = _context10.next) {
+              case 0:
+                onAddQueryGroup = this.props.onAddQueryGroup;
+                onAddQueryGroup && onAddQueryGroup(configCode, searchData, dictionary);
+
+              case 2:
+              case "end":
+                return _context10.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function onAddQueryGroup(_x, _x2, _x3) {
+        return _onAddQueryGroup.apply(this, arguments);
+      }
+
+      return onAddQueryGroup;
+    }()
+  }, {
+    key: "onDelQueryGroup",
+    value: function () {
+      var _onDelQueryGroup = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(configCode, searchData, dictionary) {
+        var onDelQueryGroup;
+        return _regenerator["default"].wrap(function _callee2$(_context11) {
+          while (1) {
+            switch (_context11.prev = _context11.next) {
+              case 0:
+                onDelQueryGroup = this.props.onDelQueryGroup;
+                onDelQueryGroup && onDelQueryGroup(configCode, searchData, dictionary);
+
+              case 2:
+              case "end":
+                return _context11.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function onDelQueryGroup(_x4, _x5, _x6) {
+        return _onDelQueryGroup.apply(this, arguments);
+      }
+
+      return onDelQueryGroup;
+    }()
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _variables["default"])('Search'),
+        style: {
+          height: this.calHeight(this.state.more)
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+        layout: "vertical",
+        style: {
+          width: this.calWidth()
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_row["default"], {
+        gutter: 20
+      }, this.toCols())), this.toButtons());
+    }
+  }]);
+  return Search;
+}(_react["default"].Component);
+
+(0, _defineProperty2["default"])(Search, "propTypes", {
+  config: _propTypes["default"].shape(ConfigType).isRequired,
+  filters: _propTypes["default"].arrayOf(_propTypes["default"].shape(FilterType)).isRequired,
+  data: _propTypes["default"].object,
+  options: _propTypes["default"].object,
+  getContainer: _propTypes["default"].func,
+  onClick: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onSearch: _propTypes["default"].func,
+  onHeightChange: _propTypes["default"].func,
+  displayRow: _propTypes["default"].number
+});
+var _default = Search;
+exports["default"] = _default;

package/lib/Search/Search.less

@@ -0,0 +1,63 @@
+@import '../variables.less';
+
+.@{cloudlink-prefix}-Search {
+  transition: all 0.3s;
+
+  > *:first-child {
+    display: inline-block;
+    vertical-align: top;
+    margin-bottom: -10px;
+
+    :global(.ant-form-item) {
+      margin-bottom: 10px;
+
+      :global(.ant-select-selection--multiple) {
+        border-top-width: 1px;
+        height: 22px;
+        overflow: auto;
+      }
+
+      [role='icon'] {
+        cursor: pointer;
+        margin-left: 10px;
+        color: @primary-color;
+      }
+    }
+  }
+
+  > *:last-child {
+    display: inline-block;
+    vertical-align: top;
+    padding-left: 20px;
+    padding-top: 14px;
+    width: 25%;
+  }
+
+  :global(.ant-form-item-control) input,
+  :global(.ant-calendar-picker),
+  :global(.ant-select) {
+    display: block;
+  }
+
+  [role='buttons'] > * {
+    margin-right: 5px;
+  }
+
+  [role='more'] {
+    color: rgba(0, 0, 0, 0.65);
+    user-select: none;
+
+    &:hover {
+      color: @brand-primary;
+    }
+
+    > i {
+      transform: scale(0.75);
+      transition: all 0.2s;
+
+      &[data-status='up'] {
+        transform: scale(0.75) rotate(-180deg);
+      }
+    }
+  }
+}

package/lib/Search/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Search",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Search.js"
+}