上传文件组件，增加修改名称功能

src/components/CustomFormComponents/File.vue

@@ -53,7 +53,7 @@
             multiple
             drag
 
-            :show-file-list="showUploadlist"
+            :show-file-list="!showModifyName && showUploadlist"
             :on-success="uploadSuccess"
             :before-upload="beforeUpload"
             :on-remove="removeOneFile"
@@ -68,6 +68,43 @@
           <i :class="iconClass"></i>
           <div class="el-upload__text">{{ tips }}</div>
         </el-upload>
+        <ul class="el-upload-list el-upload-list--text" v-if="showModifyName">
+          <li class="el-upload-list__item is-success"
+              v-for="(file, index) in showFileList"
+              :key="index"
+              :title="file.name"
+              @click="handlePreview(file)">
+            <a class="el-upload-list__item-name">
+              <i class="el-icon-document"></i>
+              {{ file.name }}
+            </a>
+            <label class="el-upload-list__item-status-label">
+              <i class="el-icon-upload-success el-icon-circle-check"></i>
+            </label>
+            <i class="el-icon-edit" @click.stop="handleModifyName(file)"></i>
+            <i class="el-icon-close" @click.stop="handleRemoveFile(file)"></i>
+          </li>
+          <el-button
+            size="small"
+            @click="clickButtonToUpload('opinionFileList')"
+            icon="el-icon-upload"
+            class="form-upload-btn"
+            v-if="reUpload || showUploadBtn">{{ uploadText || '重新上传' }}</el-button>
+        </ul>
+      </el-dialog>
+      <el-dialog title="修改文件名称"
+                 :visible.sync="openModifyFileNameDialog"
+                 append-to-body
+      >
+        <el-form-item>
+          <el-input v-model="modifyFile.fileName"></el-input>
+        </el-form-item>
+        <div class="demo-drawer-footer" style="text-align: right;">
+          <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" :loading="modifyFileNameLoading"
+                     @click="handleModifyNameSubmite">提交</el-button>
+          <el-button class="common-button-default" size="mini" icon="el-icon-close"
+                     @click="openModifyFileNameDialog = false">取消</el-button>
+        </div>
       </el-dialog>
     </el-form-item>
   </el-col>
@@ -87,7 +124,13 @@ export default {
       uploadPath: 'api/att/attFile/uploadNew',
       defaultFileList: [], // 默认显示
       showFileList: [],
-      importModalshowflagtemp: false
+      importModalshowflagtemp: false,
+      modifyFile: {
+        fileName: '',
+        fileId: ''
+      },
+      openModifyFileNameDialog: false,
+      modifyFileNameLoading: false
     }
   },
   props: {
@@ -150,6 +193,10 @@ export default {
     },
     showUploadBtn: {
       type: Boolean
+    },
+    showModifyName: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
@@ -204,6 +251,32 @@ export default {
     }
   },
   methods: {
+    handleRemoveFile(file){
+      console.log('file = ', file)
+      const index = this.$refs.importFileAboutStand.uploadFiles.findIndex(e => e.response.data.id === file.response.data.id);
+      console.log('index = ', index)
+      this.$refs.importFileAboutStand.uploadFiles.splice(index, 1);
+      this.showFileList.splice(index, 1)
+    },
+    handleModifyName(file) {
+      this.modifyFile.fileName = file.name
+      this.modifyFile.fileId = file.response.data.id
+      this.openModifyFileNameDialog = true
+    },
+    handleModifyNameSubmite(){
+      this.modifyFileNameLoading = true
+      this.$http.get('att/attFile/updateFileName', this.modifyFile, {
+        _this: this
+      }, res => {
+        if(res.ok){
+          this.modifyFileNameLoading = false
+          this.openModifyFileNameDialog = false
+          // TODO 查修改成功后 回显新的 名称
+        }
+      }, e => {
+        this.modifyFileNameLoading = false
+      })
+    },
     handleExceed(files, fileList) {
       if (this.exceed) {
         this.$message.warning(this.exceed)
@@ -491,4 +564,12 @@ export default {
       color: rgba(64, 158, 255, 1);
     }
   }
+  .el-upload-list__item .el-icon-edit{
+    position: absolute;
+    top: 5px;
+    right: 25px;
+    cursor: pointer;
+    opacity: .75;
+    color: #606266;
+  }
 </style>

src/pages/regulatoryRepository/domesticStandardsAndRegulations/index.vue

@@ -749,6 +749,7 @@
                     :config="field"
                     v-model="sarStandardsInfoEO[field.attrField]"
                     :disabled="formdisableflag"
+                    :show-modify-name="true"
                     @fileSuccess="fileSuccess"
                   ></custom-file>
                 </template>