linkmore-design
Version:
🌈 🚀lm组件库。🚀
653 lines (628 loc) • 25.2 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { useCallback } from 'react';
import { getFilterShow, getIsHas, getValueForType } from "../utils";
// 初始化查询结构
export var initLocalization = function initLocalization(props) {
var _globalQuery$filters, _globalQuery$filters$, _fuzzyQuery$filters, _fuzzyQuery$filters$, _filterQuery$filters, _filterQuery$filters$;
var localization = props.localization,
dataSource = props.dataSource,
searchKey = props.searchKey,
searchConfig = props.searchConfig,
customOptions = props.customOptions;
var globalQuery = localization.globalQuery,
filterQuery = localization.filterQuery,
fuzzyQuery = localization.fuzzyQuery;
var basicFilter = (localization === null || localization === void 0 ? void 0 : localization.basicFilter) || {};
var basicQuery = {}; // 存储查询结构
var isFuzzy = Array.isArray(searchKey); // 数组时为模糊搜索结构
var searchFilter = (localization === null || localization === void 0 ? void 0 : localization.fuzzyFilter) || {};
var searchQuery = {}; // 模糊查询结构
var customFilter = (customOptions === null || customOptions === void 0 ? void 0 : customOptions.find(function (v) {
var _localization$customF;
return (v === null || v === void 0 ? void 0 : v.value) === (localization === null || localization === void 0 ? void 0 : (_localization$customF = localization.customFilter) === null || _localization$customF === void 0 ? void 0 : _localization$customF.value);
})) || {};
var customQuery = {}; // 自定义筛选存储结构
// 一级查询
if (globalQuery !== null && globalQuery !== void 0 && (_globalQuery$filters = globalQuery.filters) !== null && _globalQuery$filters !== void 0 && (_globalQuery$filters$ = _globalQuery$filters[0]) !== null && _globalQuery$filters$ !== void 0 && _globalQuery$filters$.conditions) {
var _globalQuery$filters2, _globalQuery$filters3;
var globalQueryArr = (globalQuery === null || globalQuery === void 0 ? void 0 : (_globalQuery$filters2 = globalQuery.filters) === null || _globalQuery$filters2 === void 0 ? void 0 : (_globalQuery$filters3 = _globalQuery$filters2[0]) === null || _globalQuery$filters3 === void 0 ? void 0 : _globalQuery$filters3.conditions) || [];
customQuery = globalQueryArr.reduce(function (pre, cur) {
var checkedValue = cur.value; // 选中的数据
// 查找该数据是否展示
if (getIsHas(checkedValue)) {
pre[cur.fieldName] = cur;
}
return pre;
}, {});
}
// 模糊查询
if (getIsHas(searchFilter)) {
var _Object$keys;
searchQuery = (_Object$keys = Object.keys(searchFilter)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.reduce(function (pre, cur) {
if (getIsHas(searchFilter[cur])) {
pre[cur] = _objectSpread(_objectSpread({}, searchConfig), {}, {
fieldName: cur,
value: [searchFilter[cur]]
});
}
return pre;
}, {});
} else if (fuzzyQuery !== null && fuzzyQuery !== void 0 && (_fuzzyQuery$filters = fuzzyQuery.filters) !== null && _fuzzyQuery$filters !== void 0 && (_fuzzyQuery$filters$ = _fuzzyQuery$filters[0]) !== null && _fuzzyQuery$filters$ !== void 0 && _fuzzyQuery$filters$.conditions) {
var _fuzzyQuery$filters2, _fuzzyQuery$filters2$;
var fuzzyQueryArr = (fuzzyQuery === null || fuzzyQuery === void 0 ? void 0 : (_fuzzyQuery$filters2 = fuzzyQuery.filters) === null || _fuzzyQuery$filters2 === void 0 ? void 0 : (_fuzzyQuery$filters2$ = _fuzzyQuery$filters2[0]) === null || _fuzzyQuery$filters2$ === void 0 ? void 0 : _fuzzyQuery$filters2$.conditions) || [];
// 初始化基础查询缓存
searchFilter = fuzzyQueryArr.reduce(function (pre, cur) {
var checkedValue = cur.value; // 选中的数据
if (getIsHas(checkedValue)) {
searchQuery[cur.fieldName] = cur;
pre[cur.fieldName] = checkedValue[0];
}
return pre;
}, {});
}
// 二级查询
if (getIsHas(basicFilter)) {
var _Object$keys2;
basicQuery = (_Object$keys2 = Object.keys(basicFilter)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.reduce(function (pre, cur) {
var item = dataSource.find(function (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 (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 && (_filterQuery$filters = filterQuery.filters) !== null && _filterQuery$filters !== void 0 && (_filterQuery$filters$ = _filterQuery$filters[0]) !== null && _filterQuery$filters$ !== 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 (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: searchFilter,
searchQuery: searchQuery,
basicFilter: basicFilter,
basicQuery: basicQuery,
customFilter: customFilter,
customQuery: customQuery
};
};
// 核心参数集合
var useCoreOptions = function useCoreOptions(_ref) {
var state = _ref.state,
dispatch = _ref.dispatch,
props = _ref.props;
var onChange = props.onChange,
dataSource = props.dataSource,
searchKey = props.searchKey,
searchConfig = props.searchConfig,
enableAutoString = props.enableAutoString;
// 获取是否存在过滤值
var getHasFilter = useCallback(function () {
var _state$complexFilter, _state$complexFilter$;
return getIsHas(state.basicFilter) || getIsHas(state.searchFilter) || ((_state$complexFilter = state.complexFilter) === null || _state$complexFilter === void 0 ? void 0 : (_state$complexFilter$ = _state$complexFilter.data) === null || _state$complexFilter$ === void 0 ? void 0 : _state$complexFilter$.some(function (v) {
var _Object$values;
return !!((_Object$values = Object.values(v)) !== null && _Object$values !== void 0 && _Object$values.filter(Boolean).length);
}));
}, [state.basicFilter, state.searchFilter, state.complexFilter]);
// 转换一级查询结构 object => array
// 转行查询结构
var tranformQuery = useCallback(function (_ref2) {
var _Object$keys3, _Object$keys4;
var _ref2$searchQuery = _ref2.searchQuery,
searchQuery = _ref2$searchQuery === void 0 ? {} : _ref2$searchQuery,
_ref2$basicQuery = _ref2.basicQuery,
basicQuery = _ref2$basicQuery === void 0 ? {} : _ref2$basicQuery;
var globalQuery = {
filters: [{
conditions: []
}]
};
var fuzzyQuery = {
filters: [{
conditions: (_Object$keys3 = Object.keys(searchQuery)) === null || _Object$keys3 === void 0 ? void 0 : _Object$keys3.map(function (k) {
return searchQuery[k];
})
}]
};
var filterQuery = {
filters: [{
conditions: (_Object$keys4 = Object.keys(basicQuery)) === null || _Object$keys4 === void 0 ? void 0 : _Object$keys4.map(function (k) {
return basicQuery[k];
})
}]
};
return {
globalQuery: globalQuery,
fuzzyQuery: fuzzyQuery,
filterQuery: filterQuery
};
}, []);
// 触发查询 type basic基础筛选 ｜ complex高级筛选
var onQuery = useCallback(function () {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref3$complexFilter = _ref3.complexFilter,
complexFilter = _ref3$complexFilter === void 0 ? {} : _ref3$complexFilter,
_ref3$type = _ref3.type,
type = _ref3$type === void 0 ? 'basic' : _ref3$type,
_ref3$basicFilter = _ref3.basicFilter,
basicFilter = _ref3$basicFilter === void 0 ? state.basicFilter || {} : _ref3$basicFilter,
_ref3$basicQuery = _ref3.basicQuery,
basicQuery = _ref3$basicQuery === void 0 ? state.basicQuery || {} : _ref3$basicQuery,
_ref3$searchFilter = _ref3.searchFilter,
searchFilter = _ref3$searchFilter === void 0 ? state.searchFilter || {} : _ref3$searchFilter,
_ref3$searchQuery = _ref3.searchQuery,
searchQuery = _ref3$searchQuery === void 0 ? state.searchQuery || {} : _ref3$searchQuery,
_ref3$customFilter = _ref3.customFilter,
customFilter = _ref3$customFilter === void 0 ? state.customFilter || {} : _ref3$customFilter;
if (type === 'custom') {
var customSelectValue = customFilter.value,
_customFilter$relatio = customFilter.relation,
relation = _customFilter$relatio === void 0 ? 'and' : _customFilter$relatio,
_customFilter$data = customFilter.data,
data = _customFilter$data === void 0 ? [] : _customFilter$data;
// 将结果转换为字符串(级联数据需要递归)
var transformString = function transformString(val) {
return Array.isArray(val) ? val.map(function (v) {
return transformString(v);
}) : String(val);
};
var conditions = data === null || data === void 0 ? void 0 : data.map(function (item) {
var dataSourceItem = dataSource.find(function (v) {
return v.field === item.field;
}) || {};
var getValue = function getValue(val) {
if (val === undefined) return [];
var stringValue = enableAutoString ? transformString(val) : val;
if (Array.isArray(stringValue)) return stringValue;
return [stringValue];
};
return {
relation: relation,
fieldName: item.field,
value: getValue(item.value),
fieldType: dataSourceItem.valueType || 'string',
// string
operator: item.operator || 'equal' // equal
};
});
var complexQuery = {
filters: [{
relation: 'and',
conditions: conditions
}]
};
dispatch({
type: 'changeSearchFilter',
searchFilter: {}
});
dispatch({
type: 'changeSearchQuery',
searchQuery: {}
});
dispatch({
type: 'changeBasicFilter',
basicFilter: {}
});
dispatch({
type: 'changeCustomFilter',
customFilter: customFilter
});
dispatch({
type: 'changeComplexFilter',
complexFilter: customFilter
});
dispatch({
type: 'changeCustomSelectValue',
customSelectValue: customSelectValue
});
dispatch({
type: 'changeBasicQuery',
basicQuery: basicQuery
});
var _tranformQuery = tranformQuery({}),
globalQuery = _tranformQuery.globalQuery;
onChange === null || onChange === void 0 ? void 0 : onChange({
complexFilter: complexFilter,
globalQuery: globalQuery,
filterQuery: complexQuery,
type: type
});
}
if (type === 'search') {
dispatch({
type: 'changeSearchFilter',
searchFilter: searchFilter
});
dispatch({
type: 'changeSearchQuery',
searchQuery: searchQuery
});
dispatch({
type: 'resetComplexFilter'
}); // 基础筛选清空高级筛选
// 抛出给外部查询
var _tranformQuery2 = tranformQuery({
searchQuery: searchQuery,
basicQuery: basicQuery
}),
_globalQuery = _tranformQuery2.globalQuery,
fuzzyQuery = _tranformQuery2.fuzzyQuery,
filterQuery = _tranformQuery2.filterQuery;
onChange === null || onChange === void 0 ? void 0 : onChange({
fuzzyFilter: searchFilter,
basicFilter: basicFilter,
fuzzyQuery: fuzzyQuery,
globalQuery: _globalQuery,
filterQuery: filterQuery,
type: 'search'
});
}
if (type === 'basic') {
dispatch({
type: 'changeBasicFilter',
basicFilter: basicFilter
});
dispatch({
type: 'changeBasicQuery',
basicQuery: basicQuery
});
dispatch({
type: 'resetComplexFilter'
}); // 基础筛选清空高级筛选
// 抛出给外部查询
var _tranformQuery3 = tranformQuery({
searchQuery: searchQuery,
basicQuery: basicQuery
}),
_globalQuery2 = _tranformQuery3.globalQuery,
_fuzzyQuery = _tranformQuery3.fuzzyQuery,
_filterQuery = _tranformQuery3.filterQuery;
onChange === null || onChange === void 0 ? void 0 : onChange({
fuzzyFilter: searchFilter,
basicFilter: basicFilter,
fuzzyQuery: _fuzzyQuery,
globalQuery: _globalQuery2,
filterQuery: _filterQuery,
type: 'basic'
});
}
// 高级筛选存在 "为空"/"不为空"
if (type === 'complex') {
var _complexFilter$relati = complexFilter.relation,
_relation = _complexFilter$relati === void 0 ? 'and' : _complexFilter$relati,
_complexFilter$data = complexFilter.data,
_data = _complexFilter$data === void 0 ? [] : _complexFilter$data;
// 将结果转换为字符串(级联数据需要递归)
var _transformString = function _transformString(val) {
return Array.isArray(val) ? val.map(function (v) {
return _transformString(v);
}) : String(val);
};
var getValue = function getValue(val) {
if (val === undefined) return [];
var stringValue = enableAutoString ? _transformString(val) : val;
if (Array.isArray(stringValue)) return stringValue;
return [stringValue];
};
var _conditions = _data === null || _data === void 0 ? void 0 : _data.reduce(function (pre, cur) {
var curValue = getValue(cur === null || cur === void 0 ? void 0 : cur.value);
// 是否查空值
var isQueryEmpty = ['empty', 'not_empty'].includes(cur.operator);
// 未选字段或值时不查
if (!cur.field) return pre;
if (!(curValue !== null && curValue !== void 0 && curValue.length) && !isQueryEmpty) return pre;
// 解析empty操作符, 转换为'equal'/'not_equal'
var operator = isQueryEmpty ? cur.operator === 'empty' ? 'equal' : cur.operator === 'not_empty' ? 'not_equal' : cur.operator : cur.operator;
var dataSourceItem = dataSource.find(function (v) {
return v.field === cur.field;
}) || {};
pre.push({
relation: _relation,
fieldName: cur.field,
value: curValue,
fieldType: dataSourceItem.valueType || 'string',
// string
operator: operator || 'equal' // equal
});
return pre;
}, []);
var _complexQuery = {
filters: [{
relation: 'and',
conditions: _conditions
}]
};
dispatch({
type: 'changeSearchFilter',
searchFilter: {}
});
dispatch({
type: 'changeSearchQuery',
searchQuery: {}
});
dispatch({
type: 'changeBasicFilter',
basicFilter: {}
});
dispatch({
type: 'changeComplexFilter',
complexFilter: complexFilter
});
dispatch({
type: 'changeBasicQuery',
basicQuery: basicQuery
});
var _tranformQuery4 = tranformQuery({}),
_globalQuery3 = _tranformQuery4.globalQuery;
onChange === null || onChange === void 0 ? void 0 : onChange({
complexFilter: complexFilter,
globalQuery: _globalQuery3,
filterQuery: _complexQuery,
type: type
});
}
if (type === 'clear') {
dispatch({
type: 'reset'
});
var _tranformQuery5 = tranformQuery({
searchQuery: searchQuery,
basicQuery: basicQuery
}),
_globalQuery4 = _tranformQuery5.globalQuery,
_fuzzyQuery2 = _tranformQuery5.fuzzyQuery,
_filterQuery2 = _tranformQuery5.filterQuery;
onChange === null || onChange === void 0 ? void 0 : onChange({
fuzzyFilter: searchFilter,
basicFilter: basicFilter,
fuzzyQuery: _fuzzyQuery2,
globalQuery: _globalQuery4,
filterQuery: _filterQuery2,
type: 'clear'
});
}
}, [tranformQuery, state, dataSource, enableAutoString, onChange]);
// 清除事件
var onClearChange = useCallback(function () {
var _props$onClearChange;
var params = {
searchFilter: {},
searchQuery: {},
basicFilter: {},
complexFilter: {},
basicQuery: {},
type: 'clear'
};
(_props$onClearChange = props.onClearChange) === null || _props$onClearChange === void 0 ? void 0 : _props$onClearChange.call(props, params);
onQuery(params);
}, [onQuery]);
// 根据字段查找过滤的数据, 不存在时返回默认值
var getFilterValue = useCallback(function (_ref4) {
var field = _ref4.field,
type = _ref4.type;
if (getIsHas(state.basicFilter[field])) {
return state.basicFilter[field];
}
var defaultValue = getValueForType(type);
return state.basicFilter[field] || defaultValue;
}, [state.basicFilter]);
// 获取查询结构
var getFilterQuery = useCallback(function () {
var originData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : dataSource;
var basicFilter = getFilterShow(state.basicFilter, originData);
var basicQuery = getFilterShow(state.basicQuery, originData);
dispatch({
type: 'changeBasicFilter',
basicFilter: basicFilter
});
dispatch({
type: 'changeBasicQuery',
basicQuery: basicQuery
});
var _tranformQuery6 = tranformQuery({
searchQuery: state.searchQuery,
basicQuery: basicQuery
}),
globalQuery = _tranformQuery6.globalQuery,
fuzzyQuery = _tranformQuery6.fuzzyQuery,
filterQuery = _tranformQuery6.filterQuery;
return {
fuzzyFilter: state.searchFilter,
basicFilter: basicFilter,
fuzzyQuery: fuzzyQuery,
globalQuery: globalQuery,
filterQuery: filterQuery,
type: 'basic'
};
}, [state, dataSource]);
/** 获取当前过滤的值，格式化为指定格式 */
var getFilterFormat = function getFilterFormat() {
if (!getIsHas(state.basicFilter)) {
return state.complexFilter;
}
var getDataSourceItem = function getDataSourceItem(val) {
return dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(function (v) {
return (v === null || v === void 0 ? void 0 : v.field) === val;
});
};
var result = Object.keys(state.basicFilter).map(function (v) {
var _getDataSourceItem;
return {
field: v,
operator: ((_getDataSourceItem = getDataSourceItem(v)) === null || _getDataSourceItem === void 0 ? void 0 : _getDataSourceItem.operator) || 'equal',
value: state.basicFilter[v]
};
});
return {
realtion: 'and',
data: result
};
};
/*
* 设置筛选的值 itemValue => String || Array => ['', '', ...]
* 后端仅接受数组包字符串形式, 不接受数值及布尔值
*/
var setFilterValue = useCallback(function (itemValue, item) {
var field = item.field;
if (field) {
// 将结果转换为字符串(级联数据需要递归)
var transformString = function transformString(val) {
return Array.isArray(val) ? val.map(function (v) {
return transformString(v);
}) : String(val);
};
var stringValue = enableAutoString ? transformString(itemValue) : itemValue;
// 基础查询数据(受控数据)
var basicFilter = _objectSpread(_objectSpread({}, state.basicFilter), {}, _defineProperty({}, field, stringValue));
// 外部查询数据结构
var basicQuery = _objectSpread(_objectSpread({}, state.basicQuery), {}, _defineProperty({}, field, {
fieldName: field,
fieldType: item.valueType || 'string',
type: item.type,
value: Array.isArray(itemValue) ? stringValue : [stringValue],
operator: item.operator || 'equal'
}));
// 数据清除时不返回结构体
if (!getIsHas(itemValue)) {
delete basicFilter[field];
delete basicQuery[field];
}
// 触发外部事件
onQuery === null || onQuery === void 0 ? void 0 : onQuery({
basicFilter: basicFilter,
basicQuery: basicQuery,
type: 'basic'
});
}
}, [state, onQuery]);
// 单个设置过滤字段值, 会触发onChange事件, 多个字段时使用setLocalization
var setFilterFieldValue = useCallback(function (field, value) {
var item = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(function (v) {
return v.field === field;
})) || {};
setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue(value, item);
}, [dataSource, setFilterValue]);
// 读取缓存
var setLocalization = useCallback(function () {
var localization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.localization;
var _initLocalization = initLocalization(_objectSpread(_objectSpread({}, props), {}, {
localization: localization
})),
searchFilter = _initLocalization.searchFilter,
searchQuery = _initLocalization.searchQuery,
basicFilter = _initLocalization.basicFilter,
basicQuery = _initLocalization.basicQuery;
dispatch({
type: 'changeSearchFilter',
searchFilter: searchFilter
});
dispatch({
type: 'changeSearchQuery',
searchQuery: searchQuery
});
dispatch({
type: 'changeBasicFilter',
basicFilter: basicFilter
});
dispatch({
type: 'changeBasicQuery',
basicQuery: basicQuery
});
}, [props]);
// 模糊查询结构
var setSearchFilter = useCallback(function (itemValue) {
var searchFilter = searchKey === null || searchKey === void 0 ? void 0 : searchKey.reduce(function (pre, cur) {
pre[cur] = itemValue;
return pre;
}, _objectSpread({}, state.searchFilter));
var searchQuery = searchKey === null || searchKey === void 0 ? void 0 : searchKey.reduce(function (pre, cur) {
pre[cur] = _objectSpread(_objectSpread({}, searchConfig), {}, {
fieldName: cur,
value: [itemValue]
});
return pre;
}, _objectSpread({}, state.searchQuery));
// 数据清除时不返回结构体
if (!getIsHas(itemValue)) {
searchFilter = {};
searchQuery = {};
}
onQuery({
searchFilter: searchFilter,
searchQuery: searchQuery,
type: 'search'
});
}, [searchKey, state]);
var onComplexFilter = useCallback(function (customFilter) {
onQuery({
customFilter: customFilter,
type: 'custom'
});
}, [onQuery]);
// 组件内部使用
var CoreMethods = {
onQuery: onQuery,
setSearchFilter: setSearchFilter
};
// 参与Ref转发
var RefMethods = {
getState: function getState() {
return state;
},
getBasicFilter: function getBasicFilter() {
return state.basicFilter;
},
getFilterValue: getFilterValue,
getFilterQuery: getFilterQuery,
getHasFilter: getHasFilter,
setFilterValue: setFilterValue,
setFilterFieldValue: setFilterFieldValue,
setLocalization: setLocalization,
onComplexFilter: onComplexFilter,
onClearChange: onClearChange,
getFilterFormat: getFilterFormat
};
return {
CoreMethods: CoreMethods,
RefMethods: RefMethods
};
};
export default useCoreOptions;