From 54fc458e442f823a2d2c491472ce767edeec2196 Mon Sep 17 00:00:00 2001
From: Shiwen Cheng <chengshiwen0103@gmail.com>
Date: Mon, 1 Mar 2021 21:58:39 +0800
Subject: [PATCH] [Fix-4908][UI] Fix dependent task item cannot delete and
 select (#4909)

---
 .../tasks/_source/dependItemList.vue          | 34 +++++++++----------
 .../formModel/tasks/_source/nodeStatus.vue    |  2 ++
 .../_source/formModel/tasks/conditions.vue    |  1 -
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
index fd8a2b8955..b664904de7 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
@@ -16,17 +16,17 @@
  */
 <template>
   <div class="dep-list-model">
-    <div v-for="(el,$index) in dependItemList" :key='$index' @click="itemIndex = $index">
-      <el-select filterable :disabled="isDetails" style="width: 450px" v-model="el.projectId" @change="_onChangeProjectId" size="small">
+    <div v-for="(el,$index) in dependItemList" :key='$index'>
+      <el-select filterable :disabled="isDetails" style="width: 450px" v-model="el.projectId" @change="v => _onChangeProjectId(v, $index)" size="small">
         <el-option v-for="item in projectList" :key="item.value" :value="item.value" :label="item.label"></el-option>
       </el-select>
-      <el-select filterable :disabled="isDetails" style="width: 450px" v-model="el.definitionId" @change="_onChangeDefinitionId" size="small">
+      <el-select filterable :disabled="isDetails" style="width: 450px" v-model="el.definitionId" @change="v => _onChangeDefinitionId(v, $index)" size="small">
         <el-option v-for="item in el.definitionList" :key="item.value" :value="item.value" :label="item.label"></el-option>
       </el-select>
       <el-select filterable :disabled="isDetails" style="width: 450px" v-model="el.depTasks" size="small">
         <el-option v-for="item in el.depTasksList || []" :key="item" :value="item" :label="item"></el-option>
       </el-select>
-      <el-select v-model="el.cycle" :disabled="isDetails" @change="_onChangeCycle" size="small">
+      <el-select v-model="el.cycle" :disabled="isDetails" @change="v => _onChangeCycle(v, $index)" size="small">
         <el-option v-for="item in cycleList" :key="item.value" :value="item.value" :label="item.label"></el-option>
       </el-select>
       <el-select v-model="el.dateValue" :disabled="isDetails" size="small">
@@ -62,8 +62,7 @@
         list: [],
         projectList: [],
         cycleList: cycleList,
-        isInstance: false,
-        itemIndex: null
+        isInstance: false
       }
     },
     mixins: [disabledState],
@@ -105,7 +104,8 @@
        * remove task
        */
       _remove (i) {
-        // this.dependTaskList[this.index].dependItemList.splice(i, 1)
+        // eslint-disable-next-line
+        this.dependTaskList[this.index].dependItemList.splice(i, 1)
         this._removeTip()
         if (!this.dependItemList.length || this.dependItemList.length === 0) {
           this.$emit('on-delete-all', {
@@ -170,33 +170,33 @@
       /**
        * change process get dependItemList
        */
-      _onChangeProjectId (value) {
+      _onChangeProjectId (value, itemIndex) {
         this._getProcessByProjectId(value).then(definitionList => {
-          /* this.$set(this.dependItemList, this.itemIndex, this._dlOldParams(value, definitionList, item)) */
+          /* this.$set(this.dependItemList, itemIndex, this._dlOldParams(value, definitionList, item)) */
           let definitionId = definitionList[0].value
           this._getDependItemList(definitionId).then(depTasksList => {
-            let item = this.dependItemList[this.itemIndex]
+            let item = this.dependItemList[itemIndex]
             // init set depTasks All
             item.depTasks = 'ALL'
             // set dependItemList item data
-            this.$set(this.dependItemList, this.itemIndex, this._cpOldParams(value, definitionId, definitionList, depTasksList, item))
+            this.$set(this.dependItemList, itemIndex, this._cpOldParams(value, definitionId, definitionList, depTasksList, item))
           })
         })
       },
-      _onChangeDefinitionId (value) {
+      _onChangeDefinitionId (value, itemIndex) {
         // get depItem list data
         this._getDependItemList(value).then(depTasksList => {
-          let item = this.dependItemList[this.itemIndex]
+          let item = this.dependItemList[itemIndex]
           // init set depTasks All
           item.depTasks = 'ALL'
           // set dependItemList item data
-          this.$set(this.dependItemList, this.itemIndex, this._rtOldParams(value, item.definitionList, depTasksList, item))
+          this.$set(this.dependItemList, itemIndex, this._rtOldParams(value, item.definitionList, depTasksList, item))
         })
       },
-      _onChangeCycle (value) {
+      _onChangeCycle (value, itemIndex) {
         let list = _.cloneDeep(dateValueList[value])
-        this.$set(this.dependItemList[this.itemIndex], 'dateValue', list[0].value)
-        this.$set(this.dependItemList[this.itemIndex], 'dateValueList', list)
+        this.$set(this.dependItemList[itemIndex], 'dateValue', list[0].value)
+        this.$set(this.dependItemList[itemIndex], 'dateValueList', list)
       },
       _rtNewParams (value, definitionList, depTasksList, projectId) {
         return {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue
index 0650386d5c..6183eb91e7 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue
@@ -87,6 +87,8 @@
        * remove task
        */
       _remove (i) {
+        // eslint-disable-next-line
+        this.dependTaskList[this.index].dependItemList.splice(i, 1)
         this._removeTip()
         if (!this.dependItemList.length || this.dependItemList.length === 0) {
           this.$emit('on-delete-all', {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
index 8c96ec3606..3cfb1625be 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
@@ -99,7 +99,6 @@
         $('body').find('.tooltip.fade.top.in').remove()
       },
       _onDeleteAll (i) {
-        this.dependTaskList[this.index].dependItemList.splice(i, 1)
         this.dependTaskList.map((item, i) => {
           if (item.dependItemList.length === 0) {
             this.dependTaskList.splice(i, 1)