linkmore-design 1.0.54 → 1.0.57

package/es/LmFilter/components/CascaderFilter.js

@@ -118,53 +118,30 @@ var CascaderFilter = function CascaderFilter(_ref2) {
       return v.value;
     });
   }, [checkedValues]);
-
-  var onChange = function onChange(item, selectedOptions) {
-    console.log('item', item, selectedOptions);
-    var nValue = [];
-
-    if (selectedOptions.length === 1) {
-      nValue = selectedOptions[0][1] ? [selectedOptions[0][1]] : selectedOptions[0][0].children;
-    }
-
-    if (selectedOptions.length > 1) {
-      var arr = selectedOptions.map(function (v) {
-        return v[1] ? v[1] : v[0].children;
+  var defaultValue = (0, _react.useMemo)(function () {
+    var flatKeys = function flatKeys(arr) {
+      return arr.map(function (v) {
+        return v.value;
       });
-      nValue = arr.flat(2);
-    }
+    };
 
-    console.log('nValue', nValue);
-    setCheckedValues(nValue); // setFilterValue(nValue);
-    // if (!item.length) {
-    //   setCheckedValues(itemProps.multiple ? [] : '');
-    //   setFilterValue(undefined);
-    //   return;
-    // }
-    // if (itemProps.multiple) {
-    //   const arr = [];
-    //   selectedOptions.map((vals) => {
-    //     return vals.length > 1
-    //       ? arr.push(vals.map((v) => v.label).join('/'))
-    //       : vals[0].children.map((v) => arr.push(`${vals[0].label}/${v.label}`));
-    //   });
-    //   const showLabel = arr.length < 3 ? arr.join('、') : `${arr[0]}、+${arr.length}`;
-    //   setCheckedValues(item);
-    // } else {
-    //   setFilterValue(item);
-    //   setCheckedValues(item);
-    // }
+    var nKey = filterValue.map(function (v) {
+      return Array.isArray(v) ? flatKeys(v) : v.value;
+    });
+    return nKey;
+  }, [filterValue]);
+
+  var onChange = function onChange(item, selectedOptions) {
+    console.log('item', item, '===', selectedOptions);
+    setCheckedValues(selectedOptions);
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cascader.default, {
     multiple: true,
-    options: options // value={checkedValues}
-    ,
+    options: options,
     onChange: onChange,
+    defaultValue: defaultValue,
     open: visible,
-    getPopupContainer: function getPopupContainer(triggerNode) {
-      return triggerNode;
-    },
     dropdownRender: function dropdownRender(dom) {
       return /*#__PURE__*/_react.default.createElement(DropdownRender, {
         dom: dom,
@@ -174,8 +151,7 @@ var CascaderFilter = function CascaderFilter(_ref2) {
         setCheckedValues: setCheckedValues,
         setOptions: setOptions
       });
-    } // onDropdownVisibleChange={(v) => setVisible(v)}
-
+    }
   }, /*#__PURE__*/_react.default.createElement("div", null)));
 };
 

package/es/LmFilter/components/DateFilter.js

@@ -19,8 +19,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _linkmoreDesign = require("linkmore-design");
 
-var _moment = _interopRequireDefault(require("moment"));
-
 var _utils = require("../utils");
 
 var RangePicker = function RangePicker(_ref) {
@@ -29,10 +27,7 @@ var RangePicker = function RangePicker(_ref) {
       onChange = _ref.onChange,
       itemProps = _ref.itemProps,
       visible = _ref.visible;
-  var value = (0, _react.useMemo)(function () {
-    return filterValue ? [(0, _moment.default)(filterValue[0]), (0, _moment.default)(filterValue[1])] : null;
-  }, [filterValue]); // 最近的时间段, 值为JSON转换后的字符串
-
+  // 最近的时间段, 值为JSON转换后的字符串
   var ranges = (0, _react.useMemo)(function () {
     return Object.entries((0, _utils.getRanges)()).map(function (item, i) {
       return {
@@ -44,7 +39,7 @@ var RangePicker = function RangePicker(_ref) {
   }, []); // 选中时间段的触发
 
   var handleOnChange = function handleOnChange(dates, dateStrings) {
-    onChange(dates, getIsHas(dateStrings.filter(function (v) {
+    onChange(dates, (0, _utils.getIsHas)(dateStrings.filter(function (v) {
       return !!v;
     })) ? dateStrings : null);
   }; // 最近的时间触发事件
@@ -92,7 +87,6 @@ var RangePicker = function RangePicker(_ref) {
       width: 210
     }
   }, itemProps, {
-    value: value,
     onChange: handleOnChange,
     open: visible,
     panelRender: panelRender,
@@ -100,7 +94,7 @@ var RangePicker = function RangePicker(_ref) {
     bordered: false,
     size: "small",
     inputReadOnly: true
-  }), /*#__PURE__*/_react.default.createElement("div", null)));
+  })));
 }; // 日期范围选择器
 
 
@@ -110,18 +104,16 @@ var DatePickerFilter = function DatePickerFilter(_ref2) {
   var filterValue = instance.filterValue,
       setFilterValue = instance.setFilterValue,
       visible = instance.visible;
-  var props = itemProps.props,
-      dateType = itemProps.dateType; // 对日期格式的转换, 日期组件仅接收moment格式
-
-  var value = (0, _react.useMemo)(function () {
-    return filterValue ? (0, _moment.default)(filterValue) : null;
-  }, [filterValue]); // 选中时间段的触发
+  var _itemProps$props = itemProps.props,
+      props = _itemProps$props === void 0 ? {
+    picker: 'date'
+  } : _itemProps$props; // 选中时间段的触发
 
   var onChange = function onChange(dates, dateStrings) {
-    setFilterValue(getIsHas(dateStrings) ? dateStrings : null);
+    setFilterValue((0, _utils.getIsHas)(dateStrings) ? dateStrings : null);
   };
 
-  if (dateType === 'rangePicker') {
+  if (['range', 'rangePicker'].includes(itemProps.dateType || itemProps.datetype)) {
     return /*#__PURE__*/_react.default.createElement(RangePicker, {
       filterValue: filterValue,
       setFilterValue: setFilterValue,
@@ -134,13 +126,13 @@ var DatePickerFilter = function DatePickerFilter(_ref2) {
   return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({
     placeholder: "\u9009\u62E9\u65F6\u95F4"
   }, props, {
-    value: value,
     onChange: onChange,
     open: visible,
     bordered: false,
     size: "small",
-    inputReadOnly: true
-  }), /*#__PURE__*/_react.default.createElement("div", null));
+    inputReadOnly: true,
+    dropdownClassName: "lm_filter_dropdown_picker"
+  }));
 };
 
 var _default = DatePickerFilter;

package/es/LmFilter/components/DropdownFIlter.js

@@ -19,6 +19,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _linkmoreDesign = require("linkmore-design");
 
+var _icons = require("@ant-design/icons");
+
 var _InputFilter = _interopRequireDefault(require("./InputFilter"));
 
 var _SelectFilter = _interopRequireDefault(require("./SelectFilter"));
@@ -61,13 +63,75 @@ var FilterControl = function FilterControl(_ref) {
   return widgets[type] || null;
 };
 
-var getLabel = function getLabel(val) {
+var getPlacehodler = function getPlacehodler(props) {
+  var type = props.type,
+      dateType = props.dateType,
+      itemProps = props.props; // 日期显示的处理
+
+  if (['date'].includes(type)) {
+    if (['range', 'rangePicker'].includes(props.dateType || props.datetype)) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u5F00\u59CB\u65E5\u671F", /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+        type: "lmweb-swap-right",
+        style: {
+          fontSize: 14
+        }
+      }), "\u7ED3\u675F\u65E5\u671F", /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
+        style: {
+          fontSize: 12
+        }
+      }));
+    }
+
+    var placeholder = {
+      'week': '周',
+      'month': '月份',
+      'quarter': '季度',
+      'year': '年份'
+    };
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u9009\u62E9", placeholder[itemProps === null || itemProps === void 0 ? void 0 : itemProps.picker] || '日期', /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
+      style: {
+        fontSize: 12
+      }
+    }));
+  }
+
+  return '全部';
+}; // 根据不同的类型展示文本内容
+
+
+var getLabel = function getLabel(filterValue, item) {
+  var _val;
+
+  var val = filterValue;
+  var type = item.type; // 不存在筛选时
+
   if (!(0, _utils.getIsHas)(val)) {
-    return '全部';
+    return getPlacehodler(item);
   } // 存在筛选数据时
 
 
   if (Array.isArray(val)) {
+    // 日期
+    if (['date'].includes(type)) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, val[0], /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+        type: "lmweb-swap-right",
+        style: {
+          fontSize: 14,
+          color: 'var(--text-color)'
+        }
+      }), val[1]);
+    } // 级联数据转换平级结构
+
+
+    if (['cascader'].includes(type)) {
+      var _filterValue$map;
+
+      val = (_filterValue$map = filterValue.map(function (v) {
+        return v[1] ? v[1] : v[0].children;
+      })) === null || _filterValue$map === void 0 ? void 0 : _filterValue$map.flat(2);
+    } // 多选
+
+
     switch (val.length) {
       case 1:
         return val[0].label;
@@ -78,12 +142,18 @@ var getLabel = function getLabel(val) {
       default:
         return "".concat(val[0].label, "\u3001+").concat(val.length - 1, "...");
     }
-  }
+  } // 输入框
+
+
+  if (['input', 'date'].includes(type)) {
+    return val;
+  } // 单选框
+
 
-  return (val === null || val === void 0 ? void 0 : val.label) || val;
+  return (_val = val) === null || _val === void 0 ? void 0 : _val.label;
 };
 /*
- * 样式控制
+ * css样式控制
  * expand: 展开样式
  * active: 选中样式
 */
@@ -147,15 +217,12 @@ var DropdownFilter = /*#__PURE__*/_react.default.memo(function (_ref2) {
     className: "filter_item_label"
   }, item === null || item === void 0 ? void 0 : item.title, ":"), /*#__PURE__*/_react.default.createElement("div", {
     className: "filter_item_value"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "checked"
-  }, getLabel(filterValue))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "filter_item_icon"
-  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+  }, getLabel(filterValue, item)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_item_icon addon_after"
+  }, item.type !== 'date' || active ? /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
     type: active ? 'lmweb-close-circle-fill' : 'lmweb-down',
-    className: "addonAfter",
     onClick: handleClear
-  }))));
+  }) : null)));
 });
 
 var _default = DropdownFilter;

package/es/LmFilter/components/index.js

@@ -31,8 +31,10 @@ var _excluded = ["instance", "item", "value", "onChange", "options"],
  * 其余参数皆为单独使用时传入
 */
 var FilterControl = /*#__PURE__*/_react.default.memo(function (props) {
-  var instance = props.instance,
-      item = props.item,
+  var _props$instance = props.instance,
+      instance = _props$instance === void 0 ? {} : _props$instance,
+      _props$item = props.item,
+      item = _props$item === void 0 ? {} : _props$item,
       value = props.value,
       onChange = props.onChange,
       options = props.options,
@@ -58,24 +60,65 @@ var FilterControl = /*#__PURE__*/_react.default.memo(function (props) {
 
   var transformFilterValue = (0, _react.useMemo)(function () {
     // 检查是否受控模式
-    var nValue = value || aliveValue;
+    var checkedValue = value || aliveValue;
     var getOptions = (resetItem === null || resetItem === void 0 ? void 0 : resetItem.data) || [];
+    var nValue = checkedValue;
 
-    if (!Array.isArray((0, _utils.getValueForType)(resetItem.type))) {
-      return (getOptions === null || getOptions === void 0 ? void 0 : getOptions.find(function (v) {
-        return v.value === nValue;
-      })) || '';
-    } else {
-      return (getOptions === null || getOptions === void 0 ? void 0 : getOptions.filter(function (v) {
-        return nValue.includes(v.value);
+    if (['select'].includes(resetItem.type)) {
+      nValue = getOptions === null || getOptions === void 0 ? void 0 : getOptions.find(function (v) {
+        return v.value === checkedValue;
+      });
+    }
+
+    if (['checkbox'].includes(resetItem.type)) {
+      nValue = (getOptions === null || getOptions === void 0 ? void 0 : getOptions.filter(function (v) {
+        return checkedValue.includes(v.value);
       })) || [];
     }
+
+    if (['cascader'].includes(resetItem.type)) {
+      // 查询值
+      // const getRow = (val, arr) => {
+      //   let nRow = '';
+      //   arr.forEach(item => {
+      //     nRow = item.value === val ? item : getRow(val, item.children);
+      //   })
+      //   return nRow;
+      // };
+      // checkedValue?.map(v => {
+      //   return Array.isArray(v) ? getRow(v) : getRow(v);
+      // })
+      return '';
+    }
+
+    return nValue;
   }, [value, aliveValue, resetItem.data, resetItem.type]); // 单独使用时抛出选中的值: val => obj || Array
 
   var handleChange = function handleChange(val) {
-    var nValue = Array.isArray(val) ? val.map(function (v) {
-      return v.value;
-    }) : val.value;
+    var nValue = val;
+
+    if (['cascader'].includes(resetItem.type)) {
+      var flatKeys = function flatKeys(arr) {
+        return arr.map(function (v) {
+          return v.value;
+        });
+      };
+
+      nValue = val.map(function (v) {
+        return Array.isArray(v) ? flatKeys(v) : v.value;
+      });
+    }
+
+    if (['select'].includes(resetItem.type)) {
+      nValue = val.value;
+    }
+
+    if (['checkbox'].includes(resetItem.type)) {
+      nValue = val.map(function (v) {
+        return v.value;
+      });
+    }
+
     setAliveValue === null || setAliveValue === void 0 ? void 0 : setAliveValue(nValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
   }; // 重组instance

package/es/LmFilter/filterFns/index.js

@@ -11,8 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectDestructuringEmpty"));
-
 var _utils = require("../utils");
 
 // 核心参数集合
@@ -20,7 +18,7 @@ var CoreOptions = function CoreOptions(_ref) {
   var state = _ref.state,
       dispatch = _ref.dispatch,
       props = _ref.props;
-  (0, _objectDestructuringEmpty2.default)(props); // 设置筛选的值 item => Object || Array => [{label: '',  value: ''}, ...]
+  var onChange = props.onChange; // 设置筛选的值 item => Object || Array => [{label: '',  value: ''}, ...]
 
   var setFilterValue = function setFilterValue(item, field) {
     var basicFilter = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state.basicFilter), {}, (0, _defineProperty2.default)({}, field, item));
@@ -34,6 +32,27 @@ var CoreOptions = function CoreOptions(_ref) {
       type: 'changeBasicFilter',
       basicFilter: basicFilter
     });
+
+    var formatVK = function formatVK() {
+      var obj = {};
+      Object.entries(basicFilter).forEach(function (item) {
+        if (Array.isArray(item[1])) {
+          obj[item[0]] = item[1].map(function (v) {
+            return v.value;
+          });
+          return;
+        }
+
+        obj[item[0]] = item[1].value;
+      });
+      return obj;
+    }; // 触发外部事件
+
+
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      basicFilter: basicFilter,
+      formatVK: formatVK()
+    });
   }; // 根据字段查找过滤的数据, 不存在时返回默认值
 
 

package/es/LmFilter/hooks/useDelayedFn.js

@@ -13,12 +13,14 @@ var _lodash = require("lodash");
 var useDelayedFn = function useDelayedFn() {
   var wait = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 200;
   var delayedQuery = (0, _react.useCallback)((0, _lodash.debounce)(function (fn) {
-    if (typeof fn === 'function') {
-      fn === null || fn === void 0 ? void 0 : fn();
-    } else {
-      fn;
-    }
-  }, wait), []);
+    typeof fn === 'function' ? fn === null || fn === void 0 ? void 0 : fn() : fn;
+  }, wait), []); // 防止异步任务数导致的内存泄漏
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      delayedQuery.cancel();
+    };
+  }, []);
   return delayedQuery;
 };
 

package/es/LmFilter/localization.d.ts

@@ -0,0 +1,8 @@
+export declare const DefaultLocalization: {
+    globalQuery: {
+        filter: any[];
+    };
+    filterQuery: {
+        filter: any[];
+    };
+};

package/es/LmFilter/localization.js

@@ -0,0 +1,12 @@
+// export interface LM_Localization {
+//   fieldName: string,
+//   operator: number,
+// }
+export var DefaultLocalization = {
+  globalQuery: {
+    filter: []
+  },
+  filterQuery: {
+    filter: []
+  }
+};

package/es/LmFilter/style/style.css

@@ -10,6 +10,9 @@
 .lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_search {
   max-width: 140px;
 }
+.lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_complex {
+  display: inline-flex;
+}
 .lm_filter_basic_item {
   display: inline-flex;
   align-items: center;
@@ -30,6 +33,9 @@
   background-color: var(--color-4);
 }
 .lm_filter_basic_item .filter_item_value {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   color: var(--text-color);
   transition: 0.3s;
 }
@@ -38,18 +44,29 @@
   color: var(--text-color);
   transition: 0.3s;
 }
-.lm_filter_basic_item .filter_item_icon:hover {
-  color: var(--primary-color);
+.lm_filter_basic_item .filter_item_icon.addon_before {
+  color: var(--font-color);
 }
-.lm_filter_basic_item.expand .filter_item_icon {
+.lm_filter_basic_item.expand .filter_item_icon.addon_after {
   transform: rotateX(180deg);
 }
 .lm_filter_basic_item.active .filter_item_value {
   color: var(--primary-color);
 }
-.lm_filter_basic_item.active .filter_item_icon {
+.lm_filter_basic_item.active .filter_item_icon.addon_after {
   transform: rotateX(180deg);
 }
+.lm_filter_basic_item.active.lm_filter_complex_item .filter_item_icon,
+.lm_filter_basic_item.active.lm_filter_complex_item .filter_item_label {
+  color: var(--primary-color);
+}
+.ant-dropdown.filter_dropdown_container_cascader > div {
+  transform: translateY(-4px);
+}
+.ant-dropdown.filter_dropdown_container_date .ant-picker {
+  visibility: hidden;
+  transform: translateY(-28px);
+}
 .ant-dropdown .filter_dropdown {
   display: flex;
   flex-flow: column;
@@ -187,3 +204,9 @@
 .ant-dropdown .filter_dropdown .ant-checkbox-wrapper .ant-checkbox {
   top: initial;
 }
+.lm_filter_dropdown_picker {
+  padding: 0 !important;
+}
+.lm_filter_dropdown_picker .ant-picker-range-arrow {
+  display: none;
+}

package/es/LmFilter/utils.js

@@ -5,11 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getFlat = getFlat;
 exports.getIsHas = getIsHas;
 exports.getRanges = getRanges;
 exports.getValueForType = getValueForType;
 exports.uniqueFunc = uniqueFunc;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
 
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -52,4 +55,17 @@ function getRanges() {
     '近一月': [(0, _dayjs.default)().subtract(1, 'month').format('YYYY-MM-DD'), (0, _dayjs.default)().format('YYYY-MM-DD')],
     '近一年': [(0, _dayjs.default)().subtract(1, 'year').format('YYYY-MM-DD'), (0, _dayjs.default)().format('YYYY-MM-DD')]
   };
+}
+
+function getFlat(arr) {
+  var nValue = [];
+  arr.forEach(function (item) {
+    if (item.length > 1) {
+      var suf = item.splice(1);
+      getFlat(suf);
+    } else {
+      nValue.push.apply(nValue, (0, _toConsumableArray2.default)(item[0].children));
+    }
+  });
+  return nValue;
 }

package/es/LmFilter/wrapper/FilterRoot.js

@@ -25,7 +25,10 @@ var _filterFns = _interopRequireDefault(require("../filterFns"));
 var reducer = function reducer(state, action) {
   var basicFilter = action.basicFilter,
       resize = action.resize,
-      rows = action.rows;
+      rows = action.rows,
+      complexDrawer = action.complexDrawer,
+      valueDrawer = action.valueDrawer,
+      complexFilter = action.complexFilter;
 
   switch (action.type) {
     case 'changeBasicFilter':
@@ -43,16 +46,69 @@ var reducer = function reducer(state, action) {
       return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
         resize: resize
       });
+    // 高级筛选
+
+    case 'changeComplexFilter':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        complexFilter: complexFilter
+      });
+
+    case 'changeComplexDrawer':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        complexDrawer: complexDrawer
+      });
+
+    case 'changeValueDrawer':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        valueDrawer: valueDrawer
+      });
+
+    case 'reset':
+      // 一键清空
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        basicFilter: {}
+      });
 
     default:
       throw new Error();
   }
-}; // 仅在初始化时触发一次
-
-
-var getInitialState = function getInitialState(props) {
+}; // const getRows = ({ fieldName, value }, arr) => {
+//   const findItem = arr.find(item => {
+//     return item.field === fieldName;
+//   })
+//   switch (findItem.type) {
+//     case 'input':
+//       return value;
+//     case 'select':
+//       return findItem.data.find(v => v.value === value);
+//     case 'checkbox':
+//       return findItem.data.find(v => [value].includes(v.value));
+//     default:
+//       break;
+//   }
+// };
+// 仅在初始化时触发一次
+
+
+var getInitialState = function getInitialState(_ref) {
+  var localization = _ref.localization;
+  var globalQuery = localization.globalQuery,
+      filterQuery = localization.filterQuery;
+  var basicFilter = {};
+  filterQuery.filter.forEach(function (item) {
+    basicFilter[item.fieldName] = item.value;
+  });
   return {
-    basicFilter: {}
+    basicFilter: basicFilter,
+    complexFilter: {},
+    complexDrawer: {
+      visible: false,
+      data: {}
+    },
+    valueDrawer: {
+      visible: false,
+      data: {}
+    }
   };
 };