960 Star 5.1K Fork 1.6K

GVPsmallwei / Avue

 / 详情

flow流程组件删除节点后功能异常

已完成
创建于  
2020-05-27 16:42

版本:v2.5.3

错误描述

示例页面avue/examples/element-ui/flow/index.html
流程示例页面
步骤:
1.点击确认删除“节点B”;
2.将“节点A”连接至“节点C”;
3.连线关系异常,如下图:
流程连线异常

异常日志

注意使用MD语法 日志 使用 ``格式化日志,越多详细越好

vue.js:8542 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:8553 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
avue.js:8693 connectionDetached {connection: b.Connection, source: div#nodeA.jtk-droppable.jtk-managed.jtk-draggable.jtk-endpoint-anchor.jtk-connected, target: div#nodeC.jtk-droppable.jtk-managed.jtk-draggable.jtk-endpoint-anchor.jtk-connected.jtk-dragged, sourceId: "nodeA", targetId: "nodeB", …}
avue.js:8693 connectionDetached {connection: b.Connection, source: div#nodeC.jtk-droppable.jtk-managed.jtk-draggable.jtk-connected.jtk-dragged, target: div#nodeD.jtk-droppable.jtk-managed.jtk-draggable.jtk-endpoint-anchor.jtk-connected, sourceId: "nodeB", targetId: "nodeC", …}
avue.js:8720 beforeDrop {sourceId: "nodeA", targetId: "nodeB", scope: "jsPlumb_DefaultScope", connection: b.Connection, dropEndpoint: b.Endpoint, …}
// 报错日志
jsplumb.min.js:2 cannot check condition [beforeDrop]TypeError: Cannot read property 'lineList' of undefined

avue.js:8680 connection {connection: b.Connection, source: div#nodeA.jtk-droppable.jtk-managed.jtk-draggable.jtk-endpoint-anchor.jtk-connected, target: div#nodeC.jtk-droppable.jtk-managed.jtk-draggable.jtk-dragged.jtk-endpoint-anchor.jtk-connected, sourceId: "nodeA", targetId: "nodeB", …}connection: b.Connection {id: "con_21", connector: b.C…s.<…>.<computed>, idPrefix: "_jsplumb_c_", defaultLabelLocation: 0.5, defaultOverlayKeys: Array(2), …}source: div#nodeA.jtk-droppable.jtk-managed.jtk-draggable.jtk-endpoint-anchor.jtk-connectedsourceEndpoint: b.Endpoint {idPrefix: "_jsplumb_e_", defaultLabelLocation: Array(2), defaultOverlayKeys: Array(2), _listeners: {…}, eventsSuspended: false, …}sourceId: "nodeA"target: div#nodeC.jtk-droppable.jtk-managed.jtk-draggable.jtk-dragged.jtk-endpoint-anchor.jtk-connectedtargetEndpoint: b.Endpoint {idPrefix: "_jsplumb_e_", defaultLabelLocation: Array(2), defaultOverlayKeys: Array(2), _listeners: {…}, eventsSuspended: false, …}targetId: "nodeB"__proto__: Object

异常截图和代码

连线关系异常,如下图:
流程连线异常

评论 (5)

pigiswe 创建了任务
pigiswe 关联仓库设置为smallwei/Avue
pigiswe 修改了描述
pigiswe 修改了标题
展开全部操作日志

这个貌似是jsplumb的bug,解决这个问题的方法就是不删除节点,而是隐藏节点在执行jsPlumb.removeAllEndpoints(stepid)

这个貌似是jsplumb的bug,解决这个问题的方法就是不删除节点,而是隐藏节点在执行jsPlumb.removeAllEndpoints(stepid)

@whatsup 我看了avue.js的源码是这样的:

//删除节点
    deleteNode: function deleteNode(nodeId) {
      var _this3 = this;

      this.$confirm('确定要删除节点' + nodeId + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(function () {

        _this3.option.nodeList = _this3.option.nodeList.filter(function (node) {
          return node.id !== nodeId;
        });

        _this3.$nextTick(function () {
          this.jsPlumb.removeAllEndpoints(nodeId);
        });
      }).catch(function () {});
      return true;
    },

这里应该怎么处理?我看了网上其他的jsplumb案例也是这么写的,但是并没有出现avue里的问题。jsplumb版本我也更新了,也是一样。

smallwei 任务状态待办的 修改为进行中
smallwei 里程碑设置为v2.6.0

@pigiswe 这个问题我当时搞了很久,换了各种版本都不行,最后是参考了avue 和另一个demo搞出来的,就是先不删除,先隐藏

对的了@whatsup 下个版本更新

同时增加对中部内容的自定义

smallwei 任务状态进行中 修改为已完成
smallwei 任务状态已完成 修改为进行中
smallwei 任务状态进行中 修改为已完成

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(3)
632261 smallweigit 1588214431
JavaScript
1
https://gitee.com/smallweigit/avue.git
git@gitee.com:smallweigit/avue.git
smallweigit
avue
Avue

搜索帮助