新增上传文件回显禁止删除按钮

src/components/FileUpload/fileUpload.vue

 <template>
   <div class="upload-file">
-    <el-upload
-      multiple
-      :action="uploadFileUrl"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :limit="limit"
-      :disabled="disabled"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :show-file-list="false"
-      :headers="headers"
-      class="upload-file-uploader"
-      ref="upload"
-    >
+    <el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :limit="limit" :disabled="disabled" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" :show-file-list="false" :headers="headers" class="upload-file-uploader" ref="upload">
       <!-- 上传按钮 -->
-      <el-button size="mini" type="primary" :disabled="disabled">{{
-        $t("选取文件")
-      }}</el-button>
+      <el-button size="mini" type="primary" :disabled="disabled">{{ $t("选取文件") }}</el-button>
       <!-- 上传提示 -->
       <div class="el-upload__tip" slot="tip" v-if="showTip">
         请上传
@@ -33,21 +17,13 @@
     </el-upload>
 
     <!-- 文件列表 -->
-    <transition-group
-      class="upload-file-list el-upload-list el-upload-list--text"
-      name="el-fade-in-linear"
-      tag="ul"
-    >
-      <li
-        :key="index"
-        v-for="(file, index) in fileList"
-      >
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li :key="index" v-for="(file, index) in fileList">
         <div class="imgItem" v-if="checkFileIsImage(file.url)">
-          <el-image 
-            style="width: 200px; height: 100px"
-            :src="file.url" 
-            :preview-src-list="[file.url]">
-          </el-image>
+          <el-image style="width: 200px; height: 100px" :src="file.url" :preview-src-list="[file.url]"> </el-image>
+          <div class="ele-upload-list__item-content-action">
+            <el-button size="mini" type="danger" :disabled="disabled" @click="handleDelete(index)">删除</el-button>
+          </div>
         </div>
         <div class="el-upload-list__item ele-upload-list__item-content" v-else>
           <el-link :href="`${file.url}`" :underline="false" target="_blank">
@@ -57,15 +33,13 @@
             <el-button size="mini" type="danger" :disabled="disabled" @click="handleDelete(index)">删除</el-button>
           </div>
         </div>
-        
       </li>
-
     </transition-group>
   </div>
 </template>
 
 <script>
-import { getToken } from "@/utils/auth";
+import { getToken } from "@/utils/auth"
 
 export default {
   name: "FileUpload",
@@ -75,27 +49,27 @@ export default {
     // 数量限制
     limit: {
       type: Number,
-      default: 5,
+      default: 5
     },
     // 大小限制(MB)
     fileSize: {
       type: Number,
-      default: 5,
+      default: 5
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
       type: Array,
-      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+      default: () => ["doc", "xls", "ppt", "txt", "pdf"]
     },
     disabled: {
       type: Boolean,
-      default: false,
+      default: false
     },
     // 是否显示提示
     isShowTip: {
       type: Boolean,
-      default: true,
-    },
+      default: true
+    }
   },
   data() {
     return {
@@ -104,129 +78,125 @@ export default {
       baseUrl: process.env.VUE_APP_BASE_API,
       uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 上传的文件服务器地址
       headers: {
-        Authorization: "Bearer " + getToken(),
+        Authorization: "Bearer " + getToken()
       },
-      fileList: [],
-    };
+      fileList: []
+    }
   },
   watch: {
     value: {
       handler(val) {
         if (val) {
-          let temp = 1;
+          let temp = 1
           // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(",");
+          const list = Array.isArray(val) ? val : this.value.split(",")
           // 然后将数组转为对象数组
           this.fileList = list.map((item) => {
             if (typeof item === "string") {
-              item = { name: item, url: item };
+              item = { name: item, url: item }
             }
-            item.uid = item.uid || new Date().getTime() + temp++;
-            return item;
-          });
+            item.uid = item.uid || new Date().getTime() + temp++
+            return item
+          })
         } else {
-          this.fileList = [];
-          return [];
+          this.fileList = []
+          return []
         }
       },
       deep: true,
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   computed: {
     // 是否显示提示
     showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
-    },
+      return this.isShowTip && (this.fileType || this.fileSize)
+    }
   },
   methods: {
     // 上传前校检格式和大小
     handleBeforeUpload(file) {
       // 校检文件类型
       if (this.fileType) {
-        let fileExtension = "";
+        let fileExtension = ""
         if (file.name.lastIndexOf(".") > -1) {
-          fileExtension = file.name
-            .slice(file.name.lastIndexOf(".") + 1)
-            .toLowerCase();
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1).toLowerCase()
         }
         const isTypeOk = this.fileType.some((type) => {
-          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
-        });
+          if (file.type.indexOf(type) > -1) return true
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true
+          return false
+        })
         if (!isTypeOk) {
-          this.$modal.msgError(
-            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
-          );
-          return false;
+          this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`)
+          return false
         }
       }
       // 校检文件大小
       if (this.fileSize) {
-        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        const isLt = file.size / 1024 / 1024 < this.fileSize
         if (!isLt) {
-          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
-          return false;
+          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`)
+          return false
         }
       }
-      this.$modal.loading("正在上传文件，请稍候...");
-      this.number++;
-      return true;
+      this.$modal.loading("正在上传文件，请稍候...")
+      this.number++
+      return true
     },
     // 文件个数超出
     handleExceed() {
-      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`)
     },
     // 上传失败
     handleUploadError(err) {
-      this.$modal.msgError("上传文件失败，请重试");
-      this.$modal.closeLoading();
+      this.$modal.msgError("上传文件失败，请重试")
+      this.$modal.closeLoading()
     },
     // 上传成功回调
     handleUploadSuccess(res) {
       // todo 接口返回值没有文件名
-      this.uploadList.push({ name: res.data, url: res.data });
+      this.uploadList.push({ name: res.data, url: res.data })
       if (this.uploadList.length === this.number) {
-        this.fileList = this.fileList.concat(this.uploadList);
-        this.uploadList = [];
-        this.number = 0;
-        this.$emit("input", this.listToString(this.fileList));
-        this.$modal.closeLoading();
+        this.fileList = this.fileList.concat(this.uploadList)
+        this.uploadList = []
+        this.number = 0
+        this.$emit("input", this.listToString(this.fileList))
+        this.$modal.closeLoading()
       }
     },
     // 删除文件
     handleDelete(index) {
-      this.fileList.splice(index, 1);
-      this.$emit("input", this.listToString(this.fileList));
+      this.fileList.splice(index, 1)
+      this.$emit("input", this.listToString(this.fileList))
     },
     // 获取文件名称
     getFileName(name) {
       if (name.lastIndexOf("/") > -1) {
-        return name.slice(name.lastIndexOf("/") + 1);
+        return name.slice(name.lastIndexOf("/") + 1)
       } else {
-        return "";
+        return ""
       }
     },
     // 对象转成指定字符串分隔
     listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
+      let strs = ""
+      separator = separator || ","
       for (let i in list) {
-        strs += list[i].url + separator;
+        strs += list[i].url + separator
       }
-      return strs != "" ? strs.substr(0, strs.length - 1) : "";
+      return strs != "" ? strs.substr(0, strs.length - 1) : ""
     },
     checkFileIsImage(filePath) {
       const fileExtension = filePath.slice(filePath.lastIndexOf(".") + 1).toLowerCase()
-      const fileTypes = ['png', 'jpg', 'jpeg', 'gif']
+      const fileTypes = ["png", "jpg", "jpeg", "gif"]
       if (fileTypes.includes(fileExtension)) {
         return true
       }
       return false
     }
-  },
-};
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -248,4 +218,8 @@ export default {
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
+.imgItem {
+  display: flex;
+  align-items: center;
+}
 </style>

src/views/ecw/memberManagement/exchangeRecordOperation/index.vue

@@ -133,7 +133,7 @@
                       <el-date-picker type="datetime" :placeholder="$t('创建时间')" v-model="item.createTime" value-format="yyyy-MM-dd HH:mm:ss" placement="bottom-start"></el-date-picker>
                     </el-form-item>
                     <el-form-item :label="$t('最后更新人')" v-if="!veriftyDisable">
-                      <el-input v-model="item.updater"></el-input>
+                      <el-input v-model="item.updaterName"></el-input>
                     </el-form-item>
                     <el-form-item :label="$t('最后更新时间')" v-if="!veriftyDisable">
                       <el-date-picker type="datetime" :placeholder="$t('最后更新时间')" v-model="item.updateTime" value-format="yyyy-MM-dd HH:mm:ss" placement="bottom-start"></el-date-picker>
@@ -161,7 +161,7 @@
 </template>
 <script>
 import { bulkConversion } from "@/api/ecw/giftManagement"
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload/fileUpload.vue"
 import chooseGift from "./components/chooseGift.vue"
 import { getExpressPage } from "@/api/ecw/express"
 import { getCurrencyList } from "@/api/ecw/currency"
@@ -387,7 +387,7 @@ export default {
           }
           this.queryParamsList[0].redemptionTime = parseTime(data.redemptionTime) //兑换时间
 
-          this.queryParamsList[0].verifyUser = this.$store.getters.name
+          this.queryParamsList[0].verifyUser = data.verifyUser
 
           this.queryParamsList[0].verifyTime = parseTime(data.verifyTime)
           this.queryParamsList[0].updateTime = parseTime(data.updateTime)
@@ -396,6 +396,7 @@ export default {
           this.queryParamsList[0].exchangeStatusName = this.handleExchangeStatus(data.status)
           this.handleRewardCount(data, 0, data.rewardCount)
           if (this.$route.query.pageStatus == "verify") {
+            this.queryParamsList[0].verifyUser = this.$store.getters.name
             this.queryParamsList[0].verifyTime = getNowDateTime()
           }
           this.$forceUpdate()