[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>
2022-03-09 14:35:43 +08:00 · 2022-03-09 14:35:43 +08:00 · a4b34e63d0
parent b024aabd12
commit a4b34e63d0
7 changed files with 128 additions and 69 deletions
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/list/_source/list.vue
+++ b/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>
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/subdirectory/_source/list.vue
+++ b/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`)
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/resource/_source/list.vue
+++ b/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
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/udf/pages/subUdfDirectory/_source/list.vue
+++ b/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
--- a/dolphinscheduler-ui/src/js/module/components/fileUpdate/fileChildReUpdate.vue
+++ b/dolphinscheduler-ui/src/js/module/components/fileUpdate/fileChildReUpdate.vue
@ -16,11 +16,12 @@
 */
 <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('File Upload')"
+    @ok="_ok"
+    @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 () {
--- a/dolphinscheduler-ui/src/js/module/components/fileUpdate/fileReUpload.vue
+++ b/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', params).then(res => {
+            this.store.dispatch('resource/resourceVerifyName', {
+              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 () {
-        if (this.originalFileData) {
-          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)
-        }
+      _close () {
+        this.$emit('closeReUpload')
      }
    },
    mounted () {
-      this.reset()
-      this._init()
+      this.name = this.fileName
+      this.description = this.desc
    },
    components: { mPopup, mListBoxF, mProgressBar }
  }
--- a/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
+++ b/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
-        :originalFileData="originalFileData"
-        @onUploadFile="onUploadFile"
-        @closeFileUpload="closeFileUpload">
-      </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>
+    </el-dialog>
+
+    <el-dialog
+      :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: '',
-        originalFileData: {},
+        desc: '',
        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>