feature: 上传文件组件添加更名功能

src/components/hzwlComponents/UploadFormItem.vue

@@ -60,13 +60,59 @@
         :on-success="onSuccess"
         :on-preview="onPreview"
         :on-remove="removeOneFile"
-        :show-file-list="true"
+        :show-file-list="false"
       >
         <div style="padding: 20px 0">
           <i class="el-icon-upload" style="color: #3399ff" />
           <p>点击或拖拽上传文件</p>
         </div>
       </el-upload>
+      <ul class="el-upload-list el-upload-list--text">
+        <li
+          v-for="(file, index) in FileList"
+          :key="index"
+          class="el-upload-list__item is-success"
+          :title="file.name"
+          @click="onPreview(file)"
+        >
+          <a class="el-upload-list__item-name">
+            <i class="el-icon-document" />
+            {{ file.name }}
+          </a>
+          <label class="el-upload-list__item-status-label">
+            <i class="el-icon-upload-success el-icon-circle-check" />
+          </label>
+          <i class="el-icon-edit" @click.stop="handleModifyName(file)" />
+          <i class="el-icon-close" @click.stop="handleRemoveFile(file)" />
+        </li>
+      </ul>
+    </el-dialog>
+    <el-dialog
+      title="修改文件名称"
+      :visible.sync="openModifyFileNameDialog"
+      append-to-body
+    >
+      <el-input v-model="modifyFile.fileName" />
+      <div class="demo-drawer-footer" style="text-align: right;margin-top:30px">
+        <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>
 </template>
@@ -120,6 +166,13 @@ export default {
       fileMadel: false,
       fileList: [], // 用于el-upload
       FileList: [], // 用于回显
+
+      openModifyFileNameDialog: false,
+      modifyFile: {
+        fileName: '',
+        fileId: ''
+      },
+      modifyFileNameLoading: false
     }
   },
   created () {
@@ -234,6 +287,42 @@ export default {
         this.$preview(attId)
       }
     },
+    handleRemoveFile (file) {
+      const fileList = []
+      this.FileList.forEach(item => {
+        if (item.id !== file.id) {
+          fileList.push(item)
+        }
+      })
+      this.removeOneFile(file, fileList)
+    },
+    handleModifyName (file) {
+      this.modifyFile.fileName = file.name
+      this.modifyFile.fileId = file.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
+          this.FileList.forEach(item => {
+            if(item.id === this.modifyFile.fileId) {
+              item.name = this.modifyFile.fileName
+            }
+          })
+          const ids = this.FileList.map(item => item.id).join(',')
+          const names = this.FileList.map(item => item.name).join(',')
+          this.$emit('update:ids', ids)
+          this.$emit('update:names', names)
+        }
+      }, e => {
+        this.modifyFileNameLoading = false
+      })
+    },
   }
 }
 </script>
@@ -250,4 +339,12 @@ export default {
   background: #fff3f3;
   z-index: 9;
 }
+.el-upload-list__item .el-icon-edit{
+  position: absolute;
+  top: 5px;
+  right: 25px;
+  cursor: pointer;
+  opacity: .75;
+  color: #606266;
+}
 </style>