syber-lowcode-business-materials
Version:
syber-lowcode-business-materials
361 lines (355 loc) • 18.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = SearchPro;
var _modal = _interopRequireDefault(require("antd/lib/modal"));
var _checkbox = _interopRequireDefault(require("antd/lib/checkbox"));
var _message2 = _interopRequireDefault(require("antd/lib/message"));
var _tag = _interopRequireDefault(require("antd/lib/tag"));
var _button = _interopRequireDefault(require("antd/lib/button"));
var _input = _interopRequireDefault(require("antd/lib/input"));
var _select = _interopRequireDefault(require("antd/lib/select"));
var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _form = _interopRequireDefault(require("antd/lib/form"));
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
var _type = require("./type");
var _icons = require("@ant-design/icons");
var _react = require("react");
var _Filter = _interopRequireDefault(require("./svg/Filter"));
var _Clear = _interopRequireDefault(require("./svg/Clear"));
var _Setting = _interopRequireDefault(require("./svg/Setting"));
var _lodash = _interopRequireDefault(require("lodash"));
function SearchPro(props) {
var _props$columns4, _props$columns4$filte, _$filter, _props$searchFormSett, _props$searchFormSett2, _props$searchFormSett3, _props$searchFormSett4, _props$columns5, _props$columns6;
var _Form$useForm = _form["default"].useForm(),
form = _Form$useForm[0];
var timeoutRef = (0, _react.useRef)(null);
var openButtonRef = (0, _react.useRef)(null);
var _useState = (0, _react.useState)({
filter: false,
settings: false
}),
modalOpen = _useState[0],
setModalOpen = _useState[1]; // 统一管理弹窗开关
var _useState2 = (0, _react.useState)({
x: 0,
y: 0
}),
modalPosition = _useState2[0],
setModalPosition = _useState2[1]; // 手动定义弹窗位置
var _useState3 = (0, _react.useState)([]),
checkValues = _useState3[0],
setCheckValues = _useState3[1]; // 多选框双向绑定
var _useState4 = (0, _react.useState)([]),
userSettings = _useState4[0],
setUserSettings = _useState4[1]; // 保存于用户层的设置
var _useState5 = (0, _react.useState)(props === null || props === void 0 ? void 0 : props.defaultParams),
tipsMap = _useState5[0],
setTipsMap = _useState5[1]; // 提示信息
var _useState6 = (0, _react.useState)(undefined),
options = _useState6[0],
setOptions = _useState6[1]; // 搜索框options
var getTipsStr = function getTipsStr(value, key) {
var _props$columns, _options$key, _options$key$filter, _options$key$filter$m;
var columnsItem = props === null || props === void 0 ? void 0 : (_props$columns = props.columns) === null || _props$columns === void 0 ? void 0 : _props$columns.find(function (item) {
return item.dataIndex === key;
});
return ((columnsItem === null || columnsItem === void 0 ? void 0 : columnsItem.title) || '搜索') + " " + (columnsItem !== null && columnsItem !== void 0 && columnsItem.renderTips ? columnsItem.renderTips(value, options === null || options === void 0 ? void 0 : options[key]) : options !== null && options !== void 0 && options[key] ? "\u5305\u542B:\u201C" + (options === null || options === void 0 ? void 0 : (_options$key = options[key]) === null || _options$key === void 0 ? void 0 : (_options$key$filter = _options$key.filter(function (item) {
return value.includes(item.value);
})) === null || _options$key$filter === void 0 ? void 0 : (_options$key$filter$m = _options$key$filter.map(function (item) {
return item.label;
})) === null || _options$key$filter$m === void 0 ? void 0 : _options$key$filter$m.join('、')) + "\u201C" : value);
};
// 查询按钮位置，用于弹窗定位
var setModalPositionFn = function setModalPositionFn() {
if (openButtonRef !== null && openButtonRef !== void 0 && openButtonRef.current) {
var _openButtonRef$curren;
setModalPosition(openButtonRef === null || openButtonRef === void 0 ? void 0 : (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.getBoundingClientRect());
}
};
var renderFormItem = function renderFormItem(item, maxTagCount) {
var _item$placeholder;
switch (item.type) {
case 'select':
return /*#__PURE__*/React.createElement(_select["default"], (0, _extends3["default"])({
options: item === null || item === void 0 ? void 0 : item.options,
placeholder: (_item$placeholder = item === null || item === void 0 ? void 0 : item.placeholder) !== null && _item$placeholder !== void 0 ? _item$placeholder : '',
maxTagCount: maxTagCount,
allowClear: true
}, item === null || item === void 0 ? void 0 : item.modalProps));
case 'input':
return /*#__PURE__*/React.createElement(_input["default"], (0, _extends3["default"])({
placeholder: (item === null || item === void 0 ? void 0 : item.placeholder) || item.title
}, item === null || item === void 0 ? void 0 : item.modalProps));
default:
return '';
}
};
(0, _react.useEffect)(function () {
var _props$id, _props$columns2, _props$columns2$filte, _props$columns3, _props$columns3$filte;
// 查询储存的设置（用户层&&页面层）
var uid = (_props$id = props === null || props === void 0 ? void 0 : props.id) !== null && _props$id !== void 0 ? _props$id : window.location.pathname; // TODO:页面唯一标识(修改正确唯一标识，暂时使用路由)
var setting = JSON.parse(localStorage.getItem('searchProSettings')) || {};
if (setting[uid]) {
setUserSettings(setting[uid]); // 配置展示
setCheckValues(setting[uid]); // 默认值
}
// 默认值
if (props !== null && props !== void 0 && props.defaultParams) {
form.setFieldsValue(props === null || props === void 0 ? void 0 : props.defaultParams);
}
// 组件options获取
var options = props === null || props === void 0 ? void 0 : (_props$columns2 = props.columns) === null || _props$columns2 === void 0 ? void 0 : (_props$columns2$filte = _props$columns2.filter(function (item) {
return !!item.options;
})) === null || _props$columns2$filte === void 0 ? void 0 : _props$columns2$filte.map(function (item) {
return item === null || item === void 0 ? void 0 : item.options;
});
var promiseIndex = props === null || props === void 0 ? void 0 : (_props$columns3 = props.columns) === null || _props$columns3 === void 0 ? void 0 : (_props$columns3$filte = _props$columns3.filter(function (item) {
return !!item.options;
})) === null || _props$columns3$filte === void 0 ? void 0 : _props$columns3$filte.map(function (item) {
return item.dataIndex;
});
var optionsMap = {};
promiseIndex.forEach(function (item, index) {
optionsMap[item] = options[index];
});
setOptions(optionsMap);
// 监听屏幕变化
window.addEventListener('resize', setModalPositionFn);
return function () {
window.removeEventListener('resize', setModalPositionFn);
};
}, []);
return /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].searchContainer + " " + (props === null || props === void 0 ? void 0 : props.classNames),
style: (0, _extends3["default"])({
'--formItemWidth': '120px'
}, props === null || props === void 0 ? void 0 : props.styles)
}, /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].searchContent
}, /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].settings
}, /*#__PURE__*/React.createElement(_form["default"], {
form: form,
style: {
display: 'flex',
flex: '1',
justifyContent: 'flex-end',
gap: '10px',
flexWrap: 'wrap'
},
key: userSettings.join('-')
}, props === null || props === void 0 ? void 0 : (_props$columns4 = props.columns) === null || _props$columns4 === void 0 ? void 0 : (_props$columns4$filte = _props$columns4.filter(function (item) {
return userSettings === null || userSettings === void 0 ? void 0 : userSettings.includes(item === null || item === void 0 ? void 0 : item.key);
})) === null || _props$columns4$filte === void 0 ? void 0 : _props$columns4$filte.map(function (item, index) {
return /*#__PURE__*/React.createElement(_form["default"].Item, {
label: item.title,
name: item === null || item === void 0 ? void 0 : item.dataIndex,
style: (0, _extends3["default"])({
marginBottom: '0'
}, item.styles),
key: (item === null || item === void 0 ? void 0 : item.key) || index,
className: _stylesModule["default"].formItem
}, renderFormItem(item, 0));
})), userSettings && !!(userSettings !== null && userSettings !== void 0 && userSettings.length) && /*#__PURE__*/React.createElement(_button["default"], {
type: "primary",
onClick: function onClick() {
clearTimeout(timeoutRef.current);
if (props !== null && props !== void 0 && props.onSearchSubmit) {
setTipsMap(form.getFieldsValue());
props.onSearchSubmit(form.getFieldsValue());
}
}
}, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(_form["default"], {
form: form
}, !(props !== null && props !== void 0 && props.hiddenSearchInput) && /*#__PURE__*/React.createElement(_form["default"].Item, {
label: "",
name: (props === null || props === void 0 ? void 0 : props.searchInputDataIndex) || 'searchInput',
style: {
margin: '0'
}
}, /*#__PURE__*/React.createElement(_input["default"], {
prefix: /*#__PURE__*/React.createElement(_icons.SearchOutlined, null),
style: {
borderRadius: '16px'
},
placeholder: (props === null || props === void 0 ? void 0 : props.searchInputPlaceholder) || '输入搜索内容',
onPressEnter: function onPressEnter() {
clearTimeout(timeoutRef.current);
if (props !== null && props !== void 0 && props.onSearchSubmit) {
setTipsMap(form.getFieldsValue());
props.onSearchSubmit(form.getFieldsValue());
}
},
onChange: function onChange() {
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(function () {
if (props !== null && props !== void 0 && props.onSearchSubmit) {
setTipsMap(form.getFieldsValue());
props.onSearchSubmit(form.getFieldsValue());
}
}, 800);
}
}))), /*#__PURE__*/React.createElement("div", {
ref: openButtonRef,
className: _stylesModule["default"].iconWrap,
onClick: function onClick() {
setModalOpen(function (v) {
return (0, _extends3["default"])({}, v, {
filter: true
});
});
},
onMouseEnter: setModalPositionFn
}, /*#__PURE__*/React.createElement(_Filter["default"], null), /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].filterNumber
}, (_$filter = _lodash["default"].filter(tipsMap, function (value) {
return !!value && !Array.isArray(value) || Array.isArray(value) && !!(value !== null && value !== void 0 && value.length);
})) === null || _$filter === void 0 ? void 0 : _$filter.length)), /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].iconWrap,
onClick: function onClick() {
form.resetFields();
if (props !== null && props !== void 0 && props.onSearchSubmit) {
setTipsMap(form.getFieldsValue());
props.onSearchSubmit(form.getFieldsValue());
}
}
}, /*#__PURE__*/React.createElement(_Clear["default"], null)))), /*#__PURE__*/React.createElement("div", null, _lodash["default"].map(tipsMap, function (value, key) {
if (!value || Array.isArray(value) && !(value !== null && value !== void 0 && value.length)) return;
return /*#__PURE__*/React.createElement(_tag["default"], {
closeIcon: true,
onClose: function onClose() {
var _form$setFieldsValue;
form.setFieldsValue((_form$setFieldsValue = {}, _form$setFieldsValue[key] = undefined, _form$setFieldsValue));
if (props !== null && props !== void 0 && props.onSearchSubmit) {
setTipsMap(form.getFieldsValue());
props.onSearchSubmit(form.getFieldsValue());
}
},
style: {
marginTop: '10px'
}
}, getTipsStr(value, key));
})), /*#__PURE__*/React.createElement(_modal["default"], {
title: /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%'
}
}, "\u6DFB\u52A0\u6761\u4EF6\u7B5B\u9009", /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].iconWrap,
onClick: function onClick() {
setModalOpen(function (v) {
return (0, _extends3["default"])({}, v, {
settings: !v.settings
});
});
}
}, /*#__PURE__*/React.createElement(_Setting["default"], {
style: {
fillOpacity: modalOpen !== null && modalOpen !== void 0 && modalOpen.settings ? '1' : '0.5'
}
}))),
open: modalOpen.filter
// type="modalMiddle"
,
onOk: function onOk() {
if (!(modalOpen !== null && modalOpen !== void 0 && modalOpen.settings)) {
// 搜索
setModalOpen(function (v) {
return (0, _extends3["default"])({}, v, {
filter: false
});
});
if (props !== null && props !== void 0 && props.onSearchSubmit) {
setTipsMap(form.getFieldsValue());
props.onSearchSubmit(form.getFieldsValue());
}
} else {
var _props$id2, _extends2;
// 保存设置
var uid = (_props$id2 = props === null || props === void 0 ? void 0 : props.id) !== null && _props$id2 !== void 0 ? _props$id2 : window.location.pathname; // TODO:页面唯一标识(修改正确唯一标识，暂时使用路由)
var setting = JSON.parse(localStorage.getItem('searchProSettings')) || {};
localStorage.setItem('searchProSettings', JSON.stringify((0, _extends3["default"])({}, setting, (_extends2 = {}, _extends2[uid] = checkValues, _extends2))));
setUserSettings(checkValues);
setModalOpen(function (v) {
return (0, _extends3["default"])({}, v, {
settings: false
});
});
}
},
onCancel: function onCancel() {
if (!(modalOpen !== null && modalOpen !== void 0 && modalOpen.settings)) {
setModalOpen(function (v) {
return (0, _extends3["default"])({}, v, {
filter: false
});
});
} else {
setModalOpen(function (v) {
return (0, _extends3["default"])({}, v, {
settings: false
});
});
}
},
okText: modalOpen !== null && modalOpen !== void 0 && modalOpen.settings ? '确认保存' : '确认查询',
closable: false,
forceRender: true,
width: (props === null || props === void 0 ? void 0 : (_props$searchFormSett = props.searchFormSettings) === null || _props$searchFormSett === void 0 ? void 0 : _props$searchFormSett.modalWidth) || 470,
style: {
margin: "0 0 0 " + (modalPosition.x - ((props === null || props === void 0 ? void 0 : (_props$searchFormSett2 = props.searchFormSettings) === null || _props$searchFormSett2 === void 0 ? void 0 : _props$searchFormSett2.modalWidth) || 470) + 32) + "px",
top: modalPosition.y + 32 + "px"
},
mask: false,
cancelText: '取消'
}, /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_form["default"], {
form: form,
style: {
display: modalOpen !== null && modalOpen !== void 0 && modalOpen.settings ? 'none' : 'grid',
gridTemplateColumns: "repeat(" + ((_props$searchFormSett3 = props === null || props === void 0 ? void 0 : (_props$searchFormSett4 = props.searchFormSettings) === null || _props$searchFormSett4 === void 0 ? void 0 : _props$searchFormSett4.columnSize) !== null && _props$searchFormSett3 !== void 0 ? _props$searchFormSett3 : 1) + ", 1fr)",
gap: '24px'
}
}, props === null || props === void 0 ? void 0 : (_props$columns5 = props.columns) === null || _props$columns5 === void 0 ? void 0 : _props$columns5.map(function (item, index) {
var _props$searchFormSett5;
return /*#__PURE__*/React.createElement(_form["default"].Item, {
label: item.title,
name: item === null || item === void 0 ? void 0 : item.dataIndex,
style: {
marginBottom: '0',
width: '100%'
},
key: (item === null || item === void 0 ? void 0 : item.key) || index,
labelCol: item.labelCol || (props === null || props === void 0 ? void 0 : (_props$searchFormSett5 = props.searchFormSettings) === null || _props$searchFormSett5 === void 0 ? void 0 : _props$searchFormSett5.labelCol) || _type.defaultLabelCol
}, renderFormItem(item, 3));
})), /*#__PURE__*/React.createElement("div", {
style: {
display: modalOpen !== null && modalOpen !== void 0 && modalOpen.settings ? 'block' : 'none'
}
}, /*#__PURE__*/React.createElement(_checkbox["default"].Group, {
options: props === null || props === void 0 ? void 0 : (_props$columns6 = props.columns) === null || _props$columns6 === void 0 ? void 0 : _props$columns6.map(function (item) {
return {
label: item.title,
value: item.key
};
}),
value: checkValues,
style: {
display: 'grid',
gridTemplateColumns: "repeat(3, 1fr)",
gap: '24px'
},
onChange: function onChange(e) {
if ((e === null || e === void 0 ? void 0 : e.length) > 3) {
// 提示数量不能超过三个
_message2["default"].warning('最多只能选择三个');
}
if ((e === null || e === void 0 ? void 0 : e.length) <= 3) {
setCheckValues(e);
}
}
})))));
}