From 3e062da56061ed7785c71d3afb2dc2aaf5e9d10e Mon Sep 17 00:00:00 2001
From: song-tianyang <tianyang.song@fit2cloud.com>
Date: Tue, 27 Jun 2023 11:32:05 +0800
Subject: [PATCH] =?UTF-8?q?style(=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=A8=A1=E5=BC=8F=E7=9A=84=E6=98=BE=E7=A4=BA=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E5=9B=BE=E7=89=87=E4=BD=BF=E7=94=A8=E5=B9=B3?=
 =?UTF-8?q?=E9=93=BA=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1027207 --user=宋天阳 【项目设置】文件管理-图片预览-显示问题
https://www.tapd.cn/55049933/s/1386729
---
 .../resources/i18n/commons_zh_CN.properties     |  2 +-
 .../menu/file/edit/EditFileMetadata.vue         |  8 ++++++++
 .../business/menu/file/list/FileThumbnail.vue   | 17 +++++++++--------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/framework/sdk-parent/sdk/src/main/resources/i18n/commons_zh_CN.properties b/framework/sdk-parent/sdk/src/main/resources/i18n/commons_zh_CN.properties
index 76c862e1af..7290102dad 100644
--- a/framework/sdk-parent/sdk/src/main/resources/i18n/commons_zh_CN.properties
+++ b/framework/sdk-parent/sdk/src/main/resources/i18n/commons_zh_CN.properties
@@ -382,5 +382,5 @@ name_already_exists_in_module=同层级下已经存在
 target_issue_template_not_checked=无法复制，未选中目标项目
 source_issue_template_is_empty=复制错误，源项目为空
 select_resource_error_and_check=查找资源出错，请检查资源是否存在
-load_test_file_not_have_jmx=性能測試里的JMX文件不存在
+load_test_file_not_have_jmx=性能测试里的JMX文件不存在
 load_test_file_is_not_jmx=性能测试里的JMX文件不合法
\ No newline at end of file
diff --git a/project-management/frontend/src/business/menu/file/edit/EditFileMetadata.vue b/project-management/frontend/src/business/menu/file/edit/EditFileMetadata.vue
index 9810ee40cb..851e943378 100644
--- a/project-management/frontend/src/business/menu/file/edit/EditFileMetadata.vue
+++ b/project-management/frontend/src/business/menu/file/edit/EditFileMetadata.vue
@@ -509,6 +509,8 @@ export default {
       this.isFirst = index <= 0;
       if (!this.isFirst) {
         this.data = this.results[index - 1];
+        this.fileBase64Str = '';
+        this.isImage(this.data);
       } else {
         if (this.currentPage === 1) {
           this.$warning(this.$t("project.file_first"));
@@ -516,6 +518,8 @@ export default {
           // 向上翻页
           this.currentPage--;
           this.getProjectFiles(true);
+          this.fileBase64Str = '';
+          this.isImage(this.data);
         }
       }
     },
@@ -541,6 +545,8 @@ export default {
       this.isLast = this.results.length - 1 === index;
       if (!this.isLast) {
         this.data = this.results[index + 1];
+        this.fileBase64Str = '';
+        this.isImage(this.data);
       } else {
         let totalPages = Math.ceil(this.total / this.pageSize);
         if (totalPages === this.currentPage) {
@@ -549,6 +555,8 @@ export default {
           // 向后翻页
           this.currentPage++;
           this.getProjectFiles(false);
+          this.fileBase64Str = '';
+          this.isImage(this.data);
         }
       }
     },
diff --git a/project-management/frontend/src/business/menu/file/list/FileThumbnail.vue b/project-management/frontend/src/business/menu/file/list/FileThumbnail.vue
index 96b6289081..31509c2856 100644
--- a/project-management/frontend/src/business/menu/file/list/FileThumbnail.vue
+++ b/project-management/frontend/src/business/menu/file/list/FileThumbnail.vue
@@ -4,8 +4,10 @@
       <el-row :gutter="20">
         <el-col :span="4" v-for="item in data" :key="item.id">
           <el-card :body-style="{ padding: '0px' }" class="ms-card-item" @click.native="handleView(item)">
-            <div v-loading="fileBase64Str==='' || fileBase64Str === 'loading'" v-if="isImage(item)">
-              <img :src="fileBase64Str" class="ms-edit-image"/>
+            <div v-loading="imageContents[item.id]==='' || imageContents[item.id] === 'loading'" class="ms-image"
+                 v-if="isImage(item)">
+              <img style="height: 100%;width: 100%;object-fit:cover;background-color: #FFFFFF"
+                   :src="imageContents[item.id]"/>
             </div>
             <div class="ms-image" v-else>
               <div class="ms-file">
@@ -47,7 +49,7 @@ export default {
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      fileBase64Str: '',
+      imageContents: {},
       images: ["bmp", "jpg", "png", "tif", "gif", "pcx", "tga", "exif", "fpx", "svg", "psd", "cdr", "pcd", "dxf", "ufo", "eps", "ai", "raw", "WMF", "webp", "avif", "apng", "jpeg"]
     };
   },
@@ -60,7 +62,7 @@ export default {
     nodeTree: []
   },
   created() {
-    this.fileBase64Str = '';
+    this.imageContents = {};
     this.currentPage = this.page;
     this.pageSize = this.size;
     this.total = this.pageTotal;
@@ -91,18 +93,17 @@ export default {
       return type || "";
     },
     change() {
-      this.fileBase64Str = '';
       this.$emit("change", this.pageSize, this.currentPage);
     },
     isImage(item) {
       let type = item.type;
       let isImage = (type && this.images.indexOf(type.toLowerCase()) !== -1);
       if (isImage) {
-        if (isImage && this.fileBase64Str === '') {
-          this.fileBase64Str = 'loading';
+        if (isImage && (!this.imageContents[item.id] || this.imageContents[item.id] === '')) {
+          this.$set(this.imageContents, item.id, "loading");
           getFileBytes(item.id).then(res => {
             let fileRsp = res.data;
-            this.fileBase64Str = "data:image/png;base64," + fileRsp.bytes;
+            this.$set(this.imageContents, item.id, "data:image/png;base64," + fileRsp.bytes);
           })
         }
       }