linkmore-design/lib/complex-filter/fns/index.js

🌈 🚀lm组件库。🚀

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.initLocalization = exports.default = void 0;
var _react = require("react");
var _utils = require("../utils");
// 初始化查询结构
const initLocalization = props => {
  const {
    localization,
    dataSource,
    searchKey,
    searchConfig,
    customOptions
  } = props;
  const {
    globalQuery,
    filterQuery,
    fuzzyQuery
  } = localization;
  let basicFilter = localization?.basicFilter || {};
  let basicQuery = {}; // 存储查询结构
  const isFuzzy = Array.isArray(searchKey); // 数组时为模糊搜索结构
  let searchFilter = localization?.fuzzyFilter || {};
  let searchQuery = {}; // 模糊查询结构

  const customFilter = customOptions?.find(v => v?.value === localization?.customFilter?.value) || {};
  let customQuery = {}; // 自定义筛选存储结构

  // 一级查询
  if (globalQuery?.filters?.[0]?.conditions) {
    const globalQueryArr = globalQuery?.filters?.[0]?.conditions || [];
    customQuery = globalQueryArr.reduce((pre, cur) => {
      const checkedValue = cur.value; // 选中的数据
      // 查找该数据是否展示
      if ((0, _utils.getIsHas)(checkedValue)) {
        pre[cur.fieldName] = cur;
      }
      return pre;
    }, {});
  }

  // 模糊查询
  if ((0, _utils.getIsHas)(searchFilter)) {
    searchQuery = Object.keys(searchFilter)?.reduce((pre, cur) => {
      if ((0, _utils.getIsHas)(searchFilter[cur])) {
        pre[cur] = {
          ...searchConfig,
          fieldName: cur,
          value: [searchFilter[cur]]
        };
      }
      return pre;
    }, {});
  } else if (fuzzyQuery?.filters?.[0]?.conditions) {
    const fuzzyQueryArr = fuzzyQuery?.filters?.[0]?.conditions || [];
    // 初始化基础查询缓存
    searchFilter = fuzzyQueryArr.reduce((pre, cur) => {
      const checkedValue = cur.value; // 选中的数据
      if ((0, _utils.getIsHas)(checkedValue)) {
        searchQuery[cur.fieldName] = cur;
        pre[cur.fieldName] = checkedValue[0];
      }
      return pre;
    }, {});
  }

  // 二级查询
  if ((0, _utils.getIsHas)(basicFilter)) {
    basicQuery = Object.keys(basicFilter)?.reduce((pre, cur) => {
      let item = dataSource.find(v => {
        if (cur === v.field) {
          return v.show || typeof v.show !== 'boolean';
        }
        return false;
      });
      if (!isFuzzy && cur === searchKey) {
        item = {
          field: searchKey,
          operator: 'contains',
          fieldType: 'string'
        };
      }
      if ((0, _utils.getIsHas)(basicFilter[cur]) && !!item) {
        pre[cur] = {
          fieldName: cur,
          fieldType: item?.valueType || 'string',
          value: Array.isArray(basicFilter[cur]) ? basicFilter[cur] : [basicFilter[cur]],
          operator: item?.operator || 'equal'
        };
      }
      return pre;
    }, {});
  } else if (filterQuery?.filters?.[0]?.conditions) {
    const filterQueryArr = filterQuery?.filters?.[0]?.conditions || [];
    // 初始化基础查询缓存
    basicFilter = filterQueryArr.reduce((pre, cur) => {
      let checkedValue = cur.value; // 选中的数据
      // 是否搜索框
      const isSearchInput = cur.fieldName === searchKey;
      // 查找该数据是否展示
      const someData = dataSource.some(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 {
    searchFilter,
    searchQuery,
    basicFilter,
    basicQuery,
    customFilter,
    customQuery
  };
};

// 核心参数集合
exports.initLocalization = initLocalization;
const useCoreOptions = ({
  state,
  dispatch,
  props
}) => {
  const {
    onChange,
    dataSource,
    searchKey,
    searchConfig,
    enableAutoString
  } = props;

  // 获取是否存在过滤值
  const getHasFilter = (0, _react.useCallback)(() => {
    return (0, _utils.getIsHas)(state.basicFilter) || (0, _utils.getIsHas)(state.searchFilter) || state.complexFilter?.data?.some(v => {
      return !!Object.values(v)?.filter(Boolean).length;
    });
  }, [state.basicFilter, state.searchFilter, state.complexFilter]);

  // 转换一级查询结构 object => array
  // 转行查询结构
  const tranformQuery = (0, _react.useCallback)(({
    searchQuery = {},
    basicQuery = {}
  }) => {
    const globalQuery = {
      filters: [{
        conditions: []
      }]
    };
    const fuzzyQuery = {
      filters: [{
        conditions: Object.keys(searchQuery)?.map(k => searchQuery[k])
      }]
    };
    const filterQuery = {
      filters: [{
        conditions: Object.keys(basicQuery)?.map(k => basicQuery[k])
      }]
    };
    return {
      globalQuery,
      fuzzyQuery,
      filterQuery
    };
  }, []);

  // 触发查询 type  basic基础筛选 ｜ complex高级筛选
  const onQuery = (0, _react.useCallback)(({
    complexFilter = {},
    type = 'basic',
    basicFilter = state.basicFilter || {},
    basicQuery = state.basicQuery || {},
    searchFilter = state.searchFilter || {},
    searchQuery = state.searchQuery || {},
    customFilter = state.customFilter || {}
  } = {}) => {
    if (type === 'custom') {
      const {
        value: customSelectValue,
        relation = 'and',
        data = []
      } = customFilter;

      // 将结果转换为字符串(级联数据需要递归)
      const transformString = val => Array.isArray(val) ? val.map(v => transformString(v)) : String(val);
      const conditions = data?.map(item => {
        const dataSourceItem = dataSource.find(v => v.field === item.field) || {};
        const getValue = val => {
          if (val === undefined) return [];
          const stringValue = enableAutoString ? transformString(val) : val;
          if (Array.isArray(stringValue)) return stringValue;
          return [stringValue];
        };
        return {
          relation,
          fieldName: item.field,
          value: getValue(item.value),
          fieldType: dataSourceItem.valueType || 'string',
          // string
          operator: item.operator || 'equal' //  equal
        };
      });

      const complexQuery = {
        filters: [{
          relation: 'and',
          conditions
        }]
      };
      dispatch({
        type: 'changeSearchFilter',
        searchFilter: {}
      });
      dispatch({
        type: 'changeSearchQuery',
        searchQuery: {}
      });
      dispatch({
        type: 'changeBasicFilter',
        basicFilter: {}
      });
      dispatch({
        type: 'changeCustomFilter',
        customFilter
      });
      dispatch({
        type: 'changeComplexFilter',
        complexFilter: customFilter
      });
      dispatch({
        type: 'changeCustomSelectValue',
        customSelectValue
      });
      dispatch({
        type: 'changeBasicQuery',
        basicQuery
      });
      const {
        globalQuery
      } = tranformQuery({});
      onChange?.({
        complexFilter,
        globalQuery,
        filterQuery: complexQuery,
        type
      });
    }
    if (type === 'search') {
      dispatch({
        type: 'changeSearchFilter',
        searchFilter
      });
      dispatch({
        type: 'changeSearchQuery',
        searchQuery
      });
      dispatch({
        type: 'resetComplexFilter'
      }); // 基础筛选清空高级筛选
      // 抛出给外部查询
      const {
        globalQuery,
        fuzzyQuery,
        filterQuery
      } = tranformQuery({
        searchQuery,
        basicQuery
      });
      onChange?.({
        fuzzyFilter: searchFilter,
        basicFilter,
        fuzzyQuery,
        globalQuery,
        filterQuery,
        type: 'search'
      });
    }
    if (type === 'basic') {
      dispatch({
        type: 'changeBasicFilter',
        basicFilter
      });
      dispatch({
        type: 'changeBasicQuery',
        basicQuery
      });
      dispatch({
        type: 'resetComplexFilter'
      }); // 基础筛选清空高级筛选
      // 抛出给外部查询
      const {
        globalQuery,
        fuzzyQuery,
        filterQuery
      } = tranformQuery({
        searchQuery,
        basicQuery
      });
      onChange?.({
        fuzzyFilter: searchFilter,
        basicFilter,
        fuzzyQuery,
        globalQuery,
        filterQuery,
        type: 'basic'
      });
    }
    // 高级筛选存在 "为空"/"不为空"
    if (type === 'complex') {
      const {
        relation = 'and',
        data = []
      } = complexFilter;

      // 将结果转换为字符串(级联数据需要递归)
      const transformString = val => Array.isArray(val) ? val.map(v => transformString(v)) : String(val);
      const getValue = val => {
        if (val === undefined) return [];
        const stringValue = enableAutoString ? transformString(val) : val;
        if (Array.isArray(stringValue)) return stringValue;
        return [stringValue];
      };
      const conditions = data?.reduce((pre, cur) => {
        const curValue = getValue(cur?.value);
        // 是否查空值
        const isQueryEmpty = ['empty', 'not_empty'].includes(cur.operator);
        // 未选字段或值时不查
        if (!cur.field) return pre;
        if (!curValue?.length && !isQueryEmpty) return pre;
        // 解析empty操作符, 转换为'equal'/'not_equal'
        const operator = isQueryEmpty ? cur.operator === 'empty' ? 'equal' : cur.operator === 'not_empty' ? 'not_equal' : cur.operator : cur.operator;
        const dataSourceItem = dataSource.find(v => v.field === cur.field) || {};
        pre.push({
          relation,
          fieldName: cur.field,
          value: curValue,
          fieldType: dataSourceItem.valueType || 'string',
          // string
          operator: operator || 'equal' //  equal
        });

        return pre;
      }, []);
      const complexQuery = {
        filters: [{
          relation: 'and',
          conditions
        }]
      };
      dispatch({
        type: 'changeSearchFilter',
        searchFilter: {}
      });
      dispatch({
        type: 'changeSearchQuery',
        searchQuery: {}
      });
      dispatch({
        type: 'changeBasicFilter',
        basicFilter: {}
      });
      dispatch({
        type: 'changeComplexFilter',
        complexFilter
      });
      dispatch({
        type: 'changeBasicQuery',
        basicQuery
      });
      const {
        globalQuery
      } = tranformQuery({});
      onChange?.({
        complexFilter,
        globalQuery,
        filterQuery: complexQuery,
        type
      });
    }
    if (type === 'clear') {
      dispatch({
        type: 'reset'
      });
      const {
        globalQuery,
        fuzzyQuery,
        filterQuery
      } = tranformQuery({
        searchQuery,
        basicQuery
      });
      onChange?.({
        fuzzyFilter: searchFilter,
        basicFilter,
        fuzzyQuery,
        globalQuery,
        filterQuery,
        type: 'clear'
      });
    }
  }, [tranformQuery, state, dataSource, enableAutoString, onChange]);

  // 清除事件
  const onClearChange = (0, _react.useCallback)(() => {
    const params = {
      searchFilter: {},
      searchQuery: {},
      basicFilter: {},
      complexFilter: {},
      basicQuery: {},
      type: 'clear'
    };
    props.onClearChange?.(params);
    onQuery(params);
  }, [onQuery]);

  // 根据字段查找过滤的数据, 不存在时返回默认值
  const getFilterValue = (0, _react.useCallback)(({
    field,
    type
  }) => {
    if ((0, _utils.getIsHas)(state.basicFilter[field])) {
      return state.basicFilter[field];
    }
    const defaultValue = (0, _utils.getValueForType)(type);
    return state.basicFilter[field] || defaultValue;
  }, [state.basicFilter]);

  // 获取查询结构
  const getFilterQuery = (0, _react.useCallback)((originData = dataSource) => {
    const basicFilter = (0, _utils.getFilterShow)(state.basicFilter, originData);
    const basicQuery = (0, _utils.getFilterShow)(state.basicQuery, originData);
    dispatch({
      type: 'changeBasicFilter',
      basicFilter
    });
    dispatch({
      type: 'changeBasicQuery',
      basicQuery
    });
    const {
      globalQuery,
      fuzzyQuery,
      filterQuery
    } = tranformQuery({
      searchQuery: state.searchQuery,
      basicQuery
    });
    return {
      fuzzyFilter: state.searchFilter,
      basicFilter,
      fuzzyQuery,
      globalQuery,
      filterQuery,
      type: 'basic'
    };
  }, [state, dataSource]);

  /** 获取当前过滤的值，格式化为指定格式 */
  const getFilterFormat = () => {
    if (!(0, _utils.getIsHas)(state.basicFilter)) {
      return state.complexFilter;
    }
    const getDataSourceItem = val => dataSource?.find(v => v?.field === val);
    const result = Object.keys(state.basicFilter).map(v => {
      return {
        field: v,
        operator: getDataSourceItem(v)?.operator || 'equal',
        value: state.basicFilter[v]
      };
    });
    return {
      realtion: 'and',
      data: result
    };
  };

  /*
   * 设置筛选的值 itemValue => String || Array => ['', '', ...]
   * 后端仅接受数组包字符串形式, 不接受数值及布尔值
   */
  const setFilterValue = (0, _react.useCallback)((itemValue, item) => {
    const {
      field
    } = item;
    if (field) {
      // 将结果转换为字符串(级联数据需要递归)
      const transformString = val => Array.isArray(val) ? val.map(v => transformString(v)) : String(val);
      const stringValue = enableAutoString ? transformString(itemValue) : itemValue;
      // 基础查询数据(受控数据)
      const basicFilter = {
        ...state.basicFilter,
        [field]: stringValue
      };
      // 外部查询数据结构
      const basicQuery = {
        ...state.basicQuery,
        [field]: {
          fieldName: field,
          fieldType: item.valueType || 'string',
          type: item.type,
          value: Array.isArray(itemValue) ? stringValue : [stringValue],
          operator: item.operator || 'equal'
        }
      };
      // 数据清除时不返回结构体
      if (!(0, _utils.getIsHas)(itemValue)) {
        delete basicFilter[field];
        delete basicQuery[field];
      }

      // 触发外部事件
      onQuery?.({
        basicFilter,
        basicQuery,
        type: 'basic'
      });
    }
  }, [state, onQuery]);

  // 单个设置过滤字段值, 会触发onChange事件, 多个字段时使用setLocalization
  const setFilterFieldValue = (0, _react.useCallback)((field, value) => {
    const item = dataSource?.find(v => v.field === field) || {};
    setFilterValue?.(value, item);
  }, [dataSource, setFilterValue]);

  // 读取缓存
  const setLocalization = (0, _react.useCallback)((localization = props.localization) => {
    const {
      searchFilter,
      searchQuery,
      basicFilter,
      basicQuery
    } = initLocalization({
      ...props,
      localization
    });
    dispatch({
      type: 'changeSearchFilter',
      searchFilter
    });
    dispatch({
      type: 'changeSearchQuery',
      searchQuery
    });
    dispatch({
      type: 'changeBasicFilter',
      basicFilter
    });
    dispatch({
      type: 'changeBasicQuery',
      basicQuery
    });
  }, [props]);

  // 模糊查询结构
  const setSearchFilter = (0, _react.useCallback)(itemValue => {
    let searchFilter = searchKey?.reduce((pre, cur) => {
      pre[cur] = itemValue;
      return pre;
    }, {
      ...state.searchFilter
    });
    let searchQuery = searchKey?.reduce((pre, cur) => {
      pre[cur] = {
        ...searchConfig,
        fieldName: cur,
        value: [itemValue]
      };
      return pre;
    }, {
      ...state.searchQuery
    });

    // 数据清除时不返回结构体
    if (!(0, _utils.getIsHas)(itemValue)) {
      searchFilter = {};
      searchQuery = {};
    }
    onQuery({
      searchFilter,
      searchQuery,
      type: 'search'
    });
  }, [searchKey, state]);
  const onComplexFilter = (0, _react.useCallback)(customFilter => {
    onQuery({
      customFilter,
      type: 'custom'
    });
  }, [onQuery]);

  // 组件内部使用
  const CoreMethods = {
    onQuery,
    setSearchFilter
  };

  // 参与Ref转发
  const RefMethods = {
    getState: () => state,
    getBasicFilter: () => state.basicFilter,
    getFilterValue,
    getFilterQuery,
    getHasFilter,
    setFilterValue,
    setFilterFieldValue,
    setLocalization,
    onComplexFilter,
    onClearChange,
    getFilterFormat
  };
  return {
    CoreMethods,
    RefMethods
  };
};
var _default = useCoreOptions;
exports.default = _default;