对接文件下载
This commit is contained in:
wangchengming
parent
32ec2167a0
commit
803871b036
|
|
@ -32,7 +32,7 @@ export function mediaDetail(query) {
|
|||
params: query
|
||||
})
|
||||
}
|
||||
// 删除单条媒体信息
|
||||
// 删除单条媒体信息 没有使用
|
||||
export function deleteMedia(query) {
|
||||
return request({
|
||||
url: '/media/deleteMedia',
|
||||
|
|
@ -57,10 +57,26 @@ export function mediaOptionLog(query) {
|
|||
params: query
|
||||
})
|
||||
}
|
||||
// 获取导出Excel字段
|
||||
export function mediaExcelField(query) {
|
||||
// 分页查看媒体日志信息
|
||||
export function mediaOptionLogPage(query) {
|
||||
return request({
|
||||
url: '/media/excel/field',
|
||||
url: '/media/getOperateLogPage',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 获取导出Excel基础信息字段
|
||||
export function mediaExcelBaseField(query) {
|
||||
return request({
|
||||
url: '/media/excel/base/field',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 获取导出Excel报价信息字段
|
||||
export function mediaExcelPriceField(query) {
|
||||
return request({
|
||||
url: '/media/excel/price/field',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
|
@ -92,7 +108,7 @@ export function exportMediaPPT(query) {
|
|||
})
|
||||
}
|
||||
|
||||
// 获取媒体历史报价
|
||||
// 获取媒体报价
|
||||
export function mediaPrice(query) {
|
||||
return request({
|
||||
url: '/media/getPrice',
|
||||
|
|
@ -100,3 +116,12 @@ export function mediaPrice(query) {
|
|||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取媒体文件
|
||||
export function mediaFiles(query) {
|
||||
return request({
|
||||
url: '/media/getMediaFile',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
|
@ -98,7 +98,6 @@ const setFileInfo = (files) => {
|
|||
|
||||
// 判断是否为图片文件
|
||||
const isImageFile = (suffix) => {
|
||||
console.log('是否图片', suffix, ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase()))
|
||||
return ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase())
|
||||
}
|
||||
|
||||
|
|
@ -114,13 +113,12 @@ const handleRemoveImage = (itemFile) => {
|
|||
const index = fileList.value.findIndex(item => item.fileName === itemFile.fileName)
|
||||
if (index !== -1) {
|
||||
fileList.value.splice(index, 1)
|
||||
emit('setFormFile', fileList.value)
|
||||
emit('setFormFile', _fileType.value, fileList.value)
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义上传
|
||||
const requestUpload = async (options) => {
|
||||
console.log('自定义上传', options)
|
||||
const { file } = options
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
|
@ -150,7 +148,7 @@ const requestUpload = async (options) => {
|
|||
suffix: res.suffix
|
||||
}]
|
||||
proxy.$modal.closeLoading()
|
||||
emit('setFormFile', fileList.value)
|
||||
emit('setFormFile', _fileType.value, fileList.value)
|
||||
}
|
||||
} catch (error) {
|
||||
proxy.$modal.closeLoading()
|
||||
|
|
@ -194,7 +192,6 @@ const beforeUpload = (file) => {
|
|||
const handleChange = (file, files) => {
|
||||
// 可以在这里添加文件变化时的额外处理逻辑
|
||||
// 不需要清空 fileList，因为上传逻辑会处理
|
||||
console.log('清空')
|
||||
cardfileList.value = []
|
||||
}
|
||||
// 暴露方法给父组件
|
||||
|
|
|
|||
|
|
@ -3,33 +3,40 @@
|
|||
<el-dialog :title="viewTitle" v-model="viewFileOpen" width="620px" class="my_dialog" align-center
|
||||
:destroy-on-close="true" :close-on-click-modal="false">
|
||||
<div style="width: 100%">
|
||||
<template v-if="fileList.length > 0">
|
||||
<div v-for="itemFile in fileList" class="item-file-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
@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)" />
|
||||
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)" />
|
||||
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)" />
|
||||
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)" />
|
||||
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<div class="filesName">{{ itemFile.fileName }}</div>
|
||||
@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>
|
||||
</template>
|
||||
<el-empty v-else :image-size="200" description="暂无文件" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, defineEmits, ref } from 'vue'
|
||||
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'
|
||||
|
|
@ -39,39 +46,50 @@ 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"
|
||||
|
||||
|
||||
const viewTitle = ref('查看文件')
|
||||
const viewFileOpen = ref(false)
|
||||
const fileList = ref([
|
||||
{ type: 1, fileName: 'XXXXX文档', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文档', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' }
|
||||
])
|
||||
const fileList = ref([])
|
||||
// 判断是否为图片文件
|
||||
const isImageFile = (suffix) => {
|
||||
console.log('是否图片', suffix, ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase()))
|
||||
return ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase())
|
||||
}
|
||||
const handleDownFile = () => {
|
||||
|
||||
// 单个文件下载
|
||||
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 = () => {
|
||||
|
||||
// 按类型获取媒体文件列表
|
||||
const getMediaFileList = (_mediaId, _fileType) => {
|
||||
mediaFiles({ mediaId: _mediaId, fileType: _fileType }).then(res => {
|
||||
if (res.code == 200) {
|
||||
fileList.value = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
const getList = () => {
|
||||
|
||||
// 对外暴漏方法
|
||||
const initFileList = (_fileType, _mediaId) => {
|
||||
viewFileOpen.value = true
|
||||
nextTick(() => {
|
||||
getMediaFileList(_mediaId, _fileType)
|
||||
})
|
||||
}
|
||||
|
||||
// 暴露方法\属性给父组件
|
||||
defineExpose({
|
||||
viewFileOpen,
|
||||
getList
|
||||
initFileList
|
||||
});
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
|
|
|
|||
|
|
@ -2,186 +2,39 @@
|
|||
<!-- 文件下载对话框 -->
|
||||
<el-dialog title="下载" v-model="downFileOpen" width="850px" class="my_dialog" align-center :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
<div class="my_dialog_itemHeader">媒体文件</div>
|
||||
<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 fileList" class="item-file-wrapper">
|
||||
<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)" />
|
||||
@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)" />
|
||||
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)" />
|
||||
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)" />
|
||||
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)" />
|
||||
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
@click.stop="handleDownFile(itemFile.fileUrl, itemFile.originalFileName)" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<div class="filesName">{{ itemFile.fileName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my_dialog_itemHeader">媒体图片</div>
|
||||
<div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
|
||||
<div v-for="itemFile in fileList" class="item-file-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<div class="filesName">{{ itemFile.fileName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my_dialog_itemHeader">媒体视频</div>
|
||||
<div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
|
||||
<div v-for="itemFile in fileList" class="item-file-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<div class="filesName">{{ itemFile.fileName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my_dialog_itemHeader">刊例照片</div>
|
||||
<div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
|
||||
<div v-for="itemFile in fileList" class="item-file-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<div class="filesName">{{ itemFile.fileName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my_dialog_itemHeader">媒体链条</div>
|
||||
<div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
|
||||
<div v-for="itemFile in fileList" class="item-file-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<div class="filesName">{{ itemFile.fileName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my_dialog_itemHeader">资质文件</div>
|
||||
<div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
|
||||
<div v-for="itemFile in fileList" class="item-file-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<div class="filesName">{{ itemFile.fileName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my_dialog_itemHeader">盖章刊例</div>
|
||||
<div style="width: 100%;padding-top: 10px; margin-bottom: 10px;">
|
||||
<div v-for="itemFile in fileList" class="item-file-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.fileUrl" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar iconFile"
|
||||
@click.stop="handleDownFile(itemFile)" />
|
||||
<img v-else :src="iconOther" class="avatar iconFile" @click.stop="handleDownFile(itemFile)" />
|
||||
<div class="filesName">{{ itemFile.fileName }}</div>
|
||||
@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>
|
||||
|
|
@ -190,7 +43,7 @@
|
|||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, defineEmits, ref } from 'vue'
|
||||
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'
|
||||
|
|
@ -200,42 +53,72 @@ 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"
|
||||
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const downFileOpen = ref(false)
|
||||
const fileList = ref([
|
||||
{ type: 1, fileName: 'XXXXX文档', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文档', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文档', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' },
|
||||
{ type: 1, fileName: 'XXXXX文件', suffix: 'doc' }
|
||||
// 全量媒体文件列表
|
||||
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 isImageFile = (suffix) => {
|
||||
console.log('是否图片', suffix, ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase()))
|
||||
return ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase())
|
||||
}
|
||||
const handleDownFile = () => {
|
||||
|
||||
// 单个文件下载
|
||||
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 = () => {
|
||||
|
||||
}
|
||||
const getList = () => {
|
||||
|
||||
// 按类型获取媒体文件列表
|
||||
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
|
||||
nextTick(() => {
|
||||
fileTypeArr.value.forEach(item => {
|
||||
getMediaFileList(_mediaId, item)
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
// 暴露方法\属性给父组件
|
||||
defineExpose({
|
||||
downFileOpen,
|
||||
getList
|
||||
initFileList
|
||||
});
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
|
|
|
|||
|
|
@ -8,26 +8,28 @@
|
|||
<el-row :gutter="10">
|
||||
<el-col :span="12">选择导出字段</el-col>
|
||||
<el-col :span="12" style="text-align: right;">
|
||||
<el-checkbox class="checkAllChose" v-model="checkAll" :indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange">
|
||||
<el-checkbox class="checkAllChose" v-model="baseFieldCheckAll"
|
||||
:indeterminate="baseFieldIsIndeterminate" @change="handleCheckAllBaseFieldChange">
|
||||
全选
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities"
|
||||
@change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
|
||||
{{ city.label }}
|
||||
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedBaseFields"
|
||||
@change="handleCheckedBaseFieldChange">
|
||||
<el-checkbox v-for="itemBaseField in baseFields" :key="itemBaseField.propertyPath"
|
||||
:label="itemBaseField.displayName" :value="itemBaseField.propertyPath">
|
||||
{{ itemBaseField.displayName }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
|
||||
<div class="my_dialog_itemHeader">附件选项</div>
|
||||
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities2"
|
||||
@change="handleCheckedCitiesChange2">
|
||||
<el-checkbox v-for="city in cities2" :key="city.value" :label="city.label" :value="city.value">
|
||||
{{ city.label }}
|
||||
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedHasFiles"
|
||||
@change="handleCheckedHasFileChange">
|
||||
<el-checkbox v-for="(item, index) in hasFilesList" :key="index" :label="item.label"
|
||||
:value="item.value">
|
||||
{{ item.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-tab-pane>
|
||||
|
|
@ -36,18 +38,19 @@
|
|||
<el-row :gutter="10">
|
||||
<el-col :span="12">选择导出字段</el-col>
|
||||
<el-col :span="12" style="text-align: right;">
|
||||
<el-checkbox class="checkAllChose" v-model="checkAll" :indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange">
|
||||
<el-checkbox class="checkAllChose" v-model="priceFieldCheckAll"
|
||||
:indeterminate="priceFieldIsIndeterminate" @change="handleCheckAllPriceFieldChange">
|
||||
全选
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities"
|
||||
@change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
|
||||
{{ city.label }}
|
||||
<el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedPriceFields"
|
||||
@change="handleCheckedPriceFieldChange">
|
||||
<el-checkbox v-for="itemPriceField in priceFields" :key="itemPriceField.propertyPath"
|
||||
:label="itemPriceField.displayName" :value="itemPriceField.propertyPath">
|
||||
{{ itemPriceField.displayName }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-tab-pane>
|
||||
|
|
@ -61,73 +64,142 @@
|
|||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup name="Post">
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { mediaExcelBaseField, mediaExcelPriceField, exportMediaExcel } from "@/api/mediaLibrary"
|
||||
|
||||
const exportTitle = ref('导出')
|
||||
const exportOpen = ref(false)
|
||||
const activeName = ref('first')
|
||||
|
||||
const checkAll = ref(false)
|
||||
const isIndeterminate = ref(true)
|
||||
const checkedCities = ref(['Shanghai'])
|
||||
const cities = [
|
||||
{ label: '字段名', value: 'Shanghai' },
|
||||
{ label: '字段名', value: 'begnjing' },
|
||||
{ label: '字段名', value: 'chongq' },
|
||||
{ label: '字段名', value: 'sdag' },
|
||||
{ label: '字段名', value: 'Shanghai1' },
|
||||
{ label: '字段名', value: 'begnjing2' },
|
||||
{ label: '字段名', value: 'chongq3' },
|
||||
{ label: '字段名', value: 'sdag4' },
|
||||
{ label: '字段名', value: 'Shanghai5' },
|
||||
{ label: '字段名', value: 'begnjing6' },
|
||||
{ label: '字段名', value: 'chongq7' },
|
||||
{ label: '字段名', value: 'sdag8' },
|
||||
{ label: '字段名', value: 'Shanghai9' },
|
||||
{ label: '字段名', value: 'begnjing10' },
|
||||
{ label: '字段名', value: 'chongq11' },
|
||||
{ label: '字段名', value: 'sdag12' },
|
||||
// 导出提交信息
|
||||
const exportForm = ref({
|
||||
ids: undefined,
|
||||
exportBaseFields: undefined,
|
||||
exportPriceFields: false,
|
||||
hasFiles: false
|
||||
})
|
||||
|
||||
// 基础字段是否全选
|
||||
const baseFieldCheckAll = ref(false)
|
||||
const baseFieldIsIndeterminate = ref(true)
|
||||
// 基础字段
|
||||
const baseFields = ref([])
|
||||
// 已选择的基础字段
|
||||
const checkedBaseFields = ref([])
|
||||
|
||||
// 报价字段是否全选
|
||||
const priceFieldCheckAll = ref(false)
|
||||
const priceFieldIsIndeterminate = ref(true)
|
||||
// 报价字段
|
||||
const priceFields = ref([])
|
||||
// 已选择的报价字段
|
||||
const checkedPriceFields = ref([])
|
||||
|
||||
// 是否包含附件，选中的值
|
||||
const checkedHasFiles = ref([])
|
||||
const hasFilesList = [
|
||||
{ label: '包含附件', value: true },
|
||||
]
|
||||
|
||||
|
||||
const checkedCities2 = ref([])
|
||||
const cities2 = [
|
||||
{ label: '包含附件', value: 'fujian' },
|
||||
]
|
||||
|
||||
// 全选操作
|
||||
const handleCheckAllChange = (val) => {
|
||||
checkedCities.value = []
|
||||
// 基础字段全选操作
|
||||
const handleCheckAllBaseFieldChange = (val) => {
|
||||
checkedBaseFields.value = []
|
||||
if (val) {
|
||||
cities.forEach(element => {
|
||||
checkedCities.value.push(element.value)
|
||||
baseFields.value.forEach(element => {
|
||||
checkedBaseFields.value.push(element.propertyPath)
|
||||
});
|
||||
}
|
||||
isIndeterminate.value = false
|
||||
baseFieldIsIndeterminate.value = false
|
||||
}
|
||||
// 单个选择字段
|
||||
const handleCheckedCitiesChange = (value) => {
|
||||
console.log('单选操作', value)
|
||||
// 单个选择基础字段
|
||||
const handleCheckedBaseFieldChange = (value) => {
|
||||
const checkedCount = value.length
|
||||
checkAll.value = checkedCount === cities.length
|
||||
isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
|
||||
baseFieldCheckAll.value = checkedCount === baseFields.value.length
|
||||
baseFieldIsIndeterminate.value = checkedCount > 0 && checkedCount < baseFields.value.length
|
||||
}
|
||||
// 报价字段全选操作
|
||||
const handleCheckAllPriceFieldChange = (val) => {
|
||||
checkedPriceFields.value = []
|
||||
if (val) {
|
||||
priceFields.value.forEach(element => {
|
||||
checkedPriceFields.value.push(element.propertyPath)
|
||||
});
|
||||
}
|
||||
priceFieldIsIndeterminate.value = false
|
||||
}
|
||||
// 单个选择报价字段
|
||||
const handleCheckedPriceFieldChange = (value) => {
|
||||
const checkedCount = value.length
|
||||
priceFieldCheckAll.value = checkedCount === priceFields.value.length
|
||||
priceFieldIsIndeterminate.value = checkedCount > 0 && checkedCount < priceFields.value.length
|
||||
}
|
||||
// 选择附件
|
||||
const handleCheckedCitiesChange2 = (value) => {
|
||||
|
||||
// 选择是否包含附件
|
||||
const handleCheckedHasFileChange = (value) => {
|
||||
if (value.length > 0) exportForm.value.hasFiles = value[0]
|
||||
else exportForm.value.hasFiles = false
|
||||
}
|
||||
|
||||
// 切换选项卡
|
||||
const handleClick = (tab, event) => {
|
||||
console.log(tab, event)
|
||||
activeName.value = tab
|
||||
}
|
||||
// 执行导出
|
||||
const handleSubmitExport = () => {
|
||||
exportForm.value.exportBaseFields = checkedBaseFields
|
||||
exportForm.value.exportPriceFields = checkedPriceFields
|
||||
exportMediaExcel(exportForm.value).then(res => {
|
||||
const downLoadName = '媒体信息_' + getCurrentTime() + '.xlsx'
|
||||
// 通过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)
|
||||
exportOpen.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getCurrentTime = () => {
|
||||
//获取当前时间并打印
|
||||
var getTime = new Date().getTime(); //获取到当前时间戳
|
||||
var time = new Date(getTime); //创建一个日期对象
|
||||
var year = time.getFullYear(); // 年
|
||||
var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
|
||||
var date = time.getDate().toString().padStart(2, '0'); // 日
|
||||
var hour = time.getHours().toString().padStart(2, '0'); // 时
|
||||
var minute = time.getMinutes().toString().padStart(2, '0'); // 分
|
||||
var second = time.getSeconds().toString().padStart(2, '0'); // 秒
|
||||
var gettime = year + month + date + hour + minute + second
|
||||
return gettime
|
||||
}
|
||||
|
||||
// 获取基础信息字段
|
||||
const getMediaExcelBaseField = () => {
|
||||
mediaExcelBaseField().then(res => {
|
||||
baseFields.value = res.data
|
||||
})
|
||||
}
|
||||
// 获取报价信息字段
|
||||
const getMediaExcelPriceField = () => {
|
||||
mediaExcelPriceField().then(res => {
|
||||
priceFields.value = res.data
|
||||
})
|
||||
}
|
||||
// 初始化
|
||||
const initExportExcel = (_mediaIds) => {
|
||||
exportForm.value.ids = _mediaIds
|
||||
exportOpen.value = true
|
||||
getMediaExcelBaseField()
|
||||
getMediaExcelPriceField()
|
||||
}
|
||||
|
||||
// 暴露方法\属性给父组件
|
||||
defineExpose({
|
||||
exportOpen,
|
||||
initExportExcel
|
||||
});
|
||||
</script>
|
||||
134
src/views/mediaLibrary/exportPPTDialog.vue
Normal file
134
src/views/mediaLibrary/exportPPTDialog.vue
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<!-- 导出PPT对话框 -->
|
||||
<el-dialog :title="exportTitle" v-model="exportOpen" width="1270px" class="my_dialog" align-center
|
||||
:destroy-on-close="true" :close-on-click-modal="false">
|
||||
<div class="my_dialog_itemHeader">已选内容</div>
|
||||
<div class="chosedMediaNamsConter">
|
||||
<el-tag v-for="tag in chosedMediaList" :key="tag.id" class="exportPPTTag" @close="handleCloseTag(tag)"
|
||||
closable>
|
||||
{{ tag.mediaName }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="my_dialog_itemHeader">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">选择需要写入方案的媒体字段</el-col>
|
||||
<el-col :span="12" style="text-align: right;">
|
||||
<el-checkbox class="checkAllChose" v-model="pptFieldCheckAll"
|
||||
:indeterminate="pptFieldIsIndeterminate" @change="handleCheckAllPPTFieldChange">
|
||||
全选
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-checkbox-group class="checkAllChose" style="margin-top: 30px;" v-model="checkedPPTFields"
|
||||
@change="handleCheckedPPTFieldChange">
|
||||
<el-checkbox v-for="itemPPTField in pptFields" :key="itemPPTField.propertyPath"
|
||||
:label="itemPPTField.displayName" :value="itemPPTField.propertyPath">
|
||||
{{ itemPPTField.displayName }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="my-cancel-btn" @click="exportOpen = false">取 消</el-button>
|
||||
<el-button class="my-confirm-btn" type="primary" @click="handleSubmitExportPPT">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { mediaPPTField, exportMediaPPT } from "@/api/mediaLibrary"
|
||||
|
||||
const exportTitle = ref('导出PPT')
|
||||
const exportOpen = ref(false)
|
||||
// 已选媒体
|
||||
const chosedMediaList = ref([])
|
||||
// 导出提交信息
|
||||
const exportForm = ref({
|
||||
mediaIds: undefined,
|
||||
templateId: undefined,
|
||||
exportFields: undefined
|
||||
})
|
||||
// ppt字段是否全选
|
||||
const pptFieldCheckAll = ref(false)
|
||||
const pptFieldIsIndeterminate = ref(true)
|
||||
// ppt字段
|
||||
const pptFields = ref([])
|
||||
// 已选择的ppt字段
|
||||
const checkedPPTFields = ref([])
|
||||
|
||||
// 移除已选媒体
|
||||
const handleCloseTag = (tag) => {
|
||||
const rowIndex = chosedMediaList.value.findIndex(item => item.id == tag.id)
|
||||
chosedMediaList.value.splice(rowIndex, 1)
|
||||
}
|
||||
|
||||
// PPT字段全选操作
|
||||
const handleCheckAllPPTFieldChange = (val) => {
|
||||
checkedPPTFields.value = []
|
||||
if (val) {
|
||||
pptFields.value.forEach(element => {
|
||||
checkedPPTFields.value.push(element.propertyPath)
|
||||
});
|
||||
}
|
||||
pptFieldIsIndeterminate.value = false
|
||||
}
|
||||
// 单个选择PPT字段
|
||||
const handleCheckedPPTFieldChange = (value) => {
|
||||
const checkedCount = value.length
|
||||
pptFieldCheckAll.value = checkedCount === pptFields.value.length
|
||||
pptFieldIsIndeterminate.value = checkedCount > 0 && checkedCount < pptFields.value.length
|
||||
}
|
||||
|
||||
// 导出ppt实现代码
|
||||
const handleSubmitExportPPT = () => {
|
||||
exportForm.value.exportFields = checkedPPTFields
|
||||
exportMediaPPT(exportForm.value).then(res => {
|
||||
const downLoadName = '媒体信息_' + getCurrentTime() + '.pptx'
|
||||
// 通过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)
|
||||
exportOpen.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const getCurrentTime = () => {
|
||||
//获取当前时间并打印
|
||||
var getTime = new Date().getTime(); //获取到当前时间戳
|
||||
var time = new Date(getTime); //创建一个日期对象
|
||||
var year = time.getFullYear(); // 年
|
||||
var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
|
||||
var date = time.getDate().toString().padStart(2, '0'); // 日
|
||||
var hour = time.getHours().toString().padStart(2, '0'); // 时
|
||||
var minute = time.getMinutes().toString().padStart(2, '0'); // 分
|
||||
var second = time.getSeconds().toString().padStart(2, '0'); // 秒
|
||||
var gettime = year + month + date + hour + minute + second
|
||||
return gettime
|
||||
}
|
||||
|
||||
// 获取ppt信息字段
|
||||
const getMediaExcelPPTField = () => {
|
||||
mediaPPTField().then(res => {
|
||||
pptFields.value = res.data
|
||||
})
|
||||
}
|
||||
// 初始化
|
||||
const initExportPPT = (_tempId, _mediaIds, multipleChoseArr) => {
|
||||
exportForm.value.templateId = _tempId
|
||||
exportForm.value.mediaIds = _mediaIds
|
||||
chosedMediaList.value = multipleChoseArr
|
||||
getMediaExcelPPTField()
|
||||
exportOpen.value = true
|
||||
}
|
||||
|
||||
// 暴露方法\属性给父组件
|
||||
defineExpose({
|
||||
initExportPPT
|
||||
});
|
||||
</script>
|
||||
|
|
@ -129,7 +129,19 @@
|
|||
<el-dropdown-item class="dropItem"
|
||||
@click="handleImport('ys')">导入优势媒体报价</el-dropdown-item>
|
||||
<el-dropdown-item class="dropItem"
|
||||
@click="handleImport('wl')">导入网络媒体报价</el-dropdown-item>
|
||||
@click="handleImport('mj')">导入网络-门禁媒体报价</el-dropdown-item>
|
||||
<el-dropdown-item class="dropItem"
|
||||
@click="handleImport('hct')">导入网络-候车厅媒体报价</el-dropdown-item>
|
||||
<el-dropdown-item class="dropItem"
|
||||
@click="handleImport('dz')">导入网络-道闸媒体报价</el-dropdown-item>
|
||||
<el-dropdown-item class="dropItem"
|
||||
@click="handleImport('dt')">导入网络-地铁媒体报价</el-dropdown-item>
|
||||
<el-dropdown-item class="dropItem"
|
||||
@click="handleImport('gt')">导入网络-高铁媒体报价</el-dropdown-item>
|
||||
<el-dropdown-item class="dropItem"
|
||||
@click="handleImport('xzl')">导入网络-写字楼媒体报价</el-dropdown-item>
|
||||
<el-dropdown-item class="dropItem"
|
||||
@click="handleImport('ckdx')">导入网络-车库灯箱媒体报价</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
|
@ -139,12 +151,12 @@
|
|||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item class="dropItem"
|
||||
@click="handleExportPPT('dd')">滴滴模板导出</el-dropdown-item>
|
||||
<el-dropdown-item class="dropItem"
|
||||
@click="handleExportPPT('yk')">优客模板导出</el-dropdown-item>
|
||||
<el-dropdown-item class="dropItem"
|
||||
@click="handleExportPPT('kong')">空白模板导出</el-dropdown-item>
|
||||
<el-dropdown-item class="dropItem" v-for="temp in templateList"
|
||||
@click="handleExportPPT(temp.id)">
|
||||
<span v-if="temp.type == 3">优客模板导出</span>
|
||||
<span v-if="temp.type == 2">滴滴模板导出</span>
|
||||
<span v-if="temp.type == 1">空白模板导出</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
|
@ -185,7 +197,7 @@
|
|||
<img style="cursor: pointer;" :src="scope.row.currentCataloguePhotoSrc"
|
||||
@mouseenter="scope.row.currentCataloguePhotoSrc = hoverViewFileSrc"
|
||||
@mouseleave="scope.row.currentCataloguePhotoSrc = defaultViewFileSrc"
|
||||
@click="handleViewPhoto" />
|
||||
@click="handleViewPhoto(11, scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="媒体链条" align="center" prop="mediaChain" width="90">
|
||||
|
|
@ -193,7 +205,7 @@
|
|||
<img style="cursor: pointer;" :src="scope.row.currentMediaChainSrc"
|
||||
@mouseenter="scope.row.currentMediaChainSrc = hoverViewFileSrc"
|
||||
@mouseleave="scope.row.currentMediaChainSrc = defaultViewFileSrc"
|
||||
@click="handleViewPhoto" />
|
||||
@click="handleViewPhoto(10, scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="资质文件" align="center" prop="qualificationFile" width="90">
|
||||
|
|
@ -201,7 +213,7 @@
|
|||
<img style="cursor: pointer;" :src="scope.row.currentQualificationFileSrc"
|
||||
@mouseenter="scope.row.currentQualificationFileSrc = hoverViewFileSrc"
|
||||
@mouseleave="scope.row.currentQualificationFileSrc = defaultViewFileSrc"
|
||||
@click="handleViewPhoto" />
|
||||
@click="handleViewPhoto(9, scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="盖章刊例" align="center" prop="stampedPublication" width="90">
|
||||
|
|
@ -209,7 +221,7 @@
|
|||
<img style="cursor: pointer;" :src="scope.row.currentStampedPublicationSrc"
|
||||
@mouseenter="scope.row.currentStampedPublicationSrc = hoverViewFileSrc"
|
||||
@mouseleave="scope.row.currentStampedPublicationSrc = defaultViewFileSrc"
|
||||
@click="handleViewPhoto" />
|
||||
@click="handleViewPhoto(8, scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建人" align="center" prop="createBy" width="150" />
|
||||
|
|
@ -255,6 +267,7 @@
|
|||
<down-files ref="downFileRef" />
|
||||
<view-file-dialog ref="viewFileRef" />
|
||||
<export-dialog ref="exportDialogRef" />
|
||||
<export-p-p-t-dialog ref="exportPPTDialogRef" />
|
||||
<!-- 导入对话框 -->
|
||||
<el-dialog title="导入" v-model="uploadOpen" width="650px" class="my_dialog" align-center :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
|
|
@ -281,41 +294,7 @@
|
|||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 导出PPT对话框 -->
|
||||
<el-dialog :title="exportPPT.title" v-model="exportPPT.open" width="1270px" class="my_dialog" align-center
|
||||
:destroy-on-close="true" :close-on-click-modal="false">
|
||||
<div class="my_dialog_itemHeader">已选内容</div>
|
||||
<div class="chosedMediaNamsConter">
|
||||
<el-tag v-for="tag in multipleChoseArr" :key="tag.id" class="exportPPTTag" @close="handleCloseTag(tag)"
|
||||
closable>
|
||||
{{ tag.mediaName }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="my_dialog_itemHeader">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">选择需要写入方案的媒体字段</el-col>
|
||||
<el-col :span="12" style="text-align: right;">
|
||||
<el-checkbox class="checkAllChose" v-model="checkAll" :indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange">
|
||||
全选
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-checkbox-group class="checkAllChose" style="margin-top: 30px;" v-model="checkedCities"
|
||||
@change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
|
||||
{{ city.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="my-cancel-btn" @click="exportPPT.open = false">取 消</el-button>
|
||||
<el-button class="my-confirm-btn" type="primary" @click="handleSubmitExportPPT">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="Post">
|
||||
|
|
@ -333,6 +312,7 @@ import { sysMediaTypeListByPid } from "@/api/system/mediaType"
|
|||
import { busTradingAreaPage } from "@/api/system/businessArea"
|
||||
import { mediaPageList } from "@/api/mediaLibrary"
|
||||
import { listDept } from "@/api/system/dept"
|
||||
import { pptTemplatePage } from "@/api/system/pptTemplate"
|
||||
// 注入组件
|
||||
import mediaForm from "./mediaForm.vue";
|
||||
import mediaDetail from "./mediaDetail.vue";
|
||||
|
|
@ -342,8 +322,10 @@ import downFiles from './downFiles.vue';
|
|||
import viewFileDialog from '@/components/ViewFile/index.vue'
|
||||
import exportDialog from './exportDialog.vue';
|
||||
import abolishDialog from './abolishDialog.vue';
|
||||
import exportPPTDialog from './exportPPTDialog.vue';
|
||||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const bgStore = useBackgroundStore()
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
|
@ -405,6 +387,10 @@ const mediaDetailRef = ref(null)
|
|||
// 日志
|
||||
const showLogs = ref(false)
|
||||
const mediaLogsRef = ref(null)
|
||||
// ppt模板数据
|
||||
const templateList = ref([])
|
||||
// 媒体多选数据
|
||||
const multipleChoseArr = ref([])
|
||||
|
||||
|
||||
const uploadOpen = ref(false)
|
||||
|
|
@ -414,40 +400,16 @@ const historyDataRef = ref(null)
|
|||
const downFileRef = ref(null)
|
||||
const viewFileRef = ref(null)
|
||||
const exportDialogRef = ref(null)
|
||||
// 导出PPT勾选字段
|
||||
const checkAll = ref(false)
|
||||
const isIndeterminate = ref(true)
|
||||
const checkedCities = ref(['Shanghai'])
|
||||
const cities = [
|
||||
{ label: '字段名', value: 'Shanghai' },
|
||||
{ label: '字段名', value: 'begnjing' },
|
||||
{ label: '字段名', value: 'chongq' },
|
||||
{ label: '字段名', value: 'sdag' },
|
||||
{ label: '字段名', value: 'Shanghai1' },
|
||||
{ label: '字段名', value: 'begnjing2' },
|
||||
{ label: '字段名', value: 'chongq3' },
|
||||
{ label: '字段名', value: 'sdag4' },
|
||||
{ label: '字段名', value: 'Shanghai5' },
|
||||
{ label: '字段名', value: 'begnjing6' },
|
||||
{ label: '字段名', value: 'chongq7' },
|
||||
{ label: '字段名', value: 'sdag8' },
|
||||
{ label: '字段名', value: 'Shanghai9' },
|
||||
{ label: '字段名', value: 'begnjing10' },
|
||||
{ label: '字段名', value: 'chongq11' },
|
||||
{ label: '字段名', value: 'sdag12' },
|
||||
]
|
||||
const exportPPTDialogRef = ref(null)
|
||||
|
||||
|
||||
|
||||
// 多选数据
|
||||
const multipleChoseArr = ref([])
|
||||
|
||||
// 导出PPT模板参数
|
||||
const exportPPT = reactive({
|
||||
open: false,
|
||||
title: "",
|
||||
})
|
||||
|
||||
// 获取PPT模板
|
||||
const getpptTemplatePageList = () => {
|
||||
pptTemplatePage(queryParams.value).then(res => {
|
||||
templateList.value = res.data.list
|
||||
})
|
||||
}
|
||||
// 获取一级媒体类型
|
||||
const getMediaTypeOne = () => {
|
||||
sysMediaTypeListByPid({ parentId: 0 }).then(res => {
|
||||
|
|
@ -586,15 +548,14 @@ const resetQuery = () => {
|
|||
handleQuery()
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 多选事件
|
||||
// 选择媒体事件
|
||||
const handleSelectionChange = (selection) => {
|
||||
multipleChoseArr.value = selection
|
||||
}
|
||||
// 移除选择项
|
||||
const handleCloseTag = (tag) => {
|
||||
|
||||
const rowIndex = multipleChoseArr.value.findIndex(item => item.id == tag.id)
|
||||
multipleChoseArr.value.splice(rowIndex, 1)
|
||||
}
|
||||
// 新增
|
||||
const handleOpenAddForm = () => {
|
||||
|
|
@ -619,7 +580,6 @@ const handleOpenDetail = (row) => {
|
|||
}
|
||||
// 关闭表单
|
||||
const handleShowList = () => {
|
||||
console.log('触发')
|
||||
showForm.value = false
|
||||
getMediaPageList()
|
||||
}
|
||||
|
|
@ -640,7 +600,8 @@ const handleCloseLogs = () => {
|
|||
}
|
||||
// 打开废除
|
||||
const handleAbolish = (row) => {
|
||||
if (scope.row.state == 1) abolishRef.value.openDialog(row.id)
|
||||
if (row.state == 1) abolishRef.value.openDialog(row.id)
|
||||
else proxy.$modal.notify("该媒体已被废除，无需重复操作!")
|
||||
}
|
||||
// 打开历史数据
|
||||
const handleHistoryChart = (row) => {
|
||||
|
|
@ -651,51 +612,31 @@ const handleHistoryChart = (row) => {
|
|||
}
|
||||
// 打开文件下载
|
||||
const handleDownFiles = (row) => {
|
||||
downFileRef.value.downFileOpen = true
|
||||
nextTick(() => {
|
||||
// historyDataRef.value.initHistoryCharLine()
|
||||
})
|
||||
downFileRef.value.initFileList(true, row.id)
|
||||
}
|
||||
|
||||
// 查看文件
|
||||
const handleViewPhoto = () => {
|
||||
viewFileRef.value.viewFileOpen = true
|
||||
nextTick(() => {
|
||||
// historyDataRef.value.initHistoryCharLine()
|
||||
})
|
||||
const handleViewPhoto = (_fileType, row) => {
|
||||
viewFileRef.value.initFileList(_fileType, row.id)
|
||||
}
|
||||
|
||||
/** 导出Excel按钮操作 */
|
||||
const handleExportExcel = () => {
|
||||
exportDialogRef.value.exportOpen = true
|
||||
nextTick(() => {
|
||||
// historyDataRef.value.initHistoryCharLine()
|
||||
})
|
||||
if (multipleChoseArr.value.length == 0) {
|
||||
proxy.$modal.msgWarning("请选择要导出的媒体!!!")
|
||||
return false
|
||||
}
|
||||
const mediaIds = multipleChoseArr.value.map(item => item.id);
|
||||
exportDialogRef.value.initExportExcel(mediaIds)
|
||||
}
|
||||
/** 导出PPT按钮操作 */
|
||||
const handleExportPPT = (key) => {
|
||||
exportPPT.title = '导出PPT'
|
||||
exportPPT.open = true
|
||||
}
|
||||
// 全选操作
|
||||
const handleCheckAllChange = (val) => {
|
||||
checkedCities.value = []
|
||||
if (val) {
|
||||
cities.forEach(element => {
|
||||
checkedCities.value.push(element.value)
|
||||
});
|
||||
const handleExportPPT = (tempId) => {
|
||||
if (multipleChoseArr.value.length == 0) {
|
||||
proxy.$modal.msgWarning("请选择要导出的媒体!!!")
|
||||
return false
|
||||
}
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
// 单个选择字段
|
||||
const handleCheckedCitiesChange = (value) => {
|
||||
console.log('单选操作', value)
|
||||
const checkedCount = value.length
|
||||
checkAll.value = checkedCount === cities.length
|
||||
isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
|
||||
}
|
||||
// 导出ppt实现代码
|
||||
const handleSubmitExportPPT = () => {
|
||||
exportPPT.open = false
|
||||
const mediaIds = multipleChoseArr.value.map(item => item.id);
|
||||
exportPPTDialogRef.value.initExportPPT(tempId, mediaIds, multipleChoseArr.value)
|
||||
}
|
||||
|
||||
/** 导入按钮操作 */
|
||||
|
|
@ -765,6 +706,7 @@ onMounted(() => {
|
|||
getDepList()
|
||||
getMediaTypeOne()
|
||||
getProvinceList()
|
||||
getpptTemplatePageList()
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -646,7 +646,6 @@ const handleChange = (val) => {
|
|||
}
|
||||
// 报价类型切换
|
||||
const handlePriceTypeClick = (tab, event) => {
|
||||
console.log(tab, event)
|
||||
activePriceType.value = tab
|
||||
}
|
||||
// 打开拾取经纬度弹窗
|
||||
|
|
@ -662,7 +661,6 @@ const handleClosePickLat = (backValue) => {
|
|||
const businessTypeName = ref('优势媒体部')
|
||||
const handleChangeDept = (val) => {
|
||||
const choseDep = deptList.value.filter(item => item.value == val)[0]
|
||||
console.log('部门', choseDep)
|
||||
ruleForm.value.businessType = choseDep?.value
|
||||
businessTypeName.value = choseDep?.label
|
||||
nextTick(() => {
|
||||
|
|
@ -678,13 +676,11 @@ const handleChangeDept = (val) => {
|
|||
}
|
||||
// 选择商圈
|
||||
const handleChosebusiness = (val) => {
|
||||
console.log('选择商圈', val)
|
||||
const choseBusiness = businessAreaList.value.filter(item => item.id == val)[0]
|
||||
ruleForm.value.businessDistrictName = choseBusiness?.name
|
||||
}
|
||||
// 选择供应商
|
||||
const handleChoseSupplier = (val) => {
|
||||
console.log('选择供应商', val)
|
||||
const choseSupplier = supplierList.value.filter(item => item.supplierId == val)[0]
|
||||
ruleForm.value.belongSupplierId = choseSupplier?.supplierId
|
||||
ruleForm.value.belongSupplierName = choseSupplier?.supplierName
|
||||
|
|
@ -737,7 +733,6 @@ const getProvinceList = () => {
|
|||
}
|
||||
// 获取地级市/区数据
|
||||
const getCityList = (value) => {
|
||||
console.log('走了这里？')
|
||||
var choseProvince = province.value.filter(item => item.id == value)[0]
|
||||
if (choseProvince) {
|
||||
ruleForm.value.mediaCity = choseProvince.name
|
||||
|
|
@ -862,16 +857,17 @@ const getMediaTypeThree2 = (value) => {
|
|||
}
|
||||
|
||||
// 设置文件结果
|
||||
const handleSetMediaFile = (_files) => {
|
||||
let mergedArr = mediaFile.value.concat(_files);
|
||||
mediaFile.value = mergedArr
|
||||
console.log('结果文件', mediaFile.value)
|
||||
const handleSetMediaFile = (_fileType, _files) => {
|
||||
// 先按类型去除旧的文件
|
||||
var cachFileList = mediaFile.value.filter(item => item.fileType !== _fileType);
|
||||
// 将新的文件追加进来
|
||||
if (_files.length > 0) mediaFile.value = cachFileList.concat(_files)
|
||||
else mediaFile.value = cachFileList
|
||||
}
|
||||
// 设置媒体价格
|
||||
const handleSetCompetOfferMediaPrice = (mediaType, _priceList) => {
|
||||
console.log('接收', _priceList)
|
||||
// 先按类型去除旧的报价数据
|
||||
const cachPriceList = mediaPrice.value.filter(item => item.mediaType != mediaType)
|
||||
const cachPriceList = mediaPrice.value.filter(item => item.mediaType !== mediaType)
|
||||
// 将新的数据追加进结果
|
||||
if (_priceList.length > 0) mediaPrice.value = cachPriceList.concat(_priceList)
|
||||
else mediaPrice.value = cachPriceList
|
||||
|
|
@ -881,7 +877,7 @@ const handleSubmit = () => {
|
|||
proxy.$refs["ruleFormRef"].validate(valid => {
|
||||
if (valid) {
|
||||
if (businessTypeName.value == '优势媒体部') {
|
||||
mediaFile.value = mediaFile.value.filter(item => [1, 2, 3, 5, 6, 7, 8, 9, 10.11].includes(item.fileType))
|
||||
mediaFile.value = mediaFile.value.filter(item => [1, 2, 3, 5, 6, 7, 8, 9, 10, 11].includes(item.fileType))
|
||||
ruleForm.value.mediaPrice = mediaPrice.value.filter(item => item.mediaType == 0)
|
||||
} else if (businessTypeName.value == '网络媒体部') {
|
||||
mediaFile.value = mediaFile.value.filter(item => [4, 5, 6, 7, 12].includes(item.fileType))
|
||||
|
|
@ -911,8 +907,8 @@ const handleClose = () => {
|
|||
const getMediaInfo = () => {
|
||||
mediaDetail({ mediaId: ruleForm.value.id }).then(res => {
|
||||
ruleForm.value = res.data
|
||||
mediaFile.value = ruleForm.value.mediaFile
|
||||
ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + ruleForm.value.areaName + '/' + ruleForm.value.townName
|
||||
console.log('城市', ruleForm.value.mediaCity)
|
||||
|
||||
latVal.value = ruleForm.value.mapY + ',' + ruleForm.value.mapX
|
||||
handleChangeDept(res.data.businessType)
|
||||
|
|
@ -1000,6 +996,9 @@ async function handleResponse(response) {
|
|||
const initForm = (_formTitle, _ruleForm) => {
|
||||
formTitle.value = _formTitle
|
||||
ruleForm.value = _ruleForm
|
||||
ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + ruleForm.value.areaName + '/' + ruleForm.value.townName
|
||||
|
||||
latVal.value = ruleForm.value.mapY + ',' + ruleForm.value.mapX
|
||||
// getDepList()
|
||||
getMediaTypeOne()
|
||||
getProvinceList()
|
||||
|
|
|
|||
|
|
@ -39,32 +39,49 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="供应商名称" align="left" prop="supplierName" width="230" :show-overflow-tooltip="true" /> -->
|
||||
<el-table-column label="操作类型" align="left" prop="type" width="100" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作类型" align="left" prop="type" width="100" :show-overflow-tooltip="true">
|
||||
<template #default="scope">
|
||||
<span span v-if="scope.row.operateType == 1">新增</span>
|
||||
<span span v-if="scope.row.operateType == 2">修改</span>
|
||||
<span span v-if="scope.row.operateType == 4">废除</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作人" align="center" prop="createBy" width="160" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作时间" align="center" prop="createTime" width="210" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="变更字段" align="left" prop="content" min-width="210">
|
||||
<el-table-column label="变更字段" align="left" prop="changeAfter" min-width="210">
|
||||
<template #default="scope">
|
||||
<el-popover popper-class="myUpdate_popover" placement="bottom-start">
|
||||
<el-table :data="detailTable" height="230px">
|
||||
<el-table-column label="字段名称" align="left" prop="type" min-width="100"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="变更前" align="left" prop="type" min-width="100"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="变更后" align="left" prop="type" min-width="100"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table :data="JSON.parse(scope.row.changeAfterDiffer)" height="230px">
|
||||
<el-table-column label="字段名称" align="left" prop="fieldDescribe" min-width="100"
|
||||
:show-overflow-tooltip="true">
|
||||
<template #default="scope">
|
||||
<span class="fieldDescribeLale">{{ scope.row.fieldDescribe }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="变更前" align="left" prop="firstVal" min-width="100"
|
||||
:show-overflow-tooltip="true">
|
||||
<template #default="scope">
|
||||
<span class="firstValLale">{{ scope.row.firstVal }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="变更后" align="left" prop="secondVal" min-width="100"
|
||||
:show-overflow-tooltip="true">
|
||||
<template #default="scope">
|
||||
<span class="secondValLale">{{ scope.row.secondVal }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<template #reference>
|
||||
<span class="updatefiter" @click="handleOpenDetail(scope.row.supplierId)">{{
|
||||
scope.row.content
|
||||
}}</span>
|
||||
<span class="updatefiter">{{ scope.row.changeAfter }}</span>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-if="activeIndex == 0" :total="total" v-model:page="queryParams.pageIndex"
|
||||
<pagination v-if="activeIndex == 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getMediaPageList" />
|
||||
<div v-if="activeIndex == 1" v-loading="loading">
|
||||
<div style="height:calc(100vh - 238px); overflow-y: auto;overflow-x: hidden;">
|
||||
<el-timeline v-if="mediaLogList.length > 0" class="my-time-line" style="padding-left: 0;">
|
||||
<el-timeline-item v-for="(activity, index) in mediaLogList" :key="index" placement="top"
|
||||
:timestamp="activity.createTime">
|
||||
|
|
@ -109,17 +126,18 @@
|
|||
</el-timeline>
|
||||
<el-empty v-else :image-size="500" description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineEmits, ref } from 'vue'
|
||||
import { defineEmits, defineExpose, ref } from 'vue'
|
||||
import { Close, Search } from '@element-plus/icons-vue'
|
||||
|
||||
import iconList from '@/assets/images/iconList.png'
|
||||
import iconTimeLine from '@/assets/images/iconTimeLine.png'
|
||||
import iconListChose from '@/assets/images/iconListChose.png'
|
||||
import iconTimeLineChose from '@/assets/images/iconTimeLineChose.png'
|
||||
import { mediaOptionLog } from "@/api/mediaLibrary"
|
||||
import { mediaOptionLog, mediaOptionLogPage } from "@/api/mediaLibrary"
|
||||
|
||||
const emit = defineEmits(['handleShowList']);
|
||||
const ToolOptions = ref([
|
||||
|
|
@ -131,7 +149,7 @@ const mediaLogList = ref([])
|
|||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
const queryParams = ref({
|
||||
pageIndex: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
keyword: undefined,
|
||||
mediaId: undefined
|
||||
|
|
@ -150,35 +168,28 @@ const handleQuery = () => {
|
|||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
if (activeIndex.value == 0) {
|
||||
queryParams.value.pageIndex = 1
|
||||
queryParams.value.pageNum = 1
|
||||
queryParams.value.pageSize = 10
|
||||
}
|
||||
else {
|
||||
queryParams.value.pageIndex = undefined
|
||||
queryParams.value.pageNum = undefined
|
||||
queryParams.value.pageSize = undefined
|
||||
}
|
||||
handleQuery()
|
||||
}
|
||||
// 获取分页日志记录
|
||||
const getMediaPageList = () => {
|
||||
// loading.value = true
|
||||
// busSupplierLogPage(queryParams.value).then(res => {
|
||||
// res.data.list.forEach(item => {
|
||||
// item.supplierName = supplierName.value
|
||||
// });
|
||||
// supplierLogList.value = res.data.list
|
||||
// total.value = res.data.total
|
||||
// loading.value = false
|
||||
// })
|
||||
loading.value = true
|
||||
mediaOptionLogPage(queryParams.value).then(res => {
|
||||
mediaLogList.value = res.data.rows
|
||||
total.value = res.data.total
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
// 获取时间轴日志记录
|
||||
const getMediaList = () => {
|
||||
loading.value = true
|
||||
mediaOptionLog(queryParams.value).then(res => {
|
||||
// res.data.forEach(item => {
|
||||
// item.supplierName = supplierName.value
|
||||
// console.log(JSON.parse(item.updateContent))
|
||||
// });
|
||||
mediaLogList.value = res.data
|
||||
loading.value = false
|
||||
})
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@
|
|||
<pagination v-if="activeIndex == 0" :total="total" v-model:page="queryParams.pageIndex"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getSupplierPageList" />
|
||||
<div v-if="activeIndex == 1" v-loading="loading">
|
||||
<div style="height:calc(100vh - 238px); overflow-y: auto;overflow-x: hidden;">
|
||||
<el-timeline v-if="supplierLogList.length > 0" class="my-time-line" style="padding-left: 0;">
|
||||
<el-timeline-item v-for="(activity, index) in supplierLogList" :key="index" placement="top"
|
||||
:timestamp="activity.createTime">
|
||||
|
|
@ -123,6 +124,7 @@
|
|||
</el-timeline>
|
||||
<el-empty v-else :image-size="500" description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user