fx-form-widget
Version:
437 lines (421 loc) • 15.8 kB
JavaScript
import _Input from "antd/es/input";
import _Button from "antd/es/button";
import _Tree from "antd/es/tree";
import _Empty from "antd/es/empty";
import _Tooltip from "antd/es/tooltip";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useRef, useState, useEffect, useCallback } from 'react';
import CloseOutlined from '@ant-design/icons/lib/icons/CloseOutlined';
import SearchOutlined from '@ant-design/icons/lib/icons/SearchOutlined';
import { CheckOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import { debounce } from 'lodash';
import TreeNode from '../treeNode';
import { addKeyByArrayMap, flattenTreeData, generateMapfromArray, transformArryToMap, traverseKeys } from './shard';
import './index.less';
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 = useState([]),
selectedKeys = _useState[0],
setSelectedKeys = _useState[1];
var cacheResultMap = useRef(new Map());
var _useState2 = useState(true),
visibleTree = _useState2[0],
setVisibleTree = _useState2[1];
var _useState3 = useState([rootId]),
expandedKeys = _useState3[0],
setExpandedKeys = _useState3[1];
var _useState4 = useState({}),
employeeOrdepartmentSearchResult = _useState4[0],
setEmployeeOrdepartmentSearchResult = _useState4[1];
var dataMapRef = 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 = useCallback( /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(name) {
var _yield$getSearchResul, data, success, result, _ref2, departmentList, employeeList;
return _regeneratorRuntime.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 = addKeyByArrayMap(departmentList, false);
}
if (employeeList) {
result.employeeList = addKeyByArrayMap(employeeList, true);
}
setEmployeeOrdepartmentSearchResult(result);
case 14:
case "end":
return _context.stop();
}
}, _callee);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}(), [getSearchResultByname]);
var searchEmployerrOrdepartment = 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(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 _extends({}, 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 _extends({}, checkedNodes, {
isLeaf: true
});
});
checkedNodes = checkedNodes.map(function (checkedNodes) {
return _extends({}, checkedNodes, {
isLeaf: true
});
});
}
var newCheckedNodes = checked ? checkedNodes : filterCheckedNodes;
cacheResultMap.current = generateMapfromArray(newCheckedNodes);
var mapCheckedNodes = newCheckedNodes.map(function (item) {
return item.key;
});
setSelectedKeys(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.createElement(CheckOutlined, null);
}
return /*#__PURE__*/React.createElement(CloseOutlined, 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.createElement("div", {
key: key,
className: "select-tree-list-item"
}, /*#__PURE__*/React.createElement("div", {
className: "select-tree-list-item-title"
}, /*#__PURE__*/React.createElement(TreeNode, {
isLeaf: isEmployee
}), /*#__PURE__*/React.createElement("div", {
className: "title-wrapper"
}, /*#__PURE__*/React.createElement(_Tooltip, {
title: name
}, /*#__PURE__*/React.createElement("div", {
className: "title"
}, name)))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CloseOutlined, {
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.createElement(_Empty, {
image: _Empty.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 = classNames((_classNames = {}, _classNames["" + employOrDepartmentIsChecked] = true, _classNames));
return /*#__PURE__*/React.createElement("div", {
key: key,
className: className,
onClick: onClick
}, /*#__PURE__*/React.createElement("div", {
className: "checked-tree-node"
}, /*#__PURE__*/React.createElement(TreeNode, {
isLeaf: isEmployee,
name: name
})), /*#__PURE__*/React.createElement("div", {
className: "checked-icon"
}, renderIcon(checked)));
});
};
var employeeList = employeeOrdepartmentSearchResult.employeeList,
departmentList = employeeOrdepartmentSearchResult.departmentList;
var renderEmployeeOrDepartmentList = function renderEmployeeOrDepartmentList(listType) {
var employees = /*#__PURE__*/React.createElement("div", {
className: "checked"
}, /*#__PURE__*/React.createElement("div", {
className: "checked-title"
}, "\u5458\u5DE5\uFF1A"), renderEmployeeOrdepartmentSearchList(employeeList));
var departments = /*#__PURE__*/React.createElement("div", {
className: "checked"
}, /*#__PURE__*/React.createElement("div", {
className: "checked-title"
}, "\u90E8\u95E8\uFF1A"), renderEmployeeOrdepartmentSearchList(departmentList));
if (listType === 'employee') {
return employees;
}
if (listType === 'deparement') {
return departments;
}
return /*#__PURE__*/React.createElement(React.Fragment, null, employees, departments);
};
// 渲染树或者渲染列表
var renderTreeOrList = function renderTreeOrList(visible) {
if (visible) {
return /*#__PURE__*/React.createElement(_Tree, {
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);
};
useEffect(function () {
// 获取扁平化数据
var flattenData = flattenTreeData(data, []);
dataMapRef.current = transformArryToMap(flattenData);
}, [data]);
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(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.createElement(_Button, {
className: "select-tree-delect",
type: "link",
onClick: clearEmployerOrDepartment
}, "\u6E05\u7A7A");
}
return null;
};
return /*#__PURE__*/React.createElement("div", {
className: "select-tree"
}, /*#__PURE__*/React.createElement("div", {
style: {
overflow: 'auto',
flex: 1
}
}, /*#__PURE__*/React.createElement("div", {
className: "select-tree-input"
}, /*#__PURE__*/React.createElement(_Input, {
allowClear: true,
onChange: onChange,
prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
placeholder: searchPlaceholder
})), /*#__PURE__*/React.createElement("div", {
className: "select-tree-wrapper"
}, renderTreeOrList(visibleTree))), /*#__PURE__*/React.createElement("div", {
className: "select-tree-list-wrapper"
}, /*#__PURE__*/React.createElement("div", {
className: "select-tree-title"
}, title, renderClearButton(showClearButton)), /*#__PURE__*/React.createElement("div", {
className: "select-tree-list"
}, renderEmployeeOrdepartment(cacheResultMap.current))));
};
export default SelectTree;