fx-form-widget
Version:
444 lines (427 loc) • 17.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _input = _interopRequireDefault(require("antd/lib/input"));
var _button = _interopRequireDefault(require("antd/lib/button"));
var _tree = _interopRequireDefault(require("antd/lib/tree"));
var _empty = _interopRequireDefault(require("antd/lib/empty"));
var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireWildcard(require("react"));
var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/lib/icons/CloseOutlined"));
var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/lib/icons/SearchOutlined"));
var _icons = require("@ant-design/icons");
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
var _treeNode = _interopRequireDefault(require("../treeNode"));
var _shard = require("./shard");
require("./index.less");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var SelectTree = function SelectTree(props) {
var hasSelectedKeys = props.hasSelectedKeys,
data = props.data,
checkable = props.checkable,
onSelectResult = props.onSelectResult,
rootId = props.rootId,
getSearchResultByname = props.getSearchResultByname,
_props$title = props.title,
title = _props$title === void 0 ? '已选择的部门或员工' : _props$title,
_props$searchPlacehol = props.searchPlaceholder,
searchPlaceholder = _props$searchPlacehol === void 0 ? "请输入部门/员工" : _props$searchPlacehol,
showClearButton = props.showClearButton,
listType = props.listType;
var _useState = (0, _react.useState)([]),
selectedKeys = _useState[0],
setSelectedKeys = _useState[1];
var cacheResultMap = (0, _react.useRef)(new Map());
var _useState2 = (0, _react.useState)(true),
visibleTree = _useState2[0],
setVisibleTree = _useState2[1];
var _useState3 = (0, _react.useState)([rootId]),
expandedKeys = _useState3[0],
setExpandedKeys = _useState3[1];
var _useState4 = (0, _react.useState)({}),
employeeOrdepartmentSearchResult = _useState4[0],
setEmployeeOrdepartmentSearchResult = _useState4[1];
var dataMapRef = (0, _react.useRef)(new Map());
// 将选中的结果存入map中
var addCacheResultByKey = function addCacheResultByKey(node) {
var id = node.id;
if (cacheResultMap.current.has(id)) {
return;
}
cacheResultMap.current.set(id, node);
getSelectedResults();
};
// 将未选中的结果从map中移除
var deleteCacheResultByKey = function deleteCacheResultByKey(key) {
cacheResultMap.current["delete"](key);
getSelectedResults();
};
var deleteOrModify = function deleteOrModify(checked, node) {
var id = node.id;
if (!cacheResultMap.current.has(id)) {
addCacheResultByKey(node);
return;
}
deleteCacheResultByKey(id);
};
// 按照输入的名字对部门和人员进行搜索
var getSearchResult = (0, _react.useCallback)( /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(name) {
var _yield$getSearchResul, data, success, result, _ref2, departmentList, employeeList;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!(name.length === 0)) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
_context.next = 4;
return getSearchResultByname(name);
case 4:
_yield$getSearchResul = _context.sent;
data = _yield$getSearchResul.data;
success = _yield$getSearchResul.success;
result = {
departmentList: [],
employeeList: []
};
if (!(!success || data === null)) {
_context.next = 10;
break;
}
return _context.abrupt("return");
case 10:
_ref2 = data, departmentList = _ref2.departmentList, employeeList = _ref2.employeeList;
if (departmentList) {
result.departmentList = (0, _shard.addKeyByArrayMap)(departmentList, false);
}
if (employeeList) {
result.employeeList = (0, _shard.addKeyByArrayMap)(employeeList, true);
}
setEmployeeOrdepartmentSearchResult(result);
case 14:
case "end":
return _context.stop();
}
}, _callee);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}(), [getSearchResultByname]);
var searchEmployerrOrdepartment = (0, _lodash.debounce)(getSearchResult, 500, {
maxWait: 500
});
// 点击树进行触发选择
var onSelect = function onSelect(selectedKeysValue, _ref3) {
if (selectedKeysValue === void 0) {
selectedKeysValue = [];
}
var selected = _ref3.selected,
node = _ref3.node;
// 单选需要清空每一次的数据
if (listType && !checkable) {
cacheResultMap.current.clear();
}
// 多选是点击一个进行追加
setSelectedKeys((0, _shard.traverseKeys)(selectedKeysValue, dataMapRef.current));
deleteOrModify(selected, node);
};
// 树展开的状态
var onExpand = function onExpand(expandedKeysValue) {
setExpandedKeys(expandedKeysValue);
};
var onChange = function onChange(e) {
var value = e.target.value;
if (value === '') {
setVisibleTree(true);
return;
}
searchEmployerrOrdepartment(value);
setVisibleTree(false);
};
var getSelectedResults = function getSelectedResults() {
var selectResults = Array.from(cacheResultMap.current).map(function (result) {
return (0, _extends2["default"])({}, result[1]);
});
onSelectResult === null || onSelectResult === void 0 ? void 0 : onSelectResult(selectResults);
};
// 选中树前面的checkobox进行触发
var onCheck = function onCheck(_, _ref4) {
var checkedNodes = _ref4.checkedNodes,
node = _ref4.node,
checked = _ref4.checked;
var id = node.id;
// 如果是多选需要选择多个
var filterCheckedNodes = checkedNodes.filter(function (checkedNode) {
var _String;
var key = checkedNode.key;
return ((_String = String(key)) === null || _String === void 0 ? void 0 : _String.indexOf(id)) <= 0;
});
// 部门组件需要特殊处理不然会导致非叶子节点无法选中
if (listType === 'deparement') {
filterCheckedNodes = filterCheckedNodes.map(function (checkedNodes) {
return (0, _extends2["default"])({}, checkedNodes, {
isLeaf: true
});
});
checkedNodes = checkedNodes.map(function (checkedNodes) {
return (0, _extends2["default"])({}, checkedNodes, {
isLeaf: true
});
});
}
var newCheckedNodes = checked ? checkedNodes : filterCheckedNodes;
cacheResultMap.current = (0, _shard.generateMapfromArray)(newCheckedNodes);
var mapCheckedNodes = newCheckedNodes.map(function (item) {
return item.key;
});
setSelectedKeys((0, _shard.traverseKeys)(mapCheckedNodes, dataMapRef.current));
getSelectedResults();
};
// 删除列表的人员或者部门
var deleteEmployerOrDepartmentByKey = function deleteEmployerOrDepartmentByKey(key) {
var newSelectedKeys = [].concat(selectedKeys);
var index = newSelectedKeys.findIndex(function (selected) {
return selected.indexOf(key) > -1;
});
if (index === -1) {
return;
}
deleteCacheResultByKey(key);
newSelectedKeys.splice(index, 1);
setSelectedKeys(newSelectedKeys);
};
// 添加列表的人员或者员工
var addEmployerOrDepartment = function addEmployerOrDepartment(node) {
var key = node.key;
addCacheResultByKey(node);
setSelectedKeys([].concat(selectedKeys, [key]));
};
var renderIcon = function renderIcon(checked) {
if (checked === true) {
return /*#__PURE__*/_react["default"].createElement(_icons.CheckOutlined, null);
}
return /*#__PURE__*/_react["default"].createElement(_CloseOutlined["default"], null);
};
/**
*
* @param listType
* @description 通过listType的类型来渲染数据
*/
var filterDataByListType = function filterDataByListType(listType, array) {
if (!listType) {
return array;
}
if (!array) {
return [];
}
if (listType === 'deparement') {
return array.filter(function (employerrOrDepartmentArray) {
var _ = employerrOrDepartmentArray[0],
employerrOrDepartment = employerrOrDepartmentArray[1];
var isEmployee = employerrOrDepartment.isEmployee;
return !isEmployee;
});
}
if (listType === 'employee') {
return array.filter(function (employerrOrDepartmentArray) {
var _ = employerrOrDepartmentArray[0],
employerrOrDepartment = employerrOrDepartmentArray[1];
var isEmployee = employerrOrDepartment.isEmployee;
return isEmployee;
});
}
};
var renderEmployeeOrdepartment = function renderEmployeeOrdepartment(map) {
var transformArrayFromMap = Array.from(map);
transformArrayFromMap = filterDataByListType(listType, transformArrayFromMap);
return transformArrayFromMap.map(function (employerrOrDepartmentArray) {
var key = employerrOrDepartmentArray[0],
employerrOrDepartment = employerrOrDepartmentArray[1];
var name = employerrOrDepartment.name,
isEmployee = employerrOrDepartment.isEmployee;
var onDelete = function onDelete() {
deleteEmployerOrDepartmentByKey(key);
};
return /*#__PURE__*/_react["default"].createElement("div", {
key: key,
className: "select-tree-list-item"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "select-tree-list-item-title"
}, /*#__PURE__*/_react["default"].createElement(_treeNode["default"], {
isLeaf: isEmployee
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "title-wrapper"
}, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
title: name
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "title"
}, name)))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_CloseOutlined["default"], {
className: "closeIcon",
onClick: onDelete
})));
});
};
var handleClickEmployeeOrdepartmentSearchItem = function handleClickEmployeeOrdepartmentSearchItem(checked, node) {
var key = node.key;
if (checked === true) {
deleteEmployerOrDepartmentByKey(key);
return;
}
addEmployerOrDepartment(node);
};
// 渲染搜索列表
var renderEmployeeOrdepartmentSearchList = function renderEmployeeOrdepartmentSearchList(list) {
if (!list) return;
if (list.length === 0) {
return /*#__PURE__*/_react["default"].createElement(_empty["default"], {
image: _empty["default"].PRESENTED_IMAGE_SIMPLE
});
}
var employOrDepartmentIsChecked = 'employee-or-department-is-checked';
return list.map(function (employeeOrdepartment) {
var _classNames;
var key = employeeOrdepartment.key,
name = employeeOrdepartment.name,
isEmployee = employeeOrdepartment.isEmployee;
var checked = cacheResultMap.current.has(key);
var onClick = function onClick() {
// 修复单选存在选中多项的bug
if (!checked && !checkable) {
cacheResultMap.current.clear();
}
handleClickEmployeeOrdepartmentSearchItem(checked, employeeOrdepartment);
};
var className = (0, _classnames["default"])((_classNames = {}, _classNames["" + employOrDepartmentIsChecked] = true, _classNames));
return /*#__PURE__*/_react["default"].createElement("div", {
key: key,
className: className,
onClick: onClick
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "checked-tree-node"
}, /*#__PURE__*/_react["default"].createElement(_treeNode["default"], {
isLeaf: isEmployee,
name: name
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "checked-icon"
}, renderIcon(checked)));
});
};
var employeeList = employeeOrdepartmentSearchResult.employeeList,
departmentList = employeeOrdepartmentSearchResult.departmentList;
var renderEmployeeOrDepartmentList = function renderEmployeeOrDepartmentList(listType) {
var employees = /*#__PURE__*/_react["default"].createElement("div", {
className: "checked"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "checked-title"
}, "\u5458\u5DE5\uFF1A"), renderEmployeeOrdepartmentSearchList(employeeList));
var departments = /*#__PURE__*/_react["default"].createElement("div", {
className: "checked"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "checked-title"
}, "\u90E8\u95E8\uFF1A"), renderEmployeeOrdepartmentSearchList(departmentList));
if (listType === 'employee') {
return employees;
}
if (listType === 'deparement') {
return departments;
}
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, employees, departments);
};
// 渲染树或者渲染列表
var renderTreeOrList = function renderTreeOrList(visible) {
if (visible) {
return /*#__PURE__*/_react["default"].createElement(_tree["default"], {
treeData: data,
showIcon: true,
checkable: checkable,
height: 375,
checkStrictly: listType === 'deparement',
style: {
overflow: 'auto'
},
onExpand: onExpand,
expandedKeys: expandedKeys,
checkedKeys: selectedKeys,
selectedKeys: selectedKeys,
onSelect: onSelect,
onCheck: onCheck
});
}
return renderEmployeeOrDepartmentList(listType);
};
(0, _react.useEffect)(function () {
// 获取扁平化数据
var flattenData = (0, _shard.flattenTreeData)(data, []);
dataMapRef.current = (0, _shard.transformArryToMap)(flattenData);
}, [data]);
(0, _react.useEffect)(function () {
var map = new Map();
if (!hasSelectedKeys) return;
for (var i = 0; i < hasSelectedKeys.length; i++) {
var id = hasSelectedKeys[i].id;
var _data = dataMapRef.current.get(id);
if (!_data) return;
map.set(id, _data[0]);
}
cacheResultMap.current = map;
var newSelectedKeys = hasSelectedKeys.map(function (item) {
var id = item.id;
return id;
});
setSelectedKeys((0, _shard.traverseKeys)(newSelectedKeys, dataMapRef.current));
}, [hasSelectedKeys]);
// 清空
var clearEmployerOrDepartment = function clearEmployerOrDepartment() {
clearCacheResult();
setSelectedKeys([]);
};
// map清空
var clearCacheResult = function clearCacheResult() {
cacheResultMap.current = new Map([]);
getSelectedResults();
};
var renderClearButton = function renderClearButton(showClearButton) {
if (showClearButton) {
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
className: "select-tree-delect",
type: "link",
onClick: clearEmployerOrDepartment
}, "\u6E05\u7A7A");
}
return null;
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: "select-tree"
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
overflow: 'auto',
flex: 1
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "select-tree-input"
}, /*#__PURE__*/_react["default"].createElement(_input["default"], {
allowClear: true,
onChange: onChange,
prefix: /*#__PURE__*/_react["default"].createElement(_SearchOutlined["default"], null),
placeholder: searchPlaceholder
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "select-tree-wrapper"
}, renderTreeOrList(visibleTree))), /*#__PURE__*/_react["default"].createElement("div", {
className: "select-tree-list-wrapper"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "select-tree-title"
}, title, renderClearButton(showClearButton)), /*#__PURE__*/_react["default"].createElement("div", {
className: "select-tree-list"
}, renderEmployeeOrdepartment(cacheResultMap.current))));
};
var _default = exports["default"] = SelectTree;