176 lines
7.6 KiB
Vue
176 lines
7.6 KiB
Vue
<template>
|
|
<!-- 文件下载对话框 -->
|
|
<el-dialog title="下载" v-model="downFileOpen" width="850px" class="my_dialog" align-center :destroy-on-close="true"
|
|
:close-on-click-modal="false">
|
|
<template v-for="itemType in fileTypeArr">
|
|
<template v-if="itemType.typeFileList.length > 0">
|
|
<div class="my_dialog_itemHeader">{{ itemType.fileTypeName }}</div>
|
|
<div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
|
|
<div v-for="itemFile in itemType.typeFileList" class="item-file-wrapper">
|
|
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
|
|
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
|
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
|
class="avatar iconFile"
|
|
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
|
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
|
class="avatar iconFile"
|
|
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
|
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
|
class="avatar iconFile"
|
|
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
|
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
|
|
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
|
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
|
|
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
|
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
|
|
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
|
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
|
|
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
|
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
|
|
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
|
<img v-else :src="iconOther" class="avatar iconFile"
|
|
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
|
<div class="filesName">{{ itemFile.originalFileName }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button class="my-downAllFile-btn" type="primary" @click="handleDownAllFile">下载所有文件</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, defineExpose, nextTick, ref } from 'vue'
|
|
import iconDoc from '@/assets/images/iconDoc.png'
|
|
import iconOther from '@/assets/images/iconOther.png'
|
|
import iconPdf from '@/assets/images/iconPdf.png'
|
|
import iconVideo from '@/assets/images/iconVideo.png'
|
|
import iconXls from '@/assets/images/iconXls.png'
|
|
import iconZip from '@/assets/images/iconZip.png'
|
|
import iconMove from '@/assets/images/iconMove.png'
|
|
import iconTxt from '@/assets/images/iconTxt.png'
|
|
import iconPpt from '@/assets/images/iconPpt.png'
|
|
import { mediaFiles } from "@/api/mediaLibrary"
|
|
import { downFile } from "@/api/common"
|
|
import { addBusDownloadRecord } from "@/api/mediaDownRecord"
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
const emit = defineEmits(['downBack']);
|
|
const downFileOpen = ref(false)
|
|
// 全量媒体文件列表
|
|
const allFileList = ref([])
|
|
// 批文文件-1,独家授权文件-2,媒体行业授权文件-3,媒体归属附件-4,曾经媒体照片-5,图片上传-6,视频上传-7,盖章刊例-8, 资质文件-9, 媒体链条-10, 刊例照片-11,MR和制作要求-12
|
|
const fileTypeArr = ref([
|
|
{ fileType: 1, fileTypeName: '批文文件', typeFileList: [] },
|
|
{ fileType: 2, fileTypeName: '独家授权文件', typeFileList: [] },
|
|
{ fileType: 3, fileTypeName: '媒体行业授权文件', typeFileList: [] },
|
|
{ fileType: 4, fileTypeName: '媒体归属附件', typeFileList: [] },
|
|
{ fileType: 5, fileTypeName: '曾经媒体照片', typeFileList: [] },
|
|
{ fileType: 6, fileTypeName: '媒体图片', typeFileList: [] },
|
|
{ fileType: 7, fileTypeName: '媒体视频', typeFileList: [] },
|
|
{ fileType: 8, fileTypeName: '盖章刊例', typeFileList: [] },
|
|
{ fileType: 9, fileTypeName: '资质文件', typeFileList: [] },
|
|
{ fileType: 10, fileTypeName: '媒体链条', typeFileList: [] },
|
|
{ fileType: 11, fileTypeName: '刊例照片', typeFileList: [] },
|
|
{ fileType: 12, fileTypeName: 'MR和制作要求', typeFileList: [] }
|
|
])
|
|
|
|
const downloadRecords = ref([])
|
|
|
|
// 判断是否为图片文件
|
|
const isImageFile = (suffix) => {
|
|
return ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase())
|
|
}
|
|
// 单个文件下载
|
|
const handleDownFile = (fileUrl, downLoadName) => {
|
|
downFile(fileUrl).then(res => {
|
|
// 通过a标签打开新页面下载文件
|
|
const a = document.createElement('a')
|
|
a.href = URL.createObjectURL(res)
|
|
// a标签里有download属性可以自定义文件名
|
|
a.setAttribute('download', downLoadName)
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
})
|
|
}
|
|
// 多文件下载
|
|
const handleDownAllFile = () => {
|
|
allFileList.value.forEach(item => {
|
|
downloadRecords.value.push({ filePath: item.fileUrl, fileName: item.originalFileName, state: 0 })
|
|
})
|
|
if (downloadRecords.value.length > 0) {
|
|
addBusDownloadRecord({ downloadRecordList: downloadRecords.value }).then(res => {
|
|
if (res.code == 200) {
|
|
downloadRecords.value = []
|
|
emit('downBack')
|
|
downFileOpen.value = false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
// 按类型获取媒体文件列表
|
|
const getMediaFileList = (_mediaId, itemFileType) => {
|
|
mediaFiles({ mediaId: _mediaId, fileType: itemFileType.fileType }).then(res => {
|
|
if (res.code == 200) {
|
|
itemFileType.typeFileList = res.data
|
|
allFileList.value = allFileList.value.concat(res.data)
|
|
}
|
|
})
|
|
}
|
|
// 对外暴漏方法
|
|
const initFileList = (_open, _mediaId) => {
|
|
downFileOpen.value = true
|
|
allFileList.value = []
|
|
nextTick(() => {
|
|
fileTypeArr.value.forEach(item => {
|
|
getMediaFileList(_mediaId, item)
|
|
});
|
|
})
|
|
}
|
|
|
|
// 暴露方法\属性给父组件
|
|
defineExpose({
|
|
initFileList
|
|
});
|
|
</script>
|
|
<style lang='scss'>
|
|
.my_dialog_itemHeader {
|
|
width: 100%;
|
|
height: 36px;
|
|
background: #1a75e630;
|
|
padding: 6px 20px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
color: #000000;
|
|
}
|
|
|
|
.item-file-wrapper {
|
|
width: 120px;
|
|
height: 80px;
|
|
margin: 20px 10px;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.iconFile {
|
|
width: 44px;
|
|
height: 54px;
|
|
}
|
|
|
|
.filesName {
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #000000;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style> |