linkmore-design 1.0.59 → 1.0.63

package/lib/LmFilter/filterFns/index.js

@@ -1,102 +1,323 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.initLocalization = exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("../utils");
 
-// 核心参数集合
-var CoreOptions = function CoreOptions(_ref) {
+// 初始化查询结构
+var initLocalization = function initLocalization(props) {
+  var _filterQuery$filters, _filterQuery$filters$;
+
+  var localization = props.localization,
+      dataSource = props.dataSource,
+      searchKey = props.searchKey;
+  var globalQuery = localization.globalQuery,
+      filterQuery = localization.filterQuery;
+  var basicFilter = (localization === null || localization === void 0 ? void 0 : localization.basicFilter) || {};
+  var basicQuery = {}; // 存储查询结构
+
+  if ((0, _utils.getIsHas)(basicFilter)) {
+    var _Object$keys;
+
+    basicQuery = (_Object$keys = Object.keys(basicFilter)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.reduce(function (pre, cur) {
+      var item = dataSource.find(function (v) {
+        if (cur === v.field) {
+          return v.show || typeof v.show !== 'boolean';
+        }
+
+        return false;
+      });
+
+      if (cur === searchKey) {
+        item = {
+          field: searchKey,
+          operator: 'contains',
+          fieldType: 'string'
+        };
+      }
+
+      if ((0, _utils.getIsHas)(basicFilter[cur]) && !!item) {
+        var _item, _item2;
+
+        pre[cur] = {
+          fieldName: cur,
+          fieldType: ((_item = item) === null || _item === void 0 ? void 0 : _item.valueType) || 'string',
+          value: Array.isArray(basicFilter[cur]) ? basicFilter[cur] : [basicFilter[cur]],
+          operator: ((_item2 = item) === null || _item2 === void 0 ? void 0 : _item2.operator) || 'equal'
+        };
+      }
+
+      return pre;
+    }, {});
+  } else if (filterQuery === null || filterQuery === void 0 ? void 0 : (_filterQuery$filters = filterQuery.filters) === null || _filterQuery$filters === void 0 ? void 0 : (_filterQuery$filters$ = _filterQuery$filters[0]) === null || _filterQuery$filters$ === void 0 ? void 0 : _filterQuery$filters$.conditions) {
+    var _filterQuery$filters2, _filterQuery$filters3;
+
+    var filterQueryArr = (filterQuery === null || filterQuery === void 0 ? void 0 : (_filterQuery$filters2 = filterQuery.filters) === null || _filterQuery$filters2 === void 0 ? void 0 : (_filterQuery$filters3 = _filterQuery$filters2[0]) === null || _filterQuery$filters3 === void 0 ? void 0 : _filterQuery$filters3.conditions) || []; // 初始化基础查询缓存
+
+    basicFilter = filterQueryArr.reduce(function (pre, cur) {
+      var checkedValue = cur.value; // 选中的数据
+      // 是否搜索框
+
+      var isSearchInput = cur.fieldName === searchKey; // 查找该数据是否展示
+
+      var someData = dataSource.some(function (v) {
+        if (cur.fieldName === v.field) {
+          return v.show || typeof v.show !== 'boolean';
+        }
+
+        return false;
+      });
+
+      if ((0, _utils.getIsHas)(checkedValue) && someData || isSearchInput) {
+        basicQuery[cur.fieldName] = cur; // 复选/级联/日期区间
+
+        if (!['checkbox', 'cascader'].includes(cur.type) && checkedValue.length < 2) {
+          checkedValue = checkedValue[0];
+        }
+
+        pre[cur.fieldName] = checkedValue;
+      }
+
+      return pre;
+    }, {});
+  }
+
+  return {
+    basicFilter: basicFilter,
+    basicQuery: basicQuery
+  };
+}; // 核心参数集合
+
+
+exports.initLocalization = initLocalization;
+
+var useCoreOptions = function useCoreOptions(_ref) {
   var state = _ref.state,
       dispatch = _ref.dispatch,
       props = _ref.props;
   var onChange = props.onChange,
-      dataSource = props.dataSource; // 根据字段查找过滤的数据, 不存在时返回默认值
+      dataSource = props.dataSource,
+      searchKey = props.searchKey; // 触发查询 type  basic基础筛选 ｜ complex高级筛选
 
-  var getFilterValue = function getFilterValue(_ref2) {
-    var field = _ref2.field,
-        type = _ref2.type;
-    var defaultValue = (0, _utils.getValueForType)(type);
-    return state.basicFilter[field] || defaultValue;
-  }; // 设置筛选的值 item => String || Array => ['', '', ...]
+  var onQuery = (0, _react.useCallback)(function () {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref2$basicFilter = _ref2.basicFilter,
+        basicFilter = _ref2$basicFilter === void 0 ? {} : _ref2$basicFilter,
+        _ref2$complexFilter = _ref2.complexFilter,
+        complexFilter = _ref2$complexFilter === void 0 ? {} : _ref2$complexFilter,
+        _ref2$basicQuery = _ref2.basicQuery,
+        basicQuery = _ref2$basicQuery === void 0 ? {} : _ref2$basicQuery,
+        _ref2$type = _ref2.type,
+        type = _ref2$type === void 0 ? 'basic' : _ref2$type;
 
+    if (type === 'basic') {
+      var _Object$keys2;
 
-  var setFilterValue = function setFilterValue(item, field) {
-    var _Object$entries;
+      dispatch({
+        type: 'changeBasicFilter',
+        basicFilter: basicFilter
+      });
+      dispatch({
+        type: 'changeBasicQuery',
+        basicQuery: basicQuery
+      });
+      dispatch({
+        type: 'changeComplexFilter',
+        complexFilter: {}
+      }); // 基础筛选清空高级筛选
+      // 抛出给外部查询
+
+      var filterQuery = {
+        filters: [{
+          conditions: (_Object$keys2 = Object.keys(basicQuery)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.map(function (k) {
+            return basicQuery[k];
+          })
+        }]
+      };
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        basicFilter: basicFilter,
+        filterQuery: filterQuery,
+        type: 'basic'
+      });
+    }
+
+    if (type === 'complex') {
+      var _Object$keys3, _Object$keys4;
 
-    var basicFilter = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state.basicFilter), {}, (0, _defineProperty2.default)({}, field, item));
+      var _basicQuery = (_Object$keys3 = Object.keys(complexFilter)) === null || _Object$keys3 === void 0 ? void 0 : _Object$keys3.reduce(function (pre, cur) {
+        var item = dataSource.find(function (v) {
+          return cur === v.field;
+        });
+        var itemValue = complexFilter[cur].value;
+
+        if ((0, _utils.getIsHas)(itemValue) && !!item) {
+          pre[cur] = {
+            fieldName: cur,
+            fieldType: (item === null || item === void 0 ? void 0 : item.valueType) || 'string',
+            type: item.type,
+            value: Array.isArray(itemValue) ? itemValue : [itemValue],
+            operator: complexFilter[cur].mode === 'and' ? 'equal' : 'contains'
+          };
+        }
+
+        return pre;
+      }, {});
 
-    if (!(0, _utils.getIsHas)(item)) {
-      delete basicFilter[field];
+      dispatch({
+        type: 'changeBasicFilter',
+        basicFilter: {}
+      });
+      dispatch({
+        type: 'changeComplexFilter',
+        complexFilter: complexFilter
+      });
+      dispatch({
+        type: 'changeComplexDrawer',
+        complexDrawer: {
+          data: {},
+          visible: false
+        }
+      });
+      dispatch({
+        type: 'changeBasicQuery',
+        basicQuery: _basicQuery
+      });
+      var _filterQuery = {
+        filters: [{
+          conditions: (_Object$keys4 = Object.keys(_basicQuery)) === null || _Object$keys4 === void 0 ? void 0 : _Object$keys4.map(function (k) {
+            return _basicQuery[k];
+          })
+        }]
+      };
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        complexFilter: complexFilter,
+        filterQuery: _filterQuery,
+        type: type
+      });
     }
+  }, []); // 清除事件
+
+  var onClearChange = (0, _react.useCallback)(function () {
+    var _props$onClearChange;
 
-    ;
+    var params = {
+      basicFilter: {},
+      complexFilter: {},
+      basicQuery: {},
+      type: 'basic'
+    };
+    (_props$onClearChange = props.onClearChange) === null || _props$onClearChange === void 0 ? void 0 : _props$onClearChange.call(props, params);
+    onQuery(params);
+  }, [onQuery]); // 根据字段查找过滤的数据, 不存在时返回默认值
+
+  var getFilterValue = (0, _react.useCallback)(function (_ref3) {
+    var field = _ref3.field,
+        type = _ref3.type;
+    var defaultValue = (0, _utils.getValueForType)(type);
+    return state.basicFilter[field] || defaultValue;
+  }, [state.basicFilter]); // 获取查询结构
+
+  var getFilterQuery = (0, _react.useCallback)(function () {
+    var _Object$keys5;
+
+    var originData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : dataSource;
+    var basicFilter = (0, _utils.getFilterShow)(state.basicFilter, originData);
+    var basicQuery = (0, _utils.getFilterShow)(state.basicQuery, originData);
     dispatch({
       type: 'changeBasicFilter',
       basicFilter: basicFilter
     });
     dispatch({
-      type: 'changeComplexFilter',
-      complexFilter: {}
-    }); // 基础筛选清空高级筛选
-    // 抛出给外部存储
-
-    var filterQuery = (_Object$entries = Object.entries(basicFilter)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (v) {
-      return {
-        fieldName: v[0],
-        value: v[1],
-        operator: 'contains'
-      };
-    }); // 触发外部事件
-
-    onChange === null || onChange === void 0 ? void 0 : onChange({
+      type: 'changeBasicQuery',
+      basicQuery: basicQuery
+    });
+    var filterQuery = {
+      filters: [{
+        conditions: (_Object$keys5 = Object.keys(basicQuery)) === null || _Object$keys5 === void 0 ? void 0 : _Object$keys5.map(function (k) {
+          return basicQuery[k];
+        })
+      }]
+    };
+    return {
       basicFilter: basicFilter,
       filterQuery: filterQuery,
       type: 'basic'
-    });
-  }; // 读取缓存
+    };
+  }, [state, dataSource]); // 设置筛选的值 itemValue => String || Array => ['', '', ...]
 
+  var setFilterValue = (0, _react.useCallback)(function (itemValue, item) {
+    var field = item.field;
 
-  var setLocalization = function setLocalization() {
-    var localization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.localization;
-    var globalQuery = localization.globalQuery,
-        filterQuery = localization.filterQuery;
-
-    if (filterQuery === null || filterQuery === void 0 ? void 0 : filterQuery.filter) {
-      // 初始化基础查询缓存
-      var basicFilter = filterQuery === null || filterQuery === void 0 ? void 0 : filterQuery.filter.reduce(function (pre, cur) {
-        // 查找改数据是否展示
-        var someData = dataSource.some(function (v) {
-          if (cur.fieldName === v.field) {
-            var isHidden = !v.show && typeof v.show === 'boolean';
-            return !isHidden;
-          }
-
-          return false;
-        });
+    if (field) {
+      // 基础查询数据(受控数据)
+      var basicFilter = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.basicFilter), {}, (0, _defineProperty2.default)({}, field, itemValue)); // 外部查询数据结构
 
-        if ((0, _utils.getIsHas)(cur.value) && someData) {
-          pre[cur.fieldName] = cur.value;
-        }
+      var basicQuery = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.basicQuery), {}, (0, _defineProperty2.default)({}, field, {
+        fieldName: field,
+        fieldType: item.valueType || 'string',
+        type: item.type,
+        value: Array.isArray(itemValue) ? itemValue : [itemValue],
+        operator: item.operator || 'equal'
+      }));
 
-        return pre;
-      }, {});
-      dispatch({
-        type: 'changeBasicFilter',
-        basicFilter: basicFilter
+      if (!(0, _utils.getIsHas)(itemValue)) {
+        delete basicFilter[field];
+      }
+
+      ; // 触发外部事件
+
+      onQuery === null || onQuery === void 0 ? void 0 : onQuery({
+        basicFilter: basicFilter,
+        basicQuery: basicQuery,
+        type: 'basic'
       });
     }
-  };
+  }, [state]); // 单个设置过滤字段值, 会触发onChange事件, 多个字段时使用setLocalization
 
-  return {
+  var setFilterFieldValue = (0, _react.useCallback)(function (field, value) {
+    var item = dataSource.find(function (v) {
+      return v.fidld === field;
+    }) || {};
+    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue(value, item);
+  }, [dataSource]); // 读取缓存
+
+  var setLocalization = (0, _react.useCallback)(function () {
+    var localization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.localization;
+
+    var _initLocalization = initLocalization((0, _objectSpread4.default)((0, _objectSpread4.default)({}, props), {}, {
+      localization: localization
+    })),
+        basicFilter = _initLocalization.basicFilter,
+        basicQuery = _initLocalization.basicQuery;
+
+    dispatch({
+      type: 'changeBasicFilter',
+      basicFilter: basicFilter
+    });
+    dispatch({
+      type: 'changeBasicQuery',
+      basicQuery: basicQuery
+    });
+  }, [props]); // 组件内部使用
+
+  var CoreMethods = {
+    onQuery: onQuery
+  }; // 参与Ref转发
+
+  var RefMethods = {
     getState: function getState() {
       return state;
     },
@@ -104,10 +325,17 @@ var CoreOptions = function CoreOptions(_ref) {
       return state.basicFilter;
     },
     getFilterValue: getFilterValue,
+    getFilterQuery: getFilterQuery,
     setFilterValue: setFilterValue,
-    setLocalization: setLocalization
+    setFilterFieldValue: setFilterFieldValue,
+    setLocalization: setLocalization,
+    onClearChange: onClearChange
+  };
+  return {
+    CoreMethods: CoreMethods,
+    RefMethods: RefMethods
   };
 };
 
-var _default = CoreOptions;
+var _default = useCoreOptions;
 exports.default = _default;

package/lib/LmFilter/localization.d.ts

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

package/lib/LmFilter/localization.js

@@ -9,11 +9,29 @@ exports.DefaultLocalization = void 0;
 //   operator: number,
 // }
 var DefaultLocalization = {
+  customFilter: {},
+  basicFilter: {},
+  // 一级筛选
   globalQuery: {
-    filter: []
+    filter: [{
+      // relation: 'and',
+      conditions: []
+    }]
   },
+  // 二级筛选
   filterQuery: {
-    filter: []
+    filter: [{
+      // relation: 'and',
+      conditions: [// {
+        //   relation: 'antd', // 查询间的关系
+        //   fieldName: '', // 查询字段
+        //   fieldType: 'string', // 字段类型
+        //   // 查询值的关系 "integer", "double", "string", "date", "datetime", and "boolean".
+        //   operator: '',
+        //   value: [], // 值的集合
+        // }
+      ]
+    }]
   }
 };
 exports.DefaultLocalization = DefaultLocalization;

package/lib/LmFilter/style/style.css

@@ -1,12 +1,48 @@
-.lm_filter_wrapper .lm_filter_container,
-.lm_filter_wrapper .lm_filter,
-.lm_filter_wrapper .lm_filter_basic {
+.lm_filter_wrapper .lm_filter_container .lm_filter {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   font-size: 12px;
 }
+.lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom_select {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  line-height: 1;
+  min-width: 100px;
+  max-width: 180px;
+  border: 1px solid var(--color-15);
+  border-radius: 2px;
+  color: var(--font2-color);
+  padding: 0 8px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+.lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom_select.small {
+  height: 24px;
+}
+.lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom_select .lm_filter_custom_select_label span {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom_select .lm_filter_custom_select_icon {
+  font-size: 14px;
+  color: var(--text-color);
+  transition: 0.3s;
+}
+.lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom_select:hover {
+  border-color: var(--primary-hover-color);
+}
+.lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom_select.expand {
+  color: var(--text-color);
+  border-color: var(--primary-hover-color);
+}
+.lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_custom_select.expand .lm_filter_custom_select_icon {
+  transform: rotateX(180deg);
+}
 .lm_filter_wrapper .lm_filter_container .lm_filter .lm_filter_search {
   max-width: 140px;
 }
@@ -127,13 +163,18 @@
   cursor: pointer;
   gap: 8px;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item.add_more {
-  border-top: 1px solid var(--stripe-color);
+.ant-dropdown .filter_dropdown .filter_body .filter_item.last_item {
+  border-top: 1px solid var(--line-color);
 }
 .ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_content {
   flex: auto;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_operate .hover_show {
+.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_operate {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_operate .icon_hover {
   font-size: 16px;
   color: var(--primary-color);
   transition: 0.3s;
@@ -143,12 +184,13 @@
   display: none;
 }
 .ant-dropdown .filter_dropdown .filter_body .filter_item.checked {
+  color: var(--font-color);
   background-color: var(--primary-select-color);
 }
 .ant-dropdown .filter_dropdown .filter_body .filter_item:hover {
-  background-color: var(--stripe-color);
+  background-color: var(--background-color);
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item:hover .filter_item_operate .icon_top {
+.ant-dropdown .filter_dropdown .filter_body .filter_item:hover .filter_item_operate .icon_hover {
   opacity: 1;
 }
 .ant-dropdown .filter_dropdown .filter_footer {

package/lib/LmFilter/utils.js

@@ -5,12 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getFilterShow = getFilterShow;
+exports.getFilterShowQuery = getFilterShowQuery;
 exports.getFlatItem = getFlatItem;
 exports.getIsHas = getIsHas;
 exports.getRanges = getRanges;
 exports.getValueForType = getValueForType;
 exports.uniqueFunc = uniqueFunc;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -117,4 +121,34 @@ function getFlatItem(filterValues, originArr) {
     }
   });
   return nArr;
+} // 返回过滤掉隐藏字段后的查询结构 () => {...}
+
+
+function getFilterShow(basicFilter, dataSource) {
+  return Object.keys(basicFilter).reduce(function (pre, cur) {
+    var value = basicFilter[cur];
+
+    if (dataSource.some(function (v) {
+      return v.field === cur && (v.show || typeof v.show !== 'boolean');
+    })) {
+      pre[cur] = value;
+    }
+
+    return pre;
+  }, {});
+} // 返回过滤掉隐藏字段后的查询结构 () => [...]
+
+
+function getFilterShowQuery(basicQuery, dataSource) {
+  return Object.keys(basicQuery).reduce(function (pre, cur) {
+    var value = basicQuery[cur];
+
+    if (dataSource.some(function (v) {
+      return v.field === cur && v.show || typeof v.show !== 'boolean';
+    })) {
+      return [].concat((0, _toConsumableArray2.default)(pre), [value]);
+    }
+
+    return pre;
+  }, []);
 }

package/lib/LmFilter/wrapper/Filter.js

@@ -15,6 +15,8 @@ var _customFilter = _interopRequireDefault(require("../customFilter"));
 
 var _complexFilter = _interopRequireDefault(require("../complexFilter"));
 
+var _clearFilter = _interopRequireDefault(require("../clearFilter"));
+
 // 筛选组合
 var LmFilter = /*#__PURE__*/_react.default.memo(function (_ref) {
   var instance = _ref.instance;
@@ -29,6 +31,8 @@ var LmFilter = /*#__PURE__*/_react.default.memo(function (_ref) {
     instance: instance
   }), enableComplex && /*#__PURE__*/_react.default.createElement(_complexFilter.default, {
     instance: instance
+  }), /*#__PURE__*/_react.default.createElement(_clearFilter.default, {
+    instance: instance
   }));
 });
 

package/lib/LmFilter/wrapper/FilterContainer.js

@@ -11,8 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Filter = _interopRequireDefault(require("./Filter"));
 
-var _clearFilter = _interopRequireDefault(require("../clearFilter"));
-
 // 过滤组件主体区域
 var LmFilterContainer = /*#__PURE__*/_react.default.memo(function (_ref) {
   var instance = _ref.instance;
@@ -20,8 +18,6 @@ var LmFilterContainer = /*#__PURE__*/_react.default.memo(function (_ref) {
     className: "lm_filter_container"
   }, /*#__PURE__*/_react.default.createElement(_Filter.default, {
     instance: instance
-  }), /*#__PURE__*/_react.default.createElement(_clearFilter.default, {
-    instance: instance
   }));
 });