[Fix-4796][UI] Fix child file upload failure and file id mixed problem (#4797)

dolphinscheduler-ui/src/js/module/components/fileUpdate/definitionUpdate.vue

@@ -46,7 +46,7 @@
             <template slot="content">
               <div class="file-update-box">
                 <template v-if="progress === 0">
-                  <input name="file" id="file" type="file" class="file-update">
+                  <input ref="file" name="file" type="file" class="file-update" @change="_onChange">
                   <el-button size="mini">{{$t('Upload')}}<em class="el-icon-upload"></em></el-button>
                 </template>
                 <div class="progress-box" v-if="progress !== 0">
@@ -188,14 +188,13 @@
         this.file = file
         this.name = file.name
         this.dragOver = false
-      }
-    },
-    mounted () {
-      $('#file').change(() => {
-        let file = $('#file')[0].files[0]
+      },
+      _onChange () {
+        let file = this.$refs.file.files[0]
         this.file = file
         this.name = file.name
-      })
+        this.$refs.file.value = null
+      }
     },
     components: { mPopup, mListBoxF, mProgressBar }
   }

dolphinscheduler-ui/src/js/module/components/fileUpdate/fileChildReUpdate.vue

@@ -69,7 +69,7 @@
             <template slot="content">
               <div class="file-update-box">
                 <template v-if="progress === 0">
-                  <input name="file" id="file" type="file" class="file-update">
+                  <input ref="file" name="file" type="file" class="file-update" @change="_onChange">
                   <el-button size="mini">{{$t('Upload')}}<em class="el-icon-upload"></em></el-button>
                 </template>
                 <div class="progress-box" v-if="progress !== 0">
@@ -239,16 +239,17 @@
         this.file = file
         this.name = file.name
         this.dragOver = false
+      },
+      _onChange () {
+        let file = this.$refs.file.files[0]
+        this.file = file
+        this.name = file.name
+        this.$refs.file.value = null
       }
     },
     mounted () {
       this.name = this.fileName
       this.description = this.desc
-      $('#file').change(() => {
-        let file = $('#file')[0].files[0]
-        this.file = file
-        this.name = file.name
-      })
     },
     components: { mPopup, mListBoxF, mProgressBar }
   }

dolphinscheduler-ui/src/js/module/components/fileUpdate/fileChildUpdate.vue

@@ -70,7 +70,7 @@
             <template slot="content">
               <div class="file-update-box">
                 <template v-if="progress === 0">
-                  <input name="file" id="file" type="file" class="file-update">
+                  <input ref="file" name="file" type="file" class="file-update" @change="_onChange">
                   <el-button size="mini">{{$t('Upload')}}<em class="el-icon-upload"></em></el-button>
                 </template>
                 <div class="progress-box" v-if="progress !== 0">
@@ -226,16 +226,15 @@
         this.progress = 0
         this.file = ''
         this.currentDir = localStore.getItem('currentDir')
-        this.pid = -1
+        this.pid = this.id
         this.dragOver = false
-      }
-    },
-    mounted () {
-      $('#file').change(() => {
-        let file = $('#file')[0].files[0]
+      },
+      _onChange () {
+        let file = this.$refs.file.files[0]
         this.file = file
         this.name = file.name
-      })
+        this.$refs.file.value = null
+      }
     },
     components: { mPopup, mListBoxF, mProgressBar }
   }

dolphinscheduler-ui/src/js/module/components/fileUpdate/fileReUpload.vue

@@ -69,7 +69,7 @@
             <template slot="content">
               <div class="file-update-box">
                 <template v-if="progress === 0">
-                  <input name="file" id="file" type="file" class="file-update">
+                  <input ref="file" name="file" type="file" class="file-update" @change="_onChange">
                   <el-button size="mini"> {{$t('Upload')}} </el-button>
                 </template>
                 <div class="progress-box" v-if="progress !== 0">
@@ -238,16 +238,17 @@
         this.file = file
         this.name = file.name
         this.dragOver = false
+      },
+      _onChange () {
+        let file = this.$refs.file.files[0]
+        this.file = file
+        this.name = file.name
+        this.$refs.file.value = null
       }
     },
     mounted () {
       this.name = this.fileName
       this.description = this.desc
-      $('#file').change(() => {
-        let file = $('#file')[0].files[0]
-        this.file = file
-        this.name = file.name
-      })
     },
     components: { mPopup, mListBoxF, mProgressBar }
   }

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

@@ -70,7 +70,7 @@
             <template slot="content">
               <div class="file-update-box">
                 <template v-if="progress === 0">
-                  <input name="file" id="file" type="file" class="file-update">
+                  <input ref="file" name="file" type="file" class="file-update" @change="_onChange">
                   <el-button type="dashed" size="mini">{{$t('Upload')}}<em class="el-icon-upload"></em></el-button>
                 </template>
                 <div class="progress-box" v-if="progress !== 0">
@@ -226,14 +226,13 @@
         this.file = file
         this.name = file.name
         this.dragOver = false
-      }
-    },
-    mounted () {
-      $('#file').change(() => {
-        let file = $('#file')[0].files[0]
+      },
+      _onChange () {
+        let file = this.$refs.file.files[0]
         this.file = file
         this.name = file.name
-      })
+        this.$refs.file.value = null
+      }
     },
     components: { mPopup, mListBoxF, mProgressBar }
   }

dolphinscheduler-ui/src/js/module/components/fileUpdate/resourceChildUpdate.vue

@@ -70,7 +70,7 @@
             <template slot="content">
               <div class="file-update-box">
                 <template v-if="progress === 0">
-                  <input name="file" id="file" type="file" class="file-update">
+                  <input ref="file" name="file" type="file" class="file-update" @change="_onChange">
                   <el-button size="mini">{{$t('Upload')}}<em class="el-icon-upload"></em></el-button>
                 </template>
                 <div class="progress-box" v-if="progress !== 0">
@@ -214,7 +214,7 @@
         this.progress = 0
         this.file = ''
         this.currentDir = localStore.getItem('currentDir')
-        this.pid = -1
+        this.pid = this.id
         this.dragOver = false
       },
       /**
@@ -226,17 +226,16 @@
         this.name = file.name
         this.dragOver = false
       },
+      _onChange () {
+        let file = this.$refs.file.files[0]
+        this.file = file
+        this.name = file.name
+        this.$refs.file.value = null
+      },
       close () {
         this.$emit('closeResourceChildUpdate')
       }
     },
-    mounted () {
-      $('#file').change(() => {
-        let file = $('#file')[0].files[0]
-        this.file = file
-        this.name = file.name
-      })
-    },
     components: { mPopup, mListBoxF, mProgressBar }
   }
 </script>

dolphinscheduler-ui/src/js/module/components/fileUpdate/udfUpdate.vue

@@ -29,7 +29,7 @@
                     :placeholder="$t('Please enter name')">
             </el-input>
             <div class="p1" style="position: absolute;">
-              <input name="file" id="file" type="file" class="file-update" v-if="!progress">
+              <input ref="file" name="file" type="file" class="file-update" @change="_onChange" v-if="!progress">
               <el-button type="dashed" size="small" :disabled="progress !== 0">{{$t('Upload')}}<em class="el-icon-upload"></em></el-button>
             </div>
           </div>
@@ -159,26 +159,14 @@
         this.spinnerLoading = false
         this.pid = null
         this.currentDir = ''
-      }
-    },
-    watch: {},
-    created () {
-    },
-    mounted () {
-      $('#file').change(() => {
-        let file = $('#file')[0].files[0]
+      },
+      _onChange () {
+        let file = this.$refs.file.files[0]
         this.file = file
         this.udfName = file.name
-      })
-    },
-    updated () {
-    },
-    beforeDestroy () {
-    },
-    destroyed () {
-    },
-    computed: {},
-    components: {}
+        this.$refs.file.value = null
+      }
+    }
   }
 </script>
 

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

@@ -283,7 +283,7 @@
           this._toggleArchive()
           return
         }
-        this.type = true
+        this.type = type
         this.id = data
         this.fileChildUpdateDialog = true
       },