[Fix-8187][UI] Add the function to the module of resource that you can re-upload the file on the page of the file management. (#8359)

* add reupload file

* develop reupload file

* fix this issue

dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subdirectory/_source/list.vue

@@ -50,8 +50,11 @@
             <span>{{scope.row.updateTime | formatDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Operation')" width="150">
+        <el-table-column :label="$t('Operation')" width="180">
           <template slot-scope="scope">
+            <el-tooltip :content="$t('ReUpload File')" placement="top" :enterable="false">
+              <span><el-button type="primary" size="mini" icon="el-icon-refresh-right" @click="_reUploadFile(scope.row)" v-show="scope.row.directory? false: true" circle></el-button></span>
+            </el-tooltip>
             <el-tooltip :content="$t('Edit')" placement="top" :enterable="false">
               <span><el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_edit(scope.row)" :disabled="_rtDisb(scope.row)" circle></el-button></span>
             </el-tooltip>
@@ -90,6 +93,7 @@
   import { mapActions } from 'vuex'
   import { filtTypeArr } from '../../_source/common'
   import { bytesToSize } from '@/module/util/util'
+  import { findComponentDownward } from '@/module/util/'
   import { downloadFile } from '@/module/download'
   import localStore from '@/module/util/localStorage'
 
@@ -122,6 +126,9 @@
           this.$router.push({ path: `/resource/file/list/${item.id}` })
         }
       },
+      _reUploadFile (item) {
+        findComponentDownward(this.$root, 'roof-nav')._fileReUpload(item)
+      },
       _downloadFile (item) {
         downloadFile(`resources/${item.id}/download`)
       },

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

@@ -1,26 +1,27 @@
 /*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements.  See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License.  You may obtain a copy of the License at
+*
+*    http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
 <template>
   <m-popup
-          ref="popup"
-          :ok-text="$t('Upload')"
-          :nameText="$t('ReUpload File')"
-          @ok="_ok"
-          :disabled="progress === 0 ? false : true">
+    ref="popup"
+    :ok-text="$t('Upload')"
+    :nameText="$t('ReUpload File')"
+    @ok="_ok"
+    @close="_close"
+    :disabled="progress === 0 ? false : true">
     <template slot="content">
       <form name="files" enctype="multipart/form-data" method="post">
         <div class="file-update-model"
@@ -44,11 +45,11 @@
             <template slot="name"><strong>*</strong>{{$t('File Name')}}</template>
             <template slot="content">
               <el-input
-                      type="input"
-                      size="small"
-                      v-model="name"
-                      :disabled="progress !== 0"
-                      :placeholder="$t('Please enter name')">
+                type="input"
+                size="small"
+                v-model="name"
+                :disabled="true"
+                :placeholder="$t('Please enter name')">
               </el-input>
             </template>
           </m-list-box-f>
@@ -56,11 +57,11 @@
             <template slot="name">{{$t('Description')}}</template>
             <template slot="content">
               <el-input
-                      type="textarea"
-                      size="small"
-                      v-model="description"
-                      :disabled="progress !== 0"
-                      :placeholder="$t('Please enter description')">
+                type="textarea"
+                size="small"
+                v-model="description"
+                :disabled="progress !== 0"
+                :placeholder="$t('Please enter description')">
               </el-input>
             </template>
           </m-list-box-f>
@@ -92,7 +93,7 @@
   import mProgressBar from '@/module/components/progressBar/progressBar'
 
   export default {
-    name: 'file-update',
+    name: 'file-upload',
     data () {
       return {
         store,
@@ -105,6 +106,7 @@
         // file
         file: null,
         currentDir: '/',
+        id: null,
         // Whether to drag upload
         dragOver: false
       }
@@ -112,10 +114,7 @@
     watch: {
     },
     props: {
-      type: String,
-      fileName: String,
-      desc: String,
-      id: Number
+      originalFileData: Object
     },
     methods: {
       /**
@@ -124,7 +123,7 @@
       _ok () {
         this.$refs.popup.spinnerLoading = true
         if (this._validation()) {
-          if (this.fileName === this.name) {
+          if (this.originalFileData.fileName === this.name) {
             const isLt1024M = this.file.size / 1024 / 1024 < 1024
             if (isLt1024M) {
               this._formDataUpdate().then(res => {
@@ -139,10 +138,8 @@
               this.$refs.popup.spinnerLoading = false
             }
           } else {
-            this.store.dispatch('resource/resourceVerifyName', {
-              fullName: '/' + this.name,
-              type: this.type
-            }).then(res => {
+            const params = { fullName: this.currentDir + this.name, type: 'FILE' }
+            this.store.dispatch('resource/resourceVerifyName', params).then(res => {
               const isLt1024M = this.file.size / 1024 / 1024 < 1024
               if (isLt1024M) {
                 this._formDataUpdate().then(res => {
@@ -165,6 +162,9 @@
           this.$refs.popup.spinnerLoading = false
         }
       },
+      _close () {
+        this.$emit('closeFileUpload')
+      },
       /**
        * validation
        */
@@ -186,19 +186,19 @@
         return new Promise((resolve, reject) => {
           let self = this
           let formData = new FormData()
+
           formData.append('file', this.file)
           formData.append('name', this.name)
           formData.append('description', this.description)
-          formData.append('id', this.id)
-          formData.append('type', this.type)
-          io.post('resources/update', res => {
+          formData.append('type', 'FILE')
+          io.put('resources/' + this.id, res => {
             this.$message.success(res.msg)
             resolve()
-            self.$emit('onUpdate')
+            self.$emit('onUploadFile')
             this.reset()
           }, e => {
             reject(e)
-            self.$emit('close')
+            self.$emit('closeFileUpload')
             this.$message.error(e.msg || '')
             this.reset()
           }, {
@@ -247,8 +247,13 @@
       }
     },
     mounted () {
-      this.name = this.fileName
-      this.description = this.desc
+      this.reset()
+      this.id = this.originalFileData.id
+      this.name = this.originalFileData.fileName
+      if (this.originalFileData.desc) {
+        this.description = this.originalFileData.desc
+      }
+      this.currentDir = this.originalFileData.fullName.substring(0, this.originalFileData.fullName.length - this.originalFileData.fileName.length)
     },
     components: { mPopup, mListBoxF, mProgressBar }
   }

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

@@ -175,6 +175,17 @@
       width="auto">
       <m-resource-child-update :type="type" :id="id" @onProgressResourceChildUpdate="onProgressResourceChildUpdate" @onUpdateResourceChildUpdate="onUpdateResourceChildUpdate" @onArchiveFileChildUpdate="onArchiveResourceChildUpdate" @closeResourceChildUpdate="closeResourceChildUpdate"></m-resource-child-update>
     </el-dialog>
+
+    <el-dialog
+      :visible.sync="fileUploadDialog"
+      append-to-body="true"
+      width="auto">
+      <m-file-upload
+        :originalFileData="originalFileData"
+        @onUploadFile="onUploadFile"
+        @closeFileUpload="closeFileUpload">
+      </m-file-upload>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -186,6 +197,7 @@
   import mFileChildUpdate from '@/module/components/fileUpdate/fileChildUpdate'
   import mResourceChildUpdate from '@/module/components/fileUpdate/resourceChildUpdate'
   import mDefinitionUpdate from '@/module/components/fileUpdate/definitionUpdate'
+  import mFileUpload from '@/module/components/fileUpdate/fileReUpload'
   import mProgressBar from '@/module/components/progressBar/progressBar'
   import { findLocale, localeList } from '@/module/i18n/config'
 
@@ -214,7 +226,11 @@
         fileUpdateDialog: false,
         fileChildUpdateDialog: false,
         id: null,
-        resourceChildUpdateDialog: false
+        fileName: '',
+        description: '',
+        originalFileData: {},
+        resourceChildUpdateDialog: false,
+        fileUploadDialog: false
       }
     },
 
@@ -262,16 +278,13 @@
         this.progress = 0
         this.definitionUpdateDialog = false
       },
-
       onArchiveDefinition () {
         this.isUpdate = true
       },
-
       closeDefinition () {
         this.progress = 0
         this.definitionUpdateDialog = false
       },
-
       onProgressFileUpdate (val) {
         this.progress = val
       },
@@ -282,6 +295,17 @@
         this.progress = 0
         this.fileUpdateDialog = false
       },
+      onUploadFile () {
+        let self = this
+        findComponentDownward(self.$root, 'resource-list-index-FILE')._updateList()
+        this.isUpdate = false
+        this.progress = 0
+        this.fileUploadDialog = false
+      },
+      closeFileUpload () {
+        this.progress = 0
+        this.fileUploadDialog = false
+      },
       onArchiveFileUpdate () {
         this.isUpdate = true
       },
@@ -289,7 +313,6 @@
         this.progress = 0
         this.fileUpdateDialog = false
       },
-
       _fileChildUpdate (type, data) {
         if (this.progress) {
           this._toggleArchive()
@@ -299,7 +322,14 @@
         this.id = data
         this.fileChildUpdateDialog = true
       },
-
+      _fileReUpload (item) {
+        if (this.progress) {
+          this._toggleArchive()
+          return
+        }
+        this.originalFileData = item
+        this.fileUploadDialog = true
+      },
       onProgressFileChildUpdate (val) {
         this.progress = val
       },
@@ -319,7 +349,6 @@
         this.progress = 0
         this.fileChildUpdateDialog = false
       },
-
       _resourceChildUpdate (type, data) {
         if (this.progress) {
           this._toggleArchive()
@@ -362,7 +391,6 @@
        * Language switching
        */
       _toggleLanguage (language) {
-        console.log(language)
         cookies.set('language', language, { path: '/' })
         setTimeout(() => {
           window.location.reload()
@@ -377,7 +405,7 @@
     computed: {
       ...mapState('user', ['userInfo'])
     },
-    components: { mFileUpdate, mProgressBar, mDefinitionUpdate, mFileChildUpdate, mResourceChildUpdate }
+    components: { mFileUpdate, mProgressBar, mDefinitionUpdate, mFileChildUpdate, mResourceChildUpdate, mFileUpload }
   }
 </script>