style(文件管理): 文件后缀优化显示

--bug=1016286 --user=赵勇 除了图片外,不能预览的展示文件类型,如JAR、XLSX https://www.tapd.cn/55049933/s/1233267
This commit is contained in:
fit2-zhao 2022-08-24 18:24:55 +08:00 committed by fit2-zhao
parent 952c86c117
commit 9d9e26aa56
6 changed files with 44 additions and 13 deletions

View File

@ -108,4 +108,8 @@ public class FileMetadataController {
return fileMetadataService.myFiles(createUser, projectId);
}
@GetMapping(value = "/exist/{fileId}")
public boolean exist(@PathVariable("fileId") String fileId) {
return fileMetadataService.exist(fileId);
}
}

View File

@ -426,4 +426,8 @@ public class FileMetadataService {
fileMetadata.setUpdateUser(SessionUtils.getUserId());
}
}
public boolean exist(String fileId) {
return fileMetadataMapper.selectByPrimaryKey(fileId) != null;
}
}

View File

@ -32,11 +32,12 @@
<i class="el-icon-plus" slot="reference"/>
</el-popover>
</div>
<div class="upload-item" slot="file" slot-scope="{file}">
<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)">
<i class="el-icon-unlock"/>
<span style="font-size: 13px">{{ file.isExist ? '文件已经被删除' : '' }}</span>
</span>
</span>
<span class="el-upload-list__item-actions" v-else>
@ -56,7 +57,6 @@
</el-row>
<ms-file-batch-move ref="module" @setModuleId="setModuleId"/>
<ms-file-metadata-list ref="metadataList" @checkRows="checkRows"/>
</span>
</template>
@ -71,6 +71,7 @@ export default {
data() {
return {
disabled: false,
loading: false,
};
},
components: {
@ -83,7 +84,19 @@ export default {
return {}
}
},
mounted() {
this.exist();
},
methods: {
exist() {
this.loading = true;
this.parameter.files.forEach(file => {
this.$get('/file/metadata/exist/' + file.fileId, response => {
file.isExist = !response.data;
this.loading = false;
});
});
},
setModuleId(moduleId) {
let files = [];
if (this.file && this.file.file) {
@ -203,6 +216,7 @@ export default {
if (!this.parameter.files) {
this.parameter.files = [];
}
this.exist();
}
}
</script>

View File

@ -27,11 +27,12 @@
</div>
<div class="upload-item" slot="file" slot-scope="{file}">
<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="handleRemove(file)">
<i class="el-icon-unlock"/>
</span>
</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)">
<i class="el-icon-unlock"/>
<span style="font-size: 13px">{{ file.isExist ? '文件已经被删除' : '' }}</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"/>
@ -73,6 +74,13 @@ export default {
}
},
methods: {
exist() {
this.parameter.files.forEach(file => {
this.$get('/file/metadata/exist/' + file.fileId, response => {
file.isExist = !response.data;
});
});
},
setModuleId(moduleId) {
let files = [];
if (this.file && this.file.file) {
@ -125,6 +133,7 @@ export default {
if (!this.parameter.files) {
this.parameter.files = [];
}
this.exist();
}
}
</script>

View File

@ -200,7 +200,7 @@ export default {
});
},
getType(type) {
return type ? type.substr(0, 1).toUpperCase() : "";
return type || "";
},
isImage(type) {
return (type && this.images.indexOf(type.toLowerCase()) !== -1);
@ -332,7 +332,7 @@ export default {
.icon-title {
color: #fff;
text-align: center;
font-size: 22px;
font-size: 16px;
}

View File

@ -44,7 +44,7 @@ export default {
currentPage: 1,
pageSize: 10,
total: 0,
images: ["bmp", "jpg", "png", "tif", "gif", "pcx", "tga", "exif", "fpx", "svg", "psd", "cdr", "pcd", "dxf", "ufo", "eps", "ai", "raw", "WMF", "webp", "avif", "apng","jpeg"]
images: ["bmp", "jpg", "png", "tif", "gif", "pcx", "tga", "exif", "fpx", "svg", "psd", "cdr", "pcd", "dxf", "ufo", "eps", "ai", "raw", "WMF", "webp", "avif", "apng", "jpeg"]
};
},
props: {
@ -83,7 +83,7 @@ export default {
this.$refs.editMetadata.open(row, this.pageSize, this.currentPage, this.total);
},
getType(type) {
return type ? type.substr(0, 1).toUpperCase() : "X";
return type || "";
},
change() {
this.$emit("change", this.pageSize, this.currentPage);
@ -114,7 +114,7 @@ export default {
.ms-file {
text-align: center;
padding-top: 90px
padding-top: 85px
}
.ms-file-name-width {
@ -132,7 +132,7 @@ export default {
.icon-title {
color: #fff;
text-align: center;
font-size: 22px;
font-size: 16px;
}