Improve the user experience in the task definition page (#1678)

define the architecture (include actions.js, dag.vue,formModel.vue,mutations.js, and state.js) and implement one of the tasks , such as http.vue.

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

@@ -156,8 +156,8 @@
     },
     methods: {
       ...mapActions('dag', ['saveDAGchart', 'updateInstance', 'updateDefinition', 'getTaskState']),
-      ...mapMutations('dag', ['addTasks', 'resetParams', 'setIsEditDag', 'setName']),
+      ...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName']),
-      
+
       // DAG automatic layout
       dagAutomaticLayout() {
         $('#canvas').html('')
@@ -495,6 +495,14 @@
                   removeNodesEvent(fromThis)
                 }, 100)
               },
+              /**
+               * Cache the item
+               * @param item
+               * @param fromThis
+               */
+              cacheTaskInfo({item, fromThis}) {
+                self.cacheTasks(item)
+              },
               close ({ flag, fromThis }) {
                 // Edit status does not allow deletion of nodes
                 if (flag) {

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

@@ -16,7 +16,7 @@
  */
 <template>
   <div class="form-model-model" v-clickoutside="_handleClose">
-    <div class="title-box"> 
+    <div class="title-box">
       <span class="name">{{$t('Current node settings')}}</span>
       <span class="go-subtask">
         <!-- Component can't pop up box to do component processing -->
@@ -184,6 +184,7 @@
         <m-http
           v-if="taskType === 'HTTP'"
           @on-params="_onParams"
+          @on-cache-params="_onCacheParams"
           ref="HTTP"
           :backfill-item="backfillItem">
         </m-http>
@@ -333,6 +334,31 @@
       _onParams (o) {
         this.params = Object.assign(this.params, {}, o)
       },
+
+      _onCacheParams (o) {
+        this.params = Object.assign(this.params, {}, o)
+        this._cacheItem()
+      },
+
+      _cacheItem () {
+        this.$emit('cacheTaskInfo', {
+          item: {
+            type: this.taskType,
+            id: this.id,
+            name: this.name,
+            params: this.params,
+            description: this.description,
+            runFlag: this.runFlag,
+            dependence: this.dependence,
+            maxRetryTimes: this.maxRetryTimes,
+            retryInterval: this.retryInterval,
+            timeout: this.timeout,
+            taskInstancePriority: this.taskInstancePriority,
+            workerGroupId: this.workerGroupId
+          },
+          fromThis: this
+        })
+      },
       /**
        * verification name
        */
@@ -431,29 +457,43 @@
       }
     },
     watch: {
-
+      /**
+       * Watch the item change, cache the value it changes
+       **/
+      _item (val) {
+        this._cacheItem()
+      }
     },
     created () {
       // Unbind copy and paste events
       JSP.removePaste()
       // Backfill data
       let taskList = this.store.state.dag.tasks
+
+      //fillback use cacheTasks
+      let cacheTasks = this.store.state.dag.cacheTasks
       let o = {}
-      if (taskList.length) {
+      if (cacheTasks[this.id]) {
-        taskList.forEach(v => {
+        o = cacheTasks[this.id]
-          if (v.id === this.id) {
+        this.backfillItem = cacheTasks[this.id]
-          o = v
+      } else {
-          this.backfillItem = v
+        if (taskList.length) {
+          taskList.forEach(v => {
+            if (v.id === this.id) {
+              o = v
+              this.backfillItem = v
+            }
+          })
         }
-      })
+      }
-        // Non-null objects represent backfill
+      // Non-null objects represent backfill
-        if (!_.isEmpty(o)) {
+      if (!_.isEmpty(o)) {
-          this.name = o.name
+        this.name = o.name
-          this.taskInstancePriority = o.taskInstancePriority
+        this.taskInstancePriority = o.taskInstancePriority
-          this.runFlag = o.runFlag || 'NORMAL'
+        this.runFlag = o.runFlag || 'NORMAL'
-          this.description = o.description
+        this.description = o.description
-          this.maxRetryTimes = o.maxRetryTimes
+        this.maxRetryTimes = o.maxRetryTimes
-          this.retryInterval = o.retryInterval
+        this.retryInterval = o.retryInterval
 
           // If the workergroup has been deleted, set the default workergroup
           var hasMatch = false;
@@ -471,7 +511,6 @@
             this.workerGroupId = o.workerGroupId
           }
 
-        }
       }
       this.isContentBox = true
     },
@@ -490,6 +529,23 @@
        */
       _isGoSubProcess () {
         return this.taskType === 'SUB_PROCESS' && this.name
+      },
+
+      //Define the item model
+      _item () {
+        return {
+          type: this.taskType,
+          id: this.id,
+          name: this.name,
+          description: this.description,
+          runFlag: this.runFlag,
+          dependence: this.dependence,
+          maxRetryTimes: this.maxRetryTimes,
+          retryInterval: this.retryInterval,
+          timeout: this.timeout,
+          taskInstancePriority: this.taskInstancePriority,
+          workerGroupId: this.workerGroupId
+        }
       }
     },
     components: {

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

@@ -164,7 +164,26 @@
         return true
       }
     },
+    computed: {
+      cacheParams () {
+        return {
+          localParams: this.localParams,
+          httpParams: this.httpParams,
+          url: this.url,
+          httpMethod: this.httpMethod,
+          httpCheckCondition: this.httpCheckCondition,
+          condition: this.condition
+        }
+      }
+    },
     watch: {
+      /**
+       * Watch the cacheParams
+       * @param val
+       */
+      cacheParams (val) {
+        this.$emit('on-cache-params', val);
+      }
     },
     created () {
         let o = this.backfillItem

dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js

@@ -125,6 +125,11 @@ export default {
     } else {
       state.tasks.push(payload)
     }
+    if (state.cacheTasks[payload.id]) {
+      state.cacheTasks[payload.id] = Object.assign(state.cacheTasks[payload.id], {}, payload)
+    } else {
+      state.cacheTasks[payload.id] = payload;
+    }
     let dom = $(`#${payload.id}`)
     state.locations[payload.id] = _.assign(state.locations[payload.id], {
       name: dom.find('.name-p').text(),
@@ -132,5 +137,17 @@ export default {
       x: parseInt(dom.css('left'), 10),
       y: parseInt(dom.css('top'), 10)
     })
+  },
+  /**
+   * Cache the input
+   * @param state
+   * @param payload
+   */
+  cacheTasks (state, payload) {
+    if (state.cacheTasks[payload.id]) {
+      state.cacheTasks[payload.id] = Object.assign(state.cacheTasks[payload.id], {}, payload)
+    } else {
+      state.cacheTasks[payload.id] = payload;
+    }
   }
 }

dolphinscheduler-ui/src/js/conf/home/store/dag/state.js

@@ -29,6 +29,8 @@ export default {
   globalParams: [],
   // Node information
   tasks: [],
+  // Node cache information, cache the previous input
+  cacheTasks: {},
   // Timeout alarm
   timeout: 0,
   // tenant id