fx-form-widget
Version:
445 lines (443 loc) • 15.4 kB
JavaScript
import _Radio from "antd/es/radio";
import _Select from "antd/es/select";
import _extends from "@babel/runtime/helpers/extends";
import _Button from "antd/es/button";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _Tag from "antd/es/tag";
import _Input from "antd/es/input";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { unstable_batchedUpdates } from 'react-dom';
import { employeeOrdepartmentStore } from '../employeeSelection/stores';
import TreeNode from './treeNode';
import { debounce } from 'lodash';
var Group = _Input.Group;
var getSearchResultByname = employeeOrdepartmentStore.getSearchResultByname;
var useSelectTree = function useSelectTree(props) {
var _props$defaultValue = props.defaultValue,
defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
value = props.value,
isMultiple = props.isMultiple,
placeholder = props.placeholder,
showClearButton = props.showClearButton,
getSearchEmployeeByNameAndPhoneAndEmial = props.getSearchEmployeeByNameAndPhoneAndEmial,
validateFunc = props.validateFunc,
readonly = props.readonly;
var _useState = useState(defaultValue || []),
hasSelectedKeys = _useState[0],
setHasSelectedKeys = _useState[1];
var _useState2 = useState(false),
visible = _useState2[0],
setVisible = _useState2[1];
var _useState3 = useState([]),
selectValue = _useState3[0],
setSelectValue = _useState3[1];
var _useState4 = useState([]),
options = _useState4[0],
setOptions = _useState4[1];
var _useState5 = useState(false),
loading = _useState5[0],
setLoading = _useState5[1];
var params = useRef({
condition: '',
pageNo: 1
});
var isEnd = useRef(false);
var handleDeleteSelectedTag = function handleDeleteSelectedTag(title) {
var _props$onChange;
var index = hasSelectedKeys.findIndex(function (item) {
return item.title === title;
});
var newHasSelectedKeys = [].concat(hasSelectedKeys);
newHasSelectedKeys.splice(index, 1);
setHasSelectedKeys(newHasSelectedKeys);
(_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, newHasSelectedKeys);
};
var customerSelectOption = {
placeholder: placeholder,
maxTagCount: 'responsive',
showArrow: true,
allowClear: showClearButton,
disabled: readonly,
tagRender: function tagRender(props) {
var label = props.label,
onClose = props.onClose;
var handleCloseClick = function handleCloseClick() {
handleDeleteSelectedTag(label);
onClose();
};
return /*#__PURE__*/React.createElement(_Tag, {
onClose: handleCloseClick,
closable: true,
color: "geekblue"
}, label);
}
};
// 由于这个组件会在搜索的时候频繁调用,产品要求立即反应所以需要舍弃防抖条件
var getSelectOptions = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _params$current, _params$current2;
var _yield$getSearchEmplo, _yield$getSearchEmplo2, data, success, list, newData, options;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
setLoading(true);
_context.next = 3;
return getSearchEmployeeByNameAndPhoneAndEmial((_params$current = params.current) === null || _params$current === void 0 ? void 0 : _params$current.condition, (_params$current2 = params.current) === null || _params$current2 === void 0 ? void 0 : _params$current2.pageNo);
case 3:
_yield$getSearchEmplo = _context.sent;
_yield$getSearchEmplo2 = _yield$getSearchEmplo.data;
data = _yield$getSearchEmplo2 === void 0 ? {} : _yield$getSearchEmplo2;
success = _yield$getSearchEmplo.success;
if (!(data === null || !success)) {
_context.next = 9;
break;
}
return _context.abrupt("return");
case 9:
list = data.list;
newData = Array.isArray(data) ? data : Array.isArray(list) ? list : [];
options = newData.map(function (option) {
var id = option.id,
name = option.name;
return {
label: name,
value: id
};
});
if (newData.length < 10) {
isEnd.current = true;
}
if (params.current.pageNo === 1) {
setOptions(options);
} else {
setOptions(function (pre) {
return [].concat(pre, options);
});
}
setLoading(false);
case 15:
case "end":
return _context.stop();
}
}, _callee);
})), [getSearchEmployeeByNameAndPhoneAndEmial]);
function onSelectPopupScroll(_x) {
return _onSelectPopupScroll.apply(this, arguments);
}
function _onSelectPopupScroll() {
_onSelectPopupScroll = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
var _e$target, scrollTop, scrollHeight, clientHeight;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_e$target = e.target, scrollTop = _e$target.scrollTop, scrollHeight = _e$target.scrollHeight, clientHeight = _e$target.clientHeight;
if (!(scrollHeight - scrollTop <= clientHeight + 10 && !loading && !isEnd.current)) {
_context2.next = 5;
break;
}
params.current.pageNo++;
_context2.next = 5;
return getSelectOptions();
case 5:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return _onSelectPopupScroll.apply(this, arguments);
}
var onDropdownVisibleChange = function onDropdownVisibleChange(open) {
if (open) {
reset();
}
};
var onSelectChange = function onSelectChange(values) {
var _props$onChange2;
setSelectValue(values);
var newValues = Array.isArray(values) ? values : [values];
var newHasSelectedKeys = newValues.map(function (option) {
var label = option.label,
value = option.value;
return {
title: label,
id: value,
key: value,
isLeaf: true,
isEmployee: true
};
});
setHasSelectedKeys(newHasSelectedKeys);
(_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 ? void 0 : _props$onChange2.call(props, newHasSelectedKeys);
};
var onChange = function onChange(nodes) {
setHasSelectedKeys(nodes);
// props.onChange?.(nodes);
};
var handleClick = function handleClick() {
setVisible(true);
};
var onSubmitSuccess = function onSubmitSuccess(success, values) {
var _props$onChange3;
var selecteValues = hasSelectedKeys.map(function (node) {
var id = node.id,
name = node.name,
title = node.title;
return {
value: id,
label: typeof title === 'string' ? title : name
};
});
var newHasSelectedKeys = hasSelectedKeys.map(function (node) {
var title = node.title,
id = node.id,
name = node.name;
return {
id: id,
title: typeof title === 'string' ? title : name
};
});
if (validateFunc) {
var isValid = validateFunc === null || validateFunc === void 0 ? void 0 : validateFunc(hasSelectedKeys);
if (!isValid) {
return;
}
}
success && setVisible(false);
setSelectValue(selecteValues);
(_props$onChange3 = props.onChange) === null || _props$onChange3 === void 0 ? void 0 : _props$onChange3.call(props, newHasSelectedKeys);
};
var onCancelSubmit = function onCancelSubmit(visible) {
setVisible(visible);
};
var onClear = function onClear() {
var _props$onChange4;
if (!isMultiple) {
return;
}
setHasSelectedKeys([]);
(_props$onChange4 = props.onChange) === null || _props$onChange4 === void 0 ? void 0 : _props$onChange4.call(props, hasSelectedKeys);
};
var reset = function reset(keyword) {
params.current.condition = keyword || '';
params.current.pageNo = 1;
isEnd.current = false;
getSelectOptions();
};
var onSearch = function onSearch(value) {
reset(value);
};
useEffect(function () {
reset();
}, [getSelectOptions]);
useEffect(function () {
setSelectValue([]);
setHasSelectedKeys([]);
}, [isMultiple]);
useEffect(function () {
if (!value) {
return;
}
setHasSelectedKeys(value);
}, [value]);
useEffect(function () {
if (!Array.isArray(value)) {
return;
}
var newValue = Array.isArray(value) ? value : [value];
newValue = value.map(function (item) {
var title = item.title,
id = item.id;
return {
label: title,
value: id
};
});
setSelectValue(newValue);
}, [value]);
var renderMultipleSelectOrSelect = function renderMultipleSelectOrSelect(isMultiple) {
var button = /*#__PURE__*/React.createElement(_Button, {
type: "primary",
onClick: handleClick,
disabled: readonly
}, "\u9009\u62E9");
if (isMultiple) {
return /*#__PURE__*/React.createElement(Group, {
compact: true,
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement(_Select, _extends({
mode: "multiple"
}, customerSelectOption, {
onClear: onClear,
onChange: onSelectChange,
style: {
flex: 1
},
options: options,
value: selectValue,
showSearch: true,
onSearch: onSearch,
filterOption: false,
onPopupScroll: debounce(function (e) {
return onSelectPopupScroll(e);
}, 200),
onDropdownVisibleChange: onDropdownVisibleChange,
labelInValue: true
})), button);
}
return /*#__PURE__*/React.createElement(Group, {
compact: true,
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement(_Select, _extends({}, customerSelectOption, {
showSearch: true,
style: {
flex: 1
},
onClear: onClear,
onChange: onSelectChange,
options: options,
value: selectValue,
onSearch: onSearch,
filterOption: false,
onPopupScroll: debounce(function (e) {
return onSelectPopupScroll(e);
}, 200),
onDropdownVisibleChange: onDropdownVisibleChange,
labelInValue: true
})), button);
};
return {
visible: visible,
onCancelSubmit: onCancelSubmit,
onSubmitSuccess: onSubmitSuccess,
onSelectChange: onSelectChange,
renderMultipleSelectOrSelect: renderMultipleSelectOrSelect,
onChange: onChange,
getSearchResultByname: getSearchResultByname,
hasSelectedKeys: hasSelectedKeys
};
};
// 递归给树增加key
var treeMap = function treeMap(parentId, tree, listType, isMultiple) {
if (!Array.isArray(tree)) {
return;
}
var disabled = listType === 'employee' && !isMultiple;
return tree.map(function (item) {
var id = item.id,
name = item.name,
subFlag = item.subFlag,
tree = item.tree,
organizeFlag = item.organizeFlag;
var isEmployee = organizeFlag === 2;
var isLeaf = !subFlag;
var renderIcon = function renderIcon(_ref2) {
var selected = _ref2.selected;
if (isMultiple) {
return null;
}
if (selected && !isMultiple) {
return /*#__PURE__*/React.createElement(_Radio.Group, {
value: 1
}, /*#__PURE__*/React.createElement(_Radio, {
value: 1
}));
}
return /*#__PURE__*/React.createElement(_Radio, {
disabled: disabled && !isEmployee,
value: 1
});
};
return _extends({}, item, {
isEmployee: isEmployee,
disabled: disabled && !isEmployee,
isLeaf: isLeaf,
key: parentId + "_" + id,
value: parentId + "_" + id,
children: treeMap(id, tree, listType, isMultiple),
title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeNode, {
isLeaf: isEmployee,
name: name
})),
icon: renderIcon
});
});
};
var useGetTreeDateAndRootId = function useGetTreeDateAndRootId(getEmployeeOrdepartmentTree, listType, isMultiple) {
var _useState6 = useState([]),
treeData = _useState6[0],
setTreeData = _useState6[1];
var _useState7 = useState(''),
rootId = _useState7[0],
setRootId = _useState7[1];
var getTreeList = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
var _yield$getEmployeeOrd, data, success, id, name, organizeFlag, subFlag, tree, isEmployee, isLeaf, disabled, renderIcon, newTree;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return getEmployeeOrdepartmentTree();
case 2:
_yield$getEmployeeOrd = _context3.sent;
data = _yield$getEmployeeOrd.data;
success = _yield$getEmployeeOrd.success;
if (!(!success || data === null)) {
_context3.next = 7;
break;
}
return _context3.abrupt("return");
case 7:
id = data.id, name = data.name, organizeFlag = data.organizeFlag, subFlag = data.subFlag, tree = data.tree;
isEmployee = organizeFlag === 2;
isLeaf = !subFlag;
disabled = listType === 'employee' && !isMultiple;
renderIcon = function renderIcon(props) {
var selected = props.selected;
if (isMultiple) {
return null;
}
if (selected && !isMultiple) {
return /*#__PURE__*/React.createElement(_Radio.Group, {
value: 1
}, /*#__PURE__*/React.createElement(_Radio, {
value: 1
}));
}
return /*#__PURE__*/React.createElement(_Radio, {
disabled: disabled && !isEmployee,
value: 1
});
};
newTree = [_extends({}, data, {
id: id,
isEmployee: isEmployee,
isLeaf: isLeaf,
key: id,
value: id,
disabled: disabled && !isEmployee,
children: treeMap(id, tree, listType, isMultiple),
title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeNode, {
isLeaf: isEmployee,
name: name
})),
icon: renderIcon
})];
unstable_batchedUpdates(function () {
setTreeData(newTree);
setRootId(id);
});
case 14:
case "end":
return _context3.stop();
}
}, _callee3);
})), [getEmployeeOrdepartmentTree, listType, isMultiple]);
useEffect(function () {
getTreeList();
}, [getTreeList]);
return [treeData, rootId];
};
export { useSelectTree, useGetTreeDateAndRootId };