添加及调整优势媒体界面
This commit is contained in:
wangchengming
parent
32af8cbaec
commit
b135c174aa
|
|
@ -17,7 +17,7 @@ export function listBusSupplier(query) {
|
|||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 新增供应商
|
||||
export function addBusSupplier(data) {
|
||||
return request({
|
||||
|
|
@ -50,4 +50,35 @@ export function deleteBusSupplier(supplierId) {
|
|||
url: '/admin/busSupplier/deleteBusSupplier/' + supplierId,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 供应商信息导出
|
||||
export function exportSupplier(query) {
|
||||
return request({
|
||||
url: '/admin/busSupplier/export',
|
||||
method: 'post',
|
||||
data: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 供应商导入模板下载
|
||||
export function exportTemplate() {
|
||||
return request({
|
||||
url: '/admin/busSupplier/exportTemplate',
|
||||
method: 'post',
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 供应商信息导入
|
||||
export function importSupplier(query) {
|
||||
return request({
|
||||
url: '/admin/busSupplier/import',
|
||||
method: 'post',
|
||||
data: query,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -124,7 +124,7 @@ aside {
|
|||
.app-container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 !important;
|
||||
padding: 0 40px !important;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
|
|
|
|||
|
|
@ -413,7 +413,23 @@ h6 {
|
|||
background: #ffc63d;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.my-downAllFile-btn {
|
||||
width: 140px;
|
||||
height: 34px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
background: #1a75e6;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.my-downAllFile-btn:hover {
|
||||
background: #1a75e6;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.my-confirm-btn {
|
||||
width: 100px;
|
||||
|
|
@ -816,7 +832,7 @@ h6 {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
// 独立查询输入框样式
|
||||
// 独立查询输入框样式
|
||||
.searchInputForm .el-form-item--default {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
|
@ -840,6 +856,7 @@ h6 {
|
|||
color: #8C8C8C;
|
||||
}
|
||||
|
||||
|
||||
// 分页器
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
|
|
@ -1031,6 +1048,8 @@ h6 {
|
|||
|
||||
.my_dialog .el-dialog__body {
|
||||
padding: 30px;
|
||||
max-height: 750px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.my_dialog .el-dialog__footer {
|
||||
|
|
@ -1106,8 +1125,8 @@ h6 {
|
|||
|
||||
// 单选框
|
||||
.myInsertForm .el-radio__inner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.myInsertForm .el-radio__label {
|
||||
|
|
@ -1179,7 +1198,7 @@ h6 {
|
|||
font-size: 16px;
|
||||
color: #002866;
|
||||
justify-content: start;
|
||||
height: 60px;
|
||||
min-height: 60px;
|
||||
line-height: 60px;
|
||||
padding-left: 31px;
|
||||
background: #EDF2F960;
|
||||
|
|
@ -1189,7 +1208,7 @@ h6 {
|
|||
.myDetailForm .filesItemContent .el-form-item__label {
|
||||
min-height: 120px;
|
||||
line-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.my_detailform_label .el-form-item__label {
|
||||
line-height: 20px;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<el-upload action="#" class="noFileCard" :http-request="requestUpload" list-type="picture-card"
|
||||
:file-list="cardfileList" :on-change="handleChange" :show-file-list="false"
|
||||
:file-list="cardfileList" :on-change="handleChange" :show-file-list="false" :accept="_accept"
|
||||
:before-upload="beforeUpload">
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
|
|
@ -73,6 +73,7 @@ const fileList = ref([])
|
|||
const cardfileList = ref([])
|
||||
// 文件类型 1-营业执照 2-媒体权属 9-其它附件
|
||||
const _fileType = ref('1')
|
||||
const _accept = ref('*/*')
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API
|
||||
const dialogImageUrl = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
|
|
@ -159,6 +160,7 @@ const requestUpload = async (options) => {
|
|||
|
||||
// 文件类型校验
|
||||
const beforeUpload = (file) => {
|
||||
if (_accept.value == '*/*') return true
|
||||
// const validTypes = [
|
||||
// // 图片类型
|
||||
// "image/jpeg",
|
||||
|
|
@ -171,13 +173,13 @@ const beforeUpload = (file) => {
|
|||
// "applications/vnd.pdf",
|
||||
// "text/pdf",
|
||||
// "text/x-pdf"]
|
||||
// const isValidType = validTypes.includes(file.type)
|
||||
const isValidType = validTypes.includes(file.type)
|
||||
// // const isLt5M = file.size / 1024 / 1024 < 5
|
||||
|
||||
// if (!isValidType) {
|
||||
// proxy.$modal.msgError("文件格式错误，请上传 JPG/JPEG/PNG/PDF 后缀的文件。");
|
||||
// return false
|
||||
// }
|
||||
if (!isValidType) {
|
||||
proxy.$modal.msgError("文件格式错误，请上传 " + _accept.value + " 后缀的文件。");
|
||||
return false
|
||||
}
|
||||
|
||||
// if (!isLt5M) {
|
||||
// proxy.$modal.msgError("文件大小不能超过5MB");
|
||||
|
|
|
|||
113
src/components/ViewFile/index.vue
Normal file
113
src/components/ViewFile/index.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<!-- 文件查看对话框 -->
|
||||
<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%">
|
||||
<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>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, defineEmits, 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'
|
||||
|
||||
|
||||
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 isImageFile = (suffix) => {
|
||||
console.log('是否图片', suffix, ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase()))
|
||||
return ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase())
|
||||
}
|
||||
const handleDownFile = () => {
|
||||
|
||||
}
|
||||
const handleDownAllFile = () => {
|
||||
|
||||
}
|
||||
const getList = () => {
|
||||
|
||||
}
|
||||
|
||||
// 暴露方法\属性给父组件
|
||||
defineExpose({
|
||||
viewFileOpen,
|
||||
getList
|
||||
});
|
||||
</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>
|
||||
|
|
@ -151,7 +151,7 @@ const submitForm = () => {
|
|||
background-size: cover;
|
||||
// background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0 36px;
|
||||
padding: 0 40px;
|
||||
|
||||
.navContent {
|
||||
height: 43px;
|
||||
|
|
|
|||
277
src/views/mediaLibrary/downFiles.vue
Normal file
277
src/views/mediaLibrary/downFiles.vue
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
<template>
|
||||
<!-- 文件下载对话框 -->
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<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, defineEmits, 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'
|
||||
|
||||
|
||||
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 isImageFile = (suffix) => {
|
||||
console.log('是否图片', suffix, ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase()))
|
||||
return ['jpeg', 'jpg', 'png'].includes(suffix.toLowerCase())
|
||||
}
|
||||
const handleDownFile = () => {
|
||||
|
||||
}
|
||||
const handleDownAllFile = () => {
|
||||
|
||||
}
|
||||
const getList = () => {
|
||||
|
||||
}
|
||||
|
||||
// 暴露方法\属性给父组件
|
||||
defineExpose({
|
||||
downFileOpen,
|
||||
getList
|
||||
});
|
||||
</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>
|
||||
174
src/views/mediaLibrary/historyData.vue
Normal file
174
src/views/mediaLibrary/historyData.vue
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<template>
|
||||
<!-- 历史数据对话框 -->
|
||||
<el-dialog title="历史数据" v-model="historyDataOpen" width="1250px" class="my_dialog" align-center
|
||||
:destroy-on-close="true" :close-on-click-modal="false">
|
||||
<el-form :inline="true" class="myInsertForm">
|
||||
<el-form-item label="开始时间">
|
||||
<el-date-picker v-model="queryParams.startTime" type="date" placeholder="开始时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间">
|
||||
<el-date-picker v-model="queryParams.endTime" type="date" placeholder="结束时间" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-radio-group v-model="queryParams.radio1">
|
||||
<el-radio value="1">折线图</el-radio>
|
||||
<el-radio value="2">柱状图</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div id="historyChar" ref="historyCharRef"></div>
|
||||
<el-table v-loading="loading" :data="historyList" height="368px">
|
||||
<el-table-column label="媒体名称" align="left" prop="mediaName">
|
||||
<template #default="scope">
|
||||
<span class="mediaNameLabel">{{ scope.row.mediaName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商名称" prop="realName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="折扣" prop="email" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="媒体净价(元)" prop="phonenumber" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="实际报价(元)" prop="phonenumber" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, defineEmits, ref } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const historyCharRef = ref(null)
|
||||
const historyDataOpen = ref(false)
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
const historyList = ref([])
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
userName: undefined,
|
||||
phonenumber: undefined,
|
||||
})
|
||||
const getList = () => {
|
||||
|
||||
}
|
||||
const _historyChar = ref(null)
|
||||
// 折线图
|
||||
const initHistoryCharLine = () => {
|
||||
if (_historyChar.value) _historyChar.value.dispose();
|
||||
_historyChar.value = echarts.init(historyCharRef.value)
|
||||
_historyChar.value.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{b} : {c} 元/年" //鼠标放上去 展示内容
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%', // 右侧留更多空间显示长数值
|
||||
top: '14%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['滴滴', '五粮液项目', '北京易优行广告传媒有限公司', '滴滴', '五粮液项目', '北京易优行广告传媒有限公司', '滴滴'],
|
||||
axisLabel: {
|
||||
interval: 0, // 强制显示所有标签
|
||||
rotate: 15, // 标签旋转45度防止重叠
|
||||
fontSize: 16, // 缩小字体
|
||||
color: '#808080'
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#eee',
|
||||
},
|
||||
show: false
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '实际报价（元/年）',
|
||||
nameTextStyle: {
|
||||
color: '#3B3B3B',
|
||||
fontSize: 16,
|
||||
fontWeight: '400',
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
align: 'center',
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: '#808080'
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#F1F1F1',
|
||||
},
|
||||
show: true
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
// symbol: 'circle',
|
||||
symbolSize: 12,
|
||||
itemStyle: {
|
||||
color: '#FFC63D'
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#FFC63D'
|
||||
},
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
// 暴露方法\属性给父组件
|
||||
defineExpose({
|
||||
historyDataOpen,
|
||||
initHistoryCharLine
|
||||
});
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.mediaNameLabel {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1A75E6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mediaNameLabel:hover {
|
||||
text-decoration: underline solid #1A75E6 1px;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
#historyChar {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div v-if="!showForm && !showDetail">
|
||||
<div v-if="!showForm && !showDetail && !showLogs">
|
||||
<div class="searchPanel">
|
||||
<div class="more-search-pane">
|
||||
<div class="search-where-container">
|
||||
|
|
@ -168,15 +168,7 @@
|
|||
<el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleOpenAddForm">新增</el-button>
|
||||
<el-dropdown style="margin: 0 12px;">
|
||||
<el-button type="primary" class="primaryBtn">导入excel</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item class="dropItem" @click="handleImport">导入优势数据</el-dropdown-item>
|
||||
<el-dropdown-item class="dropItem" @click="handleImport">导入网络数据</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleImport">导入报价数据</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="handleExportExcel">导出excel</el-button>
|
||||
<el-button type="primary" class="primaryBtn">媒体可视化地图</el-button>
|
||||
<el-dropdown style="margin-left: 12px;">
|
||||
|
|
@ -206,7 +198,7 @@
|
|||
<img :src="otherbg" />
|
||||
<template #reference>
|
||||
<span class="mediaNameLabel" @click="handleOpenDetail">{{ scope.row.mediaName
|
||||
}}</span>
|
||||
}}</span>
|
||||
</template>
|
||||
</el-popover>
|
||||
|
||||
|
|
@ -216,34 +208,37 @@
|
|||
<el-table-column label="媒介形式" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="商圈" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="展示形式" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="刊例价（元）" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="业务部门" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="刊例照片" align="center" prop="cataloguePhoto" width="90">
|
||||
<template #default="scope">
|
||||
<img style="cursor: pointer;" :src="scope.row.currentCataloguePhotoSrc"
|
||||
@mouseenter="scope.row.currentCataloguePhotoSrc = hoverViewFileSrc"
|
||||
@mouseleave="scope.row.currentCataloguePhotoSrc = defaultViewFileSrc" />
|
||||
@mouseleave="scope.row.currentCataloguePhotoSrc = defaultViewFileSrc"
|
||||
@click="handleViewPhoto" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="媒体链条" align="center" prop="mediaChain" width="90">
|
||||
<template #default="scope">
|
||||
<img style="cursor: pointer;" :src="scope.row.currentMediaChainSrc"
|
||||
@mouseenter="scope.row.currentMediaChainSrc = hoverViewFileSrc"
|
||||
@mouseleave="scope.row.currentMediaChainSrc = defaultViewFileSrc" />
|
||||
@mouseleave="scope.row.currentMediaChainSrc = defaultViewFileSrc"
|
||||
@click="handleViewPhoto" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="资质文件" align="center" prop="qualificationFile" width="90">
|
||||
<template #default="scope">
|
||||
<img style="cursor: pointer;" :src="scope.row.currentQualificationFileSrc"
|
||||
@mouseenter="scope.row.currentQualificationFileSrc = hoverViewFileSrc"
|
||||
@mouseleave="scope.row.currentQualificationFileSrc = defaultViewFileSrc" />
|
||||
@mouseleave="scope.row.currentQualificationFileSrc = defaultViewFileSrc"
|
||||
@click="handleViewPhoto" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="盖章刊例" align="center" prop="stampedPublication" width="90">
|
||||
<template #default="scope">
|
||||
<img style="cursor: pointer;" :src="scope.row.currentStampedPublicationSrc"
|
||||
@mouseenter="scope.row.currentStampedPublicationSrc = hoverViewFileSrc"
|
||||
@mouseleave="scope.row.currentStampedPublicationSrc = defaultViewFileSrc" />
|
||||
@mouseleave="scope.row.currentStampedPublicationSrc = defaultViewFileSrc"
|
||||
@click="handleViewPhoto" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建人" align="center" prop="postCode" width="150" />
|
||||
|
|
@ -254,13 +249,13 @@
|
|||
<el-popover popper-class="my_popover" placement="left-start">
|
||||
<div class="popBtns" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['problemFeedback:edit']">修改</div>
|
||||
<div class="popBtns" @click="handleUpdate(scope.row)"
|
||||
<div class="popBtns" @click="handleHistoryChart(scope.row)"
|
||||
v-hasPermi="['problemFeedback:edit']">历史数据</div>
|
||||
<div class="popBtns" @click="handleUpdate(scope.row)"
|
||||
<div class="popBtns" @click="handleAbolish(scope.row)"
|
||||
v-hasPermi="['problemFeedback:edit']">废除</div>
|
||||
<div class="popBtns" @click="handleUpdate(scope.row)"
|
||||
<div class="popBtns" @click="handleLogs(scope.row)"
|
||||
v-hasPermi="['problemFeedback:edit']">日志</div>
|
||||
<div class="popBtns" @click="handleUpdate(scope.row)"
|
||||
<div class="popBtns" @click="handleDownFiles(scope.row)"
|
||||
v-hasPermi="['problemFeedback:edit']">下载</div>
|
||||
<template #reference>
|
||||
<img style="cursor: pointer;" :src="scope.row.currentImageSrc"
|
||||
|
|
@ -277,31 +272,51 @@
|
|||
</el-card>
|
||||
</div>
|
||||
<media-form ref="mediaFormRef" v-if="showForm" @handleShowList="handleShowList" />
|
||||
<media-detail ref="mediaDetailRef" v-if="showDetail" @handleShowList="handleShowList" />
|
||||
<media-detail ref="mediaDetailRef" v-if="showDetail" @handleShowList="handleCloseDetail" />
|
||||
<media-logs ref="mediaLogsRef" v-if="showLogs" @handleShowList="handleCloseLogs" />
|
||||
<history-data ref="historyDataRef" />
|
||||
<down-files ref="downFileRef" />
|
||||
<view-file-dialog ref="viewFileRef" />
|
||||
|
||||
<!-- 导入对话框 -->
|
||||
<el-dialog :title="upload.title" v-model="upload.open" width="650px" class="my_dialog" align-center
|
||||
<!-- 废除对话框 -->
|
||||
<el-dialog title="废除" v-model="abolishOpen" width="650px" class="my_dialog" align-center
|
||||
:destroy-on-close="true" :close-on-click-modal="false">
|
||||
<el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
|
||||
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||
<el-form ref="abolishRef" :model="abolishForm" :rules="abolishRules" label-width="120px"
|
||||
label-position="top" class="myFeedBackForm">
|
||||
<el-form-item label="输入废除原因" prop="content">
|
||||
<el-input v-model="abolishForm.content" style="width: 100%" :rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="my-cancel-btn" @click="abolishOpen = false">取 消</el-button>
|
||||
<el-button class="my-confirm-btn" type="primary" @click="handleSubmitAbolish">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 导入对话框 -->
|
||||
<el-dialog title="导入" v-model="uploadOpen" width="650px" class="my_dialog" align-center :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
<el-upload ref="uploadRef" class="upload-demo" drag action="#" :http-request="requestDocUpload"
|
||||
:file-list="docUploadList" :before-upload="beforeDocUpload" :on-remove="removeDocUpload">
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__text">
|
||||
将文件拖曳至此区域，或 <em>点击上传</em>
|
||||
</div>
|
||||
<!-- <div class="el-upload__text">
|
||||
支持扩展名：.xlsx, .xls
|
||||
</div> -->
|
||||
<template #tip>
|
||||
<div class="el-upload__tip text-center">
|
||||
<!-- <div class="el-upload__tip">
|
||||
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
|
||||
</div> -->
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
|
||||
@click="importTemplate">下载模板</el-link> -->
|
||||
<el-link type="primary" underline="never" style="font-size: 12px; vertical-align: baseline"
|
||||
@click="importTemplate">下载模板</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="my-cancel-btn" @click="upload.open = false">取 消</el-button>
|
||||
<el-button class="my-confirm-btn" type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button class="my-cancel-btn" @click="uploadOpen = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
|
@ -326,7 +341,6 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup name="Post">
|
||||
import { getToken } from "@/utils/auth"
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
|
||||
|
|
@ -340,6 +354,10 @@ import otherbg from '@/assets/images/otherbg.png'
|
|||
|
||||
import mediaForm from "./mediaForm.vue";
|
||||
import mediaDetail from "./mediaDetail.vue";
|
||||
import mediaLogs from "./mediaLogs.vue";
|
||||
import historyData from "./historyData.vue"
|
||||
import downFiles from './downFiles.vue';
|
||||
import viewFileDialog from '@/components/ViewFile/index.vue'
|
||||
|
||||
const bgStore = useBackgroundStore()
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
|
@ -353,11 +371,19 @@ const town = ref([])
|
|||
const mediaTypeOne = ref([])
|
||||
const mediaTypeTwo = ref([])
|
||||
const mediaTypeThree = ref([])
|
||||
|
||||
const uploadOpen = ref(false)
|
||||
const docUploadList = ref([])
|
||||
const showForm = ref(false)
|
||||
const mediaFormRef = ref(null)
|
||||
const showDetail = ref(false)
|
||||
const mediaDetailRef = ref(null)
|
||||
const showLogs = ref(false)
|
||||
const mediaLogsRef = ref(null)
|
||||
const abolishOpen = ref(false)
|
||||
const historyDataRef = ref(null)
|
||||
const downFileRef = ref(null)
|
||||
const viewFileRef = ref(null)
|
||||
|
||||
// 归属选项
|
||||
const supplierList = ref([])
|
||||
// 多选数据
|
||||
|
|
@ -390,44 +416,26 @@ const mediaList = ref([
|
|||
{ id: 19, mediaName: '遵义市海风井铁路桥跨街大牌3', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value },
|
||||
{ id: 20, mediaName: '遵义市海风井铁路桥(华南大酒店旁)跨街大牌', currentImageSrc: defaultImageSrc.value, currentCataloguePhotoSrc: defaultViewFileSrc.value, currentMediaChainSrc: defaultViewFileSrc.value, currentQualificationFileSrc: defaultViewFileSrc.value, currentStampedPublicationSrc: defaultViewFileSrc.value }
|
||||
])
|
||||
/*** 导入参数 */
|
||||
const upload = reactive({
|
||||
// 是否显示弹出层（用户导入）
|
||||
open: false,
|
||||
// 弹出层标题（用户导入）
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的用户数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
// 上传的地址
|
||||
url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
|
||||
})
|
||||
// 导出PPT模板参数
|
||||
const exportPPT = reactive({
|
||||
// 是否显示弹出层（用户导入）
|
||||
open: false,
|
||||
// 弹出层标题（用户导入）
|
||||
title: "",
|
||||
})
|
||||
const loading = ref(true)
|
||||
const total = ref(0)
|
||||
const data = reactive({
|
||||
abolishForm: {},
|
||||
form: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
rules: {
|
||||
postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
|
||||
postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
|
||||
postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
|
||||
abolishRules: {
|
||||
content: [{ required: true, message: "请输入废除原因", trigger: "blur" }],
|
||||
}
|
||||
})
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data)
|
||||
const { queryParams, form, abolishForm, abolishRules } = toRefs(data)
|
||||
|
||||
// 获取一级媒体类型
|
||||
const getMediaTypeOne = () => {
|
||||
|
|
@ -514,29 +522,18 @@ const resetQuery = () => {
|
|||
proxy.resetForm("queryRef")
|
||||
handleQuery()
|
||||
}
|
||||
/** 废除按钮操作 */
|
||||
const handleDelete = (row) => {
|
||||
const postIds = row.postId
|
||||
const supplierName = row.supplierName
|
||||
proxy.$modal.confirm('是否确认删除名称为"' + supplierName + '"的供应商数据？').then(function () {
|
||||
return delPost(postIds)
|
||||
}).then(() => {
|
||||
getList()
|
||||
proxy.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => { })
|
||||
}
|
||||
// 新增
|
||||
const handleOpenAddForm = () => {
|
||||
showForm.value = true
|
||||
nextTick(() => {
|
||||
mediaFormRef.value.formTitle = '新建媒体信息'
|
||||
mediaFormRef.value.initForm('新建媒体信息', { supplierId: null })
|
||||
})
|
||||
}
|
||||
// 修改
|
||||
const handleUpdate = () => {
|
||||
const handleUpdate = (row) => {
|
||||
showForm.value = true
|
||||
nextTick(() => {
|
||||
mediaFormRef.value.formTitle = '编辑媒体信息'
|
||||
mediaFormRef.value.initForm('编辑媒体信息', row)
|
||||
})
|
||||
}
|
||||
// 详情
|
||||
|
|
@ -546,11 +543,68 @@ const handleOpenDetail = () => {
|
|||
// mediaDetailRef.value.formTitle = '编辑供应商'
|
||||
})
|
||||
}
|
||||
// 关闭表单
|
||||
const handleShowList = () => {
|
||||
console.log('触发')
|
||||
showForm.value = false
|
||||
}
|
||||
// 关闭详情
|
||||
const handleCloseDetail = () => {
|
||||
showDetail.value = false
|
||||
}
|
||||
// 打开日志
|
||||
const handleLogs = (row) => {
|
||||
showLogs.value = true
|
||||
nextTick(() => {
|
||||
// supplierLogsRef.value.initForm('编辑供应商', row)
|
||||
})
|
||||
}
|
||||
// 关闭日志
|
||||
const handleCloseLogs = () => {
|
||||
showLogs.value = false
|
||||
}
|
||||
// 打开废除
|
||||
const handleAbolish = (row) => {
|
||||
abolishOpen.value = true
|
||||
}
|
||||
// 提交废除
|
||||
const handleSubmitAbolish = () => {
|
||||
proxy.$refs["abolishRef"].validate(valid => {
|
||||
if (valid) {
|
||||
// addSysReaddBusProblemFeedbackgion(form.value).then(response => {
|
||||
// proxy.$modal.msgSuccess("反馈成功")
|
||||
// openFeedBack.value = false
|
||||
// form.value = {
|
||||
// feedbackUser: undefined,
|
||||
// content: undefined
|
||||
// }
|
||||
// proxy.resetForm("feedBackRef")
|
||||
// })
|
||||
}
|
||||
})
|
||||
}
|
||||
// 打开历史数据
|
||||
const handleHistoryChart = (row) => {
|
||||
historyDataRef.value.historyDataOpen = true
|
||||
nextTick(() => {
|
||||
historyDataRef.value.initHistoryCharLine()
|
||||
})
|
||||
}
|
||||
// 打开文件下载
|
||||
const handleDownFiles = (row) => {
|
||||
downFileRef.value.downFileOpen = true
|
||||
nextTick(() => {
|
||||
// historyDataRef.value.initHistoryCharLine()
|
||||
})
|
||||
}
|
||||
// 查看文件
|
||||
const handleViewPhoto = () => {
|
||||
viewFileRef.value.viewFileOpen = true
|
||||
nextTick(() => {
|
||||
// historyDataRef.value.initHistoryCharLine()
|
||||
})
|
||||
}
|
||||
|
||||
/** 导出Excel按钮操作 */
|
||||
const handleExportExcel = () => {
|
||||
|
||||
|
|
@ -567,24 +621,59 @@ const handleSubmitExportPPT = () => {
|
|||
|
||||
/** 导入按钮操作 */
|
||||
const handleImport = () => {
|
||||
upload.title = "导入"
|
||||
upload.open = true
|
||||
}
|
||||
/**文件上传中处理 */
|
||||
const handleFileUploadProgress = (event, file, fileList) => {
|
||||
upload.isUploading = true
|
||||
uploadOpen.value = true
|
||||
}
|
||||
|
||||
/** 文件上传成功处理 */
|
||||
const handleFileSuccess = (response, file, fileList) => {
|
||||
upload.open = false
|
||||
upload.isUploading = false
|
||||
proxy.$refs["uploadRef"].handleRemove(file)
|
||||
proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
|
||||
// 自定义上传文件资料
|
||||
const requestDocUpload = (options) => {
|
||||
proxy.$modal.loading('正在上传文件，请耐心等待...')
|
||||
const { file } = options
|
||||
var formData = new FormData();
|
||||
formData.append('file', file);
|
||||
importSupplier(formData).then(res => {
|
||||
if (res.code == 200) {
|
||||
proxy.$modal.msgSuccess("导入成功")
|
||||
proxy.$modal.closeLoading()
|
||||
uploadOpen.value = false
|
||||
getSupplierPageList()
|
||||
} else {
|
||||
proxy.$modal.closeLoading()
|
||||
proxy.$modal.msgError(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
/** 提交上传文件 */
|
||||
const submitFileForm = () => {
|
||||
proxy.$refs["uploadRef"].submit()
|
||||
//自定义上传文件资料校验
|
||||
const beforeDocUpload = (file) => {
|
||||
const type = [
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
'application/vnd.ms-excel'
|
||||
];
|
||||
const isXlsx = type.includes(file.type);
|
||||
// 检验文件格式
|
||||
if (!isXlsx) {
|
||||
proxy.$modal.msgError("文件格式错误，请上传.xls；.xlsx后缀的文件。");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 移除已上传文件列表
|
||||
const removeDocUpload = (file, fileList) => {
|
||||
docUploadList.value = docUploadList.value.filter(
|
||||
item => item.name != file.name
|
||||
);
|
||||
}
|
||||
// 下载导入模板操作
|
||||
const importTemplate = () => {
|
||||
// exportTemplate().then(res => {
|
||||
// // 通过a标签打开新页面下载文件
|
||||
// const a = document.createElement('a')
|
||||
// a.href = URL.createObjectURL(res)
|
||||
// // a标签里有download属性可以自定义文件名
|
||||
// const downLoadName = '供应商导入模板_' + Date.now() + '.xlsx'
|
||||
// a.setAttribute('download', downLoadName)
|
||||
// document.body.appendChild(a)
|
||||
// a.click()
|
||||
// document.body.removeChild(a)
|
||||
// })
|
||||
}
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
|
|
@ -624,13 +713,12 @@ onMounted(() => {
|
|||
|
||||
.my_dialog_itemHeader {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
border-left: 3px solid #ffc63d;
|
||||
padding-left: 10px;
|
||||
height: 36px;
|
||||
background: #1a75e630;
|
||||
padding: 6px 20px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -156,53 +156,11 @@
|
|||
</el-collapse-item>
|
||||
<el-collapse-item title="媒体价格" name="2">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="刊例价（元）" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="常规折扣" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="常规净价（元）" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="成本折扣" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="成本净价（元）" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="销售方式" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="CPM" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="SOV" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="价格情况说明" prop="business_department">
|
||||
待定
|
||||
|
|
@ -218,21 +176,21 @@
|
|||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商联系人" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商联系方式" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="首次是否包含安装制作费用" prop="business_department">
|
||||
<el-form-item label="首次是否包含安装制作费用" class="my_detailform_label" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -241,6 +199,9 @@
|
|||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="税点（%）" prop="business_department">
|
||||
待定
|
||||
|
|
@ -248,7 +209,41 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="评估信息" name="3">
|
||||
<el-collapse-item title="媒体报价信息" name="3">
|
||||
<el-table :data="quotationList">
|
||||
<el-table-column label="序号" align="center" width="80">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="年度" align="left" prop="year" width="100" />
|
||||
<el-table-column label="城市/市场" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="媒体大类" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="媒体形式/名称" align="left" prop="mediaName" width="200">
|
||||
<template #default="scope">
|
||||
<span class="mediaNameLabel">{{ scope.row.mediaName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="成本" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="频次" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="最小购买量(块)" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="购买周期(天)" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="对外统一刊例(元/块)" align="left" prop="postCode" width="180" />
|
||||
<el-table-column label="折扣" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="媒体总净价(元/购买周期)" align="center" prop="cataloguePhoto" width="230" />
|
||||
<el-table-column label="总制作费(元/次)" align="center" prop="mediaChain" width="160" />
|
||||
<el-table-column label="总净价(元)" align="center" prop="qualificationFile" width="130" />
|
||||
<el-table-column label="单日覆盖人流量" align="center" prop="stampedPublication" width="150" />
|
||||
<el-table-column label="总曝光" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="SOV" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="CPM(元)" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="备注" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="创建人" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="创建时间" align="center" prop="postCode" width="150" />
|
||||
</el-table>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="评估信息" name="4">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="品牌" prop="business_department">
|
||||
|
|
@ -365,7 +360,7 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="附件" name="4">
|
||||
<el-collapse-item title="附件" name="5">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="媒体文件" prop="business_department">
|
||||
|
|
@ -442,6 +437,10 @@ const detailForm = ref({
|
|||
{ medioName: '银川金凤区新华联广场门口上方LED', medioCode: 'MT2023101100009', medioType: 'LED', medioClass: '电子广告', medioStatus: 1 }
|
||||
]
|
||||
})
|
||||
|
||||
const quotationList = ref([
|
||||
{ year: 2025 }
|
||||
])
|
||||
const activeNames = ref(['1', '2', '3', '4'])
|
||||
const handleClose = () => {
|
||||
emit('handleShowList')
|
||||
|
|
|
|||
|
|
@ -283,10 +283,10 @@
|
|||
<el-form-item label="地理位置">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="12">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入经度" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入纬度" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -300,45 +300,6 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="刊例价" prop="business">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入">
|
||||
<template #suffix>
|
||||
<span>元</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="常规折扣">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="常规净价">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入">
|
||||
<template #suffix>
|
||||
<span>元</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="成本折扣">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="成本净价" prop="business">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入">
|
||||
<template #suffix>
|
||||
<span>元</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="销售方式">
|
||||
<el-select v-model="ruleForm.sales_method" placeholder="请选择" style="min-width: 30px;" clearable>
|
||||
|
|
@ -347,18 +308,6 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="CPM">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="SOV">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="价格情况说明" prop="business">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
|
|
@ -377,13 +326,14 @@
|
|||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商联系人">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商联系方式" class="my_form_label" prop="business">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
|
|
@ -405,18 +355,18 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="税点">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" >
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入">
|
||||
<template #suffix>
|
||||
<span>%</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="换刊费用">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入">
|
||||
<template #suffix>
|
||||
|
|
@ -425,8 +375,6 @@
|
|||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="品牌" prop="business">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
|
|
@ -437,6 +385,8 @@
|
|||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="关键词">
|
||||
<el-select v-model="ruleForm.key_words" placeholder="请选择" style="min-width: 30px;" clearable>
|
||||
|
|
@ -450,8 +400,6 @@
|
|||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="适用人群" prop="business">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
|
|
@ -462,6 +410,8 @@
|
|||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="MR">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
|
|
@ -472,8 +422,6 @@
|
|||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="可视距离" prop="business">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
|
|
@ -488,6 +436,8 @@
|
|||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体朝向">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
|
|
@ -498,8 +448,6 @@
|
|||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="遮挡情况" prop="business">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
|
|
@ -510,12 +458,14 @@
|
|||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="地图显示比例">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="小区">
|
||||
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
|
|
@ -542,115 +492,117 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="文件上传" prop="business">
|
||||
<template v-if="docUploadList.length > 0">
|
||||
<div v-for="itemFile in docUploadList" class="image-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.url" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar viewFile" />
|
||||
<img v-else :src="iconOther" class="avatar viewFile" />
|
||||
<div class="actions">
|
||||
<span class="delete" @click.stop="handleRemoveImage(itemFile)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-upload action="#" :http-request="requestUpload" list-type="picture-card"
|
||||
:show-file-list="false">
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<el-form-item label="报价信息">
|
||||
<el-button type="primary" class="primaryBtn" style="margin-bottom: 10px;">添加报价信息</el-button>
|
||||
<el-table v-loading="loading" :data="quotationList" height="382px">
|
||||
<el-table-column label="序号" align="center" width="80">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="年度" align="left" prop="year" width="100" />
|
||||
<el-table-column label="城市/市场" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="媒体大类" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="媒体形式/名称" align="left" prop="mediaName" width="200">
|
||||
<template #default="scope">
|
||||
<span class="mediaNameLabel">{{ scope.row.mediaName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="供应商" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="成本" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="频次" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="最小购买量(块)" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="购买周期(天)" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="对外统一刊例(元/块)" align="left" prop="postCode" width="180" />
|
||||
<el-table-column label="折扣" align="left" prop="postCode" width="150" />
|
||||
<el-table-column label="媒体总净价(元/购买周期)" align="center" prop="cataloguePhoto" width="230" />
|
||||
<el-table-column label="总制作费(元/次)" align="center" prop="mediaChain" width="160" />
|
||||
<el-table-column label="总净价(元)" align="center" prop="qualificationFile" width="130" />
|
||||
<el-table-column label="单日覆盖人流量" align="center" prop="stampedPublication" width="150" />
|
||||
<el-table-column label="总曝光" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="SOV" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="CPM(元)" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="备注" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="创建人" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="创建时间" align="center" prop="postCode" width="150" />
|
||||
<el-table-column label="操作" width="58" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-popover popper-class="my_popover" placement="left-start">
|
||||
<div class="popBtns" >修改</div>
|
||||
<div class="popBtns" >删除</div>
|
||||
<template #reference>
|
||||
<img style="cursor: pointer;" :src="scope.row.currentImageSrc"
|
||||
@mouseenter="scope.row.currentImageSrc = hoverImageSrc"
|
||||
@mouseleave="scope.row.currentImageSrc = defaultImageSrc" />
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- <pagination :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getList" /> -->
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="图片上传" prop="business">
|
||||
<template v-if="docUploadList.length > 0">
|
||||
<div v-for="itemFile in docUploadList" class="image-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.url" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar viewFile" />
|
||||
<img v-else :src="iconOther" class="avatar viewFile" />
|
||||
<div class="actions">
|
||||
<span class="delete" @click.stop="handleRemoveImage(itemFile)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-upload action="#" :http-request="requestUpload" list-type="picture-card"
|
||||
:show-file-list="false">
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<el-form-item label="文件上传">
|
||||
<multiFileUpload ref="advantageousMediaFileRef"
|
||||
@set-form-file="handleSetAdvantageousMediaFile" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="视频上传" prop="business">
|
||||
<template v-if="docUploadList.length > 0">
|
||||
<div v-for="itemFile in docUploadList" class="image-wrapper">
|
||||
<img v-if="isImageFile(itemFile.suffix)" :src="itemFile.url" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'doc' || itemFile.suffix == 'docx'" :src="iconDoc"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'xls' || itemFile.suffix == 'xlsx'" :src="iconXls"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'ppt' || itemFile.suffix == 'pptx'" :src="iconPpt"
|
||||
class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'zip'" :src="iconZip" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'pdf'" :src="iconPdf" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp3'" :src="iconVideo" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'mp4'" :src="iconMove" class="avatar viewFile" />
|
||||
<img v-else-if="itemFile.suffix == 'txt'" :src="iconTxt" class="avatar viewFile" />
|
||||
<img v-else :src="iconOther" class="avatar viewFile" />
|
||||
<div class="actions">
|
||||
<span class="delete" @click.stop="handleRemoveImage(itemFile)">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-upload action="#" :http-request="requestUpload" list-type="picture-card"
|
||||
:show-file-list="false">
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<el-form-item label="图片上传">
|
||||
<multiFileUpload ref="advantageousMediaPicRef" @set-form-file="handleSetAdvantageousMediaPic" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="视频上传">
|
||||
<multiFileUpload ref="advantageousMediaVideoRef"
|
||||
@set-form-file="handleSetAdvantageousMediaVideo" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="刊例照片">
|
||||
<multiFileUpload ref="journalCataloguePhotoRef"
|
||||
@set-form-file="handleSetJournalCataloguePhoto" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="媒体链条">
|
||||
<multiFileUpload ref="mediaChainRef" @set-form-file="handleSetMediaChain" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="资质文件">
|
||||
<multiFileUpload ref="qualificationFileRef" @set-form-file="handleSetQualificationFile" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="盖章刊例">
|
||||
<multiFileUpload ref="stampedPublicationRef" @set-form-file="handleSetStampedPublication" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button type="primary" class="submitBtn" @click="handleSubmit">提交信息</el-button>
|
||||
</template>
|
||||
|
|
@ -661,23 +613,21 @@ import { onMounted, defineEmits, ref } from 'vue'
|
|||
import { Close } from '@element-plus/icons-vue'
|
||||
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
|
||||
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
|
||||
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 { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
const bgStore = useBackgroundStore()
|
||||
import multiFileUpload from '../../components/FileUpload/multiFileUpload.vue'
|
||||
import optionIcon from '@/assets/images/optionIcon.png'
|
||||
import optionIconHover from '@/assets/images/optionIconHover.png'
|
||||
|
||||
const { proxy } = getCurrentInstance()
|
||||
const emit = defineEmits(['handleShowList']);
|
||||
const route = useRoute()
|
||||
const formTitle = ref('新建')
|
||||
|
||||
const defaultImageSrc = ref(optionIcon);
|
||||
const hoverImageSrc = ref(optionIconHover);
|
||||
const formTitle = ref('新建')
|
||||
|
||||
const loading = ref(false)
|
||||
const quotationList = ref([
|
||||
{ year: 2025, currentImageSrc: defaultImageSrc.value }
|
||||
])
|
||||
|
||||
// 媒体类型数据
|
||||
const mediaTypeOne = ref([])
|
||||
|
|
@ -691,14 +641,18 @@ const town = ref([])
|
|||
|
||||
const supplierList = ref([])
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
ruleForm: {},
|
||||
rules: {
|
||||
business: [{ required: true, message: "业务部门不能为空", trigger: "change" }]
|
||||
},
|
||||
})
|
||||
const { ruleForm, rules } = toRefs(data)
|
||||
const { ruleForm, rules, queryParams } = toRefs(data)
|
||||
const { media_form, display_form, whether_lighting, invoice_type, key_words, media_schedule, media_format, sales_method, business, media_status, approval_document_status } = proxy.useDict("media_form", "display_form", "whether_lighting", "invoice_type", "key_words", "media_schedule", "media_format", "sales_method", "business", "media_status", "approval_document_status")
|
||||
|
||||
|
||||
|
||||
// 获取一级媒体类型
|
||||
const getMediaTypeOne = () => {
|
||||
|
|
@ -753,42 +707,11 @@ const getTownList = (value) => {
|
|||
})
|
||||
}
|
||||
|
||||
// 营业执照集合
|
||||
const docUploadList = ref([])
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API
|
||||
// 判断是否为图片文件
|
||||
const isImageFile = (suffix) => {
|
||||
return ['jpeg', 'jpg', 'png'].includes(suffix?.toLowerCase())
|
||||
// 获取媒体历史报价
|
||||
const getList = () => {
|
||||
|
||||
}
|
||||
|
||||
// 自定义上传
|
||||
const requestUpload = (options) => {
|
||||
const { file } = options
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
try {
|
||||
// uploadFile(formData).then(res => {
|
||||
// if (res.code === 200) {
|
||||
// docUploadList.value.push({
|
||||
// name: res.originalFilename,
|
||||
// url: baseUrl + res.fileName,
|
||||
// suffix: res.suffix
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
|
||||
} catch (error) {
|
||||
console.error('上传失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除附件
|
||||
const handleRemoveImage = (fileInfo) => {
|
||||
docUploadList.value = docUploadList.value.filter(
|
||||
item => item.name != fileInfo.name
|
||||
);
|
||||
}
|
||||
const handleSubmit = () => {
|
||||
proxy.$refs["ruleFormRef"].validate(valid => {
|
||||
if (valid) {
|
||||
|
|
@ -815,22 +738,22 @@ const handleClose = () => {
|
|||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
const initForm = (_formTitle, _ruleForm) => {
|
||||
formTitle.value = _formTitle
|
||||
ruleForm.value = _ruleForm
|
||||
getMediaTypeOne()
|
||||
getProvinceList()
|
||||
const id = route.params && route.params.Id
|
||||
if (id) {
|
||||
ruleForm.value.id = id
|
||||
formTitle.value = '编辑供应商'
|
||||
} else {
|
||||
ruleForm.value.id = null
|
||||
formTitle.value = '新建供应商'
|
||||
}
|
||||
});
|
||||
// if (ruleForm.value.supplierId) getSupplierInfo()
|
||||
nextTick(() => {
|
||||
// businessLicenseRef.value._fileType = 1
|
||||
// otherFileRef.value._fileType = 9
|
||||
// mediaRightsRef.value._fileType = 2
|
||||
|
||||
});
|
||||
}
|
||||
// 暴露方法\属性给父组件
|
||||
defineExpose({
|
||||
formTitle
|
||||
initForm
|
||||
});
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
|
|
|
|||
137
src/views/mediaLibrary/mediaLogs.vue
Normal file
137
src/views/mediaLibrary/mediaLogs.vue
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<el-card class="myDetailCard">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>媒体日志</span>
|
||||
<el-icon style="float: right;cursor: pointer;" @click="handleClose">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="10" class="my_row">
|
||||
<el-col :span="12">
|
||||
<el-form :inline="true" class="searchInputForm">
|
||||
<el-form-item label="">
|
||||
<el-input v-model="queryParams.keyword" placeholder="请输入操作人" :prefix-icon="Search"
|
||||
style="width: 280px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
|
||||
<el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right;">
|
||||
<el-button-group>
|
||||
<el-button v-for="(item, index) in ToolOptions" :key="index"
|
||||
:type="activeIndex === index ? 'primary' : 'default'" :icon="item"
|
||||
@click="activeIndex = index" />
|
||||
</el-button-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-if="activeIndex == 0" v-loading="loading" :data="activities" height="calc(100vh - 267px)">
|
||||
<el-table-column label="序号" align="center" width="80">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</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="center" prop="user" width="160" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作时间" align="center" prop="timestamp" width="150"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="变更字段" align="center" prop="content" min-width="210"
|
||||
:show-overflow-tooltip="true" />
|
||||
</el-table>
|
||||
<div v-if="activeIndex == 1">
|
||||
<el-timeline style="padding-left: 0;">
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index"
|
||||
:timestamp="activity.user + '于' + activity.timestamp + activity.type">
|
||||
<div> 变更字段：{{ activity.content }}</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, defineEmits, ref } from 'vue'
|
||||
import { Close, Grid, Calendar } from '@element-plus/icons-vue'
|
||||
import { getBusSupplier } from "@/api/supplier"
|
||||
|
||||
const emit = defineEmits(['handleShowList']);
|
||||
const ToolOptions = ref([Grid, Calendar])
|
||||
const activeIndex = ref(0)
|
||||
const supplierLogList = ref([])
|
||||
const loading = ref(false)
|
||||
const queryParams = ref({
|
||||
keyword: undefined
|
||||
})
|
||||
|
||||
const activities = [{
|
||||
content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
|
||||
content2: '其他: ; 年营收金额: 待定; 供应商所在城市: 山西/长治市; 税点: 待定; 合作采购金额: 0; 联系人职务: 待定; 发票类型: 暂定; 不良记录信息: ; 邮箱: ; ',
|
||||
timestamp: '2018-04-15',
|
||||
user: '优客传媒管理员',
|
||||
type: '修改'
|
||||
},
|
||||
{
|
||||
content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
|
||||
content2: '其他: ; 年营收金额: 待定; 供应商所在城市: 山西/长治市; 税点: 待定; 合作采购金额: 0; 联系人职务: 待定; 发票类型: 暂定; 不良记录信息: ; 邮箱: ; ',
|
||||
timestamp: '2018-04-13',
|
||||
user: '优客传媒管理员',
|
||||
type: '修改'
|
||||
},
|
||||
{
|
||||
content: '其他: ; 年营收金额: ; 供应商所在城市: 山西/长治市/东湖区; 税点: ; 合作采购金额: 0.0; 联系人职务: ; 发票类型: ; 不良记录信息: ; 邮箱: ; ',
|
||||
content2: '其他: ; 年营收金额: 待定; 供应商所在城市: 山西/长治市; 税点: 待定; 合作采购金额: 0; 联系人职务: 待定; 发票类型: 暂定; 不良记录信息: ; 邮箱: ; ',
|
||||
timestamp: '2018-04-11',
|
||||
user: '优客传媒管理员',
|
||||
type: '新增'
|
||||
},
|
||||
]
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
getSupplierPageList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryParams.value = {
|
||||
keyword: undefined
|
||||
}
|
||||
handleQuery()
|
||||
}
|
||||
// 关闭
|
||||
const handleClose = () => {
|
||||
emit('handleShowList')
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.el-button,
|
||||
.el-button.is-round {
|
||||
padding: 10px 11px;
|
||||
}
|
||||
|
||||
.el-button-group>.el-button {
|
||||
float: left;
|
||||
position: relative;
|
||||
height: 38px;
|
||||
border: 1px solid #DFDFDF;
|
||||
background: #ffffff;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.el-button-group>.el-button--primary {
|
||||
background: #1f1f1f;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #1f1f1f;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
</el-card>
|
||||
|
||||
<!-- 操作日志详细 -->
|
||||
<el-dialog title="操作日志详细" v-model="open" width="950px" class="my_dialog" align-center :destroy-on-close="true"
|
||||
<el-dialog title="操作日志详细" v-model="open" width="1300px" class="my_dialog" align-center :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
<el-form :model="form" label-width="100px" class="myInsertForm">
|
||||
<el-row>
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@
|
|||
<template #default="scope">
|
||||
<span class="supplierNameLabel" @click="handleOpenDetail(scope.row.supplierId)">{{
|
||||
scope.row.supplierName
|
||||
}}</span>
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="城市" align="left" prop="supplierCity" width="180"
|
||||
|
|
@ -203,36 +203,35 @@
|
|||
<supplier-detail ref="supplierDetailRef" v-if="showDetail" @handleShowList="handleCloseDetail" />
|
||||
<supplier-logs ref="supplierLogsRef" v-if="showLogs" @handleShowList="handleCloseLogs" />
|
||||
<!-- 导入对话框 -->
|
||||
<el-dialog :title="upload.title" v-model="upload.open" width="650px" class="my_dialog" align-center
|
||||
:destroy-on-close="true" :close-on-click-modal="false">
|
||||
<el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
|
||||
:action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||
<el-dialog title="导入" v-model="uploadOpen" width="650px" class="my_dialog" align-center :destroy-on-close="true"
|
||||
:close-on-click-modal="false">
|
||||
<el-upload ref="uploadRef" class="upload-demo" drag action="#" :http-request="requestDocUpload"
|
||||
:file-list="docUploadList" :before-upload="beforeDocUpload" :on-remove="removeDocUpload">
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__text">
|
||||
将文件拖曳至此区域，或 <em>点击上传</em>
|
||||
</div>
|
||||
<!-- <div class="el-upload__text">
|
||||
支持扩展名：.xlsx, .xls
|
||||
</div> -->
|
||||
<template #tip>
|
||||
<div class="el-upload__tip text-center">
|
||||
<!-- <div class="el-upload__tip">
|
||||
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
|
||||
</div> -->
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
|
||||
@click="importTemplate">下载模板</el-link> -->
|
||||
<el-link type="primary" underline="never" style="font-size: 12px; vertical-align: baseline"
|
||||
@click="importTemplate">下载模板</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="my-cancel-btn" @click="upload.open = false">取 消</el-button>
|
||||
<el-button class="my-confirm-btn" type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button class="my-cancel-btn" @click="uploadOpen = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="Post">
|
||||
import { getToken } from "@/utils/auth"
|
||||
<script setup name="Post">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
|
|
@ -241,7 +240,7 @@ import optionIconHover from '@/assets/images/optionIconHover.png'
|
|||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
|
||||
import { busSupplierPage, deleteBusSupplier } from "@/api/supplier"
|
||||
import { busSupplierPage, deleteBusSupplier, exportSupplier, exportTemplate, importSupplier } from "@/api/supplier"
|
||||
import { listDept } from "@/api/system/dept"
|
||||
|
||||
import supplierForm from "./supplierForm.vue";
|
||||
|
|
@ -267,22 +266,8 @@ const county = ref([])
|
|||
|
||||
const defaultImageSrc = ref(optionIcon);
|
||||
const hoverImageSrc = ref(optionIconHover);
|
||||
/*** 导入参数 */
|
||||
const upload = reactive({
|
||||
// 是否显示弹出层（用户导入）
|
||||
open: false,
|
||||
// 弹出层标题（用户导入）
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的用户数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
// 上传的地址
|
||||
url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
|
||||
})
|
||||
|
||||
const uploadOpen = ref(false)
|
||||
const docUploadList = ref([])
|
||||
const supplierList = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref(0)
|
||||
|
|
@ -394,28 +379,73 @@ const handleDelete = (row) => {
|
|||
}
|
||||
/** 导入按钮操作 */
|
||||
const handleImport = () => {
|
||||
upload.title = "导入"
|
||||
upload.open = true
|
||||
}
|
||||
/**文件上传中处理 */
|
||||
const handleFileUploadProgress = (event, file, fileList) => {
|
||||
upload.isUploading = true
|
||||
uploadOpen.value = true
|
||||
}
|
||||
|
||||
/** 文件上传成功处理 */
|
||||
const handleFileSuccess = (response, file, fileList) => {
|
||||
upload.open = false
|
||||
upload.isUploading = false
|
||||
proxy.$refs["uploadRef"].handleRemove(file)
|
||||
proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
|
||||
// 自定义上传文件资料
|
||||
const requestDocUpload = (options) => {
|
||||
proxy.$modal.loading('正在上传文件，请耐心等待...')
|
||||
const { file } = options
|
||||
var formData = new FormData();
|
||||
formData.append('file', file);
|
||||
importSupplier(formData).then(res => {
|
||||
if (res.code == 200) {
|
||||
proxy.$modal.msgSuccess("导入成功")
|
||||
proxy.$modal.closeLoading()
|
||||
uploadOpen.value = false
|
||||
getSupplierPageList()
|
||||
} else {
|
||||
proxy.$modal.closeLoading()
|
||||
proxy.$modal.msgError(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
/** 提交上传文件 */
|
||||
const submitFileForm = () => {
|
||||
proxy.$refs["uploadRef"].submit()
|
||||
//自定义上传文件资料校验
|
||||
const beforeDocUpload = (file) => {
|
||||
const type = [
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
'application/vnd.ms-excel'
|
||||
];
|
||||
const isXlsx = type.includes(file.type);
|
||||
// 检验文件格式
|
||||
if (!isXlsx) {
|
||||
proxy.$modal.msgError("文件格式错误，请上传.xls；.xlsx后缀的文件。");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 移除已上传文件列表
|
||||
const removeDocUpload = (file, fileList) => {
|
||||
docUploadList.value = docUploadList.value.filter(
|
||||
item => item.name != file.name
|
||||
);
|
||||
}
|
||||
// 下载导入模板操作
|
||||
const importTemplate = () => {
|
||||
exportTemplate().then(res => {
|
||||
// 通过a标签打开新页面下载文件
|
||||
const a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(res)
|
||||
// a标签里有download属性可以自定义文件名
|
||||
const downLoadName = '供应商导入模板_' + Date.now() + '.xlsx'
|
||||
a.setAttribute('download', downLoadName)
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
})
|
||||
}
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
|
||||
exportSupplier(queryParams.value).then(res => {
|
||||
// 通过a标签打开新页面下载文件
|
||||
const a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(res)
|
||||
// a标签里有download属性可以自定义文件名
|
||||
const downLoadName = '供应商_' + Date.now() + '.xlsx'
|
||||
a.setAttribute('download', downLoadName)
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
})
|
||||
}
|
||||
// 新增
|
||||
const handleOpenAddForm = () => {
|
||||
|
|
|
|||
|
|
@ -41,17 +41,14 @@
|
|||
<el-table-column label="操作人" align="center" prop="user" width="160" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作时间" align="center" prop="timestamp" width="150"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="变更前" align="center" prop="content" min-width="210"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="变更后" align="center" prop="content2" min-width="210"
|
||||
:show-overflow-tooltip="true" />
|
||||
<el-table-column label="变更字段" align="center" prop="content" min-width="210"
|
||||
:show-overflow-tooltip="true" />
|
||||
</el-table>
|
||||
<div v-if="activeIndex == 1">
|
||||
<el-timeline style="padding-left: 0;">
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index"
|
||||
:timestamp="activity.user + '于' + activity.timestamp + activity.type">
|
||||
<div> 变更前：{{ activity.content }}</div>
|
||||
<div> 变更后：{{ activity.content2 }}</div>
|
||||
<div> 变更字段：{{ activity.content }}</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user