Fix the bug #1968. (#1969)

When create a new task or edit an exist task.The task details window will be open.
Then if delete the task node or click the DataSource menu. And the task details window still open.

The task details window should be close.

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js

@@ -49,10 +49,16 @@ Dag.prototype.setConfig = function (o) {
  * create dag
  */
 Dag.prototype.create = function () {
+  let self = this
   jsPlumb.ready(() => {
     JSP.init({
       dag: this.dag,
-      instance: this.instance
+      instance: this.instance,
+      options: {
+        onRemoveNodes ($id) {
+          self.dag.removeEventModelById($id)
+        }
+      }
     })
 
     // init event
@@ -282,10 +288,16 @@ Dag.prototype.backfill = function (arg) {
         }
 
     locationsValue = dataObject
+    let self = this
     jsPlumb.ready(() => {
       JSP.init({
         dag: this.dag,
-        instance: this.instance
+        instance: this.instance,
+        options: {
+          onRemoveNodes ($id) {
+            self.dag.removeEventModelById($id)
+          }
+        }
       })
       // Backfill
       JSP.jspBackfill({
@@ -298,10 +310,16 @@ Dag.prototype.backfill = function (arg) {
       })
     })
   } else {
+    let self = this
     jsPlumb.ready(() => {
       JSP.init({
         dag: this.dag,
-        instance: this.instance
+        instance: this.instance,
+        options: {
+          onRemoveNodes ($id) {
+            self.dag.removeEventModelById($id)
+          }
+        }
       })
       // Backfill
       JSP.jspBackfill({

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue

@@ -527,6 +527,11 @@
             }
           })
         })
+      },
+      removeEventModelById ($id) {
+        if(eventModel && this.taskId == $id){
+          eventModel.remove()
+        }
       }
     },
     watch: {
@@ -580,6 +585,9 @@
       clearInterval(this.setIntervalP)
     },
     destroyed () {
+      if (eventModel) {
+        eventModel.remove()
+      }
     },
     computed: {
       ...mapState('dag', ['tasks', 'locations', 'connects', 'isEditDag', 'name'])

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js

@@ -58,11 +58,13 @@ let JSP = function () {
 /**
  * dag init
  */
-JSP.prototype.init = function ({ dag, instance }) {
+JSP.prototype.init = function ({ dag, instance, options }) {
   // Get the dag component instance
   this.dag = dag
   // Get jsplumb instance
   this.JspInstance = instance
+  // Get JSP options
+  this.options = options || {}
   // Register jsplumb connection type and configuration
   this.JspInstance.registerConnectionType('basic', {
     anchor: 'Continuous',
@@ -494,6 +496,9 @@ JSP.prototype.removeNodes = function ($id) {
 
   // delete dom
   $(`#${$id}`).remove()
+
+  // callback onRemoveNodes event
+  this.options&&this.options.onRemoveNodes&&this.options.onRemoveNodes($id)
 }
 
 /**