Compare commits
2 Commits
5e848771f9
...
7bc4f26390
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7bc4f26390 | ||
|
|
e8a05b3e0f |
200
src/components/FilePreviewDialog/FilePreviewDialog.vue
Normal file
200
src/components/FilePreviewDialog/FilePreviewDialog.vue
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog :title="'文件预览(' + file.fileName + ')'" :visible.sync="visible" width="70%" append-to-body>
|
||||||
|
<div class="preview-container">
|
||||||
|
<audio v-if="isAudioType" class="preview-iframe" controls>
|
||||||
|
<source :src="getFileUrl()"/>
|
||||||
|
</audio>
|
||||||
|
<!-- 左侧预览区域 -->
|
||||||
|
<iframe
|
||||||
|
:src="fileUrl"
|
||||||
|
frameborder="0"
|
||||||
|
class="preview-iframe"
|
||||||
|
v-if="!isImage && fileExtension != 'txt' && !isAudioType && fileExtension != 'pdf'"
|
||||||
|
>
|
||||||
|
</iframe>
|
||||||
|
<image-preview
|
||||||
|
class="preview-iframe"
|
||||||
|
:src="getFileUrl()"
|
||||||
|
v-if="isImage">
|
||||||
|
</image-preview>
|
||||||
|
|
||||||
|
<iframe
|
||||||
|
:src="getFileUrl()"
|
||||||
|
frameborder="0"
|
||||||
|
class="preview-iframe"
|
||||||
|
v-if="fileExtension == 'txt' || fileExtension == 'pdf'"
|
||||||
|
>
|
||||||
|
</iframe>
|
||||||
|
|
||||||
|
<!-- 右侧文件列表 -->
|
||||||
|
<div class="file-list">
|
||||||
|
<el-table
|
||||||
|
:data="fileList.filter(file => file.type !== '1')"
|
||||||
|
height="100%"
|
||||||
|
@row-click="handleFileClick"
|
||||||
|
:row-class-name="getRowClassName">
|
||||||
|
<el-table-column
|
||||||
|
prop="fileName"
|
||||||
|
label="文件列表"
|
||||||
|
min-width="180">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div class="file-item">
|
||||||
|
<i :class="row.type === '1' ? 'el-icon-folder' : 'el-icon-document'"></i>
|
||||||
|
{{ row.fileName }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ImagePreview from '@/components/ImagePreview/ImagePreview.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'FilePreviewDialog',
|
||||||
|
components: { imagePreview },
|
||||||
|
props: {
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
file: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
|
fileList: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
previewUrl: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: process.env.VUE_APP_PREVIEW_URL
|
||||||
|
},
|
||||||
|
inspectionFileUrl: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: process.env.VUE_APP_INSPECTION_FILE_URL
|
||||||
|
},
|
||||||
|
imageUrl: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: process.env.VUE_APP_FILE_API
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
fileUrl: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
fileExtension() {
|
||||||
|
if (!this.file.filePath) return '';
|
||||||
|
const lastDotIndex = this.file.filePath.lastIndexOf('.');
|
||||||
|
return lastDotIndex > -1 ? this.file.filePath.slice(lastDotIndex + 1).toLowerCase() : '';
|
||||||
|
},
|
||||||
|
isImage() {
|
||||||
|
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
|
||||||
|
return imageExtensions.includes(this.fileExtension);
|
||||||
|
},
|
||||||
|
isAudioType() {
|
||||||
|
const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a', 'flac'];
|
||||||
|
return audioExtensions.includes(this.fileExtension);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
visible(val) {
|
||||||
|
if (val) {
|
||||||
|
this.initFileUrl();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
file(val) {
|
||||||
|
if (this.visible) {
|
||||||
|
this.initFileUrl();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
close() {
|
||||||
|
this.$emit('update:visible', false);
|
||||||
|
},
|
||||||
|
initFileUrl() {
|
||||||
|
const ext = this.fileExtension;
|
||||||
|
if (ext === 'pdf' || ext === 'txt') {
|
||||||
|
this.fileUrl = this.getFileUrl();
|
||||||
|
} else if (!this.isImage && !this.isAudioType) {
|
||||||
|
this.fileUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(this.getFileUrl())}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getFileUrl() {
|
||||||
|
if (this.file.filePath.includes('http')) {
|
||||||
|
return this.inspectionFileUrl + this.file.filePath.replace(/^.*?uploads\//, 'uploads/');
|
||||||
|
} else {
|
||||||
|
return this.previewUrl ? this.previewUrl + this.file.filePath : this.imageUrl + this.file.filePath;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleFileClick(row) {
|
||||||
|
if (row.type === '2') {
|
||||||
|
this.$emit('file-click', row);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getRowClassName({ row }) {
|
||||||
|
return row.id === this.file.id ? 'highlight-row' : '';
|
||||||
|
},
|
||||||
|
downloadFile(item) {
|
||||||
|
this.$emit('download', item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.preview-container {
|
||||||
|
display: flex;
|
||||||
|
height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-iframe {
|
||||||
|
flex: 6;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-list {
|
||||||
|
flex: 1;
|
||||||
|
border-left: 1px solid #ebeef5;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-item {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-item:hover {
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 调整表格高度 */
|
||||||
|
::v-deep .el-table {
|
||||||
|
height: calc(100% - 2px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隐藏表格头 */
|
||||||
|
::v-deep .el-table__header-wrapper {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
highlight-row {
|
||||||
|
background-color: #f0f7ff; /* 高亮背景色 */
|
||||||
|
color: #409eff; /* 高亮文字颜色 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1305,7 +1305,8 @@ export default {
|
|||||||
...this.batchQueryParams,
|
...this.batchQueryParams,
|
||||||
pageNum: this.batchQueryParams.pageNum || 1,
|
pageNum: this.batchQueryParams.pageNum || 1,
|
||||||
pageSize: this.batchQueryParams.pageSize || 100,
|
pageSize: this.batchQueryParams.pageSize || 100,
|
||||||
accountingConfirm: '1'
|
accountingConfirm: '1',
|
||||||
|
dateType:'jcTime'
|
||||||
};
|
};
|
||||||
if (this.selectBatchType == "cn") {
|
if (this.selectBatchType == "cn") {
|
||||||
listWorkOrder(params).then((response) => {
|
listWorkOrder(params).then((response) => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user