linkmore-design
Version:
🌈 🚀lm组件库。🚀
449 lines (437 loc) • 19.8 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { useControllableValue, useMemoizedFn } from 'ahooks';
import cls from 'classnames';
import castArray from 'lodash/castArray';
import isNil from 'lodash/isNil';
import React, { useMemo, useState } from 'react';
import Button from "../../../button";
import Dropdown from "../../../dropdown";
import Form from "../../../form";
import IconFont from "../../../icon-font";
import Modal from "../../../modal";
import { DYNAMIC_ENUM, FIELD_ENUM, initialFieldsValue, prefix } from "../../constants";
import Control from "../../controls";
import { MODAL_TYPE_ENUM, QUERY_TYPE } from "../../interface";
import SaveConfirm from "./SaveModal";
/** 自定义筛选配置项 */
var customConfig = {
label: 'label',
value: 'value',
options: 'data',
default: 'default'
};
var RenderChildren = function RenderChildren(_ref) {
var value = _ref.value,
onChange = _ref.onChange,
options = _ref.options,
open = _ref.open,
size = _ref.size,
fieldNames = _ref.fieldNames,
placeholder = _ref.placeholder,
optionLabelProp = _ref.optionLabelProp;
var optionMap = useMemo(function () {
if (!Array.isArray(options)) return new Map();
return new Map(options.map(function (option) {
var _option$optionLabelPr;
return [option[fieldNames.value], (_option$optionLabelPr = option[optionLabelProp]) !== null && _option$optionLabelPr !== void 0 ? _option$optionLabelPr : option[fieldNames.label]];
}));
}, [options, fieldNames, optionLabelProp]);
var isExcitingValue = useMemo(function () {
return !isNil(value);
}, [value]);
var label = optionMap.has(value) ? optionMap.get(value) : value || placeholder;
return /*#__PURE__*/React.createElement("div", {
className: cls("".concat(prefix, "_custom_select"), {
expand: open,
small: size === 'small'
})
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, "_custom_select_label")
}, /*#__PURE__*/React.createElement("span", null, label)), isExcitingValue ? /*#__PURE__*/React.createElement(IconFont, {
type: "icon-a-shidia0shanchu",
onClick: function onClick(e) {
e.stopPropagation();
onChange();
}
}) : /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, "_custom_select_icon addon_after")
}, /*#__PURE__*/React.createElement(IconFont, {
type: "icon-a-jiantoua2xialaxia"
})));
};
// 自定义筛选下拉框每一项的Render
var ItemBody = function ItemBody(_ref2) {
var item = _ref2.item,
menuClick = _ref2.menuClick;
var isDefault = !!item.default;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "filter_item_content"
}, item.label, isDefault && "\u300C\u9ED8\u8BA4\u300D"), /*#__PURE__*/React.createElement("div", {
className: "filter_item_operate",
onClick: function onClick(e) {
return e.stopPropagation();
}
}, item.value && /*#__PURE__*/React.createElement("div", {
className: "icon_hover"
}, /*#__PURE__*/React.createElement(Dropdown, {
placement: "bottomLeft",
trigger: ['click'],
menu: {
items: [{
key: 'rename',
label: '重命名'
}, {
key: 'default',
label: isDefault ? '取消默认' : '设为默认'
}, {
key: 'delete',
label: '删除'
}],
onClick: menuClick
}
}, /*#__PURE__*/React.createElement(IconFont, {
type: "icon-a-tongyonga2gengduo"
})))));
};
// 自定义筛选界面展示内容
var CustomSelect = function CustomSelect(props) {
var size = props.size,
beforeSave = props.beforeSave,
filterChange = props.isChange,
dataSource = props.dataSource,
onSelect = props.onSelect;
var filterForm = Form.useFormInstance();
var custom = Form.useWatch(FIELD_ENUM.CUSTOM);
var basicFilter = Form.useWatch(FIELD_ENUM.BASIC);
var complexFilter = Form.useWatch(FIELD_ENUM.COMPLEX);
var _Form$useForm = Form.useForm(),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
form = _Form$useForm2[0];
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
open = _useState2[0],
onOpenChange = _useState2[1];
var _useState3 = useState(undefined),
_useState4 = _slicedToArray(_useState3, 2),
type = _useState4[0],
setVisible = _useState4[1];
// 接手customOptions 既可以自己管理，也可以被外部控制
var _useControllableValue = useControllableValue(props, {
defaultValue: [],
valuePropName: 'customOptions',
trigger: 'onSave'
}),
_useControllableValue2 = _slicedToArray(_useControllableValue, 2),
customOptions = _useControllableValue2[0],
onSave = _useControllableValue2[1];
var getSaveFilter = useMemoizedFn(function () {
var getExcitingValue = function getExcitingValue(conditions) {
if (!Array.isArray(conditions)) return [];
return conditions === null || conditions === void 0 ? void 0 : conditions.filter(function (item) {
var excitingEmpty = ['empty', 'not_empty'].includes(item.operator);
return excitingEmpty || !isNil(item.value);
});
};
var resetBasicFilter = _objectSpread(_objectSpread({}, basicFilter), {}, {
queryType: QUERY_TYPE.BASIC,
conditions: getExcitingValue(basicFilter === null || basicFilter === void 0 ? void 0 : basicFilter.conditions)
});
var resetComplexFilter = _objectSpread(_objectSpread({}, complexFilter), {}, {
queryType: QUERY_TYPE.COMPLEX,
conditions: getExcitingValue(complexFilter === null || complexFilter === void 0 ? void 0 : complexFilter.conditions)
});
return [resetBasicFilter, resetComplexFilter];
});
/** 是否存在筛选条件 */
var isExcitingConditions = useMemo(function () {
var _excitingBasicFilter$, _excitingComplexFilte;
var _getSaveFilter = getSaveFilter(),
_getSaveFilter2 = _slicedToArray(_getSaveFilter, 2),
excitingBasicFilter = _getSaveFilter2[0],
excitingComplexFilter = _getSaveFilter2[1];
var hasFilter = (_excitingBasicFilter$ = excitingBasicFilter[FIELD_ENUM.CONDITIONS]) === null || _excitingBasicFilter$ === void 0 ? void 0 : _excitingBasicFilter$.length;
var complexConditionsLen = (_excitingComplexFilte = excitingComplexFilter[FIELD_ENUM.CONDITIONS]) === null || _excitingComplexFilte === void 0 ? void 0 : _excitingComplexFilte.length;
return hasFilter || !!complexConditionsLen;
}, [basicFilter, complexFilter]);
/** 是否触发了变动 */
var isChange = useMemo(function () {
if (!isExcitingConditions) return false;
if (!custom) return false;
return filterChange;
}, [isExcitingConditions, custom, filterChange]);
/** 打开弹窗 */
var onOpenModal = useMemoizedFn(function () {
if (!isExcitingConditions) return;
form.resetFields();
var jumpType = custom ? MODAL_TYPE_ENUM.COVER : MODAL_TYPE_ENUM.APPEND;
setVisible(jumpType);
});
/** 保存筛选方案, 此处传入的changedValues是before处理后的数据 */
var handleOnSave = useMemoizedFn( /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(changedValue) {
var resultList;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
resultList = []; // 处理默认的唯一性
if ([MODAL_TYPE_ENUM.APPEND, MODAL_TYPE_ENUM.RENAME].includes(type)) {
resultList = customOptions.reduce(function (pre, cur) {
var isDefault = changedValue.default ? false : cur[customConfig.default];
var isEditing = cur[customConfig.value] === changedValue.value;
var obj = isEditing ? _objectSpread(_objectSpread({}, cur), changedValue) : _objectSpread(_objectSpread({}, cur), {}, {
default: isDefault
});
return pre.concat(obj);
}, []);
}
// 追加数据(此时的默认已被处理)
if (type === MODAL_TYPE_ENUM.APPEND) {
resultList.push(changedValue);
}
// 覆盖操作, 保存新的数据
if (type === MODAL_TYPE_ENUM.COVER) {
resultList = customOptions.reduce(function (pre, cur) {
return pre.concat(cur[customConfig.value] === custom ? changedValue : cur);
}, []);
}
_context.next = 6;
return onSave(resultList, changedValue, type);
case 6:
case "end":
return _context.stop();
}
}, _callee);
}));
return function (_x) {
return _ref3.apply(this, arguments);
};
}());
// 保存前置事件, 处理变化的数据
var handleBeforeSave = useMemoizedFn( /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(changedValue) {
var param, originOption, _originOption, callback, result;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.prev = 0;
if (type === MODAL_TYPE_ENUM.APPEND) {
param = _objectSpread(_objectSpread({}, changedValue), {}, {
value: Date.now(),
data: getSaveFilter()
});
}
if (type === MODAL_TYPE_ENUM.RENAME) {
originOption = customOptions.find(function (option) {
return option[customConfig.value] === changedValue.value;
});
param = _objectSpread(_objectSpread({}, originOption), changedValue);
}
if (type === MODAL_TYPE_ENUM.COVER) {
_originOption = customOptions.find(function (option) {
return option[customConfig.value] === custom;
});
param = _objectSpread(_objectSpread({}, _originOption), {}, {
data: getSaveFilter()
});
}
_context2.next = 6;
return beforeSave === null || beforeSave === void 0 ? void 0 : beforeSave(param, type);
case 6:
callback = _context2.sent;
result = callback || param;
handleOnSave(result);
_context2.next = 14;
break;
case 11:
_context2.prev = 11;
_context2.t0 = _context2["catch"](0);
console.log('handleBeforeSave:', _context2.t0);
case 14:
case "end":
return _context2.stop();
}
}, _callee2, null, [[0, 11]]);
}));
return function (_x2) {
return _ref4.apply(this, arguments);
};
}());
var menuClick = useMemoizedFn(function (_ref5, item) {
var key = _ref5.key;
onOpenChange(false);
if (key === 'delete') {
Modal.confirm({
title: '删除筛选方案',
content: /*#__PURE__*/React.createElement("span", {
style: {
color: '#7E84A3',
fontSize: 12
}
}, "\u60A8\u786E\u5B9A\u8981\u5220\u9664\u6B64\u7B5B\u9009\u65B9\u6848\u5417\uFF1F"),
okText: '删除',
onOk: function () {
var _onOk = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(close) {
var resultList;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
resultList = customOptions.filter(function (v) {
return (v === null || v === void 0 ? void 0 : v[customConfig.value]) !== (item === null || item === void 0 ? void 0 : item.value);
});
if (item.value === custom) {
filterForm.setFieldValue(FIELD_ENUM.CUSTOM, undefined);
}
_context3.next = 4;
return onSave(resultList, item, 'delete');
case 4:
close();
case 5:
case "end":
return _context3.stop();
}
}, _callee3);
}));
function onOk(_x3) {
return _onOk.apply(this, arguments);
}
return onOk;
}()
});
}
if (key === 'default') {
var resultList = customOptions.map(function (v) {
return _objectSpread(_objectSpread({}, v), {}, {
default: (v === null || v === void 0 ? void 0 : v[customConfig.value]) === (item === null || item === void 0 ? void 0 : item.value) ? !v[customConfig.default] : false
});
});
var checked = resultList.find(function (v) {
return (v === null || v === void 0 ? void 0 : v.value) === (item === null || item === void 0 ? void 0 : item.value);
});
var resetItem = _objectSpread(_objectSpread({}, item), {}, {
default: checked ? checked === null || checked === void 0 ? void 0 : checked.default : true
});
onSave(resultList, resetItem, 'default');
}
if (key === 'rename') {
form.setFieldsValue(_objectSpread(_objectSpread({}, item), {}, {
default: !!item.default
}));
setVisible(MODAL_TYPE_ENUM.RENAME);
}
});
/** 检查数据回显是否能够匹配options的值 */
var checkMatch = useMemoizedFn(function (value) {
var itemObj = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (isNil(value)) return value;
if (!['select', 'checkbox', 'cascader'].includes(itemObj.type)) return value;
var fieldNames = _objectSpread({
label: 'label',
value: 'value',
children: 'children'
}, itemObj.fieldNames);
var options = itemObj.options || [];
var optionsMap = new Map(options.map(function (option) {
return [option[fieldNames.value], option];
}));
if (['select'].includes(itemObj.type)) {
return optionsMap.has(value) ? value : undefined;
}
if (['checkbox'].includes(itemObj.type)) {
return value === null || value === void 0 ? void 0 : value.filter(function (valueKey) {
return optionsMap.has(valueKey);
});
}
var toArrValue = Array.isArray(value) ? value : castArray(value);
var isCheckedMultiple = toArrValue.every(Array.isArray);
// 匹配文本内容
var matchLabel = function matchLabel(checkedKeys) {
var flag = checkedKeys;
checkedKeys.reduce(function (pre, cur) {
var option = (pre || []).find(function (v) {
return v[fieldNames.value] === cur;
});
if (!option) {
flag = undefined;
return [];
}
// 对于级联数据向子级查找
return option[fieldNames.children] || [];
}, options);
return flag;
};
// 对于级联多选，需要遍历匹配
if (isCheckedMultiple) {
var isMatch = toArrValue.every(matchLabel);
return isMatch ? toArrValue : toArrValue.filter(matchLabel);
}
return matchLabel(toArrValue);
});
var normalize = function normalize(value) {
var _ref6, _ref7, _complex$FIELD_ENUM$C, _FIELD_ENUM$BASIC, _FIELD_ENUM$COMPLEX, _filterForm$setFields;
var option = customOptions.find(function (item) {
return item[customConfig.value] === value;
}) || {};
var conditionGroups = option[customConfig.options] || [];
var groupMap = new Map(conditionGroups.map(function (group) {
var _group$queryType;
return [(_group$queryType = group.queryType) !== null && _group$queryType !== void 0 ? _group$queryType : QUERY_TYPE.COMPLEX, group];
}));
var basic = groupMap.has(QUERY_TYPE.BASIC) ? groupMap.get(QUERY_TYPE.BASIC) : (_ref6 = {}, _defineProperty(_ref6, FIELD_ENUM.RELATION, initialFieldsValue[DYNAMIC_ENUM.RELATION]), _defineProperty(_ref6, FIELD_ENUM.CONDITIONS, []), _ref6);
var complex = groupMap.has(QUERY_TYPE.COMPLEX) ? groupMap.get(QUERY_TYPE.COMPLEX) : (_ref7 = {}, _defineProperty(_ref7, FIELD_ENUM.RELATION, initialFieldsValue[DYNAMIC_ENUM.RELATION]), _defineProperty(_ref7, FIELD_ENUM.CONDITIONS, undefined), _ref7);
var originBasicConditions = filterForm.getFieldValue([FIELD_ENUM.BASIC, FIELD_ENUM.CONDITIONS]);
var resetBasicConditions = originBasicConditions === null || originBasicConditions === void 0 ? void 0 : originBasicConditions.map(function (item) {
var _basic$FIELD_ENUM$CON;
var option = (_basic$FIELD_ENUM$CON = basic[FIELD_ENUM.CONDITIONS]) === null || _basic$FIELD_ENUM$CON === void 0 ? void 0 : _basic$FIELD_ENUM$CON.find(function (v) {
return v[DYNAMIC_ENUM.FIELD_NAME] === item[DYNAMIC_ENUM.FIELD_NAME];
});
var matchedValue = checkMatch(option === null || option === void 0 ? void 0 : option[DYNAMIC_ENUM.VALUE], item);
return _objectSpread(_objectSpread({}, item), {}, _defineProperty({}, DYNAMIC_ENUM.VALUE, matchedValue));
});
var resetComplexConditions = (_complex$FIELD_ENUM$C = complex[FIELD_ENUM.CONDITIONS]) === null || _complex$FIELD_ENUM$C === void 0 ? void 0 : _complex$FIELD_ENUM$C.map(function (item) {
var option = dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(function (v) {
return v[DYNAMIC_ENUM.FIELD_NAME] === item[DYNAMIC_ENUM.FIELD_NAME];
});
var matchedValue = checkMatch(item === null || item === void 0 ? void 0 : item[DYNAMIC_ENUM.VALUE], _objectSpread(_objectSpread({}, option), item));
return _objectSpread(_objectSpread(_objectSpread({}, option), item), {}, {
value: matchedValue
});
});
filterForm.setFieldsValue((_filterForm$setFields = {}, _defineProperty(_filterForm$setFields, FIELD_ENUM.BASIC, (_FIELD_ENUM$BASIC = {}, _defineProperty(_FIELD_ENUM$BASIC, FIELD_ENUM.RELATION, basic[FIELD_ENUM.RELATION]), _defineProperty(_FIELD_ENUM$BASIC, FIELD_ENUM.CONDITIONS, resetBasicConditions), _FIELD_ENUM$BASIC)), _defineProperty(_filterForm$setFields, FIELD_ENUM.COMPLEX, (_FIELD_ENUM$COMPLEX = {}, _defineProperty(_FIELD_ENUM$COMPLEX, FIELD_ENUM.RELATION, complex[FIELD_ENUM.RELATION] || initialFieldsValue[DYNAMIC_ENUM.RELATION]), _defineProperty(_FIELD_ENUM$COMPLEX, FIELD_ENUM.CONDITIONS, resetComplexConditions), _FIELD_ENUM$COMPLEX)), _filterForm$setFields));
return value;
};
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, "_custom_select_wrapper")
}, /*#__PURE__*/React.createElement(Form.Item, {
name: FIELD_ENUM.CUSTOM,
noStyle: true,
normalize: normalize
}, /*#__PURE__*/React.createElement(Control, {
type: "select",
options: customOptions,
placeholder: "\u4E0D\u9650",
size: size,
optionLabelProp: "render",
children: RenderChildren,
onChange: onSelect
})), /*#__PURE__*/React.createElement(Button, {
icon: /*#__PURE__*/React.createElement(IconFont, {
type: "icon-chucun"
}),
className: cls("".concat(prefix, "_custom_addon"), isChange && 'addon_highlight'),
onClick: onOpenModal
}), /*#__PURE__*/React.createElement(SaveConfirm, {
open: !!type,
type: type,
form: form,
onTypeChange: setVisible,
onCancel: function onCancel() {
return setVisible(undefined);
},
onSave: handleBeforeSave
}));
};
export default CustomSelect;