@luck-design-biz/luckda 0.0.27 → 1.0.0-alpha

package/es/components/LdTree/index.js

@@ -1,12 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["columns", "resources", "actions", "doAction", "wrapperRef", "ldId", "dataSetKey", "defaultParmas", "moduleCode", "readOnly", "title", "rowKey", "treeNodeTitle", "unselectableNodes", "rightMenus", "defaultExpandDeep", "draggable", "onDrop", "className", "treeClassName", "rootAdd", "suppressInit", "afterQuery", "afterInit", "isTree", "service", "dataToTreeFormat"],
-  _excluded2 = ["onClick"];
-import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react';
-import { isFunction, isNumber, transform, includes, remove, cloneDeep, keys } from 'lodash';
+var _excluded = ["columns", "resources", "actions", "doAction", "wrapperRef", "ldId", "dataSetKey", "defaultParmas", "moduleCode", "readOnly", "title", "rowKey", "treeNodeTitle", "unselectableNodes", "rightMenus", "defaultExpandDeep", "draggable", "onDrop", "className", "treeClassName", "rootAdd", "suppressInit", "afterQuery", "afterInit", "isTree", "service", "dataToTreeFormat", "boxRef", "doubleClickExpand", "onNodeDoubleClick", "width", "height", "treeNodeCheckable", "treeNodeDisableCheckbox", "treeNodeDisable", "treeNodeIcon", "asyncLoad", "parentKey", "onMount", "onUnmount", "onDataSetChange", "onTreeNodeRender", "onlyRoot"],
+  _excluded2 = ["0"],
+  _excluded3 = ["onClick"];
+import React, { useState, useRef, useImperativeHandle, forwardRef, useLayoutEffect } from 'react';
+import { isFunction, isNumber, transform, includes, remove, cloneDeep, isNil, differenceBy, groupBy, forEach, assign } from 'lodash';
 import { useRequest, useMemoizedFn, useCreation } from 'ahooks';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -17,6 +19,18 @@ import { TreeBox } from '@luck-design-biz/base';
 import ldBuilder from "../../helper/ldBuilder";
 import { behaviorCall } from "../../utils";
 import styles from "./index.less";
+var _window$appConfig$con = window.appConfig.constraintKeys,
+  PRIMARY = _window$appConfig$con.PRIMARY,
+  PARENT = _window$appConfig$con.PARENT;
+var deepForEach = function deepForEach(children, deepForEachFn) {
+  forEach(children, function (child) {
+    var _child$children;
+    if (((_child$children = child.children) === null || _child$children === void 0 ? void 0 : _child$children.length) > 0) {
+      deepForEach(child.children, deepForEachFn);
+    }
+    deepForEachFn(child);
+  });
+};
 var LdTree = function LdTree(_ref) {
   var columns = _ref.columns,
     resources = _ref.resources,
@@ -45,9 +59,25 @@ var LdTree = function LdTree(_ref) {
     isTree = _ref.isTree,
     service = _ref.service,
     dataToTreeFormat = _ref.dataToTreeFormat,
+    boxRef = _ref.boxRef,
+    doubleClickExpand = _ref.doubleClickExpand,
+    onNodeDoubleClick = _ref.onNodeDoubleClick,
+    width = _ref.width,
+    height = _ref.height,
+    treeNodeCheckable = _ref.treeNodeCheckable,
+    treeNodeDisableCheckbox = _ref.treeNodeDisableCheckbox,
+    treeNodeDisable = _ref.treeNodeDisable,
+    treeNodeIcon = _ref.treeNodeIcon,
+    asyncLoad = _ref.asyncLoad,
+    parentKey = _ref.parentKey,
+    onMount = _ref.onMount,
+    onUnmount = _ref.onUnmount,
+    onDataSetChange = _ref.onDataSetChange,
+    onTreeNodeRender = _ref.onTreeNodeRender,
+    onlyRoot = _ref.onlyRoot,
     props = _objectWithoutProperties(_ref, _excluded);
   if (!includes(isTree, dataSetKey)) return formatMessage({
-    id: 'luckda.ldTree.notTres',
+    id: 'luckda.ldTree.notTrees',
     label: '此数据集非树形数据集，请选择树形数据集'
   });
   var _useState = useState(null),
@@ -59,11 +89,16 @@ var LdTree = function LdTree(_ref) {
     defaultExpandedProps = _useState4[0],
     setDefaultExpandedProps = _useState4[1];
   var treeRef = useRef(null);
-  var defaultParams = [_objectSpread({
-    moduleCode: moduleCode,
-    datasetCode: dataSetKey,
-    behaviorKey: 'readTree'
-  }, _defaultParmas)];
+  var onceRef = useRef(true);
+  var defaultParams = useCreation(function () {
+    var _params = [_objectSpread({
+      moduleCode: moduleCode,
+      datasetCode: dataSetKey,
+      behaviorKey: 'readTree'
+    }, _defaultParmas)];
+    if (asyncLoad) _params[0][parentKey] = 0;
+    return _params;
+  }, []);
   var _useRequest = useRequest(service || behaviorCall, {
       // 获取树数据源
       defaultParams: defaultParams,
@@ -92,24 +127,73 @@ var LdTree = function LdTree(_ref) {
           }
           var treeData = dataToTreeFormat ? dataToTreeFormat(data) : dataToTree(data, null, window.appConfig.constraintKeys.PRIMARY, window.appConfig.constraintKeys.PARENT);
           setDataSource(treeData);
-          afterInit && afterInit(treeData);
+          onceRef.current && afterInit && afterInit(treeData, data);
+          onceRef.current = false;
         }
       }
     }),
     loading = _useRequest.loading,
     run = _useRequest.run,
     params = _useRequest.params;
+  var onLdQuery = useMemoizedFn(function () {
+    var _params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    run(_objectSpread(_objectSpread(_objectSpread({}, params[0]), _params), defaultParams[0]));
+  });
+  var handleUpdateTree = function handleUpdateTree(type, nodes) {
+    var data = cloneDeep(dataSource);
+    var nodesGroup = groupBy(nodes.map(function (i) {
+      return _objectSpread(_objectSpread({}, i), {}, _defineProperty({}, PARENT, i[PARENT] || 0));
+    }), PARENT);
+    var rootList = nodesGroup[0],
+      restGroup = _objectWithoutProperties(nodesGroup, _excluded2);
+    switch (type) {
+      case 'delete':
+        if (rootList) data = differenceBy(data, rootList, window.appConfig.constraintKeys.PRIMARY);else deepForEach(data, function (child) {
+          if (restGroup[child[PRIMARY]]) {
+            var _child$children2;
+            if (((_child$children2 = child.children) === null || _child$children2 === void 0 ? void 0 : _child$children2.length) <= restGroup[child[PRIMARY]].length) child.isleaf = true;
+            child.children = differenceBy(child.children, restGroup[child[PRIMARY]], window.appConfig.constraintKeys.PRIMARY);
+          }
+        });
+        break;
+      case 'add':
+        if (rootList) data = data.concat(rootList);else deepForEach(data, function (child) {
+          if (restGroup[child[PRIMARY]]) {
+            child.isleaf = false;
+            child.children = [].concat(_toConsumableArray(child.children || []), _toConsumableArray(restGroup[child[PRIMARY]]));
+          }
+        });
+        break;
+      default:
+        deepForEach(data, function (child) {
+          var findNode = nodes.find(function (n) {
+            return n[PRIMARY] === child[PRIMARY];
+          });
+          if (findNode) {
+            assign(child, findNode);
+          }
+        });
+    }
+    setDataSource(data);
+  };
   useImperativeHandle(wrapperRef, function () {
     return _objectSpread(_objectSpread({}, treeRef.current), {}, {
-      onLdQuery: function onLdQuery() {
-        var _params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        run(_objectSpread(_objectSpread(_objectSpread({}, params[0]), _params), defaultParams[0]));
-      }
+      onLdQuery: onLdQuery,
+      updateTree: handleUpdateTree
     });
   });
+  useLayoutEffect(function () {
+    onMount && onMount(_objectSpread(_objectSpread({}, params[0]), defaultParams[0]));
+    return function () {
+      onUnmount && onUnmount();
+    };
+  }, []);
+  useLayoutEffect(function () {
+    onDataSetChange && onDataSetChange(onLdQuery);
+  }, [dataSetKey]);
   var handleMenuClick = function handleMenuClick(menu, data) {
     var onClick = menu.onClick,
-      other = _objectWithoutProperties(menu, _excluded2);
+      other = _objectWithoutProperties(menu, _excluded3);
     onClick && onClick(other, data);
   };
   var renderRightMenus = function renderRightMenus(menus, data) {
@@ -119,7 +203,8 @@ var LdTree = function LdTree(_ref) {
           return handleMenuClick(menu, data);
         },
         className: styles.rightMenu,
-        key: menu.key
+        key: menu.key,
+        style: menu.style
       }, menu.name || '');
     });
   };
@@ -139,11 +224,23 @@ var LdTree = function LdTree(_ref) {
       type: "more"
     }));
   };
+  var handleNodeDoubleClick = useMemoizedFn(function (e) {
+    var switcher = e.currentTarget.closest('li').querySelector('.ant-tree-switcher');
+    switcher.click();
+  });
+  var handleDoubleClick = useMemoizedFn(function (e, rowData) {
+    if (doubleClickExpand) handleNodeDoubleClick(e);
+    if (onNodeDoubleClick) onNodeDoubleClick(e, rowData);
+  });
   var renderTitleNode = function renderTitleNode(data, unSelectable) {
     var nodeTitle = isFunction(treeNodeTitle) ? treeNodeTitle(data) : data[treeNodeTitle];
+    if (onTreeNodeRender) nodeTitle = onTreeNodeRender(nodeTitle, data);
     return /*#__PURE__*/React.createElement("div", {
       className: styles.nodeTitle,
-      key: data[rowKey]
+      key: data[rowKey],
+      onDoubleClick: function onDoubleClick(e) {
+        return handleDoubleClick(e, data);
+      }
     }, /*#__PURE__*/React.createElement("div", {
       title: nodeTitle,
       className: classNames(_defineProperty({}, styles.nodeTitleDisabled, unSelectable))
@@ -153,45 +250,93 @@ var LdTree = function LdTree(_ref) {
     return data.map(function (item) {
       // 判断是否可选择
       var unSelectable = isFunction(unselectableNodes) ? unselectableNodes(item) : unselectableNodes.includes(item[rowKey]);
-      if (item.children) {
-        return /*#__PURE__*/React.createElement(LuckTree.TreeNode, {
-          isLeaf: false,
-          title: renderTitleNode(item, unSelectable),
-          key: item[rowKey],
-          dataRef: item,
-          selectable: !unSelectable
-        }, renderTreeNodes(item.children));
-      }
-      return /*#__PURE__*/React.createElement(LuckTree.TreeNode, {
+      var props = {
         title: renderTitleNode(item, unSelectable),
         key: item[rowKey],
         dataRef: item,
-        selectable: !unSelectable
-      });
+        selectable: !unSelectable,
+        checkable: treeNodeCheckable && treeNodeCheckable(item),
+        disableCheckbox: treeNodeDisableCheckbox && treeNodeDisableCheckbox(item),
+        disabled: treeNodeDisable && treeNodeDisable(item)
+      };
+      if (treeNodeIcon && !isNil(treeNodeIcon(item))) props.icon = treeNodeIcon(item);
+      if (!item.isleaf && !isNil(item.isleaf)) {
+        return /*#__PURE__*/React.createElement(LuckTree.TreeNode, _extends({
+          isLeaf: false
+        }, props), renderTreeNodes(item.children || []));
+      }
+      return /*#__PURE__*/React.createElement(LuckTree.TreeNode, _extends({
+        isLeaf: true
+      }, props));
     });
   });
   var handleDrop = useMemoizedFn(function (info) {
     var dragInfo = dragTreeData(info, dataSource);
-    onDrop && onDrop(info, dragInfo);
+    if (onDrop) onDrop(info, dragInfo);else if (dragInfo !== false) {
+      doAction('drag', {
+        get: {
+          datasetCode: dataSetKey
+        },
+        post: {
+          fromId: info.dragNode.props.dataRef[PRIMARY],
+          toId: info.node.props.dataRef[PRIMARY]
+        }
+      }, {
+        showConfirm: false,
+        callback: function callback(success) {
+          return success && onLdQuery();
+        }
+      });
+    }
   });
   var onAdd = useCreation(function () {
-    return !(readOnly || !rootAdd || rootAdd.resource && !includes(resources, rootAdd.resource)) ? function () {
+    return !(readOnly || !rootAdd || rootAdd.resource && !includes(resources, rootAdd.resource) || onlyRoot && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0) ? function () {
       return handleMenuClick(rootAdd);
     } : null;
   }, [readOnly, rootAdd, resources]);
+  var onLoadData = useMemoizedFn(function (treeNode) {
+    return new Promise(function (resolve) {
+      if (treeNode.props.isLeaf) {
+        resolve();
+        return;
+      }
+      (service || behaviorCall)(_objectSpread(_objectSpread({}, params[0]), {}, _defineProperty({}, parentKey, treeNode.props.dataRef[window.appConfig.constraintKeys.PRIMARY]))).then(function (res) {
+        var code = res.code,
+          list = res.list,
+          detail = res.detail;
+        if (code === 1) {
+          treeNode.props.dataRef.children = list.map(function (i) {
+            return detail[i];
+          });
+          setDataSource(_toConsumableArray(dataSource));
+          resolve();
+        }
+      });
+    });
+  });
+  var asyncLoadData = useCreation(function () {
+    return asyncLoad ? {
+      loadData: onLoadData
+    } : {};
+  }, []);
   return /*#__PURE__*/React.createElement(TreeBox, {
     suppressTitle: !title,
     title: title,
     loading: loading,
     id: ldId,
     onAdd: onAdd,
-    className: className
+    className: className,
+    ref: boxRef,
+    style: {
+      width: width,
+      height: height
+    }
   }, dataSource && /*#__PURE__*/React.createElement(LuckTree, _extends({
     blockNode: true,
     className: classNames(styles.tree, _defineProperty({}, className, !!treeClassName)),
     draggable: !readOnly && draggable,
     onDrop: handleDrop
-  }, defaultExpandedProps, props, {
+  }, asyncLoadData, defaultExpandedProps, props, {
     ref: treeRef
   }), renderTreeNodes(dataSource)));
 };
@@ -223,7 +368,9 @@ Index.propTypes = {
   // 行为
   suppressInit: PropTypes.bool,
   // 抑制初始化
-  afterInit: PropTypes.func // 初始化后
+  afterInit: PropTypes.func,
+  // 初始化后
+  parentKey: PropTypes.string
 };
 Index.defaultProps = {
   readOnly: false,
@@ -238,7 +385,8 @@ Index.defaultProps = {
     return [];
   },
   suppressInit: false,
-  defaultParmas: {}
+  defaultParmas: {},
+  parentKey: 'iparentid'
 };
 export default /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Index, _extends({

package/es/components/LdTree/index.less

@@ -3,6 +3,7 @@
     display: flex;
     align-items: center;
     width: 100%;
+    user-select: none;
 
     div {
       flex: 1;
@@ -10,9 +11,11 @@
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+
     div.nodeTitleDisabled {
       color: var(--luck-text-color-disabled);
     }
+
     div.nodeTitleDisabled:hover {
       cursor: not-allowed;
     }
@@ -24,13 +27,15 @@
     }
   }
 }
+
 .classTreeOperates {
   :global(.ant-popover-inner-content) {
     padding: 0;
   }
+
   .rightMenu {
     display: block;
     padding: 4px 8px;
     color: var(--luck-text-color-);
   }
-}
+}