Просмотр исходного кода

feat: 新增文件内容项,图片时展示,pdf时跳转到预览,其他文件下载

Marvin 1 год назад
Родитель
Сommit
2a0b329565
1 измененных файлов с 14 добавлено и 9 удалено
  1. 14 9
      src/views/infra/file/index.vue

+ 14 - 9
src/views/infra/file/index.vue

@@ -50,25 +50,30 @@
     <el-table v-loading="loading" :data="list">
       <el-table-column label="文件名" align="center" prop="name" :show-overflow-tooltip="true" />
       <el-table-column label="文件路径" align="center" prop="path" :show-overflow-tooltip="true" />
-      <el-table-column label="URL" align="center" prop="url" width="110px">
+      <el-table-column label="URL" align="center" prop="url" :show-overflow-tooltip="true" />
+      <el-table-column
+        label="文件大小"
+        align="center"
+        prop="size"
+        width="120"
+        :formatter="fileSizeFormatter"
+      />
+      <el-table-column label="文件类型" align="center" prop="type" width="180px" />
+      <el-table-column label="文件内容" align="center" prop="url" width="110px">
         <template #default="{ row }">
           <el-image
+            v-if="row.type.includes('image')"
             class="h-80px w-80px"
+            lazy
             :src="row.url"
             :preview-src-list="[row.url]"
             preview-teleported
             fit="cover"
           />
+          <el-link v-else-if="row.type.includes('pdf')" type="primary" :href="row.url" :underline="false">预览</el-link>
+          <el-link v-else type="primary" download :href="row.url" :underline="false" target="_blank">下载</el-link>
         </template>
       </el-table-column>
-      <el-table-column
-        label="文件大小"
-        align="center"
-        prop="size"
-        width="120"
-        :formatter="fileSizeFormatter"
-      />
-      <el-table-column label="文件类型" align="center" prop="type" width="180px" />
       <el-table-column
         label="上传时间"
         align="center"