fix eslint: unexpected mutation of prop

dolphinscheduler-ui/.eslintrc.yml

@@ -34,7 +34,6 @@ plugins:
   - vue
 rules:
   vue/script-indent: ['error', 2, { 'baseIndent': 1, 'switchCase': 1 }]
-  vue/no-mutating-props: 'off'
   prefer-promise-reject-errors: 'off'
   no-prototype-builtins: 'off'
   no-mixed-operators: 'off'

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

@@ -156,7 +156,7 @@
         :visible.sync="nodeDrawer"
         size="50%"
         :with-header="false">
-        <m-form-model v-if="nodeDrawer" :nodeData = nodeData @addTaskInfo="addTaskInfo" @cacheTaskInfo="cacheTaskInfo" @close="close" @onSubProcess="onSubProcess"></m-form-model>
+        <m-form-model v-if="nodeDrawer" :nodeData=nodeData @seeHistory="seeHistory" @addTaskInfo="addTaskInfo" @cacheTaskInfo="cacheTaskInfo" @close="close" @onSubProcess="onSubProcess"></m-form-model>
       </el-drawer>
       <el-drawer
         :visible.sync="lineDrawer"
@@ -628,6 +628,16 @@
         this.lineDrawer = true
       },
 
+      seeHistory (taskName) {
+        this.nodeData.self.$router.push({
+          name: 'task-instance',
+          query: {
+            processInstanceId: this.nodeData.self.$route.params.id,
+            taskName: taskName
+          }
+        })
+      },
+
       addTaskInfo ({ item, fromThis }) {
         this.addTasks(item)
         this.nodeDrawer = false

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

@@ -20,7 +20,7 @@
           :disabled="isDetails"
           size="small"
           @change="_onChange"
-          v-model="value">
+          v-model="selectedValue">
       <el-input
               ref="input"
               slot="trigger"
@@ -53,6 +53,7 @@
     name: 'form-select-input',
     data () {
       return {
+        selectedValue: this.value,
         isIconState: false,
         isInput: true
       }
@@ -107,9 +108,12 @@
       }
     },
     watch: {
+      value (val) {
+        this.selectedValue = val
+      }
     },
     created () {
-      this._setIconState(this.value)
+      this._setIconState(this.selectedValue)
     },
     mounted () {
     },

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

@@ -18,7 +18,7 @@
   <el-select
           :disabled="isDetails"
           @change="_onChange"
-          v-model="value"
+          v-model="selectedValue"
           size="small"
           style="width: 180px">
     <el-option
@@ -35,6 +35,7 @@
     name: 'form-worker-group',
     data () {
       return {
+        selectedValue: this.value,
         workerGroupsList: []
       }
     },
@@ -51,11 +52,13 @@
     },
     methods: {
       _onChange (o) {
-        this.value = o
         this.$emit('workerGroupsEvent', o)
       }
     },
     watch: {
+      value (val) {
+        this.selectedValue = val
+      }
     },
     created () {
       let stateWorkerGroupsList = this.store.state.security.workerGroupsListAll || []

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

@@ -438,13 +438,7 @@
        * Jump to task instance
        */
       _seeHistory () {
-        this.nodeData.self.$router.push({
-          name: 'task-instance',
-          query: {
-            processInstanceId: this.nodeData.self.$route.params.id,
-            taskName: this.backfillItem.name
-          }
-        })
+        this.$emit('seeHistory', this.backfillItem.name)
       },
       /**
        * Enter the child node to judge the process instance or the process definition

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

@@ -109,7 +109,6 @@
        * remove task
        */
       _remove (i) {
-        this.dependTaskList[this.index].dependItemList.splice(i, 1)
         this._removeTip()
         if (!this.dependItemList.length || this.dependItemList.length === 0) {
           this.$emit('on-delete-all', {

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

@@ -87,7 +87,6 @@
        * remove task
        */
       _remove (i) {
-        this.dependTaskList[this.index].dependItemList.splice(i, 1)
         this._removeTip()
         if (!this.dependItemList.length || this.dependItemList.length === 0) {
           this.$emit('on-delete-all', {

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

@@ -93,7 +93,7 @@
       },
       type (a) {
         // The props parameter needs to be changed due to the scene.
-        this.udfs = ''
+        this.$emit('on-udfsData', '')
         if (a === 'HIVE') {
           this._getUdfList()
         } else {

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

@@ -99,6 +99,7 @@
         $('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)

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

@@ -97,6 +97,7 @@
         $('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)

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

@@ -18,7 +18,7 @@
   <el-select
           :disabled="isDetails"
           @change="_onChange"
-          v-model="value"
+          v-model="selectedValue"
           size="small"
           style="width: 180px">
     <el-option
@@ -35,6 +35,7 @@
     name: 'form-tenant',
     data () {
       return {
+        selectedValue: this.value,
         itemList: []
       }
     },
@@ -56,16 +57,18 @@
         }
       })
       if (!result) {
-        this.value = 'default'
+        this.selectedValue = 'default'
       }
     },
     methods: {
       _onChange (o) {
-        this.value = o
         this.$emit('tenantSelectEvent', o)
       }
     },
     watch: {
+      value (val) {
+        this.selectedValue = val
+      }
     },
     created () {
       let stateTenantAllList = this.store.state.security.tenantAllList || []

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue

@@ -17,7 +17,7 @@
 <template>
   <div class="ans-input email-model">
     <div class="clearfix input-element" :class="disabled ? 'disabled' : ''">
-      <span class="tag-wrapper" v-for="(item,$index) in activeList" :key="$index" :class="activeIndex === $index ? 'active' : ''">
+      <span class="tag-wrapper" v-for="(item,$index) in activeListL" :key="$index" :class="activeIndex === $index ? 'active' : ''">
         <span class="tag-text">{{item}}</span>
         <em class="remove-tag el-icon-close" @click.stop="_del($index)" v-if="!disabled"></em>
       </span>
@@ -74,6 +74,7 @@
         tagModel: false,
         email: '',
         activeIndex: null,
+        activeListL: _.cloneDeep(this.activeList),
         emailList: [],
         index: 0,
         emailWidth: 100,
@@ -105,13 +106,13 @@
         let email = this.email
 
         let is = (n) => {
-          return _.some(_.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeList)), v => v === n)
+          return _.some(_.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeListL)), v => v === n)
         }
 
         if (isEmial(email)) {
           if (!is(email)) {
             this.emailWidth = 0
-            this.activeList.push(email)
+            this.activeListL.push(email)
             this.email = ''
             this._handlerEmailWitch()
             return true
@@ -132,7 +133,7 @@
           this.emailList = []
           this.isEmail = false
         } else {
-          let a = _.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeList))
+          let a = _.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeListL))
           let b = a.concat(emailList)
           let list = fuzzyQuery(b, val)
           this.emailList = _.uniqWith(list.length && list, _.isEqual)
@@ -161,11 +162,11 @@
         if (!this.isCn) {
           this.emailWidth = 0
           if (_.isInteger(this.activeIndex)) {
-            this.activeList.pop()
+            this.activeListL.pop()
             this.activeIndex = null
           } else {
             if (!this.email) {
-              this.activeIndex = this.activeList.length - 1
+              this.activeIndex = this.activeListL.length - 1
             }
           }
           this._handlerEmailWitch()
@@ -176,7 +177,7 @@
        */
       _del (i) {
         this.emailWidth = 0
-        this.activeList.splice(i, 1)
+        this.activeListL.splice(i, 1)
         this._handlerEmailWitch()
       },
       /**
@@ -221,14 +222,14 @@
         this.email = ''
 
         // Non-existing data
-        if (_.filter(_.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeList)), v => v === item).length) {
+        if (_.filter(_.cloneDeep(this.repeatData).concat(_.cloneDeep(this.activeListL)), v => v === item).length) {
           this.$message.warning(`${i18n.$t('Mailbox already exists! Recipients and copyers cannot repeat')}`)
           return
         }
         // Width initialization
         this.emailWidth = 0
         // Insert data
-        this.activeList.push(item)
+        this.activeListL.push(item)
         // Calculated width
         this._handlerEmailWitch()
         // Check mailbox index initialization
@@ -264,7 +265,12 @@
         this.activeIndex = null
       },
       activeList (val) {
-        this.$emit('valueEvent', val)
+        this.activeListL = _.cloneDeep(val)
+      },
+      activeListL (val) {
+        if (!_.isEqual(val, this.activeList)) {
+          this.$emit('valueEvent', val)
+        }
       }
     },
     created () {

dolphinscheduler-ui/src/js/module/components/priority/priority.vue

@@ -16,7 +16,7 @@
  */
 <template>
   <div class="priority-model">
-    <el-select @change="_onChange" size="small" v-model="value" style="width: 130px;" :disabled="isDetails">
+    <el-select @change="_onChange" size="small" v-model="selectedValue" style="width: 130px;" :disabled="isDetails">
     <el-option
       v-for="item in priorityList"
       :key="item.code"
@@ -38,6 +38,7 @@
     name: 'priority',
     data () {
       return {
+        selectedValue: this.value,
         priorityList: [
           {
             code: 'HIGHEST',
@@ -84,10 +85,14 @@
         return `<em class="${o.unicode}" style="color:${o.color}"></em>`
       },
       _onChange (o) {
-        this.value = o
         this.$emit('priorityEvent', o)
       }
     },
+    watch: {
+      value (val) {
+        this.selectedValue = val
+      }
+    },
     created () {
     },
     mounted () {