vxe-pc-ui 4.15.13 → 4.15.15

package/lib/tree/src/tree.js

@@ -18,6 +18,7 @@ var _anime = require("../../ui/src/anime");
 var _loading = _interopRequireDefault(require("../../loading"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
+  warnLog,
   errLog
 } = (0, _log.createComponentLog)('tree');
 const {
@@ -53,6 +54,8 @@ function createInternalData() {
       offsetSize: 0,
       rowHeight: 0
     },
+    removeRowMaps: {},
+    insertRowMaps: {},
     // prevDragNode: null,
     // prevDragToChild: false,
     // prevDragPos: ''
@@ -74,14 +77,13 @@ function createReactData() {
     treeList: [],
     updateExpandedFlag: 1,
     updateCheckboxFlag: 1,
+    insertRowFlag: 1,
+    removeRowFlag: 1,
     dragNode: null,
     dragTipText: ''
   };
 }
-// let crossTreeDragNodeObj: {
-//   $oldTree: VxeTreeConstructor & VxeTreePrivateMethods
-//   $newTree: (VxeTreeConstructor & VxeTreePrivateMethods) | null
-// } | null = null
+let crossTreeDragNodeObj = null;
 var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeTree',
   props: {
@@ -203,7 +205,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     },
     virtualYConfig: Object
   },
-  emits: ['update:modelValue', 'update:checkNodeKey', 'update:checkNodeKeys', 'node-click', 'node-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error', 'scroll', 'node-dragstart', 'node-dragover', 'node-dragend', 'node-expand', 'node-menu', 'menu-click'],
+  emits: ['update:modelValue', 'update:checkNodeKey', 'update:checkNodeKeys', 'node-click', 'node-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error', 'scroll', 'node-dragstart', 'node-dragover', 'node-dragend', 'node-remove-dragend', 'node-insert-dragend', 'node-expand', 'node-menu', 'menu-click'],
   setup(props, context) {
     const {
       emit,
@@ -1560,6 +1562,177 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       recalculate();
     };
+    const insertTreeNode = (newRecords, isAppend) => {
+      const {
+        treeFullData,
+        nodeMaps
+      } = internalData;
+      const keyField = computeKeyField.value;
+      const parentField = computeParentField.value;
+      const childrenField = computeChildrenField.value;
+      const mapChildrenField = computeMapChildrenField.value;
+      const funcName = isAppend ? 'push' : 'unshift';
+      newRecords.forEach(item => {
+        const parentRowId = item[parentField];
+        const nodeid = getNodeId(item);
+        const matchObj = parentRowId ? _xeUtils.default.findTree(treeFullData, item => parentRowId === item[keyField], {
+          children: mapChildrenField
+        }) : null;
+        const itemRest = (0, _util.getItemCacheObj)(item);
+        if (matchObj) {
+          const {
+            item: parentItem
+          } = matchObj;
+          const parentRest = nodeMaps[getNodeId(parentItem)];
+          const parentLevel = parentRest ? parentRest.level : 0;
+          let pChilds = parentItem[childrenField];
+          let pMapChilds = parentItem[mapChildrenField];
+          if (!_xeUtils.default.isArray(pChilds)) {
+            pChilds = parentItem[childrenField] = [];
+          }
+          if (!_xeUtils.default.isArray(pMapChilds)) {
+            pMapChilds = parentItem[mapChildrenField] = [];
+          }
+          itemRest.parent = parentItem;
+          itemRest.items = pChilds;
+          itemRest.level = parentLevel;
+          pChilds[funcName](item);
+          pMapChilds[funcName](item);
+        } else {
+          if (parentRowId) {
+            warnLog('vxe.error.unableInsert');
+          }
+          treeFullData[funcName](item);
+        }
+        nodeMaps[nodeid] = itemRest;
+      });
+    };
+    const handleInsertNodeAt = (records, targetNodeOrNodeid, isInsertNextNode) => {
+      const {
+        transform
+      } = props;
+      const {
+        treeFullData,
+        nodeMaps
+      } = internalData;
+      const keyField = computeKeyField.value;
+      const parentField = computeParentField.value;
+      const childrenField = computeChildrenField.value;
+      const mapChildrenField = computeMapChildrenField.value;
+      if (!transform) {
+        errLog('vxe.error.reqSupportProp', ['insert() | insertAt() | insertNextAt()', 'transform']);
+        return Promise.resolve({
+          node: null,
+          nodes: []
+        });
+      }
+      if (!_xeUtils.default.isArray(records)) {
+        records = [records];
+      }
+      let targetNode = targetNodeOrNodeid;
+      if (_xeUtils.default.isString(targetNodeOrNodeid) || _xeUtils.default.isNumber(targetNodeOrNodeid)) {
+        const nodeRest = nodeMaps[targetNodeOrNodeid];
+        if (nodeRest) {
+          targetNode = nodeRest.item;
+        }
+      }
+      if (!records.length) {
+        return Promise.resolve({
+          node: null,
+          nodes: []
+        });
+      }
+      const newRecords = records.map(record => _xeUtils.default.assign({
+        [mapChildrenField]: [],
+        [childrenField]: []
+      }, record));
+      const treeRecords = _xeUtils.default.toArrayTree(newRecords, {
+        key: keyField,
+        parentKey: parentField,
+        children: childrenField
+      });
+      if (_xeUtils.default.eqNull(targetNode)) {
+        insertTreeNode(newRecords, false);
+      } else {
+        if (targetNode === -1) {
+          insertTreeNode(newRecords, true);
+        } else {
+          const matchMapObj = _xeUtils.default.findTree(treeFullData, item => targetNode[keyField] === item[keyField], {
+            children: mapChildrenField
+          });
+          if (matchMapObj) {
+            const {
+              parent: parentNode
+            } = matchMapObj;
+            const parentMapChilds = parentNode ? parentNode[mapChildrenField] : treeFullData;
+            const parentRest = nodeMaps[getNodeId(parentNode)];
+            const parentLevel = parentRest ? parentRest.level : 0;
+            treeRecords.forEach((row, i) => {
+              if (parentNode) {
+                if (row[parentField] !== parentNode[keyField]) {
+                  errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, `${parentField}=${parentNode[keyField]}`]);
+                  row[parentField] = parentNode[keyField];
+                }
+              } else {
+                if (row[parentField] !== null) {
+                  if (!_xeUtils.default.eqNull(row[parentField])) {
+                    errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, 'null']);
+                  }
+                  row[parentField] = null;
+                }
+              }
+              let targetIndex = matchMapObj.index + i;
+              if (isInsertNextNode) {
+                targetIndex = targetIndex + 1;
+              }
+              parentMapChilds.splice(targetIndex, 0, row);
+            });
+            _xeUtils.default.eachTree(treeRecords, item => {
+              const nodeid = getNodeId(item);
+              const nodeRest = (0, _util.getItemCacheObj)(item);
+              nodeRest.level = parentLevel;
+              if (item[childrenField]) {
+                item[mapChildrenField] = item[childrenField];
+              }
+              nodeMaps[nodeid] = nodeRest;
+            }, {
+              children: childrenField
+            });
+            // 源
+            if (parentNode) {
+              const matchObj = _xeUtils.default.findTree(treeFullData, item => targetNode[keyField] === item[keyField], {
+                children: childrenField
+              });
+              if (matchObj) {
+                const parentChilds = matchObj.items;
+                let targetIndex = matchObj.index;
+                if (isInsertNextNode) {
+                  targetIndex = targetIndex + 1;
+                }
+                parentChilds.splice(targetIndex, 0, ...treeRecords);
+              }
+            }
+          } else {
+            warnLog('vxe.error.unableInsert');
+            insertTreeNode(newRecords, true);
+          }
+        }
+      }
+      reactData.insertRowFlag++;
+      cacheNodeMap();
+      handleData(true);
+      updateAfterDataIndex();
+      updateCheckboxStatus();
+      if (reactData.scrollYLoad) {
+        updateYSpace();
+      }
+      return (0, _vue.nextTick)().then(() => {
+        return {
+          node: newRecords.length ? newRecords[newRecords.length - 1] : null,
+          nodes: newRecords
+        };
+      });
+    };
     const treeMethods = {
       dispatchEvent,
       getNodeId,
@@ -2041,7 +2214,110 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
         return recalculate();
       },
-      clearScroll
+      clearScroll,
+      insert(records) {
+        return handleInsertNodeAt(records, null);
+      },
+      insertAt(records, targetNodeOrNodeid) {
+        return handleInsertNodeAt(records, targetNodeOrNodeid);
+      },
+      insertNextAt(records, targetNodeOrNodeid) {
+        return handleInsertNodeAt(records, targetNodeOrNodeid, true);
+      },
+      remove(nodes) {
+        const {
+          transform
+        } = props;
+        const {
+          treeFullData
+        } = internalData;
+        const childrenField = computeChildrenField.value;
+        const mapChildrenField = computeMapChildrenField.value;
+        if (!transform) {
+          errLog('vxe.error.reqSupportProp', ['remove()', 'transform']);
+          return Promise.resolve({
+            node: null,
+            nodes: []
+          });
+        }
+        let delList = [];
+        if (!nodes) {
+          nodes = treeFullData;
+        } else if (!_xeUtils.default.isArray(nodes)) {
+          nodes = [nodes];
+        }
+        if (!nodes.length) {
+          return Promise.resolve({
+            node: null,
+            nodes: []
+          });
+        }
+        // 从数据源中移除
+        if (treeFullData === nodes) {
+          nodes = delList = treeFullData.slice(0);
+          internalData.treeFullData = [];
+        } else {
+          nodes.forEach(item => {
+            const nodeid = getNodeId(item);
+            const matchMapObj = _xeUtils.default.findTree(treeFullData, item => nodeid === getNodeId(item), {
+              children: mapChildrenField
+            });
+            if (matchMapObj) {
+              const rItems = matchMapObj.items.splice(matchMapObj.index, 1);
+              delList.push(rItems[0]);
+            }
+            const matchObj = _xeUtils.default.findTree(treeFullData, item => nodeid === getNodeId(item), {
+              children: childrenField
+            });
+            if (matchObj) {
+              const rItems = matchObj.items.splice(matchObj.index, 1);
+              delList.push(rItems[0]);
+            }
+          });
+        }
+        reactData.removeRowFlag++;
+        reactData.insertRowFlag++;
+        cacheNodeMap();
+        handleData(true);
+        updateAfterDataIndex();
+        updateCheckboxStatus();
+        if (reactData.scrollYLoad) {
+          updateYSpace();
+        }
+        return (0, _vue.nextTick)().then(() => {
+          return recalculate();
+        }).then(() => {
+          return {
+            node: delList.length ? delList[delList.length - 1] : null,
+            nodes: delList
+          };
+        });
+      },
+      getInsertRecords() {
+        const {
+          insertRowMaps
+        } = internalData;
+        const insertRecords = [];
+        _xeUtils.default.each(insertRowMaps, row => {
+          insertRecords.push(row);
+        });
+        return insertRecords;
+      },
+      getRemoveRecords() {
+        const {
+          removeRowMaps
+        } = internalData;
+        const removeRecords = [];
+        _xeUtils.default.each(removeRowMaps, row => {
+          removeRecords.push(row);
+        });
+        return removeRecords;
+      }
+    };
+    const handleNodeDragEndClearStatus = () => {
+      clearNodeDragData();
+      clearCrossTreeDragStatus();
+      recalculate();
     };
     const clearNodeDropOrigin = () => {
       const el = refElem.value;
@@ -2095,7 +2371,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
     };
     const clearCrossTreeDragStatus = () => {
-      // crossTreeDragNodeObj = null
+      crossTreeDragNodeObj = null;
       crossTreeDragNodeInfo.node = null;
     };
     const clearDragStatus = () => {
@@ -2492,6 +2768,23 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         prevDragToChild
       } = internalData;
       const hasChildField = computeHasChildField.value;
+      const dragConfig = computeDragOpts.value;
+      const {
+        isCrossDrag,
+        isCrossTreeDrag
+      } = dragConfig;
+      // 跨树拖拽
+      if (isCrossTreeDrag && crossTreeDragNodeObj) {
+        const {
+          $newTree
+        } = crossTreeDragNodeObj;
+        if ($newTree && $newTree.xID !== $xeTree.xID) {
+          if (isCrossDrag) {
+            $newTree.handleCrossTreeNodeDragInsertEvent(evnt);
+          }
+          return;
+        }
+      }
       if (lazy && prevDragToChild) {
         // 懒加载
         const newNodeid = getNodeId(prevDragNode);
@@ -2578,15 +2871,228 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       /**
        * 处理跨树拖拽完成
        */
-      handleCrossTreeNodeDragFinishEvent() {},
+      handleCrossTreeNodeDragFinishEvent(evnt) {
+        const {
+          treeList
+        } = reactData;
+        const {
+          nodeMaps
+        } = internalData;
+        const dragOpts = computeDragOpts.value;
+        const {
+          animation,
+          isCrossTreeDrag
+        } = dragOpts;
+        const mapChildrenField = computeMapChildrenField.value;
+        const el = refElem.value;
+        if (!el) {
+          return;
+        }
+        if (isCrossTreeDrag && crossTreeDragNodeObj && crossTreeDragNodeInfo) {
+          const {
+            node: dragNode
+          } = crossTreeDragNodeInfo;
+          if (dragNode) {
+            const dragNodeid = getNodeId(dragNode);
+            const dragNodeRest = nodeMaps[dragNodeid];
+            let dragNodeHeight = 0;
+            let rsIndex = -1;
+            if (dragNodeRest) {
+              if (animation) {
+                const oldItemEl = el.querySelector(`.vxe-tree--node-wrapper[nodeid="${dragNodeid}"]`);
+                const targetItemEl = oldItemEl;
+                if (targetItemEl) {
+                  dragNodeHeight = targetItemEl.offsetHeight;
+                }
+              }
+              rsIndex = dragNodeRest.$index;
+            }
+            const dragRangeList = rsIndex > -1 && rsIndex < treeList.length - 1 ? treeList.slice(rsIndex + 1) : [];
+            const dragList = _xeUtils.default.toTreeArray([dragNode], {
+              updated: true,
+              children: mapChildrenField
+            });
+            $xeTree.remove(dragList).then(() => {
+              if (animation && dragNodeHeight && dragRangeList.length) {
+                const wrapperEl = el;
+                const dtClss = [];
+                dragRangeList.forEach(item => {
+                  const nodeid = getNodeId(item);
+                  dtClss.push(`.vxe-tree--node-wrapper[nodeid="${nodeid}"]`);
+                });
+                const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                (0, _anime.moveRowAnimateToTb)(dtTrList, dragNodeHeight);
+              }
+            });
+            dispatchEvent('node-remove-dragend', {
+              node: dragNode
+            }, evnt);
+            handleNodeDragEndClearStatus();
+          }
+        }
+      },
       /**
        * 处理跨树拖至新的空树
        */
-      handleCrossTreeNodeDragInsertEvent() {},
+      handleCrossTreeNodeDragoverEmptyEvent(evnt) {
+        const {
+          treeList
+        } = reactData;
+        const dragOpts = computeDragOpts.value;
+        const {
+          isCrossTreeDrag
+        } = dragOpts;
+        if (isCrossTreeDrag && crossTreeDragNodeObj && !treeList.length) {
+          const {
+            $oldTree,
+            $newTree
+          } = crossTreeDragNodeObj;
+          if ($oldTree) {
+            const oldTreeReactData = $oldTree;
+            if ($oldTree.xID !== $xeTree.xID) {
+              if ($newTree && $newTree.xID !== $xeTree.xID) {
+                $newTree.hideCrossTreeNodeDropClearStatus();
+              }
+              evnt.preventDefault();
+              $oldTree.hideCrossTreeNodeDropClearStatus();
+              crossTreeDragNodeObj.$newTree = $xeTree;
+              internalData.prevDragNode = null;
+              reactData.dragTipText = oldTreeReactData.dragTipText;
+              showDropTip(evnt, evnt.currentTarget, true, '');
+            }
+          }
+        }
+      },
       /**
        * 处理跨树拖插入
        */
-      handleCrossTreeNodeDragoverEmptyEvent() {},
+      handleCrossTreeNodeDragInsertEvent(evnt) {
+        const {
+          prevDragNode,
+          prevDragPos,
+          prevDragToChild
+        } = internalData;
+        const dragOpts = computeDragOpts.value;
+        const {
+          animation,
+          isSelfToChildDrag,
+          isCrossTreeDrag,
+          dragEndMethod,
+          dragToChildMethod
+        } = dragOpts;
+        const parentField = computeParentField.value;
+        const mapChildrenField = computeMapChildrenField.value;
+        const childrenField = computeChildrenField.value;
+        // 跨表拖拽
+        if (isCrossTreeDrag && crossTreeDragNodeObj && crossTreeDragNodeInfo) {
+          const {
+            node: oldNode
+          } = crossTreeDragNodeInfo;
+          const {
+            $oldTree
+          } = crossTreeDragNodeObj;
+          const el = refElem.value;
+          if (!el) {
+            return;
+          }
+          if ($oldTree && oldNode) {
+            const dragNode = oldNode;
+            let dragOffsetIndex = -1;
+            if (prevDragNode) {
+              dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+            }
+            const dragParams = {
+              oldNode: dragNode,
+              newNode: prevDragNode,
+              dragNode,
+              dragPos: prevDragPos,
+              dragToChild: !!prevDragToChild,
+              offsetIndex: dragOffsetIndex
+            };
+            const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
+            const errRest = {
+              status: false
+            };
+            Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then(status => {
+              if (!status) {
+                if ($oldTree) {
+                  if ($oldTree.xID !== $xeTree.xID) {
+                    $oldTree.handleCrossTreeNodeDragCancelEvent(evnt);
+                  }
+                }
+                handleNodeDragEndClearStatus();
+                return errRest;
+              }
+              let insertRest = Promise.resolve();
+              const dragList = _xeUtils.default.toTreeArray([dragNode], {
+                updated: true,
+                children: mapChildrenField
+              });
+              $oldTree.handleCrossTreeNodeDragFinishEvent(evnt);
+              if (prevDragNode) {
+                dragNode[parentField] = prevDragNode[parentField];
+              } else {
+                dragNode[parentField] = null;
+              }
+              dragList.forEach(row => {
+                row[childrenField] = undefined;
+                row[mapChildrenField] = undefined;
+              });
+              if (prevDragNode) {
+                if (prevDragPos === 'bottom') {
+                  insertRest = $xeTree.insertNextAt(dragList, prevDragNode);
+                } else {
+                  insertRest = $xeTree.insertAt(dragList, prevDragNode);
+                }
+              } else {
+                insertRest = $xeTree.insert(dragList);
+              }
+              $xeTree.dispatchEvent('node-insert-dragend', {
+                oldNode,
+                newNode: prevDragNode,
+                dragNode,
+                dragPos: prevDragPos,
+                dragToChild: isDragToChildFlag,
+                offsetIndex: dragOffsetIndex
+              }, evnt);
+              clearNodeDragData();
+              insertRest.then(() => {
+                const {
+                  treeList
+                } = reactData;
+                const {
+                  nodeMaps
+                } = internalData;
+                const oldNodeid = getNodeId(dragNode);
+                const oldNodeRest = nodeMaps[oldNodeid];
+                let dragNodeHeight = 0;
+                let rsIndex = -1;
+                if (oldNodeRest) {
+                  if (animation) {
+                    const oldItemEl = el.querySelector(`.vxe-tree--node-wrapper[nodeid="${oldNodeid}"]`);
+                    const targetItemEl = oldItemEl;
+                    if (targetItemEl) {
+                      dragNodeHeight = targetItemEl.offsetHeight;
+                    }
+                  }
+                  rsIndex = oldNodeRest.$index;
+                }
+                const dragRangeList = rsIndex > -1 ? treeList.slice(rsIndex) : [];
+                if (animation && dragNodeHeight && dragRangeList.length) {
+                  const wrapperEl = el;
+                  const dtClss = [];
+                  dragRangeList.forEach(item => {
+                    const nodeid = getNodeId(item);
+                    dtClss.push(`.vxe-tree--node-wrapper[nodeid="${nodeid}"]`);
+                  });
+                  const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                  (0, _anime.moveRowAnimateToTb)(dtTrList, -dragNodeHeight);
+                }
+              });
+            });
+          }
+        }
+      },
       hideCrossTreeNodeDropClearStatus() {
         hideDropTip();
       }
@@ -2924,10 +3430,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const loadingOpts = computeLoadingOpts.value;
       const isRowHover = computeIsRowHover.value;
       const treeStyle = computeTreeStyle.value;
+      const dragOpts = computeDragOpts.value;
       const loadingSlot = slots.loading;
       const headerSlot = slots.header;
       const footerSlot = slots.footer;
-      return (0, _vue.h)('div', {
+      const teOns = {};
+      if (dragOpts.isCrossTreeDrag && !treeList.length) {
+        teOns.onDragover = $xeTree.handleCrossTreeNodeDragInsertEvent;
+      }
+      return (0, _vue.h)('div', Object.assign({
         ref: refElem,
         class: ['vxe-tree', {
           [`size--${vSize}`]: vSize,
@@ -2938,7 +3449,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'node--trigger': trigger === 'node',
           'is--loading': loading
         }]
-      }, [headerSlot ? (0, _vue.h)('div', {
+      }, teOns), [headerSlot ? (0, _vue.h)('div', {
         ref: refHeaderWrapperElem,
         class: 'vxe-tree--header-wrapper'
       }, headerSlot({
@@ -3041,8 +3552,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (drag && !transform) {
         errLog('vxe.error.notSupportProp', ['drag', 'transform=false', 'transform=true']);
       }
-      if (dragOpts.isCrossTreeDrag) {
-        errLog('vxe.error.notProp', ['drag-config.isCrossTreeDrag']);
+      if (dragOpts.isCrossTreeDrag && !dragOpts.isCrossDrag) {
+        errLog('vxe.error.reqSupportProp', ['drag-config.isCrossTreeDrag', 'drag-config.isCrossDrag']);
       }
       // if (valueField) {
       //   errLog('vxe.error.delProp', ['value-field', 'value-field'])