style(文件管理): 文件转存提示及样式调整

--bug=1016286 --user=赵勇 除了图片外，不能预览的展示文件类型，如JAR、XLSX https://www.tapd.cn/55049933/s/1233267

backend/src/main/java/io/metersphere/metadata/controller/FileMetadataController.java

@@ -112,4 +112,9 @@ public class FileMetadataController {
     public boolean exist(@PathVariable("fileId") String fileId) {
         return fileMetadataService.exist(fileId);
     }
+
+    @PostMapping(value = "/exists")
+    public List<String> exist(@RequestBody List<String> fileIds) {
+        return fileMetadataService.exists(fileIds);
+    }
 }

backend/src/main/java/io/metersphere/metadata/service/FileMetadataService.java

@@ -430,4 +430,14 @@ public class FileMetadataService {
     public boolean exist(String fileId) {
         return fileMetadataMapper.selectByPrimaryKey(fileId) != null;
     }
+
+    public List<String> exists(List<String> fileIds) {
+        if (CollectionUtils.isEmpty(fileIds)) {
+            return new LinkedList<>();
+        }
+        FileMetadataExample example = new FileMetadataExample();
+        example.createCriteria().andIdIn(fileIds);
+        List<FileMetadata> fileMetadataList = fileMetadataMapper.selectByExample(example);
+        return fileMetadataList.stream().map(FileMetadata::getId).collect(Collectors.toList());
+    }
 }

frontend/src/business/components/api/automation/scenario/variable/CsvFileUpload.vue

@@ -35,16 +35,20 @@
             <div class="upload-item" slot="file" slot-scope="{file}" v-loading="loading">
               <span>{{ file.file && file.file.name ? file.file.name : file.name }}</span>
               <span class="el-upload-list__item-actions" v-if="file.storage === 'FILE_REF'">
-                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleUnlock(file)">
+                  <span v-if="!disabled" class="ms-list__item-delete" @click="handleUnlock(file)">
                     <i class="el-icon-unlock"/>
-                    <span style="font-size: 13px">{{ file.isExist ? '文件已经被删除' : '' }}</span>
+                    <span style="font-size: 13px">
+                      {{ file.isExist ? $t('permission.project_file.file_delete_tip') : '' }}
+                    </span>
                   </span>
               </span>
               <span class="el-upload-list__item-actions" v-else>
-                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleUpload(file)">
-                    <i class="el-icon-upload" style="font-size: 23px"/>
+                  <span v-if="!disabled" class="ms-list__item-delete" @click="handleUpload(file)">
+                    <el-tooltip :content="$t('permission.project_file.save_to_file_manage')" placement="top">
+                      <i class="el-icon-upload" style="font-size: 23px"/>
+                    </el-tooltip>
                   </span>
-                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                  <span v-if="!disabled" class="ms-list__item-delete" @click="handleRemove(file)">
                     <i class="el-icon-delete"/>
                   </span>
                </span>
@@ -273,4 +277,11 @@ export default {
   overflow: hidden;
   width: 180px;
 }
+
+.ms-list__item-delete {
+  margin-top: -10px;
+  padding-top: -10px;
+  text-align: center;
+  vertical-align: middle;
+}
 </style>

frontend/src/business/components/api/definition/components/body/ApiBodyFileUpload.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span v-if="showHide">
   <el-upload
     action="#"
     class="ms-upload-header"
@@ -28,16 +28,20 @@
     <div class="upload-item" slot="file" slot-scope="{file}">
       <span>{{ file.file && file.file.name ? file.file.name : file.name }}</span>
         <span v-if="file.storage === 'FILE_REF'" class="el-upload-list__item-actions">
-            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+            <span v-if="!disabled" class="ms-list__item-delete" @click="handleRemove(file)">
                 <i class="el-icon-unlock"/>
-                <span style="font-size: 13px">{{ file.isExist ? '文件已经被删除' : '' }}</span>
+                <span style="font-size: 13px;">
+                  {{ file.isExist ? $t('permission.project_file.file_delete_tip') : '' }}
+                </span>
             </span>
         </span>
       <span class="el-upload-list__item-actions" v-else>
-          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleUpload(file)">
+          <span v-if="!disabled" class="ms-list__item-delete" @click="handleUpload(file)">
+           <el-tooltip :content="$t('permission.project_file.save_to_file_manage')" placement="top">
             <i class="el-icon-upload" style="font-size: 23px"/>
+           </el-tooltip>
           </span>
-          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+          <span v-if="!disabled" class="ms-list__item-delete" @click="handleRemove(file)">
             <i class="el-icon-delete"/>
           </span>
        </span>
@@ -64,6 +68,7 @@ export default {
     return {
       disabled: false,
       file: {},
+      showHide: true,
     };
   },
   props: {
@@ -75,11 +80,29 @@ export default {
   },
   methods: {
     exist() {
+      let fileIds = [];
       this.parameter.files.forEach(file => {
-        this.$get('/file/metadata/exist/' + file.fileId, response => {
-          file.isExist = !response.data;
-        });
+        if (file.storage === 'FILE_REF' && file.fileId) {
+          fileIds.push(file.fileId);
+        }
       });
+      if (fileIds.length > 0) {
+        this.result = this.$post('/file/metadata/exists/', fileIds, response => {
+          let resultIds = response.data;
+          this.parameter.files.forEach(file => {
+            if (file.storage === 'FILE_REF' && resultIds.indexOf(file.fileId) === -1) {
+              file.isExist = true;
+            }
+          });
+          this.reload();
+        });
+      }
+    },
+    reload() {
+      this.showHide = false;
+      this.$nextTick(() => {
+        this.showHide = true;
+      })
     },
     setModuleId(moduleId) {
       let files = [];
@@ -204,4 +227,11 @@ export default {
 .ms-upload-header >>> .el-upload-list--picture-card .el-upload-list__item {
   display: inline-block;
 }
+
+.ms-list__item-delete {
+  margin-top: -10px;
+  padding-top: -10px;
+  text-align: center;
+  vertical-align: middle;
+}
 </style>

frontend/src/i18n/en-US.js

@@ -2618,7 +2618,9 @@ export default {
       batch_download: 'Batch download',
       batch_move: 'Batch move',
       local_upload: 'Local upload',
-      associated_files: 'Associated files'
+      associated_files: 'Associated files',
+      file_delete_tip: 'Source file deleted',
+      save_to_file_manage: 'Transfer to file management'
     },
     project_track_case: {
       name: "Case",

frontend/src/i18n/zh-CN.js

@@ -2622,7 +2622,9 @@ export default {
       batch_download: '批量下载',
       batch_move: '批量移动',
       local_upload: '本地上传',
-      associated_files: '关联文件'
+      associated_files: '关联文件',
+      file_delete_tip: '源文件已删除',
+      save_to_file_manage: '转存至文件管理'
     },
     project_track_case: {
       name: "测试用例",

frontend/src/i18n/zh-TW.js

@@ -2619,7 +2619,9 @@ export default {
       batch_download: '批量下載',
       batch_move: '批量移動',
       local_upload: '本地上傳',
-      associated_files: '關聯文件'
+      associated_files: '關聯文件',
+      file_delete_tip: '源文件已刪除',
+      save_to_file_manage: '轉存至文件管理'
     },
     project_track_case: {
       name: "測試用例",