个人自学前端45-树组件拖拽排序

目录

/**
     * 拖拽成功
     * 目前需求：目录只有2级，需支持同级拖拽
     * @param draggingNode 拖拽的节点数据
     * @param dropNode 结束拖拽的最后进入节点数据
     * @param type before after inner
     */
    nodeDrop(draggingNode, dropNode, type) {
      // TODO 目前不可能存在 type == "inner" ，为后续预留
      // 当拖拽类型不为inner,说明只是同级或者跨级排序，只需要寻找目标节点的父ID，获取其对象以及所有的子节点，并为子节点设置当前对象的ID为父ID即可
      // 当拖拽类型为inner，说明拖拽节点成为了目标节点的子节点，只需要获取目标节点对象即可
      const data = type != "inner" ? dropNode.parent.data : dropNode.data;
      const nodeData = dropNode.level == 1 && type != "inner" ? data : data.children;
      // 循环调用接口更新数据
      for (let i = 0; i < nodeData.length; i++) {
        let obj = {...nodeData[i], ...{
          sortNo: i,
        }}
       // 调接口
        await this.$api.Menu.updateById(obj)
      }
      // 如果有批量修改接口
      // await this.$api.Menu.batchUpdateById(nodeData)