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

--bug=1016286 --user=赵勇除了图片外，不能预览的展示文件类型，如JAR、XLSX https://www.tapd.cn/55049933/s/1233267
2022-08-25 10:10:15 +08:00 · 2022-08-25 10:10:15 +08:00 · 0214100d14
parent 2de48bb8cd
commit 0214100d14
7 changed files with 78 additions and 16 deletions
--- a/backend/src/main/java/io/metersphere/metadata/controller/FileMetadataController.java
+++ b/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);
+    }
 }
--- a/backend/src/main/java/io/metersphere/metadata/service/FileMetadataService.java
+++ b/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());
+    }
 }
--- a/frontend/src/business/components/api/automation/scenario/variable/CsvFileUpload.vue
+++ b/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>
--- a/frontend/src/business/components/api/definition/components/body/ApiBodyFileUpload.vue
+++ b/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>
--- a/frontend/src/i18n/en-US.js
+++ b/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",
--- a/frontend/src/i18n/zh-CN.js
+++ b/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: "测试用例",
--- a/frontend/src/i18n/zh-TW.js
+++ b/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: "測試用例",