|
|
@@ -4,7 +4,7 @@
|
|
|
|
|
|
<div class="main">
|
|
|
<template v-if="data.file_list.length > 0">
|
|
|
- <template v-if="data.file_list[0].file_name.match(/\.(png|jpg|jpeg)$/i) !== null">
|
|
|
+ <!-- <template v-if="data.file_list[0].file_name.match(/\.(png|jpg|jpeg)$/i) !== null">
|
|
|
<el-image
|
|
|
style="width: 100%; height: 260px"
|
|
|
:src="data.file_list[0].file_url"
|
|
|
@@ -18,9 +18,50 @@
|
|
|
<div v-if="isEnable(data.is_enable_download)" class="uploadBtn" @click="downLoad">
|
|
|
<img style="width: 24px; height: 24px" src="@/assets/download.png" alt="download" />
|
|
|
下载
|
|
|
+ </div> -->
|
|
|
+ <div class="label-box">
|
|
|
+ <span
|
|
|
+ :class="[index === active_index ? 'active' : '']"
|
|
|
+ v-for="(label, index) in label_list"
|
|
|
+ :key="index"
|
|
|
+ @click="active_index = index"
|
|
|
+ >{{ label }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
+ <ul class="file-list" v-if="source_list[active_index].length > 0">
|
|
|
+ <li v-for="(file, i) in source_list[active_index]" :key="i">
|
|
|
+ <div class="file-name">
|
|
|
+ <span>
|
|
|
+ <SvgIcon :icon-class="icon_list[active_index]" size="16" />
|
|
|
+ <span>{{ file.file_name ?? file.name }}</span>
|
|
|
+ </span>
|
|
|
+ <SvgIcon v-show="file.file_id" icon-class="uploadPreview" size="16" @click="viewDialog(file)" />
|
|
|
+ <img
|
|
|
+ v-if="isEnable(data.is_enable_download)"
|
|
|
+ @click="downLoad(file)"
|
|
|
+ style="width: 16px; height: 16px"
|
|
|
+ src="@/assets/download.png"
|
|
|
+ alt="download"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <p class="label-tips" v-else>暂无本类型文件，看看其他类型吧</p>
|
|
|
</template>
|
|
|
</div>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="visible"
|
|
|
+ :show-close="true"
|
|
|
+ :close-on-click-modal="true"
|
|
|
+ :modal-append-to-body="true"
|
|
|
+ :append-to-body="true"
|
|
|
+ :lock-scroll="true"
|
|
|
+ width="80%"
|
|
|
+ top="0"
|
|
|
+ v-if="visible"
|
|
|
+ >
|
|
|
+ <iframe v-if="visible" :src="newpath" width="100%" :height="iframeHeight" frameborder="0"></iframe>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -39,6 +80,13 @@ export default {
|
|
|
return {
|
|
|
data: getUploadPreviewData(),
|
|
|
file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
|
|
|
+ source_list: [[], [], [], []],
|
|
|
+ label_list: ['音频', '视频', '文档', '压缩包'],
|
|
|
+ icon_list: ['mp3', 'video', 'file', 'zip'],
|
|
|
+ active_index: 0,
|
|
|
+ visible: false,
|
|
|
+ newpath: '',
|
|
|
+ iframeHeight: window.innerHeight - 100 + 'px',
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -54,7 +102,18 @@ export default {
|
|
|
methods: {
|
|
|
// 处理数据
|
|
|
handleData() {
|
|
|
+ this.source_list = [[], [], [], []];
|
|
|
this.data.file_list.forEach((item) => {
|
|
|
+ const suffix = item.file_name.slice(item.file_name.lastIndexOf('.') + 1, item.file_name.length).toLowerCase();
|
|
|
+ if (suffix === 'mp3' || suffix === 'wma') {
|
|
|
+ this.source_list[0].push(item);
|
|
|
+ } else if (suffix === 'mp4' || suffix === 'mov') {
|
|
|
+ this.source_list[1].push(item);
|
|
|
+ } else if (suffix === 'zip' || suffix === 'rar') {
|
|
|
+ this.source_list[3].push(item);
|
|
|
+ } else {
|
|
|
+ this.source_list[2].push(item);
|
|
|
+ }
|
|
|
GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
|
|
|
this.$set(
|
|
|
item,
|
|
|
@@ -65,7 +124,7 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
// 下载表格
|
|
|
- downLoad() {
|
|
|
+ downLoad(file) {
|
|
|
let userInfor = getToken();
|
|
|
let SessionID = '';
|
|
|
let UserCode = '';
|
|
|
@@ -75,7 +134,7 @@ export default {
|
|
|
UserType = userInfor.user_type;
|
|
|
SessionID = userInfor.session_id;
|
|
|
}
|
|
|
- let FileID = this.data.file_list[0].file_id;
|
|
|
+ let FileID = file.file_id;
|
|
|
let data = {
|
|
|
SessionID,
|
|
|
UserCode,
|
|
|
@@ -86,6 +145,11 @@ export default {
|
|
|
process.env.VUE_APP_BASE_API
|
|
|
}/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
|
|
|
},
|
|
|
+ // 预览
|
|
|
+ viewDialog(file) {
|
|
|
+ this.visible = true;
|
|
|
+ this.newpath = file.newpath;
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -117,5 +181,68 @@ export default {
|
|
|
margin-right: 13px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .label-box {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 10%);
|
|
|
+
|
|
|
+ span {
|
|
|
+ padding: 5px 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 20px;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #165dff;
|
|
|
+ background: #f2f3f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ row-gap: 5px;
|
|
|
+ padding: 15px 0;
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 12px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .file-name {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 14px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ max-width: 360px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1d2129;
|
|
|
+ background-color: #f7f8fa;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 14px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .svg-icon {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .label-tips {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .el-dialog {
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
natasha
