BJ_ZTEITS-Developers / parking-cloud-yudao

Commit eb3228d4c781ff21418acf93e8ed4036a72520db

Authored by jiangqiang
1 parent da0ba105

文件列表会显示图片缩略图，点击缩略图可以预览大图。非图片文件在列表页面会显示下载按钮。点击即可下载。

Inline Side-by-side
Showing 2 changed files with 19 additions and 8 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/controller/admin/file/vo/file/FileRespVO.java
  View file @eb3228d
@@ -13,6 +13,9 @@ public class FileRespVO { @@ -13,6 +13,9 @@ public class FileRespVO {
13 @ApiModelProperty(value = "文件编号", required = true, example = "1024") 13 @ApiModelProperty(value = "文件编号", required = true, example = "1024")
14 private Long id; 14 private Long id;
15 15
  16 + @ApiModelProperty(value = "配置编号", required = true, example = "11")
  17 + private Long configId;
  18 +
16 @ApiModelProperty(value = "文件路径", required = true, example = "yudao.jpg") 19 @ApiModelProperty(value = "文件路径", required = true, example = "yudao.jpg")
17 private String path; 20 private String path;
18 21
yudao-ui-admin/src/views/infra/file/index.vue
  View file @eb3228d
@@ -31,13 +31,17 @@ @@ -31,13 +31,17 @@
31 <el-table-column :show-overflow-tooltip="true" label="文件 URL" align="center" min-width="400" prop="url" /> 31 <el-table-column :show-overflow-tooltip="true" label="文件 URL" align="center" min-width="400" prop="url" />
32 <el-table-column label="文件大小" align="center" prop="size" width="120" :formatter="sizeFormat" /> 32 <el-table-column label="文件大小" align="center" prop="size" width="120" :formatter="sizeFormat" />
33 <el-table-column label="文件类型" align="center" prop="type" width="210" /> 33 <el-table-column label="文件类型" align="center" prop="type" width="210" />
34 -<!-- <el-table-column label="文件内容" align="center" prop="content">-->  
35 -<!-- <template slot-scope="scope">-->  
36 -<!-- <img v-if="scope.row.type&&scope.row.type.indexOf('image/') === 0"-->  
37 -<!-- width="200px" :src="getFileUrl + scope.row.id">-->  
38 -<!-- <i v-else>非图片，无法预览</i>-->  
39 -<!-- </template>-->  
40 -<!-- </el-table-column>--> 34 + <el-table-column label="文件内容" align="center" prop="content" min-width="150px">
  35 + <template slot-scope="scope">
  36 + <image-preview v-if="scope.row.type&&scope.row.type.indexOf('image/') === 0" :src="scope.row.url"
  37 + :width="'100px'"></image-preview>
  38 + <i v-else>无法预览，点击
  39 + <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
  40 + :href="getFileUrl+scope.row.configId+'/get/' + scope.row.path">下载
  41 + </el-link>
  42 + </i>
  43 + </template>
  44 + </el-table-column>
41 <el-table-column label="上传时间" align="center" prop="createTime" width="180"> 45 <el-table-column label="上传时间" align="center" prop="createTime" width="180">
42 <template slot-scope="scope"> 46 <template slot-scope="scope">
43 <span>{{ parseTime(scope.row.createTime) }}</span> 47 <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -79,12 +83,16 @@ @@ -79,12 +83,16 @@
79 <script> 83 <script>
80 import { deleteFile, getFilePage } from "@/api/infra/file"; 84 import { deleteFile, getFilePage } from "@/api/infra/file";
81 import {getAccessToken} from "@/utils/auth"; 85 import {getAccessToken} from "@/utils/auth";
  86 +import ImagePreview from "@/components/ImagePreview";
82 87
83 export default { 88 export default {
84 name: "File", 89 name: "File",
  90 + components: {
  91 + ImagePreview
  92 + },
85 data() { 93 data() {
86 return { 94 return {
87 - getFileUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/get/', 95 + getFileUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/',
88 // 遮罩层 96 // 遮罩层
89 loading: true, 97 loading: true,
90 // 显示搜索条件 98 // 显示搜索条件