Compare commits
No commits in common. "a915f54d4118d68fc1f5fda4a084d8fd8949e3b3" and "0a62aaf1aae41eafa6735be7cb73fe526d0d5736" have entirely different histories.
a915f54d41
...
0a62aaf1aa
@ -68,14 +68,12 @@
|
|||||||
<div>{{ item.fileName }}</div>
|
<div>{{ item.fileName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="item.type == 2">
|
<div v-if="item.type == 2">
|
||||||
<img src="../../../assets/images/wenjian.png" style="width: 100px;height: 100px;" v-if="!item.isImage">
|
<img src="../../../assets/images/wenjian.png" style="width: 100px;height: 100px;">
|
||||||
<img :src="imageUrl + item.filePath" style="width: 100px;height: 100px;" v-else>
|
|
||||||
<div>{{ item.fileName }}</div>
|
<div>{{ item.fileName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bjandshanchu">
|
<div class="bjandshanchu">
|
||||||
<div class="one" @click="handleE(item)">编辑</div>
|
<div class="one" @click="handleE(item)">编辑</div>
|
||||||
<!-- <div class="two" v-if="item.type == '2'" @click="downloadFile(item)">下载</div>-->
|
<div class="two" v-if="item.type == '2'" @click="downloadFile(item)">下载</div>
|
||||||
<div class="two" v-if="item.type == '2'" @click="preview(item)">预览</div>
|
|
||||||
<div class="two" @click="clickStaff(item.id)" v-hasPermi="['inspectionFile:inspectionFilePermis:edit']">
|
<div class="two" @click="clickStaff(item.id)" v-hasPermi="['inspectionFile:inspectionFilePermis:edit']">
|
||||||
分配权限
|
分配权限
|
||||||
</div>
|
</div>
|
||||||
@ -101,52 +99,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<el-dialog :title="'文件预览(' + selectFile.fileName + ')'" :visible.sync="isShowFile" width="70%" append-to-body>
|
|
||||||
<div class="preview-container">
|
|
||||||
<audio v-if="isAudioType" class="preview-iframe" controls>
|
|
||||||
<source :src="imageUrl + selectFile.filePath"/>
|
|
||||||
</audio>
|
|
||||||
<!-- 左侧预览区域 -->
|
|
||||||
<iframe
|
|
||||||
:src="fileUrl"
|
|
||||||
frameborder="0"
|
|
||||||
class="preview-iframe" v-if="!isImage && selectFile.fileType != 'txt' && !isAudioType && selectFile.fileType != 'pdf'"
|
|
||||||
>
|
|
||||||
</iframe>
|
|
||||||
<image-preview class="preview-iframe" :src="imageUrl + selectFile.filePath" v-if="isImage"></image-preview>
|
|
||||||
<iframe
|
|
||||||
:src="imageUrl + selectFile.filePath"
|
|
||||||
frameborder="0"
|
|
||||||
class="preview-iframe"
|
|
||||||
v-if="selectFile.fileType == 'txt' || selectFile.fileType == 'pdf'"
|
|
||||||
>
|
|
||||||
</iframe>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 右侧文件列表 -->
|
|
||||||
<div class="file-list">
|
|
||||||
<el-table
|
|
||||||
:data="inspectionFileList.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 }">
|
|
||||||
<!-- 仅当 type 不是 '1' 时才显示 -->
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<el-drawer
|
<el-drawer
|
||||||
title="修改记录"
|
title="修改记录"
|
||||||
:visible.sync="drawer"
|
:visible.sync="drawer"
|
||||||
@ -261,7 +213,6 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/uploadDetail",
|
uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/uploadDetail",
|
||||||
imageUrl: process.env.VUE_APP_FILE_API,
|
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
loading: true,
|
loading: true,
|
||||||
// 选中数组
|
// 选中数组
|
||||||
@ -280,9 +231,6 @@ export default {
|
|||||||
inspectionFileList: [],
|
inspectionFileList: [],
|
||||||
// 弹出层标题
|
// 弹出层标题
|
||||||
title: "",
|
title: "",
|
||||||
selectFile: {
|
|
||||||
isImage: false
|
|
||||||
},
|
|
||||||
drawer: false,
|
drawer: false,
|
||||||
// 是否显示弹出层
|
// 是否显示弹出层
|
||||||
open: false,
|
open: false,
|
||||||
@ -304,7 +252,6 @@ export default {
|
|||||||
oldFatherId: '',
|
oldFatherId: '',
|
||||||
// 表单参数
|
// 表单参数
|
||||||
form: {},
|
form: {},
|
||||||
isShowFile: false,
|
|
||||||
// 表单校验
|
// 表单校验
|
||||||
rules: {
|
rules: {
|
||||||
fileList: [
|
fileList: [
|
||||||
@ -330,20 +277,8 @@ export default {
|
|||||||
selectStaffList: [],
|
selectStaffList: [],
|
||||||
fileId: '',
|
fileId: '',
|
||||||
drawerData: {},
|
drawerData: {},
|
||||||
fileUrl: '',
|
|
||||||
isImage: false
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
isAudioType() {
|
|
||||||
const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a', 'flac'];
|
|
||||||
const fileExtension = this.selectFile.fileType;
|
|
||||||
return audioExtensions.includes(fileExtension);
|
|
||||||
|
|
||||||
// 或者如果已有 fileType 字段(根据 MIME type 判断):
|
|
||||||
// return this.fileType.startsWith('audio/');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
created() {
|
||||||
this.getList();
|
this.getList();
|
||||||
this.listByPermission()
|
this.listByPermission()
|
||||||
@ -369,35 +304,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
//预览文件
|
|
||||||
preview(item) {
|
|
||||||
this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + this.imageUrl + item.filePath
|
|
||||||
// this.fileUrl = 'https://view.xdocin.com/view?src=' + this.imageUrl + item.filePath
|
|
||||||
console.log(this.fileUrl)
|
|
||||||
this.$nextTick(() => {
|
|
||||||
// this.$refs.filePreview.show()
|
|
||||||
this.selectFile = item
|
|
||||||
this.isImage = item.isImage
|
|
||||||
})
|
|
||||||
console.log(this.imageUrl + this.selectFile.filePath)
|
|
||||||
this.isShowFile = true
|
|
||||||
},
|
|
||||||
handleFileClick(row) {
|
|
||||||
if (row.type === '2') {
|
|
||||||
// this.fileUrl = 'https://view.xdocin.com/view?src=' + this.imageUrl + row.filePath
|
|
||||||
this.fileUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + this.imageUrl + row.filePath
|
|
||||||
this.$nextTick(() => {
|
|
||||||
// this.$refs.filePreview.show()
|
|
||||||
this.selectFile = row
|
|
||||||
this.isImage = row.isImage
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getRowClassName({row}) {
|
|
||||||
console.log('返回的class', row.id === this.selectFile.id ? 'highlight-row' : '')
|
|
||||||
// 如果当前行是选中的文件,添加高亮样式
|
|
||||||
return row.id === this.selectFile.id ? 'highlight-row' : '';
|
|
||||||
},
|
},
|
||||||
clickStaff(fileId) {
|
clickStaff(fileId) {
|
||||||
this.fileId = fileId
|
this.fileId = fileId
|
||||||
@ -785,7 +691,6 @@ export default {
|
|||||||
color: #F56C6C;
|
color: #F56C6C;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 增加步骤间距 */
|
/* 增加步骤间距 */
|
||||||
.custom-step {
|
.custom-step {
|
||||||
margin-bottom: 35px;
|
margin-bottom: 35px;
|
||||||
@ -822,52 +727,8 @@ export default {
|
|||||||
.step-download:hover {
|
.step-download:hover {
|
||||||
color: #307ec7;
|
color: #307ec7;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.el-drawer__header {
|
/deep/.el-drawer__header {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 调整表格高度 */
|
|
||||||
:deep(.el-table) {
|
|
||||||
height: calc(100% - 2px) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 隐藏表格头 */
|
|
||||||
:deep(.el-table__header-wrapper) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-row {
|
|
||||||
background-color: #f0f7ff; /* 高亮背景色 */
|
|
||||||
color: #409eff; /* 高亮文字颜色 */
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user