linkmore-design 1.0.3 → 1.0.4

package/lib/CkFilter/components/filterTypes.js

@@ -51,7 +51,8 @@ var _excluded = ["item"],
     _excluded2 = ["item"],
     _excluded3 = ["item"],
     _excluded4 = ["item"],
-    _excluded5 = ["type"];
+    _excluded5 = ["item"],
+    _excluded6 = ["type"];
 
 // 输入框过滤器
 var InputFilter = function InputFilter(_ref) {
@@ -79,7 +80,8 @@ var InputFilter = function InputFilter(_ref) {
 
 
 var SelectFilter = function SelectFilter(_ref2) {
-  var filters = _ref2.filters,
+  var _ref2$filters = _ref2.filters,
+      filters = _ref2$filters === void 0 ? [] : _ref2$filters,
       getFilterValue = _ref2.getFilterValue,
       setFilterValue = _ref2.setFilterValue;
   var inputRef = (0, _react.useRef)(null); // 搜索后的筛选项
@@ -140,13 +142,90 @@ var SelectFilter = function SelectFilter(_ref2) {
   }), !options.length && /*#__PURE__*/_react.default.createElement("div", {
     className: "filter_empty"
   }, "\u6682\u65E0\u6570\u636E")));
-}; // 自定义筛选下拉选过滤器
+}; // 嵌套结构下拉单选过滤器
 
 
-var CustomFilter = function CustomFilter(_ref4) {
+var NestedFilter = function NestedFilter(_ref4) {
   var filters = _ref4.filters,
       getFilterValue = _ref4.getFilterValue,
       setFilterValue = _ref4.setFilterValue;
+  var inputRef = (0, _react.useRef)(null); // 搜索后的筛选项
+
+  var _useState3 = (0, _react.useState)(filters),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      options = _useState4[0],
+      setOptions = _useState4[1]; // 是否存在搜索, 当数据大于8时存在搜索
+
+
+  var isSearch = (0, _react.useMemo)(function () {
+    return filters.length > 8;
+  }, [filters.length]); // 搜索
+
+  var handleFilter = function handleFilter(val) {
+    setOptions(filters.filter(function (v) {
+      return v.label.indexOf(val) > -1;
+    }));
+  }; // 单选事件
+
+
+  var onChange = function onChange(e, item) {
+    e.preventDefault();
+    setFilterValue(item.value);
+  };
+
+  var handleClick = function handleClick(e, item) {
+    e.preventDefault();
+    e.stopPropagation();
+    setFilterValue(item, 'children');
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_dropdown"
+  }, isSearch && /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_header"
+  }, /*#__PURE__*/_react.default.createElement(_input.default.Search, {
+    ref: inputRef,
+    allowClear: true,
+    size: "small",
+    placeholder: "\u8BF7\u8F93\u5165",
+    onSearch: handleFilter,
+    onChange: (0, _lodash.debounce)(function (e) {
+      return handleFilter(e.target.value);
+    }, 500)
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_body"
+  }, /*#__PURE__*/_react.default.createElement(_VirtualList.default, {
+    options: options,
+    className: "filter_list"
+  }, function (_ref5) {
+    var item = _ref5.item,
+        resetProps = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
+    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
+      className: (0, _classnames.default)('filter_item', {
+        checked: item.value === getFilterValue
+      }),
+      onClick: function onClick(e) {
+        return onChange(e, item);
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_item-content"
+    }, item.label), /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+      type: "lmweb-gengduotianchong",
+      onClick: function onClick(e) {
+        return handleClick(e, item);
+      }
+    }));
+  }), !options.length && /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_empty"
+  }, "\u6682\u65E0\u6570\u636E")));
+}; // 自定义筛选下拉选过滤器
+
+
+var CustomFilter = function CustomFilter(_ref6) {
+  var _ref6$filters = _ref6.filters,
+      filters = _ref6$filters === void 0 ? [] : _ref6$filters,
+      getFilterValue = _ref6.getFilterValue,
+      setFilterValue = _ref6.setFilterValue;
 
   // 单选事件
   var onChange = function onChange(e, item) {
@@ -171,9 +250,9 @@ var CustomFilter = function CustomFilter(_ref4) {
   }, /*#__PURE__*/_react.default.createElement(_VirtualList.default, {
     options: filters,
     className: "filter_list"
-  }, function (_ref5) {
-    var item = _ref5.item,
-        resetProps = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
+  }, function (_ref7) {
+    var item = _ref7.item,
+        resetProps = (0, _objectWithoutProperties2.default)(_ref7, _excluded3);
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
       className: (0, _classnames.default)('filter_item', {
         checked: item.value === getFilterValue
@@ -207,22 +286,23 @@ var CustomFilter = function CustomFilter(_ref4) {
 }; // 下拉多选过滤器: 要过滤的数据, 当前选中项, 触发过滤, 过滤前的数据
 
 
-var CheckboxFilter = function CheckboxFilter(_ref6) {
-  var filters = _ref6.filters,
-      getFilterValue = _ref6.getFilterValue,
-      setFilterValue = _ref6.setFilterValue;
+var CheckboxFilter = function CheckboxFilter(_ref8) {
+  var _ref8$filters = _ref8.filters,
+      filters = _ref8$filters === void 0 ? [] : _ref8$filters,
+      getFilterValue = _ref8.getFilterValue,
+      setFilterValue = _ref8.setFilterValue;
   var inputRef = (0, _react.useRef)(null);
 
-  var _useState3 = (0, _react.useState)(getFilterValue || []),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      checkedValues = _useState4[0],
-      setCheckedValues = _useState4[1]; // 搜索后的筛选项
+  var _useState5 = (0, _react.useState)(getFilterValue || []),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      checkedValues = _useState6[0],
+      setCheckedValues = _useState6[1]; // 搜索后的筛选项
 
 
-  var _useState5 = (0, _react.useState)(filters),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      options = _useState6[0],
-      setOptions = _useState6[1]; // 是否存在搜索, 当数据大于8时存在搜索
+  var _useState7 = (0, _react.useState)(filters),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      options = _useState8[0],
+      setOptions = _useState8[1]; // 是否存在搜索, 当数据大于8时存在搜索
 
 
   var isSearch = (0, _react.useMemo)(function () {
@@ -301,9 +381,9 @@ var CheckboxFilter = function CheckboxFilter(_ref6) {
   }, /*#__PURE__*/_react.default.createElement(_VirtualList.default, {
     options: options,
     className: "filter_list"
-  }, function (_ref7) {
-    var item = _ref7.item,
-        resetProps = (0, _objectWithoutProperties2.default)(_ref7, _excluded3);
+  }, function (_ref9) {
+    var item = _ref9.item,
+        resetProps = (0, _objectWithoutProperties2.default)(_ref9, _excluded4);
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
       className: (0, _classnames.default)('filter_item', {
         checked: checkedValues.includes(item.value)
@@ -329,10 +409,10 @@ var CheckboxFilter = function CheckboxFilter(_ref6) {
 }; // 更多筛选
 
 
-var MoreFilter = function MoreFilter(_ref8) {
-  var filters = _ref8.filters,
-      getFilterValue = _ref8.getFilterValue,
-      setFilterValue = _ref8.setFilterValue;
+var MoreFilter = function MoreFilter(_ref10) {
+  var filters = _ref10.filters,
+      getFilterValue = _ref10.getFilterValue,
+      setFilterValue = _ref10.setFilterValue;
   // 选中的数据
   var checkedValues = (0, _react.useMemo)(function () {
     return getFilterValue;
@@ -398,9 +478,9 @@ var MoreFilter = function MoreFilter(_ref8) {
   }, /*#__PURE__*/_react.default.createElement(_VirtualList.default, {
     options: options,
     className: "filter_list"
-  }, function (_ref9) {
-    var item = _ref9.item,
-        resetProps = (0, _objectWithoutProperties2.default)(_ref9, _excluded4);
+  }, function (_ref11) {
+    var item = _ref11.item,
+        resetProps = (0, _objectWithoutProperties2.default)(_ref11, _excluded5);
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
       className: "filter_item",
       onClick: function onClick(e) {
@@ -422,16 +502,17 @@ var MoreFilter = function MoreFilter(_ref8) {
 }; // 日期范围选择器
 
 
-var DatePickerFilter = function DatePickerFilter(_ref10) {
-  var getFilterValue = _ref10.getFilterValue,
-      setFilterValue = _ref10.setFilterValue,
-      props = _ref10.props;
+var DatePickerFilter = function DatePickerFilter(_ref12) {
+  var getFilterValue = _ref12.getFilterValue,
+      setFilterValue = _ref12.setFilterValue,
+      props = _ref12.props,
+      dateType = _ref12.dateType;
   // 对日期格式的转换, 日期组件仅接收moment格式
   var value = (0, _react.useMemo)(function () {
     var nValue;
 
     if (getFilterValue) {
-      nValue = [(0, _moment.default)(getFilterValue[0]), (0, _moment.default)(getFilterValue[1])];
+      nValue = dateType === 'rangePicker' ? [(0, _moment.default)(getFilterValue[0]), (0, _moment.default)(getFilterValue[1])] : (0, _moment.default)(getFilterValue);
     }
 
     return nValue;
@@ -448,59 +529,77 @@ var DatePickerFilter = function DatePickerFilter(_ref10) {
   }, []); // 选中时间段的触发
 
   var onChange = function onChange(dates, dateStrings) {
-    setFilterValue((0, _utils.getIsHas)(dateStrings.filter(function (v) {
-      return !!v;
-    })) ? dateStrings : null);
-  }; // 最近的时间触发事件
-
-
-  var handleLastDateOnChange = function handleLastDateOnChange(e) {
-    var nValue = JSON.parse(e.target.value);
-    setFilterValue(nValue);
+    setFilterValue((0, _utils.getIsHas)(dateStrings) ? dateStrings : null);
   };
 
-  var panelRender = function panelRender(panelNode) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter_picker_box"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter_picker_main"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter_picker_header"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter_picker_header_tip"
-    }, getFilterValue && "".concat(getFilterValue[0], " - ").concat(getFilterValue[1])), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter_picker_header_operate"
-    }, /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
-      value: JSON.stringify(getFilterValue),
-      onChange: handleLastDateOnChange,
+  if (dateType === 'rangePicker') {
+    // 选中时间段的触发
+    var handleOnChange = function handleOnChange(dates, dateStrings) {
+      onChange(dates, (0, _utils.getIsHas)(dateStrings.filter(function (v) {
+        return !!v;
+      })) ? dateStrings : null);
+    }; // 最近的时间触发事件
+
+
+    var handleLastDateOnChange = function handleLastDateOnChange(e) {
+      var nValue = JSON.parse(e.target.value);
+      setFilterValue(nValue);
+    };
+
+    var panelRender = function panelRender(panelNode) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "filter_picker_box"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "filter_picker_main"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "filter_picker_header"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "filter_picker_header_tip"
+      }, getFilterValue && "".concat(getFilterValue[0], " - ").concat(getFilterValue[1])), /*#__PURE__*/_react.default.createElement("div", {
+        className: "filter_picker_header_operate"
+      }, /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+        value: JSON.stringify(getFilterValue),
+        onChange: handleLastDateOnChange,
+        size: "small"
+      }, ranges.map(function (v) {
+        return /*#__PURE__*/_react.default.createElement(_radio.default.Button, {
+          key: v.label,
+          value: v.value
+        }, v.label);
+      })))), panelNode));
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_datePicker.default.RangePicker, (0, _extends2.default)({
+      picker: "date",
+      separator: "\u81F3",
+      placeholder: ['开始日期', '结束日期'],
+      style: {
+        width: 200
+      }
+    }, props, {
+      value: value,
+      onChange: handleOnChange,
+      panelRender: panelRender,
+      dropdownClassName: "filter_dropdown_picker",
+      bordered: false,
       size: "small"
-    }, ranges.map(function (v) {
-      return /*#__PURE__*/_react.default.createElement(_radio.default.Button, {
-        key: v.label,
-        value: v.value
-      }, v.label);
-    })))), panelNode));
-  };
+    })));
+  }
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_datePicker.default.RangePicker, (0, _extends2.default)({
+  ;
+  return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({
+    placeholder: "\u9009\u62E9\u65F6\u95F4"
+  }, props, {
     value: value,
     onChange: onChange,
-    panelRender: panelRender,
-    dropdownClassName: "lm_filter_dropdown_picker",
     bordered: false,
-    picker: "date",
-    size: "small",
-    separator: "\u81F3",
-    placeholder: ['开始日期', '结束日期'],
-    style: {
-      width: 200
-    }
-  }, props)));
+    size: "small"
+  }));
 };
 
 var FilterComp = function FilterComp(props) {
   var type = props.type,
-      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded5);
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded6);
 
   switch (type) {
     case 'input':
@@ -521,6 +620,9 @@ var FilterComp = function FilterComp(props) {
     case 'more':
       return /*#__PURE__*/_react.default.createElement(MoreFilter, resetProps);
 
+    case 'nested':
+      return /*#__PURE__*/_react.default.createElement(NestedFilter, resetProps);
+
     default:
       return /*#__PURE__*/_react.default.createElement(CheckboxFilter, resetProps);
   }

package/lib/CkFilter/context.js

@@ -29,7 +29,7 @@ var initialState = {
     searchKey: 'search',
     levelGroupKey: 'levGroup',
     filter: true,
-    complex: true
+    complex: false
   },
   // 初始化数据
   visibleFields: [],
@@ -44,6 +44,8 @@ var initialState = {
   // 一级筛选过滤的内容
   complexFilterValues: {},
   // 高级筛选过滤的内容
+  nestedFilterValues: {},
+  // 嵌套结构的过滤内容 {objType: {field: 'supplier', value: 's1', label: '一号供应商'}, ...}
   customDrawer: {
     visible: false,
     data: {}
@@ -72,7 +74,8 @@ var reducer = function reducer(state, action) {
       customModal = action.customModal,
       complexDrawer = action.complexDrawer,
       customFilterValues = action.customFilterValues,
-      complexFilterValues = action.complexFilterValues;
+      complexFilterValues = action.complexFilterValues,
+      nestedFilterValues = action.nestedFilterValues;
 
   switch (action.type) {
     // 仅在初始化时触发
@@ -131,6 +134,12 @@ var reducer = function reducer(state, action) {
       return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
         complexFilterValues: complexFilterValues
       });
+    // 设置嵌套结构的内容
+
+    case 'changeNestedFilterValues':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        nestedFilterValues: nestedFilterValues
+      });
 
     default:
       throw new Error();

package/lib/CkFilter/filter.js

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -31,7 +35,7 @@ var _modal = _interopRequireDefault(require("./components/modal"));
  * data
  *
  */
-var Filter = function Filter(props) {
+var Filter = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useContent = (0, _context.useContent)(),
       _useContent2 = (0, _slicedToArray2.default)(_useContent, 2),
       state = _useContent2[0],
@@ -40,15 +44,9 @@ var Filter = function Filter(props) {
   var _state$instance = state.instance,
       custom = _state$instance.custom,
       levelGroup = _state$instance.levelGroup,
-      complex = _state$instance.complex;
-  (0, _react.useEffect)(function () {
-    dispatch({
-      type: 'initOptions',
-      instance: props
-    });
-  }, []); // 初始化过滤的值
+      complex = _state$instance.complex; // 初始化
 
-  (0, _react.useEffect)(function () {
+  var setOptions = (0, _react.useCallback)(function () {
     var trigger = props.trigger,
         onChange = props.onChange,
         data = props.data,
@@ -92,13 +90,54 @@ var Filter = function Filter(props) {
     }); // 是否立即触发
 
     trigger === 'init' && (onChange === null || onChange === void 0 ? void 0 : onChange(filterValues, customFilterValues()));
+  }, [dispatch, props]); // 初始化过滤的值
+
+  (0, _react.useEffect)(function () {
+    setOptions();
   }, []);
   (0, _react.useEffect)(function () {
     dispatch({
       type: 'initInstance',
       instance: props
     });
-  }, [props]);
+  }, [props]); // 外部控制
+
+  var setFilter = function setFilter(_ref) {
+    var _state$instance$onCha, _state$instance2;
+
+    var field = _ref.field,
+        value = _ref.value,
+        label = _ref.label,
+        relation = _ref.relation;
+    var nValue = (0, _objectSpread2.default)({}, state.filterValues);
+    delete nValue[relation];
+    state.instance.data.find(function (v) {
+      return v.field === relation;
+    }).data.forEach(function (element) {
+      delete nValue[element.value];
+    });
+    (0, _utils.getIsHas)(value) ? nValue[field] = value : delete nValue[field];
+    dispatch({
+      type: 'changeFilterValues',
+      filterValues: nValue
+    });
+    label && dispatch({
+      type: 'changeNestedFilterValues',
+      nestedFilterValues: (0, _defineProperty2.default)({}, relation, {
+        value: value,
+        label: label,
+        field: field
+      })
+    });
+    (_state$instance$onCha = (_state$instance2 = state.instance).onChange) === null || _state$instance$onCha === void 0 ? void 0 : _state$instance$onCha.call(_state$instance2, nValue, state.customFilterValues);
+  };
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      setOptions: setOptions,
+      setFilter: setFilter
+    };
+  });
   return /*#__PURE__*/_react.default.createElement(_context.Context.Provider, {
     value: {
       state: state,
@@ -109,7 +148,6 @@ var Filter = function Filter(props) {
   }, custom && /*#__PURE__*/_react.default.createElement(_customFilter.default, null), levelGroup && /*#__PURE__*/_react.default.createElement(_radioGroup.default, null), (custom || levelGroup) && /*#__PURE__*/_react.default.createElement("div", {
     className: "line"
   }), /*#__PURE__*/_react.default.createElement(_baseFilter.default, null), complex && /*#__PURE__*/_react.default.createElement(_complexFilter.default, null), /*#__PURE__*/_react.default.createElement(_modal.default, null)));
-};
-
+});
 var _default = Filter;
 exports.default = _default;