[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
2022-02-13 11:47:10 +08:00 · 2022-02-13 11:47:10 +08:00 · 3f6caef08f
parent b0dbc33730
commit 3f6caef08f
3 changed files with 97 additions and 57 deletions
--- 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
@ -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`)
      },
--- a/dolphinscheduler-ui/src/js/module/components/fileUpdate/fileReUpload.vue
+++ b/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 }
  }
--- a/dolphinscheduler-ui/src/js/module/components/nav/nav.vue
+++ b/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>