@aliretail/react-materials-components
Version:
342 lines (305 loc) • 10.6 kB
JavaScript
import _Dropdown from "@alifd/next/es/dropdown";
import _Icon from "@alifd/next/es/icon";
import _Balloon from "@alifd/next/es/balloon";
import _Button from "@alifd/next/es/button";
import _Message from "@alifd/next/es/message";
import _Menu from "@alifd/next/es/menu";
import _Tree from "@alifd/next/es/tree";
import * as React from 'react';
import cls from 'classnames';
import AddGroupDialog from "./AddGroupDialog";
import RenameDialog from "./RenameDialog";
import DeleteDialog from "./DeleteDialog";
import { looper, loopParentKey, requestByItem, CLASS_PREFIX } from "../utils";
var useState = React.useState;
var TreeNode = _Tree.Node;
var MenuItem = _Menu.Item;
var TreeManager = function TreeManager(props) {
var _props$onSelect = props.onSelect,
onSelect = _props$onSelect === void 0 ? function () {} : _props$onSelect,
_props$requestMap = props.requestMap,
requestMap = _props$requestMap === void 0 ? {} : _props$requestMap,
_props$subjectName = props.subjectName,
subjectName = _props$subjectName === void 0 ? '分组' : _props$subjectName,
modelType = props.modelType;
var _useState = useState([]),
dataSource = _useState[0],
setDataSource = _useState[1];
var _useState2 = useState(false),
addGroupDialogVisible = _useState2[0],
setAddGroupDialogVisible = _useState2[1];
var _useState3 = useState(''),
addPositionKey = _useState3[0],
setAddPositionKey = _useState3[1];
var _useState4 = useState(''),
parentKey = _useState4[0],
setParentKey = _useState4[1];
var _useState5 = useState(false),
renameDialogVisible = _useState5[0],
setRenameDialogVisible = _useState5[1];
var _useState6 = useState(false),
deleteDialogVisible = _useState6[0],
setDeleteDialogVisible = _useState6[1];
var _useState7 = useState(''),
deleteValue = _useState7[0],
setDeleteValue = _useState7[1];
var _useState8 = useState(''),
deleteKey = _useState8[0],
setDeleteKey = _useState8[1];
var _useState9 = useState(''),
renameKey = _useState9[0],
setRenameKey = _useState9[1];
React.useEffect(function () {
getList();
}, [modelType]);
var rQueryAll = requestMap.queryAll,
rMove = requestMap.move,
rCreate = requestMap.create,
rRename = requestMap.rename,
rDelete = requestMap["delete"];
var getList = function getList() {
requestByItem(rQueryAll, {
modelType: modelType
}).then(function (res) {
if (Array.isArray(res.result)) {
setDataSource(res.result);
}
})["catch"](function (e) {
console.warn(e);
});
};
var openRenameDialog = function openRenameDialog(key) {
setRenameKey(key);
setRenameDialogVisible(true);
}; // 手动重命名
// const getNewName = (newName: string) => {
// const data = [...dataSource];
// const loop = (arr: ITreeItem[]) => {
// const position = arr.find((item) => item.key === renameKey);
// if (position) {
// arr.forEach((i) => {
// if (i.key === renameKey) {
// i.label = newName;
// }
// });
// } else {
// arr.forEach((n) => {
// n.children && loop(n.children);
// });
// }
// };
// loop(data);
// setDataSource(data);
// };
var openDeleteDialog = function openDeleteDialog(item) {
setDeleteValue(item.label);
setDeleteKey(item.key);
setDeleteDialogVisible(true);
};
var openAddGroupDialog = function openAddGroupDialog(item) {
var findParentKey = function findParentKey(data, key) {
if (data.find(function (n) {
return n.key === key;
})) {
return setParentKey('');
} else {
return loopParentKey(data, key, setParentKey);
}
};
findParentKey(dataSource, item.key);
setAddPositionKey(item.key);
setAddGroupDialogVisible(true);
};
var onMove = function onMove(item, direction) {
var data = [].concat(dataSource);
var dragObj; // 手动移动
looper(data, item.key, function (it, index, arr) {
dragObj = it;
arr.splice(index, 1);
if (direction === 'up') {
arr.splice(index - 1, 0, dragObj);
} else {
arr.splice(index + 1, 0, dragObj);
}
});
setDataSource(data); // 接口移动
requestByItem(rMove, {
data: data
}).then(function (res) {
if (res.success) {
_Message.success('移动成功');
getList();
}
});
};
var onDrop = function onDrop(info) {
if (!info.dragNode) {
return;
}
var dragKey = info.dragNode.props.eventKey;
var dropKey = info.node.props.eventKey;
var dropPosition = info.dropPosition; // 手动更新
var data = [].concat(dataSource);
var dragObj;
looper(data, dragKey, function (item, index, arr) {
arr.splice(index, 1);
dragObj = item;
});
if (info.dropPosition === 0) {
looper(data, dropKey, function (item) {
item.children = item.children || [];
item.children.push(dragObj);
});
} else {
var ar;
var i;
looper(data, dropKey, function (item, index, arr) {
ar = arr;
i = index;
});
if (dropPosition === -1) {
ar.splice(i, 0, dragObj);
} else {
ar.splice(i + 1, 0, dragObj);
}
}
setDataSource(data); // 接口更新
requestByItem(rMove, {
data: data
}).then(function (res) {
if (res.success) {
_Message.success('移动成功');
}
});
getList();
};
/**
* 选择树节点的回调
* @param selectedKeys 选择的树节点数组
*/
var onSelectTree = function onSelectTree(selectedKeys) {
onSelect(selectedKeys[0]);
};
var loop = function loop(data) {
var deleteItem = function deleteItem(item) {
var _item$hasContent = item.hasContent,
hasContent = _item$hasContent === void 0 ? false : _item$hasContent; // const isDisabled = hasChildNode(item);
var isDisabled = hasContent;
var Btn = /*#__PURE__*/React.createElement(_Button, {
type: "normal",
text: true,
disabled: isDisabled,
onClick: function onClick() {
return openDeleteDialog(item);
}
}, "\u5220\u9664");
return isDisabled ? /*#__PURE__*/React.createElement(_Balloon, {
closable: false,
trigger: Btn,
align: "br",
triggerType: "hover"
}, "\u8BE5", subjectName, "\u4E0B\u6709\u6807\u7B7E\uFF0C\u65E0\u6CD5\u5220\u9664") : Btn;
};
return Array.isArray(data) && data.map(function (item, index, arr) {
var _cls;
var _item$hasContent2 = item.hasContent,
hasContent = _item$hasContent2 === void 0 ? false : _item$hasContent2;
return /*#__PURE__*/React.createElement(TreeNode, {
key: item.key,
label: /*#__PURE__*/React.createElement("div", {
className: CLASS_PREFIX + "-tree-item"
}, /*#__PURE__*/React.createElement("span", {
className: cls(CLASS_PREFIX + "-tree-item-label", (_cls = {}, _cls[CLASS_PREFIX + "-tree-item-label-empty"] = !hasContent, _cls))
}, item.label), /*#__PURE__*/React.createElement("div", {
className: CLASS_PREFIX + "-tree-item-actions"
}, /*#__PURE__*/React.createElement(_Button, {
onClick: function onClick() {
return openAddGroupDialog(item);
},
text: true,
iconSize: "xxs"
}, /*#__PURE__*/React.createElement(_Icon, {
type: "add"
})), /*#__PURE__*/React.createElement(_Dropdown, {
trigger: /*#__PURE__*/React.createElement(_Button, {
text: true,
iconSize: "xxs"
}, /*#__PURE__*/React.createElement(_Icon, {
type: "ellipsis"
})),
triggerType: "click"
}, /*#__PURE__*/React.createElement(_Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
onClick: function onClick() {
return openRenameDialog(item.key);
}
}, "\u91CD\u547D\u540D"), /*#__PURE__*/React.createElement(MenuItem, {
onClick: function onClick() {
return onMove(item, 'up');
}
}, /*#__PURE__*/React.createElement(_Button, {
disabled: index === 0,
text: true
}, "\u4E0A\u79FB")), /*#__PURE__*/React.createElement(MenuItem, null, /*#__PURE__*/React.createElement(_Button, {
disabled: arr.length - 1 === index,
text: true,
onClick: function onClick() {
return onMove(item, 'down');
}
}, "\u4E0B\u79FB")), /*#__PURE__*/React.createElement(MenuItem, null, deleteItem(item))))))
}, item.children && loop(item.children));
});
};
return /*#__PURE__*/React.createElement(React.Fragment, null, !(dataSource !== null && dataSource !== void 0 && dataSource.length) && /*#__PURE__*/React.createElement(_Button, {
className: CLASS_PREFIX + "-btn-create-default",
onClick: function onClick() {
// 接口创建
requestByItem(rCreate, {
label: "\u9ED8\u8BA4" + subjectName,
modelType: modelType
}).then(function (res) {
if (res.result.success) {
_Message.show({
type: 'success',
content: '创建成功！'
});
}
})["catch"](function (e) {
console.warn('err:', e);
})["finally"](function () {
getList();
});
}
}, "\u521B\u5EFA", subjectName), /*#__PURE__*/React.createElement(_Tree, {
draggable: true,
isLabelBlock: true,
showLine: true,
selectable: true,
defaultExpandAll: true,
onDrop: onDrop,
onSelect: onSelectTree,
className: CLASS_PREFIX + "-tree"
}, loop(dataSource)), /*#__PURE__*/React.createElement(AddGroupDialog, {
visible: addGroupDialogVisible,
setVisible: setAddGroupDialogVisible // getNewGroupInfo={addNewGroup}
,
requestItem: rCreate,
addPositionKey: addPositionKey,
getList: getList,
parentKey: parentKey
}), /*#__PURE__*/React.createElement(RenameDialog, {
visible: renameDialogVisible,
setVisible: setRenameDialogVisible // getNewName={getNewName}
,
requestItem: rRename,
renameKey: renameKey,
getList: getList
}), /*#__PURE__*/React.createElement(DeleteDialog, {
visible: deleteDialogVisible,
setVisible: setDeleteDialogVisible,
deleteValue: deleteValue,
deleteKey: deleteKey,
requestItem: rDelete,
getList: getList
}));
};
export default TreeManager;