[Fix] [ui] Fixed the re-upload function of the Resource Management menu #8764 (#8763)

* [fix] [ui] Fixed the re-upload function of the Resource Management menu
* Modify resource file list and sub-file front-end code
* Modify udF resource file list and subfile front-end code
* Fix modified page does not dynamically update content, added V-if judgment

* [fix] [ui] Fixed the re-upload function of the Resource Management menu
* Modify resource file list and sub-file front-end code
* Modify udF resource file list and subfile front-end code
* Fix modified page does not dynamically update content, added V-if judgment
* Fix duplicate ID problem

Co-authored-by: wangqiang <wangqiang@coocaa.com>

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

@@ -83,6 +83,7 @@
     </div>
     <el-dialog
       :visible.sync="renameDialog"
+      v-if="renameDialog"
       width="auto">
       <m-rename :item="item" @onUpDate="onUpDate" @close="close"></m-rename>
     </el-dialog>

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

@@ -82,6 +82,7 @@
     </div>
     <el-dialog
       :visible.sync="renameDialog"
+      v-if="renameDialog"
       width="auto">
       <m-rename :item="item" @onUpDate="onUpDate" @close="close"></m-rename>
     </el-dialog>
@@ -127,7 +128,7 @@
         }
       },
       _reUploadFile (item) {
-        findComponentDownward(this.$root, 'roof-nav')._fileReUpload(item)
+        findComponentDownward(this.$root, 'roof-nav')._fileChildReUpload('FILE', item, this.$route.params.id)
       },
       _downloadFile (item) {
         downloadFile(`resources/${item.id}/download`)

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

@@ -57,6 +57,9 @@
         </el-table-column>
         <el-table-column :label="$t('Operation')" min-width="120">
           <template slot-scope="scope">
+            <el-tooltip :content="$t('ReUpload File')" placement="top" :enterable="false">
+              <span><el-button type="primary" size="mini" icon="el-icon-upload" :disabled="scope.row.directory" @click="_reUpload(scope.row,scope.$index)" circle></el-button></span>
+            </el-tooltip>
             <el-tooltip :content="$t('Rename')" placement="top" :enterable="false">
               <span><el-button id="btnRename" type="primary" size="mini" icon="el-icon-edit" @click="_rename(scope.row,scope.$index)" circle></el-button></span>
             </el-tooltip>
@@ -92,6 +95,7 @@
   import { downloadFile } from '@/module/download'
   import { bytesToSize } from '@/module/util/util'
   import localStore from '@/module/util/localStorage'
+  import { findComponentDownward } from '@/module/util'
   export default {
     name: 'udf-manage-list',
     data () {
@@ -132,6 +136,9 @@
           this.$message.error(e.msg || '')
         })
       },
+      _reUpload (item) {
+        findComponentDownward(this.$root, 'roof-nav')._fileReUpload('UDF', item)
+      },
       _rename (item, i) {
         this.item = item
         this.index = i

dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/subUdfDirectory/_source/list.vue

@@ -53,6 +53,9 @@
         </el-table-column>
         <el-table-column :label="$t('Operation')" min-width="120">
           <template slot-scope="scope">
+            <el-tooltip :content="$t('ReUpload File')" placement="top" :enterable="false">
+              <span><el-button type="primary" size="mini" icon="el-icon-upload" @click="_reUpload(scope.row,scope.$index)" :disabled="scope.row.directory" circle></el-button></span>
+            </el-tooltip>
             <el-tooltip :content="$t('Rename')" placement="top" :enterable="false">
               <span><el-button type="primary" size="mini" icon="el-icon-edit" @click="_rename(scope.row,scope.$index)" circle></el-button></span>
             </el-tooltip>
@@ -88,7 +91,7 @@
   import { downloadFile } from '@/module/download'
   import { bytesToSize } from '@/module/util/util'
   import localStore from '@/module/util/localStorage'
-
+  import { findComponentDownward } from '@/module/util'
   export default {
     name: 'udf-manage-list',
     data () {
@@ -131,6 +134,9 @@
           this.$message.error(e.msg || '')
         })
       },
+      _reUpload (item) {
+        findComponentDownward(this.$root, 'roof-nav')._fileReUpload('UDF', item, this.$route.params.id)
+      },
       _rename (item, i) {
         this.item = item
         this.index = i

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

@@ -16,11 +16,12 @@
  */
 <template>
   <m-popup
-          ref="popup"
+    ref="popup"
-          :ok-text="$t('Upload')"
+    :ok-text="$t('Upload')"
-          :nameText="$t('ReUpload File')"
+    :nameText="$t('File Upload')"
-          @ok="_ok"
+    @ok="_ok"
-          :disabled="progress === 0 ? false : true">
+    @close="_close"
+    :disabled="progress!==0">
     <template slot="content">
       <form name="files" enctype="multipart/form-data" method="post">
         <div class="file-update-model"
@@ -192,7 +193,7 @@
           formData.append('description', this.description)
           formData.append('id', this.id)
           formData.append('type', this.type)
-          io.post('resources/update', res => {
+          io.post('resources/' + this.id, res => {
             this.$message.success(res.msg)
             resolve()
             self.$emit('onUpdate')
@@ -245,6 +246,9 @@
         this.file = file
         this.name = file.name
         this.$refs.file.value = null
+      },
+      _close () {
+        this.$emit('closeChildReUpload')
       }
     },
     mounted () {

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

@@ -48,7 +48,7 @@
                 type="input"
                 size="small"
                 v-model="name"
-                :disabled="true"
+                :disabled="progress !== 0"
                 :placeholder="$t('Please enter name')">
               </el-input>
             </template>
@@ -93,7 +93,7 @@
   import mProgressBar from '@/module/components/progressBar/progressBar'
 
   export default {
-    name: 'file-upload',
+    name: 'file-update',
     data () {
       return {
         store,
@@ -106,21 +106,17 @@
         // file
         file: null,
         currentDir: '/',
-        id: null,
         // Whether to drag upload
         dragOver: false
       }
     },
     watch: {
-      originalFileData: {
-        deep: true,
-        handler () {
-          this._init()
-        }
-      }
     },
     props: {
-      originalFileData: Object
+      type: String,
+      fileName: String,
+      desc: String,
+      id: Number
     },
     methods: {
       /**
@@ -129,7 +125,7 @@
       _ok () {
         this.$refs.popup.spinnerLoading = true
         if (this._validation()) {
-          if (this.originalFileData.fileName === this.name) {
+          if (this.fileName === this.name) {
             const isLt1024M = this.file.size / 1024 / 1024 < 1024
             if (isLt1024M) {
               this._formDataUpdate().then(res => {
@@ -144,8 +140,10 @@
               this.$refs.popup.spinnerLoading = false
             }
           } else {
-            const params = { fullName: this.currentDir + this.name, type: 'FILE' }
+            this.store.dispatch('resource/resourceVerifyName', {
-            this.store.dispatch('resource/resourceVerifyName', params).then(res => {
+              fullName: '/' + this.name,
+              type: this.type
+            }).then(res => {
               const isLt1024M = this.file.size / 1024 / 1024 < 1024
               if (isLt1024M) {
                 this._formDataUpdate().then(res => {
@@ -168,9 +166,6 @@
           this.$refs.popup.spinnerLoading = false
         }
       },
-      _close () {
-        this.$emit('closeFileUpload')
-      },
       /**
        * validation
        */
@@ -196,15 +191,16 @@
           formData.append('file', this.file)
           formData.append('name', this.name)
           formData.append('description', this.description)
-          formData.append('type', 'FILE')
+          formData.append('id', this.id)
+          formData.append('type', this.type)
           io.put('resources/' + this.id, res => {
             this.$message.success(res.msg)
             resolve()
-            self.$emit('onUploadFile')
+            self.$emit('onUpdate')
             this.reset()
           }, e => {
             reject(e)
-            self.$emit('closeFileUpload')
+            self.$emit('close')
             this.$message.error(e.msg || '')
             this.reset()
           }, {
@@ -251,20 +247,13 @@
         this.name = file.name
         this.$refs.file.value = null
       },
-      _init () {
+      _close () {
-        if (this.originalFileData) {
+        this.$emit('closeReUpload')
-          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)
-        }
       }
     },
     mounted () {
-      this.reset()
+      this.name = this.fileName
-      this._init()
+      this.description = this.desc
     },
     components: { mPopup, mListBoxF, mProgressBar }
   }

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

@@ -149,14 +149,15 @@
 
     <el-dialog
       :visible.sync="definitionUpdateDialog"
+      v-if="definitionUpdateDialog"
       append-to-body="true"
       width="auto">
       <m-definition-update :type="type" @onProgressDefinition="onProgressDefinition" @onUpdateDefinition="onUpdateDefinition" @onArchiveDefinition="onArchiveDefinition" @closeDefinition="closeDefinition"></m-definition-update>
     </el-dialog>
 
     <el-dialog
-      id="fileUpdateDialog"
       :visible.sync="fileUpdateDialog"
+      v-if="fileUpdateDialog"
       append-to-body="true"
       width="auto">
       <m-file-update :type="type" @onProgressFileUpdate="onProgressFileUpdate" @onUpdateFileUpdate="onUpdateFileUpdate" @onArchiveDefinition="onArchiveFileUpdate" @closeFileUpdate="closeFileUpdate"></m-file-update>
@@ -164,6 +165,7 @@
 
     <el-dialog
       :visible.sync="fileChildUpdateDialog"
+      v-if="fileChildUpdateDialog"
       append-to-body="true"
       width="auto">
       <m-file-child-update :type="type" :id="id" @onProgressFileChildUpdate="onProgressFileChildUpdate" @onUpdateFileChildUpdate="onUpdateFileChildUpdate" @onArchiveFileChildUpdate="onArchiveFileChildUpdate" @closeFileChildUpdate="closeFileChildUpdate"></m-file-child-update>
@@ -171,20 +173,27 @@
 
     <el-dialog
       :visible.sync="resourceChildUpdateDialog"
+      v-if="resourceChildUpdateDialog"
       append-to-body="true"
       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"
+      :visible.sync="fileReUploadDialog"
+      v-if="fileReUploadDialog"
       append-to-body="true"
       width="auto">
-      <m-file-upload
+      <m-file-re-upload :type="type" :fileName="fileName" :id="id" :desc="desc" @onProgress="onProgressReUpload" @onUpdate="onUpdateReUpload" @onArchive="onArchiveReUpload" @closeReUpload="closeReUpload"></m-file-re-upload>
-        :originalFileData="originalFileData"
+    </el-dialog>
-        @onUploadFile="onUploadFile"
+
-        @closeFileUpload="closeFileUpload">
+    <el-dialog
-      </m-file-upload>
+      :visible.sync="fileChildReUploadDialog"
+      append-to-body="true"
+      :destroy-on-close="true"
+      v-if="fileChildReUploadDialog"
+      width="auto">
+      <m-file-child-re-update :type="type" :fileName="fileName" :id="id" :desc="desc" @onProgress="onProgressChildReUpload" @onUpdate="onUpdateChildReUpload" @onArchive="onArchiveChildReUpload" @closeReUpload="closeChildReUpload"></m-file-child-re-update>
     </el-dialog>
   </div>
 </template>
@@ -193,11 +202,12 @@
   import cookies from 'js-cookie'
   import { mapState, mapActions } from 'vuex'
   import { findComponentDownward } from '@/module/util/'
+  import mFileReUpload from '@/module/components/fileUpdate/fileReUpload'
   import mFileUpdate from '@/module/components/fileUpdate/fileUpdate'
   import mFileChildUpdate from '@/module/components/fileUpdate/fileChildUpdate'
   import mResourceChildUpdate from '@/module/components/fileUpdate/resourceChildUpdate'
+  import mFileChildReUpdate from '@/module/components/fileUpdate/fileChildReUpdate'
   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'
 
@@ -227,10 +237,11 @@
         fileChildUpdateDialog: false,
         id: null,
         fileName: '',
-        description: '',
+        desc: '',
-        originalFileData: {},
         resourceChildUpdateDialog: false,
-        fileUploadDialog: false
+        fileReUploadDialog: false,
+        fileChildReUploadDialog: false,
+        data: ''
       }
     },
 
@@ -253,6 +264,30 @@
           this._signOut()
         }
       },
+      /* fileReUpload */
+      _fileReUpload (type, item) {
+        if (this.progress) {
+          this._toggleArchive()
+          return
+        }
+        this.fileReUploadDialog = true
+        this.type = type
+        this.fileName = item.fileName
+        this.desc = item.description
+        this.id = item.id
+      },
+      _fileChildReUpload (type, item, data) {
+        if (this.progress) {
+          this._toggleArchive()
+          return
+        }
+        this.fileReUploadDialog = true
+        this.type = type
+        this.fileName = item.fileName
+        this.desc = item.description
+        this.id = item.id
+        this.data = data
+      },
       /**
        * Upload (for the time being)
        */
@@ -295,17 +330,6 @@
         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
       },
@@ -322,14 +346,7 @@
         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
       },
@@ -395,6 +412,40 @@
         setTimeout(() => {
           window.location.reload()
         }, 100)
+      },
+      onProgressReUpload (val) {
+        this.progress = val
+      },
+      onUpdateReUpload () {
+        let self = this
+        findComponentDownward(self.$root, `resource-list-index-${this.type}`)._updateList()
+        this.isUpdate = false
+        this.progress = 0
+        this.fileReUploadDialog = false
+      },
+      onArchiveReUpload () {
+        this.isUpdate = true
+      },
+      closeReUpload () {
+        this.progress = 0
+        this.fileReUploadDialog = false
+      },
+      onProgressChildReUpload (val) {
+        this.progress = val
+      },
+      onUpdateChildReUpload () {
+        let self = this
+        findComponentDownward(self.$root, `resource-list-index-${this.type}`)._updateList(this.data)
+        this.isUpdate = false
+        this.progress = 0
+        this.fileChildReUploadDialog = false
+      },
+      onArchiveChildReUpload () {
+        this.isUpdate = true
+      },
+      closeChildReUpload () {
+        this.progress = 0
+        this.fileChildReUploadDialog = false
       }
     },
     created () {
@@ -405,7 +456,7 @@
     computed: {
       ...mapState('user', ['userInfo'])
     },
-    components: { mFileUpdate, mProgressBar, mDefinitionUpdate, mFileChildUpdate, mResourceChildUpdate, mFileUpload }
+    components: { mFileUpdate, mFileReUpload, mProgressBar, mDefinitionUpdate, mFileChildUpdate, mResourceChildUpdate, mFileChildReUpdate }
   }
 </script>