syber-lowcode-business-materials
Version:
syber-lowcode-business-materials
1,286 lines (1,263 loc) • 52 kB
JavaScript
"use strict";
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 _spin = _interopRequireDefault(require("antd/lib/spin"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _dropdown = _interopRequireDefault(require("antd/lib/dropdown"));
var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
var _modal = _interopRequireDefault(require("antd/lib/modal"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _treeDataHandler = _interopRequireDefault(require("../../utils/function/treeDataHandler"));
var _icons = require("@ant-design/icons");
var _dndKitSortableTree = require("dnd-kit-sortable-tree");
var _react = _interopRequireWildcard(require("react"));
require("./directory-plus.scss");
var _variables = require("../../variables");
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 BaseConfig = {
maxLevel: 3,
// 最多允许几层
childIndent: 24,
// 子项缩进
couldDrag: true,
// 是否允许拖拽
couldAddGroup: true,
// 是否允许新增分组
couldAddItem: true,
// 是否允许新增项目
couldEditGroup: true,
// 是否允许编辑分组
couldEditItem: true,
// 是否允许编辑项目
couldDeleteGroup: true,
// 是否允许删除分组
couldDeleteItem: true,
// 是否允许删除项目
showGroupNum: true,
// 目录显示子元素数量
showEmptyMark: true,
// 目录为空时展示子元素数量
showAddItem: false,
// 是否允许子级新增项目
couldCloneItem: false,
// 是否允许子级克隆项目
subTitle: '分组目录',
groupName: '分组',
itemName: '项目',
editGroupName: '重命名',
editItemName: '重命名',
deleteGroupName: '删除',
deleteItemName: '删除',
addItemName: '新增',
cloneItemName: '克隆',
placeholderText: '请输入名称',
hideArrow: true,
// 隐藏分组的展开箭头
hideTitle: false,
// 隐藏头部
hideItemAddBtn: false,
// 隐藏目录中的新增按钮，不管是否有新增权限(不影响顶部的新增按钮)
addIcon: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-icon',
style: {
backgroundImage: "url(" + require("./image/add.png") + ")",
filter: "invert(100%)"
}
}),
// 新增的图标
moreIcon: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-icon',
style: {
backgroundImage: "url(" + require("./image/more.png") + ")",
filter: "invert(100%)"
}
}),
// 更多的图标
addGroupIcon: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-icon',
style: {
backgroundImage: "url(" + require("./image/addGroup.png") + ")"
}
}),
// 新增分组的图标
addItemIcon: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-icon',
style: {
backgroundImage: "url(" + require("./image/addItem.png") + ")"
}
}),
// 新增项目的图标
groupArrowExpanded: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-icon',
style: {
backgroundImage: "url(" + require("./image/down.png") + ")",
backgroundSize: '120%',
filter: "invert(100%)"
}
}),
// 分组箭头展开
groupArrowCollapsed: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-icon',
style: {
backgroundImage: "url(" + require("./image/right.png") + ")",
backgroundSize: '120%',
filter: "invert(100%)"
}
}),
// 分组箭头收起
groupLogoExpanded: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-icon',
style: {
backgroundImage: "url(" + require("./image/groupIcon.png") + ")",
marginRight: '2px',
filter: "invert(100%)"
}
}),
// 分组logo展开
groupLogoCollapsed: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-icon',
style: {
backgroundImage: "url(" + require("./image/groupIcon.png") + ")",
marginRight: '2px',
filter: "invert(100%)"
}
}),
// 分组logo收起
itemLogo: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-icon',
style: {
backgroundImage: "url(" + require("./image/itemIcon.png") + ")",
filter: "invert(100%)"
}
}),
// 项目logo
itemLogoFn: undefined,
// 自定义logo，return节点
renderItemName: null,
// 自定义项目名称的渲染
renderGroupName: null,
// 自定义分组名称的渲染
// 自定义操作按钮
customRightActionBefore: null,
customRightActionAfter: null
};
// 字段映射
var FieldsConfig = {
title: 'title',
id: 'id',
isGroup: 'isGroup',
//1 分组 0文件
children: 'children',
url: 'url' // 分组图标
};
// 对样式的修改
var CustomStyle = {
containerStyle: {},
//外层样式
selectItemStyle: {
background: "#843CFF33"
},
usualItemStyle: {}
};
var Directory = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
function Directory(props) {
var _this2, _this2$config;
var _this;
_this = _React$PureComponent.call(this, props) || this;
// 整合配置项
_this.config = Object.assign({}, BaseConfig, _this.props.staticConfig);
_this.fields = Object.assign({}, FieldsConfig, _this.props.fieldsConfig);
// 记录反映射，返回数据时需要反处理
_this.fieldsReverse = {};
Object.keys(_this.fields).forEach(function (field) {
_this.fieldsReverse[_this.fields[field]] = field;
});
_this.state = {
treeData: [],
expandKeys: props.defaultExpandedKeys || {},
// 展开的节点key，设置为对象，方便增删的操作
selectTreeNode: null,
// 已经选择的节点
matchTxt: null,
// 模糊搜索关键词
disableDragAndDrop: (_this2 = _this) === null || _this2 === void 0 ? void 0 : (_this2$config = _this2.config) === null || _this2$config === void 0 ? void 0 : _this2$config.couldDrag,
loading: false,
// 加载中
upDate: 0,
// 控制强更
hasGroup: 0 // 是否存在分组，用于控制是否展示展开icon
};
_this.treeDataFull = []; // 记录最完整的数据，用于筛选恢复
_this.refresh = _this.refreshTreeDataAction;
_this.setData = function (data) {
_this.setState(data);
};
return _this;
}
(0, _inheritsLoose2["default"])(Directory, _React$PureComponent);
var _proto = Directory.prototype;
_proto.componentDidMount = function componentDidMount() {
this.initTreeData();
}
// 设置树数据
;
_proto.setTreeDataWithLastStatus = function setTreeDataWithLastStatus(newTreeData) {
this.treeDataFull = newTreeData;
// 第一个分组
var firstGroupItem = _treeDataHandler["default"].searchTreeNodeByField(newTreeData, {
field: 'isGroup',
value: 1
}, 'children');
this.setState({
treeData: newTreeData,
hasGroup: !!firstGroupItem,
upDate: this.state.upDate + 1
});
}
// 初始化树结构
;
_proto.initTreeData =
/*#__PURE__*/
function () {
var _initTreeData = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
var _this3 = this;
var treeData, selectTreeNode, defaultExpandedKeys, idValue, path;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
this.setState({
loading: true
});
_context.next = 3;
return this.getCompleteTreeData();
case 3:
treeData = _context.sent;
// 如果有选择的值，则展开的键要算
selectTreeNode = null;
defaultExpandedKeys = {};
console.log('this.props.selectConfig', this.props.selectConfig);
if (this.props.selectConfig) {
if (this.props.selectConfig.defaultSelectMatchRule) {
// 由外部传入自定义匹配初始选择项
selectTreeNode = _treeDataHandler["default"].searchTreeNodeByField(treeData, this.props.selectConfig.defaultSelectMatchRule, 'children');
console.log('selectTreeNode', selectTreeNode);
} else if (this.props.selectConfig.defaultSelect) {
idValue = this.props.selectConfig.defaultSelect[this.fields.id];
selectTreeNode = _treeDataHandler["default"].searchTreeNodeByField(treeData, {
field: 'id',
value: idValue
}, 'children');
}
} else if (this.props.initAutoSelect) {
// 默认选择一个项目
selectTreeNode = _treeDataHandler["default"].searchTreeNodeByField(treeData, {
field: 'isGroup',
value: 0
}, 'children');
if (!selectTreeNode) {
// 没有子集，选择分组
selectTreeNode = _treeDataHandler["default"].searchTreeNodeByField(treeData, {
field: 'isGroup',
value: 1
}, 'children');
}
}
if (selectTreeNode) {
path = _treeDataHandler["default"].getNodeDeepPath(treeData, function (o) {
return o.id === selectTreeNode.id;
}, 'children');
if (path.length >= 0) {
path.forEach(function (item) {
defaultExpandedKeys[item.id] = true;
});
}
}
// 给设置扩展属性
treeData = _treeDataHandler["default"].recursionDeal(treeData, function (item) {
// 是否展开
item.collapsed = !Object.prototype.hasOwnProperty.call(defaultExpandedKeys, item.id);
// 是否能接收子元素
if (item.isGroup === 0) {
item.canHaveChildren = false;
}
return item;
});
console.log('初始化处理后数据');
console.log(treeData);
this.setTreeDataWithLastStatus(treeData);
this.init = true;
this.setState({
expandKeys: defaultExpandedKeys,
selectTreeNode: selectTreeNode,
loading: false
}, function () {
if (_this3.props.initAutoSelect && selectTreeNode) {
_this3.props.initAutoSelect(_this3.dealReturnItem(selectTreeNode), _this3.dealReturnItem(path));
}
});
case 15:
case "end":
return _context.stop();
}
}, _callee, this);
}));
function initTreeData() {
return _initTreeData.apply(this, arguments);
}
return initTreeData;
}() // 设置选择的内容
;
_proto.setSelItem = function setSelItem(selItemId, cb, keepOriginExpand) {
var _this4 = this;
if (keepOriginExpand === void 0) {
keepOriginExpand = false;
}
//如果有选择的值，则展开的键要算
var selectTreeNode = null;
// keepOriginExpand 保持原来已经展开的
var defaultExpandedKeys = keepOriginExpand ? _.cloneDeep(this.state.expandKeys || {}) : {};
if (selItemId) {
selectTreeNode = _treeDataHandler["default"].searchTreeNodeByField(this.treeDataFull, {
field: 'id',
value: selItemId
}, 'children');
var path = _treeDataHandler["default"].getNodeDeepPath(this.treeDataFull, function (o) {
return o['id'] === selItemId;
}, 'children');
if (path.length >= 0) {
path.forEach(function (item) {
defaultExpandedKeys[item.id] = true;
});
}
cb === null || cb === void 0 ? void 0 : cb(this.dealReturnItem(path) || []);
}
console.log('selectTreeNode', selectTreeNode);
console.log('defaultExpandedKeys', defaultExpandedKeys);
this.setState({
matchTxt: null,
expandKeys: defaultExpandedKeys,
selectTreeNode: selectTreeNode
}, function () {
_this4.refreshTreeDataAction(_this4.treeDataFull);
});
}
// 刷新数据
;
_proto.refreshTreeDataAction =
/*#__PURE__*/
function () {
var _refreshTreeDataAction = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(treeData, cb) {
var expandKeys;
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
this.setState({
loading: true
});
if (treeData) {
_context2.next = 5;
break;
}
_context2.next = 4;
return this.getCompleteTreeData();
case 4:
treeData = _context2.sent;
case 5:
expandKeys = this.state.expandKeys; // 给设置扩展属性
treeData = _treeDataHandler["default"].recursionDeal(treeData, function (item, depth) {
// 是否展开
item.collapsed = !expandKeys.hasOwnProperty(item.id);
// 是否能接收子元素
if (item.isGroup === 0) {
item.canHaveChildren = false;
}
return item;
});
console.log('刷新数据');
console.log(treeData);
this.setTreeDataWithLastStatus(treeData);
this.setState({
loading: false
});
cb === null || cb === void 0 ? void 0 : cb(treeData);
case 12:
case "end":
return _context2.stop();
}
}, _callee2, this);
}));
function refreshTreeDataAction(_x, _x2) {
return _refreshTreeDataAction.apply(this, arguments);
}
return refreshTreeDataAction;
}() // 获取完整的树结构数据
;
_proto.getCompleteTreeData =
/*#__PURE__*/
function () {
var _getCompleteTreeData = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
var result;
return _regenerator["default"].wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
if (!this.props.requestTreeData) {
_context3.next = 10;
break;
}
_context3.next = 3;
return this.props.requestTreeData()["catch"](function (err) {
_modal["default"].error({
title: '获取目录数据失败',
content: (err === null || err === void 0 ? void 0 : err.toString()) || '未知原因'
});
});
case 3:
_context3.t0 = _context3.sent;
if (_context3.t0) {
_context3.next = 6;
break;
}
_context3.t0 = [];
case 6:
result = _context3.t0;
// 处理字段映射
result = _treeDataHandler["default"].changeField(result, this.fields, 'new', this.fields.children || 'children');
_context3.next = 11;
break;
case 10:
result = [];
case 11:
return _context3.abrupt("return", result);
case 12:
case "end":
return _context3.stop();
}
}, _callee3, this);
}));
function getCompleteTreeData() {
return _getCompleteTreeData.apply(this, arguments);
}
return getCompleteTreeData;
}() // 绘制树节点
;
_proto.drawTreeItem = function drawTreeItem(item) {
var _this5 = this,
_item$children,
_item$children2,
_item$children3;
var _this$state = this.state,
expandKeys = _this$state.expandKeys,
selectTreeNode = _this$state.selectTreeNode;
var getArrowIcon = function getArrowIcon(treeNode) {
var icon = null;
if (!_this5.config.hideArrow) {
if (treeNode.isGroup === 1) {
var _treeNode$children;
if (!((_treeNode$children = treeNode.children) !== null && _treeNode$children !== void 0 && _treeNode$children.length)) {
icon = _this5.config.groupArrowCollapsed;
} else {
var ifExpand = expandKeys[treeNode.id];
icon = ifExpand ? _this5.config.groupArrowExpanded : _this5.config.groupArrowCollapsed;
}
}
}
return icon;
};
// 根据节点类型展示右边的图标
var getLeftIcon = function getLeftIcon(treeNode) {
var _treeNode$children2;
var expandKeys = _this5.state.expandKeys;
var icon = null;
if (treeNode.url) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-icon',
style: {
backgroundImage: "url(" + treeNode.url + ")",
marginRight: '2px'
}
});
}
switch (treeNode.isGroup) {
case 1:
// 目录
icon = expandKeys[treeNode.id] ? /*#__PURE__*/_react["default"].createElement("div", null, _this5.config.groupLogoExpanded) : /*#__PURE__*/_react["default"].createElement("div", {
style: (_treeNode$children2 = treeNode.children) !== null && _treeNode$children2 !== void 0 && _treeNode$children2.length ? {} : {
opacity: 0.65
}
}, _this5.config.groupLogoCollapsed);
break;
case 0:
// 子项
icon = _this5.config.itemLogoFn ? _this5.config.itemLogoFn(treeNode) : _this5.config.itemLogo;
break;
default:
break;
}
return icon;
};
// sortableTree组件导致提前生成matchTitle 会丢失react子元素属性，所以每次渲染重新生成
var matchTitle = null;
if (item.matchTitleConfig) {
var title = item.title;
matchTitle = /*#__PURE__*/_react["default"].createElement("span", null, title.slice(0, item.matchTitleConfig.currentFindIndex), /*#__PURE__*/_react["default"].createElement("span", {
className: _variables.bizCssPrefix + '-matchStyle'
}, title.slice(item.matchTitleConfig.currentFindIndex, item.matchTitleConfig.currentFindIndex + item.matchTitleConfig.matchTxt.length)), title.slice(item.matchTitleConfig.currentFindIndex + item.matchTitleConfig.matchTxt.length));
}
var customRightView = null;
if (this.props.customRightAction) {
var _this$props$customRig, _this$props;
// 通用右侧自定义，目录和子项都改
customRightView = (_this$props$customRig = (_this$props = this.props).customRightAction) === null || _this$props$customRig === void 0 ? void 0 : _this$props$customRig.call(_this$props, this.dealReturnItem(item));
} else {
if (item.isGroup === 1 && this.props.customGroupRightAction) {
var _this$props$customGro, _this$props2;
// 自定义目录的右侧按钮
customRightView = (_this$props$customGro = (_this$props2 = this.props).customGroupRightAction) === null || _this$props$customGro === void 0 ? void 0 : _this$props$customGro.call(_this$props2, this.dealReturnItem(item));
}
if (item.isGroup !== 1 && this.props.customItemRightAction) {
var _this$props$customIte, _this$props3;
console.log('自定义子项的右侧按钮', item);
// 自定义子项的右侧按钮
customRightView = (_this$props$customIte = (_this$props3 = this.props).customItemRightAction) === null || _this$props$customIte === void 0 ? void 0 : _this$props$customIte.call(_this$props3, this.dealReturnItem(item));
}
}
var styleSet = Object.assign({}, CustomStyle, this.props.customStyle);
return /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-treeItemBox',
style: (selectTreeNode === null || selectTreeNode === void 0 ? void 0 : selectTreeNode.id) === item.id ? styleSet.selectItemStyle : styleSet.usualItemStyle,
onClick: function onClick() {
_this5.setState({
selectTreeNode: item
}, function () {
var _this5$props$onClickT, _this5$props;
var pathData = _treeDataHandler["default"].getNodeDeepPath(_this5.treeDataFull, function (o) {
return o['id'] === item.id;
}, 'children');
(_this5$props$onClickT = (_this5$props = _this5.props).onClickTreeItem) === null || _this5$props$onClickT === void 0 ? void 0 : _this5$props$onClickT.call(_this5$props, _this5.dealReturnItem(item), _this5.dealReturnItem(pathData));
});
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-itemLeftBox'
}, getArrowIcon(item), getLeftIcon(item), item.isGroup === 1 ? /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-groupName'
}, this.config.renderGroupName ? this.config.renderGroupName(item, matchTitle) : /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
mouseEnterDelay: 0.5,
title: /*#__PURE__*/_react["default"].createElement("span", {
style: {
color: '#333'
}
}, item.title),
color: '#fff'
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-groupNameOneLine'
}, /*#__PURE__*/_react["default"].createElement("span", {
className: _variables.bizCssPrefix + '-groupNameText',
style: expandKeys[item.id] && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length ? {} : {
opacity: 0.65
}
}, matchTitle || item.title), this.config.showGroupNum ? !((_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length) ? this.config.showEmptyMark ? /*#__PURE__*/_react["default"].createElement("span", {
className: _variables.bizCssPrefix + '-childNumEmptyTag'
}, "0") : null : /*#__PURE__*/_react["default"].createElement("span", {
className: _variables.bizCssPrefix + '-childNumTag'
}, ((_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : _item$children3.length) || 0) : null))) : /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-itemName'
}, this.config.renderItemName ? this.config.renderItemName(item, matchTitle) : /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
mouseEnterDelay: 0.5,
title: /*#__PURE__*/_react["default"].createElement("span", {
style: {
color: '#333'
}
}, item.title),
color: '#fff'
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-nameOneLine'
}, matchTitle || item.title)))), /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-itemRightBox',
onClick: function onClick(event) {
event.stopPropagation();
event.preventDefault();
}
}, customRightView, this.getGetItemAddBtnView(item), this.getGetItemMoreBtnView(item)));
}
// 顶部新增按钮
;
_proto.getTopAddView = function getTopAddView() {
var _this6 = this;
if (!this.config.couldAddItem && !this.config.couldAddGroup) {
return null;
}
if (this.config.couldAddItem && this.config.couldAddGroup) {
// 分组和项目都能新增，需要下拉选
return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
menu: {
items: [{
key: 'addGroup',
label: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-flexCenter5'
}, this.config.addGroupIcon, "\u65B0\u589E" + this.config.groupName)
}, {
key: 'addItem',
label: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-flexCenter5'
}, this.config.addItemIcon, "\u65B0\u589E" + this.config.itemName)
}],
onClick: function onClick(_ref) {
var item = _ref.item,
key = _ref.key;
switch (key) {
case 'addGroup':
_this6.dealItemAction(null, {
type: 'addGroup'
});
break;
case 'addItem':
_this6.dealItemAction(null, {
type: 'addItem'
});
break;
}
}
},
placement: "bottomLeft"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-addIconBtn'
}, /*#__PURE__*/_react["default"].createElement(_icons.PlusOutlined, null)));
}
return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
title: "\u65B0\u589E" + (this.config.couldAddItem ? this.config.itemName : this.config.groupName)
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-addIconBtn',
onClick: function onClick() {
if (_this6.config.couldAddItem) {
_this6.dealItemAction(null, {
type: 'addItem'
});
} else {
_this6.dealItemAction(null, {
type: 'addGroup'
});
}
}
}, /*#__PURE__*/_react["default"].createElement(_icons.PlusOutlined, null)));
}
// 栏目中的新增按钮
;
_proto.getGetItemAddBtnView = function getGetItemAddBtnView(currentTreeNode) {
var _this7 = this;
if (this.config.hideItemAddBtn) {
return null;
}
if (currentTreeNode.isGroup === 0) {
// 项目下不能新增任何内容
return null;
}
if (!this.config.couldAddItem && !this.config.couldAddGroup) {
// 没有任何新增权限
return null;
}
if (this.config.couldAddItem && this.config.couldAddGroup) {
// 分组和项目都能新增，需要下拉选
var items = [{
key: 'addGroup',
label: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-flexCenter5'
}, this.config.addGroupIcon, "\u65B0\u589E" + this.config.groupName)
}, {
key: 'addItem',
label: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-flexCenter5'
}, this.config.addItemIcon, "\u65B0\u589E" + this.config.itemName)
}];
if (this.props.diyAddDropdown) {
items = this.props.diyAddDropdown(currentTreeNode, this.config);
}
return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
menu: {
items: items,
onClick: function onClick(_ref2) {
var item = _ref2.item,
key = _ref2.key;
switch (key) {
case 'addGroup':
_this7.dealItemAction(currentTreeNode, {
type: 'addGroup'
});
break;
case 'addItem':
_this7.dealItemAction(currentTreeNode, {
type: 'addItem'
});
break;
}
}
},
placement: "bottomLeft"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-actionIconOut'
}, this.config.addIcon));
}
return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
title: "\u65B0\u589E" + (this.config.couldAddItem ? this.config.itemName : this.config.groupName)
}, /*#__PURE__*/_react["default"].createElement("div", {
onClick: function onClick() {
if (_this7.config.couldAddItem) {
_this7.dealItemAction(currentTreeNode, {
type: 'addItem'
});
} else {
_this7.dealItemAction(currentTreeNode, {
type: 'addGroup'
});
}
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-actionIconOut'
}, this.config.addIcon)));
}
// 更多操作的按钮
;
_proto.getGetItemMoreBtnView = function getGetItemMoreBtnView(currentTreeNode) {
var _this8 = this;
if (!this.config.couldEditGroup && !this.config.couldDeleteGroup && currentTreeNode.isGroup === 1) {
// 没有分组的任何操作权限
return null;
}
if (!this.config.couldEditItem && !this.config.couldDeleteItem && currentTreeNode.isGroup === 0) {
// 没有项目的任何操作权限
return null;
}
var items = [];
if (this.config.customRightActionBefore && this.config.customRightActionBefore.length) {
this.config.customRightActionBefore.forEach(function (item, index) {
var itemNode = item(_this8.dealReturnItem(currentTreeNode));
if (itemNode) {
items.push({
key: 'before-' + index,
label: itemNode
});
}
});
}
if (this.config.couldEditGroup && currentTreeNode.isGroup === 1 || this.config.couldEditItem && currentTreeNode.isGroup === 0) {
items.push({
key: 'edit',
label: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-flexCenter5'
}, currentTreeNode.isGroup === 1 ? this.config.editGroupName : this.config.editItemName)
});
}
if (this.config.couldCloneItem && currentTreeNode.isGroup === 0) {
items.push({
key: 'clone',
label: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-flexCenter5'
}, this.config.cloneItemName)
});
}
if (this.config.couldDeleteGroup && currentTreeNode.isGroup === 1 || this.config.couldDeleteItem && currentTreeNode.isGroup === 0) {
items.push({
key: 'delete',
label: /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-flexCenter5',
style: {
color: 'red'
}
}, currentTreeNode.isGroup === 1 ? this.config.deleteGroupName : this.config.deleteItemName)
});
}
if (this.config.customRightActionAfter && this.config.customRightActionAfter.length) {
this.config.customRightActionAfter.forEach(function (item, index) {
var itemNode = item(_this8.dealReturnItem(currentTreeNode));
if (itemNode) {
items.push({
key: 'after-' + index,
label: itemNode
});
}
});
}
return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
menu: {
items: items,
onClick: function onClick(_ref3) {
var item = _ref3.item,
key = _ref3.key;
switch (key) {
case 'edit':
_this8.dealItemAction(currentTreeNode, {
type: 'edit'
});
break;
case 'delete':
_this8.dealItemAction(currentTreeNode, {
type: 'delete'
});
break;
case 'clone':
_this8.cloneItemAction(_this8.dealReturnItem(currentTreeNode), {
type: 'clone'
});
break;
}
}
},
placement: "bottomLeft"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-actionIconOut'
}, this.config.moreIcon));
};
_proto.render = function render() {
var _styleSet$containerSt,
_this9 = this,
_Object$keys,
_this$config;
var _this$state2 = this.state,
treeData = _this$state2.treeData,
loading = _this$state2.loading,
matchTxt = _this$state2.matchTxt,
upDate = _this$state2.upDate,
expandKeys = _this$state2.expandKeys,
disableDragAndDrop = _this$state2.disableDragAndDrop,
selectTreeNode = _this$state2.selectTreeNode,
hasGroup = _this$state2.hasGroup;
var styleSet = Object.assign({}, CustomStyle, this.props.customStyle);
return /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-outerBox',
style: (0, _extends2["default"])({}, styleSet.containerStyle)
}, loading ? /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-loadingLayer'
}, /*#__PURE__*/_react["default"].createElement(_spin["default"], {
size: 'large'
})) : null, this.config.hideTitle ? null : /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-mainTitleBox'
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-directoryTitle'
}, typeof this.props.title === 'function' ? this.props.title(this) : this.props.title), this.getTopAddView()), /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-searchBox'
}, /*#__PURE__*/_react["default"].createElement(_input["default"], {
// size={"small"}
className: ((_styleSet$containerSt = styleSet.containerStyle) === null || _styleSet$containerSt === void 0 ? void 0 : _styleSet$containerSt.background) === 'transparent' ? _variables.bizCssPrefix + '-transparentInput' : '',
prefix: /*#__PURE__*/_react["default"].createElement(_icons.SearchOutlined, null),
allowClear: true,
placeholder: this.config.placeholderText,
maxLength: 20,
value: matchTxt,
onChange: function onChange(e) {
var value = e.target.value;
_this9.findMatchTree(value);
}
})), this.props.customToolBar ? this.props.customToolBar(this) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-subTitleBox'
}, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
title: '点击刷新'
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-directoryTitle',
onClick: function onClick() {
_this9.setState({
selectTreeNode: null
}, function () {
_this9.refreshTreeDataAction();
});
}
}, this.config.subTitle)), hasGroup ? (_Object$keys = Object.keys(expandKeys)) !== null && _Object$keys !== void 0 && _Object$keys.length ? /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
title: '全部收起'
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-closeAllIcon',
onClick: function onClick() {
_this9.closeAll();
}
})) : /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
title: '全部展开'
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-openAllIcon',
onClick: function onClick() {
_this9.openAll();
}
})) : null), /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-treeBox'
}, treeData && treeData.length > 0 ? /*#__PURE__*/_react["default"].createElement(_dndKitSortableTree.SortableTree, {
key: 'st_' + upDate,
items: treeData // 数据源
,
indentationWidth: this.config.childIndent // 子项距离
,
disableSorting: !(this !== null && this !== void 0 && (_this$config = this.config) !== null && _this$config !== void 0 && _this$config.couldDrag) // 禁止拖拽
,
disabled: true,
keepGhostInPlace: false // 拖拽保留原位
,
dndContextProps: {} // 覆盖 @dnd-kit 原始 DndContext 属性
,
sortableProps: {} // 覆盖 @dnd-kit 原始 useSortable 属性
,
pointerSensorOptions: {
activationConstraint: {
distance: 10
}
},
onItemsChanged: function onItemsChanged(newTreeData, reason) {
_this9.dealItemChanged(newTreeData, reason);
},
TreeItemComponent: /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
return /*#__PURE__*/_react["default"].createElement(_dndKitSortableTree.SimpleTreeItemWrapper, (0, _extends2["default"])({}, props, {
ref: ref,
manualDrag: false // 设置仅通过dragHandle抓取
,
showDragHandle: false // 是否显示dragHandle
}), _this9.drawTreeItem(props.item));
})
}) : this.state.matchTxt ? /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-noMatch'
}, "\u6CA1\u6709\u5339\u914D\"", this.state.matchTxt, "\"\u7684\u6570\u636E") : /*#__PURE__*/_react["default"].createElement("div", {
className: _variables.bizCssPrefix + '-noMatch02'
}, "\u6682\u65E0\u6570\u636E")));
}
// 收起所有
;
_proto.closeAll = function closeAll() {
var _this10 = this;
this.setState({
expandKeys: {}
}, function () {
_this10.refreshTreeDataAction(_this10.treeDataFull);
});
};
_proto.openAll = function openAll() {
var _this11 = this;
var defaultExpandedKeys = {};
var allNodes = _treeDataHandler["default"].searchTreeNodes(this.treeDataFull, function (item) {
return true;
}, false, 'children');
if (allNodes.length >= 0) {
allNodes.forEach(function (item) {
defaultExpandedKeys[item.id] = true;
});
}
this.setState({
expandKeys: defaultExpandedKeys
}, function () {
_this11.refreshTreeDataAction(_this11.treeDataFull);
});
}
// 通过关键词匹配节点
;
_proto.findMatchTree = function findMatchTree(value) {
var _this12 = this;
this.setState({
matchTxt: value
}, function () {
var filterResult = _this12.filterTreeData(_this12.treeDataFull, value);
_this12.setState({
treeData: filterResult.returnTree,
expandKeys: filterResult.pathKeys
});
});
}
// 过滤节点
;
_proto.filterTreeData = function filterTreeData(oldTree, matchTxt) {
var _this13 = this;
var pathKeys = []; // 哈希数组
oldTree = JSON.parse(JSON.stringify(oldTree));
if (!oldTree) {
return {
pathKeys: this.state.expandKeys,
returnTree: oldTree
};
}
if (!matchTxt) {
// 不再搜索
var expandedKeys = this.state.expandKeys;
// 如果有选择的值，则展开的键要算
if (this.state.selectTreeNode) {
expandedKeys = {};
var path = _treeDataHandler["default"].getNodeDeepPath(oldTree, function (o) {
return o.id === _this13.state.selectTreeNode.id;
}, 'children');
if (path.length >= 0) {
path.forEach(function (item) {
expandedKeys[item.id] = true;
});
}
}
// 给设置扩展属性
oldTree = _treeDataHandler["default"].recursionDeal(oldTree, function (item) {
// 是否展开
item.collapsed = !expandedKeys.hasOwnProperty(item.id);
return item;
});
return {
pathKeys: expandedKeys,
returnTree: oldTree
};
}
matchTxt = _.trim(matchTxt.toLowerCase());
var _find = function find(treeNode) {
if (!treeNode) {
return null;
}
// 判断子节点有没有找到
var childFindArr = [];
treeNode.children && treeNode.children.forEach(function (child) {
if (_find(child)) {
childFindArr.push(child);
}
});
if (childFindArr.length > 0) {
// 子找到了
treeNode.children = childFindArr;
treeNode.collapsed = false;
pathKeys[treeNode.id] = true;
return treeNode;
} else {
// 子没找到
var currentFindIndex = treeNode.title.toLowerCase().indexOf(matchTxt);
if (currentFindIndex !== -1) {
treeNode.matchTitleConfig = {
currentFindIndex: currentFindIndex,
matchTxt: matchTxt
};
return treeNode;
} else {
return null;
}
}
};
var newTree = [];
oldTree.forEach(function (item) {
if (_find(item)) {
newTree.push(item);
}
});
return {
pathKeys: pathKeys,
returnTree: newTree
};
}
// 返回数据之前，先处理字段映射
;
_proto.dealReturnItem = function dealReturnItem(data) {
var result = _treeDataHandler["default"].changeField(data, this.fieldsReverse, 'new', 'children');
return result;
}
// 处理编辑事件
;
_proto.dealItemAction =
/*#__PURE__*/
function () {
var _dealItemAction = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(targetTree, reason) {
var _this$props$onDelete, _this$props4, _this$props$onAddGrou, _this$props5, _this$props$onAddItem, _this$props6;
var depthMsg, _this$props$onEditGro, _this$props7, _this$props$onEditIte, _this$props8;
return _regenerator["default"].wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
_context4.t0 = reason.type;
_context4.next = _context4.t0 === 'delete' ? 3 : _context4.t0 === 'addGroup' ? 8 : _context4.t0 === 'addItem' ? 19 : _context4.t0 === 'edit' ? 24 : 36;
break;
case 3:
_context4.next = 5;
return (_this$props$onDelete = (_this$props4 = this.props).onDelete) === null || _this$props$onDelete === void 0 ? void 0 : _this$props$onDelete.call(_this$props4, this.dealReturnItem(targetTree));
case 5:
_context4.next = 7;
return this.refreshTreeDataAction();
case 7:
return _context4.abrupt("break", 36);
case 8:
if (!targetTree) {
_context4.next = 14;
break;
}
depthMsg = _treeDataHandler["default"].getNodeDeepPath(this.treeDataFull, function (item) {
return item.id === targetTree.id;
}, 'children');
console.log(depthMsg);
if (!((depthMsg === null || depthMsg === void 0 ? void 0 : depthMsg.length) >= this.config.maxLevel - 1)) {
_context4.next = 14;
break;
}
_modal["default"].info({
title: '提示',
content: '当前层级分组无法再创建子分组'
});
return _context4.abrupt("return");
case 14:
_context4.next = 16;
return (_this$props$onAddGrou = (_this$props5 = this.props).onAddGroup) === null || _this$props$onAddGrou === void 0 ? void 0 : _this$props$onAddGrou.call(_this$props5, targetTree ? this.dealReturnItem(targetTree) : null);
case 16:
_context4.next = 18;
return this.refreshTreeDataAction();
case 18:
return _context4.abrupt("break", 36);
case 19:
_context4.next = 21;
return (_this$props$onAddItem = (_this$props6 = this.props).onAddItem) === null || _this$props$onAddItem === void 0 ? void 0 : _this$props$onAddItem.call(_this$props6, targetTree ? this.dealReturnItem(targetTree) : null);
case 21:
_context4.next = 23;
return this.refreshTreeDataAction();
case 23:
return _context4.abrupt("break", 36);
case 24:
if (!(targetTree.isGroup === 1)) {
_context4.next = 31;
break;
}
_context4.next = 27;
return (_this$props$onEditGro = (_this$props7 = this.props).onEditGroup) === null || _this$props$onEditGro === void 0 ? void 0 : _this$props$onEditGro.call(_this$props7, this.dealReturnItem(targetTree));
case 27:
_context4.next = 29;
return this.refreshTreeDataAction();
case 29:
_context4.next = 35;
break;
case 31:
_context4.next = 33;
return (_this$props$onEditIte = (_this$props8 = this.props).onEditItem) === null || _this$props$onEditIte === void 0 ? void 0 : _this$props$onEditIte.call(_this$props8, this.dealReturnItem(targetTree));
case 33:
_context4.next = 35;
return this.refreshTreeDataAction();
case 35:
return _context4.abrupt("break", 36);
case 36:
case "end":
return _context4.stop();
}
}, _callee4, this);
}));
function dealItemAction(_x3, _x4) {
return _dealItemAction.apply(this, arguments);
}
return dealItemAction;
}() // 处理树结构变更
;
_proto.dealItemChanged =
/*#__PURE__*/
function () {
var _dealItemChanged = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(newTreeData, reason) {
var _reason$draggedFromPa, _reason$droppedToPare;
var expandKeys, _this$props$onSort, _this$props9, sortChildren, parentItem, newParentItem, _this$props$onChangeG, _this$props10, childItem, _parentItem, _sortChildren, _newParentItem;
return _regenerator["default"].wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
// console.warn("newTreeData",newTreeData);
// console.warn("reason",reason);
expandKeys = this.state.expandKeys;
_context5.t0 = reason.type;
_context5.next = _context5.t0 === 'expanded' ? 4 : _context5.t0 === 'collapsed' ? 7 : _context5.t0 === 'dropped' ? 10 : 38;
break;
case 4:
// 处理展开
expandKeys[reason.item.id] = true;
this.setState({
expandKeys: expandKeys,
treeData: newTreeData,
upDate: this.state.upDate + 1
});
return _context5.abrupt("break", 38);
case 7:
// 处理收起
delete expandKeys[reason.item.id];
this.setState({
expandKeys: expandKeys,
treeData: newTreeData,
upDate: this.state.upDate + 1
});
return _context5.abrupt("break", 38);
case 10:
if (!(((_reason$draggedFromPa = reason.draggedFromParent) === null || _reason$draggedFromPa === void 0 ? void 0 : _reason$draggedFromPa.id) === ((_reason$droppedToPare = reason.droppedToParent) === null || _reason$droppedToPare === void 0 ? void 0 : _reason$droppedToPare.id))) {
_context5.next = 20;
break;
}
// 父级没有改变，属于排序操作
sortChildren = [];
parentItem = null;
if (reason.draggedFromParent) {
parentItem = this.dealReturnItem(reason.draggedFromParent);
newParentItem = _treeDataHandler["default"].searchTreeNodeByField(newTreeData, {
field: 'id',
value: reason.draggedFromParent.id
}, 'children');
sortChildren = this.dealReturnItem(newParentItem.children);
} else {
// 顶层项目排序
parentItem = null;
sortChildren = this.dealReturnItem(newTreeData);
}
_context5.next = 16;
return (_this$props$onSort = (_this$props9 = this.props).onSort) === null || _this$props$onSort === void 0 ? void 0 : _this$props$onSort.call(_this$props9, parentItem, sortChildren, reason === null || reason === void 0 ? void 0 : reason.draggedItem);
case 16:
_context5.next = 18;
return this.refreshTreeDataAction();
case 18:
_context5.next = 37;
break;
case 20:
//父级发生改变，属于改变层级
childItem = reason.draggedItem;
_parentItem = null;
_sortChildren = [];
if (!reason.droppedToParent) {
_context5.next = 32;
break;
}
if (!(reason.droppedToParent.depth >= this.config.maxLevel - 2 && childItem.isGroup === 1)) {
_context5.next = 27;
break;
}
_modal["default"].info({
title: '提示',
content: '当前层级分组无法接收子分组'
});
return _context5.abrupt("return");
case 27:
_parentItem = this.dealReturnItem(reason.droppedToParent);
_newParentItem = _treeDataHandler["default"].searchTreeNodeByField(newTreeData, {
field: 'id',
value: reason.droppedToParent.id
}, 'children');
_sortChildren = this.dealReturnItem(_newParentItem.children);
_context5.next = 33;
break;
case 32:
_sortChildren = this.dealReturnItem(newTreeData);
case 33:
_context5.next = 35;
return (_this$props$onChangeG = (_this$props10 = this.props).onChangeGroup) === null || _this$props$onChangeG === void 0 ? void 0 : _this$props$onChangeG.call(_this$props10, _parentItem, this.dealReturnItem(childItem), _sortChildren);
case 35:
_context5.next = 37;
return this.refreshTreeDataAction();
case 37:
return _context5.abrupt("break", 38);
case 38:
case "end":
return _context5.stop();
}
}, _callee5, this);
}));
function dealItemChanged(_x5, _x6) {
return _dealItemChanged.apply(this, arguments);
}
return dealItemChanged;
}();
_proto.cloneItemAction = /*#__PURE__*/function () {
var _cloneItemAction = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6(newTreeData, reason) {
return _regenerator["default"].wrap(function _callee6$(_context6) {
while (1) switch (_context6.prev = _context6.next) {
case 0:
_context6.next = 2;
return this.props.onCloneItem(newTreeData, reason);
case 2:
case "end":
return _context6.stop();
}
}, _callee6, this);
}));
function cloneItemAction(_x7, _x8) {
return _cloneItemAction.apply(this, arguments);
}
return cloneItem