[Feture-3327][ui]Add the function of re-uploading files in the resource center (#3394)

* Before creating a workflow, clear the canvas

* [Fix-3256][ui] herry pick commit from dev for Fix admin user info update error (#3306)

* [Feture-3327][ui]Add the function of re-uploading files in the resource center

Co-authored-by: wuchunfu <319355703@qq.com>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue

@@ -98,6 +98,7 @@
                     data-toggle="tooltip"
                     :title="$t('View log')"
                     icon="ans-icon-log"
+                    :disabled="item.taskType==='SUB_PROCESS'? true: false"
                     @click="_refreshLog(item)">
             </x-button>
           </td>

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

@@ -40,7 +40,7 @@
           <th scope="col" width="140">
             <span>{{$t('Update Time')}}</span>
           </th>
-          <th scope="col" width="140">
+          <th scope="col" width="160">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
@@ -79,6 +79,18 @@
                     @click="_edit(item,$index)"
                     icon="ans-icon-edit">
             </x-button>
+
+            <x-button
+                    type="info"
+                    shape="circle"
+                    size="xsmall"
+                    data-toggle="tooltip"
+                    :title="$t('ReUpload File')"
+                    :disabled="item.directory? true: false"
+                    @click="_reUpload(item)"
+                    icon="ans-icon-upload">
+            </x-button>
+
             <x-button
                     type="info"
                     shape="circle"
@@ -132,6 +144,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'
   export default {
@@ -161,6 +174,9 @@
           this.$router.push({ path: `/resource/file/list/${item.id}` })
         }
       },
+      _reUpload (item) {
+        findComponentDownward(this.$root, 'roof-nav')._fileReUpload('FILE',item)
+      },
       _downloadFile (item) {
         downloadFile('/dolphinscheduler/resources/download', {
           id: item.id

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

@@ -40,7 +40,7 @@
           <th scope="col" width="140">
             <span>{{$t('Update Time')}}</span>
           </th>
-          <th scope="col" width="140">
+          <th scope="col" width="160">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
@@ -79,6 +79,18 @@
                     @click="_edit(item,$index)"
                     icon="ans-icon-edit">
             </x-button>
+
+            <x-button
+                    type="info"
+                    shape="circle"
+                    size="xsmall"
+                    data-toggle="tooltip"
+                    :title="$t('ReUpload File')"
+                    :disabled="item.directory? true: false"
+                    @click="_childReUpload(item)"
+                    icon="ans-icon-upload">
+            </x-button>
+
             <x-button
                     type="info"
                     shape="circle"
@@ -132,6 +144,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'
 
@@ -162,6 +175,9 @@
           this.$router.push({ path: `/resource/file/list/${item.id}` })
         }
       },
+      _childReUpload (item) {
+        findComponentDownward(this.$root, 'roof-nav')._fileChildReUpload('FILE',item,this.$route.params.id)
+      },
       _downloadFile (item) {
         downloadFile('/dolphinscheduler/resources/download', {
           id: item.id

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

@@ -43,7 +43,7 @@
           <th scope="col" width="140">
             <span>{{$t('Update Time')}}</span>
           </th>
-          <th scope="col" width="110">
+          <th scope="col" width="130">
             <span>{{$t('Operation')}}</span>
           </th>
         </tr>
@@ -76,6 +76,16 @@
             <span v-else>-</span>
           </td>
           <td>
+            <x-button
+                    type="info"
+                    shape="circle"
+                    size="xsmall"
+                    data-toggle="tooltip"
+                    :title="$t('ReUpload File')"
+                    :disabled="item.directory? true: false"
+                    @click="_reUpload(item)"
+                    icon="ans-icon-upload">
+            </x-button>
             <x-button
                     type="info"
                     shape="circle"
@@ -127,6 +137,7 @@
   import mRename from './rename'
   import { downloadFile } from '@/module/download'
   import { bytesToSize } from '@/module/util/util'
+  import { findComponentDownward } from '@/module/util'
   import localStore from '@/module/util/localStorage'
   export default {
     name: 'udf-manage-list',
@@ -154,6 +165,12 @@
           this.$router.push({ path: `/resource/udf/subUdfDirectory/${item.id}` })
         }
       },
+      /**
+       * File Upload
+       */
+      _reUpload (item) {
+        findComponentDownward(this.$root, 'roof-nav')._fileReUpload('UDF', item)
+      },
       _rtSize (val) {
         return bytesToSize(parseInt(val))
       },

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

@@ -0,0 +1,336 @@
+/*
+ * 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('File Upload')"
+          @ok="_ok"
+          :disabled="progress === 0 ? false : true">
+    <template slot="content">
+      <form name="files" enctype="multipart/form-data" method="post">
+        <div class="file-update-model"
+             @drop.prevent="_onDrop"
+             @dragover.prevent="dragOver = true"
+             @dragleave.prevent="dragOver = false"
+             id="file-update-model">
+          <div class="tooltip-info">
+            <em class="ans ans-icon-warn-solid"></em>
+            <span>{{$t('Drag the file into the current upload window')}}</span>
+          </div>
+          <!--<div class="hide-archive" v-if="progress !== 0" @click="_ckArchive">
+            <em class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></em>
+          </div>-->
+          <div class="update-popup" v-if="dragOver">
+            <div class="icon-box">
+              <em class="ans ans-icon-upload"></em>
+            </div>
+            <p class="p1">
+              <span>{{$t('Drag area upload')}}</span>
+            </p>
+          </div>
+          <m-list-box-f>
+            <template slot="name"><strong>*</strong>{{$t('File Name')}}</template>
+            <template slot="content">
+              <x-input
+                      type="input"
+                      v-model="name"
+                      :disabled="progress !== 0"
+                      :placeholder="$t('Please enter name')"
+                      autocomplete="off">
+              </x-input>
+            </template>
+          </m-list-box-f>
+          <m-list-box-f>
+            <template slot="name">{{$t('Description')}}</template>
+            <template slot="content">
+              <x-input
+                      type="textarea"
+                      v-model="description"
+                      :disabled="progress !== 0"
+                      :placeholder="$t('Please enter description')"
+                      autocomplete="off">
+              </x-input>
+            </template>
+          </m-list-box-f>
+          <m-list-box-f>
+            <template slot="name"><strong>*</strong>{{$t('Upload Files')}}</template>
+            <template slot="content">
+              <div class="file-update-box">
+                <template v-if="progress === 0">
+                  <input name="file" id="file" type="file" class="file-update">
+                  <x-button type="dashed" size="xsmall"> {{$t('Upload')}} </x-button>
+                </template>
+                <div class="progress-box" v-if="progress !== 0">
+                  <m-progress-bar :value="progress" text-placement="left-right"></m-progress-bar>
+                </div>
+              </div>
+            </template>
+          </m-list-box-f>
+        </div>
+      </form>
+    </template>
+  </m-popup>
+</template>
+<script>
+  import io from '@/module/io'
+  import i18n from '@/module/i18n'
+  import store from '@/conf/home/store'
+  import localStore from '@/module/util/localStorage'
+  import mPopup from '@/module/components/popup/popup'
+  import mListBoxF from '@/module/components/listBoxF/listBoxF'
+  import mProgressBar from '@/module/components/progressBar/progressBar'
+
+  export default {
+    name: 'file-update',
+    data () {
+      return {
+        store,
+        // name
+        name: '',
+        // description
+        description: '',
+        // progress
+        progress: 0,
+        // file
+        file: null,
+        currentDir: localStore.getItem('currentDir'),
+        // Whether to drag upload
+        dragOver: false
+      }
+    },
+    watch: {
+    },
+    props: {
+      type: String,
+      fileName: String,
+      desc: String,
+      id: Number
+    },
+    methods: {
+      /**
+       * submit
+       */
+      _ok () {
+        this.$refs['popup'].spinnerLoading = true
+        if (this._validation()) {
+          if(this.fileName===this.name) {
+            const isLt1024M = this.file.size / 1024 / 1024 < 1024
+                if(isLt1024M) {
+                    this._formDataUpdate().then(res => {
+                        setTimeout(() => {
+                        this.$refs['popup'].spinnerLoading = false
+                        }, 800)
+                    }).catch(e => {
+                        this.$refs['popup'].spinnerLoading = false
+                    })
+                } else {
+                    this.$message.warning(`${i18n.$t('Upload File Size')}`)
+                    this.$refs['popup'].spinnerLoading = false
+                }
+          } else {
+            this.store.dispatch('resource/resourceVerifyName', {
+                fullName: this.currentDir+'/'+this.name,
+                type: this.type
+            }).then(res => {
+                const isLt1024M = this.file.size / 1024 / 1024 < 1024
+                if(isLt1024M) {
+                this._formDataUpdate().then(res => {
+                    setTimeout(() => {
+                    this.$refs['popup'].spinnerLoading = false
+                    }, 800)
+                }).catch(e => {
+                    this.$refs['popup'].spinnerLoading = false
+                })
+                } else {
+                    this.$message.warning(`${i18n.$t('Upload File Size')}`)
+                    this.$refs['popup'].spinnerLoading = false
+                }
+            }).catch(e => {
+                this.$message.error(e.msg || '')
+                this.$refs['popup'].spinnerLoading = false
+            })
+          }
+        } else {
+          this.$refs['popup'].spinnerLoading = false
+        }
+      },
+      /**
+       * validation
+       */
+      _validation () {
+        if (!this.name) {
+          this.$message.warning(`${i18n.$t('Please enter file name')}`)
+          return false
+        }
+        if (!this.file) {
+          this.$message.warning(`${i18n.$t('Please select the file to upload')}`)
+          return false
+        }
+        return true
+      },
+      /**
+       * update file
+       */
+      _formDataUpdate () {
+        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 => {
+            this.$message.success(res.msg)
+            resolve()
+            self.$emit('onUpdate')
+          }, e => {
+            reject(e)
+            self.$emit('close')
+            this.$message.error(e.msg || '')
+          }, {
+            data: formData,
+            emulateJSON: false,
+            onUploadProgress (progressEvent) {
+              // Size has been uploaded
+              let loaded = progressEvent.loaded
+              // Total attachment size
+              let total = progressEvent.total
+              self.progress = Math.floor(100 * loaded / total)
+              self.$emit('onProgress', self.progress)
+            }
+          })
+        })
+      },
+      /**
+       * Archive to the top right corner Continue uploading
+       */
+      _ckArchive () {
+        $('.update-file-modal').hide()
+        this.$emit('onArchive')
+      },
+      /**
+       * Drag and drop upload
+       */
+      _onDrop (e) {
+        let file = e.dataTransfer.files[0]
+        this.file = file
+        this.name = file.name
+        this.dragOver = false
+      }
+    },
+    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 }
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .file-update-model {
+    .tooltip-info {
+      position: absolute;
+      left: 20px;
+      bottom: 26px;
+      span {
+        font-size: 12px;
+        color: #666;
+        vertical-align: middle;
+      }
+      .fa,.ans {
+        color: #0097e0;
+        font-size: 14px;
+        vertical-align: middle;
+      }
+    }
+    .hide-archive {
+      position: absolute;
+      right: 22px;
+      top: 17px;
+      .fa,.ans{
+        font-size: 16px;
+        color: #333;
+        font-weight: normal;
+        cursor: pointer;
+        &:hover {
+          color: #0097e0;
+        }
+      }
+    }
+    .file-update-box {
+      padding-top: 4px;
+      position: relative;
+      .file-update {
+        width: 70px;
+        height: 40px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        cursor: pointer;
+        filter: alpha(opacity=0);
+        -moz-opacity: 0;
+        opacity: 0;
+      }
+      &:hover {
+        .v-btn-dashed {
+          background-color: transparent;
+          border-color: #47c3ff;
+          color: #47c3ff;
+          cursor: pointer;
+        }
+      }
+      .progress-box {
+        width: 200px;
+        position: absolute;
+        left: 70px;
+        top: 14px;
+      }
+    }
+    .update-popup {
+      width: calc(100% - 20px);
+      height: calc(100% - 20px);
+      background: rgba(255,253,239,.7);
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      border-radius: 3px;
+      z-index: 1;
+      border: .18rem dashed #cccccc;
+      .icon-box {
+        text-align: center;
+        margin-top: 96px;
+        .fa,.ans {
+          font-size: 50px;
+          color: #2d8cf0;
+        }
+      }
+      .p1 {
+        text-align: center;
+        font-size: 16px;
+        color: #333;
+        padding-top: 8px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,335 @@
+/*
+ * 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">
+    <template slot="content">
+      <form name="files" enctype="multipart/form-data" method="post">
+        <div class="file-update-model"
+             @drop.prevent="_onDrop"
+             @dragover.prevent="dragOver = true"
+             @dragleave.prevent="dragOver = false"
+             id="file-update-model">
+          <div class="tooltip-info">
+            <em class="ans ans-icon-warn-solid"></em>
+            <span>{{$t('Drag the file into the current upload window')}}</span>
+          </div>
+          <!--<div class="hide-archive" v-if="progress !== 0" @click="_ckArchive">
+            <em class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></em>
+          </div>-->
+          <div class="update-popup" v-if="dragOver">
+            <div class="icon-box">
+              <em class="ans ans-icon-upload"></em>
+            </div>
+            <p class="p1">
+              <span>{{$t('Drag area upload')}}</span>
+            </p>
+          </div>
+          <m-list-box-f>
+            <template slot="name"><strong>*</strong>{{$t('File Name')}}</template>
+            <template slot="content">
+              <x-input
+                      type="input"
+                      v-model="name"
+                      :disabled="progress !== 0"
+                      :placeholder="$t('Please enter name')"
+                      autocomplete="off">
+              </x-input>
+            </template>
+          </m-list-box-f>
+          <m-list-box-f>
+            <template slot="name">{{$t('Description')}}</template>
+            <template slot="content">
+              <x-input
+                      type="textarea"
+                      v-model="description"
+                      :disabled="progress !== 0"
+                      :placeholder="$t('Please enter description')"
+                      autocomplete="off">
+              </x-input>
+            </template>
+          </m-list-box-f>
+          <m-list-box-f>
+            <template slot="name"><strong>*</strong>{{$t('Upload Files')}}</template>
+            <template slot="content">
+              <div class="file-update-box">
+                <template v-if="progress === 0">
+                  <input name="file" id="file" type="file" class="file-update">
+                  <x-button type="dashed" size="xsmall"> {{$t('Upload')}} </x-button>
+                </template>
+                <div class="progress-box" v-if="progress !== 0">
+                  <m-progress-bar :value="progress" text-placement="left-right"></m-progress-bar>
+                </div>
+              </div>
+            </template>
+          </m-list-box-f>
+        </div>
+      </form>
+    </template>
+  </m-popup>
+</template>
+<script>
+  import io from '@/module/io'
+  import i18n from '@/module/i18n'
+  import store from '@/conf/home/store'
+  import mPopup from '@/module/components/popup/popup'
+  import mListBoxF from '@/module/components/listBoxF/listBoxF'
+  import mProgressBar from '@/module/components/progressBar/progressBar'
+
+  export default {
+    name: 'file-update',
+    data () {
+      return {
+        store,
+        // name
+        name: '',
+        // description
+        description: '',
+        // progress
+        progress: 0,
+        // file
+        file: null,
+        currentDir: '/',
+        // Whether to drag upload
+        dragOver: false
+      }
+    },
+    watch: {
+    },
+    props: {
+      type: String,
+      fileName: String,
+      desc: String,
+      id: Number
+    },
+    methods: {
+      /**
+       * submit
+       */
+      _ok () {
+        this.$refs['popup'].spinnerLoading = true
+        if (this._validation()) {
+          if(this.fileName===this.name) {
+            const isLt1024M = this.file.size / 1024 / 1024 < 1024
+            if(isLt1024M) {
+                this._formDataUpdate().then(res => {
+                    setTimeout(() => {
+                    this.$refs['popup'].spinnerLoading = false
+                    }, 800)
+                }).catch(e => {
+                    this.$refs['popup'].spinnerLoading = false
+                })
+            } else {
+                this.$message.warning(`${i18n.$t('Upload File Size')}`)
+                this.$refs['popup'].spinnerLoading = false
+            }
+          } else {
+            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 => {
+                        setTimeout(() => {
+                        this.$refs['popup'].spinnerLoading = false
+                        }, 800)
+                    }).catch(e => {
+                        this.$refs['popup'].spinnerLoading = false
+                    })
+                } else {
+                    this.$message.warning(`${i18n.$t('Upload File Size')}`)
+                    this.$refs['popup'].spinnerLoading = false
+                }
+            }).catch(e => {
+                this.$message.error(e.msg || '')
+                this.$refs['popup'].spinnerLoading = false
+            })
+          }
+        } else {
+          this.$refs['popup'].spinnerLoading = false
+        }
+      },
+      /**
+       * validation
+       */
+      _validation () {
+        if (!this.name) {
+          this.$message.warning(`${i18n.$t('Please enter file name')}`)
+          return false
+        }
+        if (!this.file) {
+          this.$message.warning(`${i18n.$t('Please select the file to upload')}`)
+          return false
+        }
+        return true
+      },
+      /**
+       * update file
+       */
+      _formDataUpdate () {
+        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 => {
+            this.$message.success(res.msg)
+            resolve()
+            self.$emit('onUpdate')
+          }, e => {
+            reject(e)
+            self.$emit('close')
+            this.$message.error(e.msg || '')
+          }, {
+            data: formData,
+            emulateJSON: false,
+            onUploadProgress (progressEvent) {
+              // Size has been uploaded
+              let loaded = progressEvent.loaded
+              // Total attachment size
+              let total = progressEvent.total
+              self.progress = Math.floor(100 * loaded / total)
+              self.$emit('onProgress', self.progress)
+            }
+          })
+        })
+      },
+      /**
+       * Archive to the top right corner Continue uploading
+       */
+      _ckArchive () {
+        $('.update-file-modal').hide()
+        this.$emit('onArchive')
+      },
+      /**
+       * Drag and drop upload
+       */
+      _onDrop (e) {
+        let file = e.dataTransfer.files[0]
+        this.file = file
+        this.name = file.name
+        this.dragOver = false
+      }
+    },
+    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 }
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .file-update-model {
+    .tooltip-info {
+      position: absolute;
+      left: 20px;
+      bottom: 26px;
+      span {
+        font-size: 12px;
+        color: #666;
+        vertical-align: middle;
+      }
+      .fa,.ans {
+        color: #0097e0;
+        font-size: 14px;
+        vertical-align: middle;
+      }
+    }
+    .hide-archive {
+      position: absolute;
+      right: 22px;
+      top: 17px;
+      .fa,.ans{
+        font-size: 16px;
+        color: #333;
+        font-weight: normal;
+        cursor: pointer;
+        &:hover {
+          color: #0097e0;
+        }
+      }
+    }
+    .file-update-box {
+      padding-top: 4px;
+      position: relative;
+      .file-update {
+        width: 70px;
+        height: 40px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        cursor: pointer;
+        filter: alpha(opacity=0);
+        -moz-opacity: 0;
+        opacity: 0;
+      }
+      &:hover {
+        .v-btn-dashed {
+          background-color: transparent;
+          border-color: #47c3ff;
+          color: #47c3ff;
+          cursor: pointer;
+        }
+      }
+      .progress-box {
+        width: 200px;
+        position: absolute;
+        left: 70px;
+        top: 14px;
+      }
+    }
+    .update-popup {
+      width: calc(100% - 20px);
+      height: calc(100% - 20px);
+      background: rgba(255,253,239,.7);
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      border-radius: 3px;
+      z-index: 1;
+      border: .18rem dashed #cccccc;
+      .icon-box {
+        text-align: center;
+        margin-top: 96px;
+        .fa,.ans {
+          font-size: 50px;
+          color: #2d8cf0;
+        }
+      }
+      .p1 {
+        text-align: center;
+        font-size: 16px;
+        color: #333;
+        padding-top: 8px;
+      }
+    }
+  }
+</style>

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

@@ -155,7 +155,9 @@
   import { mapState, mapActions } from 'vuex'
   import { findComponentDownward } from '@/module/util/'
   import mFileUpdate from '@/module/components/fileUpdate/fileUpdate'
+  import mFileReUpload from '@/module/components/fileUpdate/fileReUpload'
   import mFileChildUpdate from '@/module/components/fileUpdate/fileChildUpdate'
+  import mFileChildReUpdate from '@/module/components/fileUpdate/fileChildReUpdate'
   import mResourceChildUpdate from '@/module/components/fileUpdate/resourceChildUpdate'
   import mDefinitionUpdate from '@/module/components/fileUpdate/definitionUpdate'
   import mProgressBar from '@/module/components/progressBar/progressBar'
@@ -262,6 +264,91 @@
           }
         })
       },
+      /* fileReUpload */
+      _fileReUpload (type,item) {
+        if (this.progress) {
+          this._toggleArchive()
+          return
+        }
+        let self = this
+        let modal = this.$modal.dialog({
+          closable: false,
+          showMask: true,
+          escClose: true,
+          className: 'update-file-modal',
+          transitionName: 'opacityp',
+          render (h) {
+            return h(mFileReUpload, {
+              on: {
+                onProgress (val) {
+                  self.progress = val
+                },
+                onUpdate () {
+                  findComponentDownward(self.$root, `resource-list-index-${type}`)._updateList()
+                  self.isUpdate = false
+                  self.progress = 0
+                  modal.remove()
+                },
+                onArchive () {
+                  self.isUpdate = true
+                },
+                close () {
+                  self.progress = 0
+                  modal.remove()
+                }
+              },
+              props: {
+                type: type,
+                fileName: item.fileName,
+                desc: item.description,
+                id: item.id
+              }
+            })
+          }
+        })
+      },
+      _fileChildReUpload (type,item,data) {
+        if (this.progress) {
+          this._toggleArchive()
+          return
+        }
+        let self = this
+        let modal = this.$modal.dialog({
+          closable: false,
+          showMask: true,
+          escClose: true,
+          className: 'update-file-modal',
+          transitionName: 'opacityp',
+          render (h) {
+            return h(mFileChildReUpdate, {
+              on: {
+                onProgress (val) {
+                  self.progress = val
+                },
+                onUpdate () {
+                  findComponentDownward(self.$root, `resource-list-index-${type}`)._updateList(data)
+                  self.isUpdate = false
+                  self.progress = 0
+                  modal.remove()
+                },
+                onArchive () {
+                  self.isUpdate = true
+                },
+                close () {
+                  self.progress = 0
+                  modal.remove()
+                }
+              },
+              props: {
+                type: type,
+                fileName: item.fileName,
+                desc: item.description,
+                id: item.id
+              }
+            })
+          }
+        })
+      },
       _fileChildUpdate (type,data) {
         if (this.progress) {
           this._toggleArchive()
@@ -372,7 +459,7 @@
     computed: {
       ...mapState('user', ['userInfo'])
     },
-    components: { mFileUpdate, mProgressBar, mDefinitionUpdate }
+    components: { mFileUpdate, mProgressBar, mDefinitionUpdate, mFileReUpload, mFileChildReUpdate }
   }
 </script>
 

dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js

@@ -335,6 +335,7 @@ export default {
   Delete: 'Delete',
   'Please enter keyword': 'Please enter keyword',
   'File Upload': 'File Upload',
+  'File ReUpload': 'File ReUpload',
   'Drag the file into the current upload window': 'Drag the file into the current upload window',
   'Drag area upload': 'Drag area upload',
   Upload: 'Upload',

dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js

@@ -333,6 +333,7 @@ export default {
   'Drag the file into the current upload window': '请将文件拖拽到当前上传窗口内！',
   'Drag area upload': '拖动区域上传',
   Upload: '上传',
+  'ReUpload File': '重新上传文件',
   'Please enter file name': '请输入文件名',
   'Please select the file to upload': '请选择要上传的文件',
   'Resources manage': '资源中心',