YouKeChuanMei_VUE/src/views/mediaLibrary/mediaDetail.vue
2025-09-10 23:07:21 +08:00

669 lines
33 KiB
Vue

<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-form ref="detailFormRef" :model="detailForm" label-width="200px" class="myDetailForm">
<div class="supplierTitleContainer">
<div class="supplierNameIcon" />
<div class="supplierNameTitle">{{ detailForm.mediaName }}</div>
</div>
<el-collapse class="my-collapse" v-model="activeNames" @change="handleChange">
<el-collapse-item title="业务部门" name="1">
<el-row :gutter="30" class="my_form_row">
<el-col :span="6">
<el-form-item label="业务部门" prop="business">
{{ businessTypeName }}
</el-form-item>
</el-col>
</el-row>
</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">
<span v-if="detailForm.state == 1">生效中</span>
<span v-if="detailForm.state == 2">已作废</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="媒体编号" prop="business_department">
{{ detailForm.mediaCode }}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="媒体形式/名称" prop="business_department">
{{ detailForm.mediaName }}
</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">
{{ detailForm.mediaTypeStr }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="媒体大类" prop="business_department">
{{ detailForm.mediaCategoryStr }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="展示形式" prop="business_department">
{{ detailForm.displayFormStr }}
</el-form-item>
</el-col>
<el-col :span="6" v-if="businessTypeName == '优势媒体部'">
<el-form-item label="是否有照明" prop="business_department">
{{ detailForm.hasLighting }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="6">
<el-form-item label="播放时间" prop="business_department">
{{ detailForm.playbackTime }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="媒体尺寸" prop="business_department">
{{ detailForm.mediaSize }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="MR" prop="business_department">
{{ detailForm.mr }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="日均车流量" prop="business_department">
{{ detailForm.dailyAvgVehicleFlow }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="24">
<el-form-item label="媒体朝向" prop="business_department">
{{ detailForm.mediaOrientation }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="18">
<el-form-item label="城市" prop="business_department">
<span v-if="detailForm.provinceName">{{ detailForm.provinceName }}</span>
<span v-if="detailForm.cityName">-{{ detailForm.cityName }}</span>
<span v-if="detailForm.areaName">-{{ detailForm.areaName }}</span>
<span v-if="detailForm.townName">-{{ detailForm.townName }}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="商圈" prop="business_department">
{{ detailForm.businessDistrictName }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="地址" prop="business_department">
{{ detailForm.address }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="地理位置">
{{ detailForm.mapY }},{{ detailForm.mapX }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="6">
<el-form-item label="最小购买周期">
{{ detailForm.minPurchaseCycle }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="首次制作安装费">
{{ detailForm.firstInstallFee }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="换刊制作安装费">
{{ detailForm.changeInstallFee }}
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="媒体报价信息" name="3">
<div v-if="businessTypeName == '优势媒体部'">
<competitiveOffer ref="competitiveOfferRef" />
</div>
<div v-if="businessTypeName == '网络媒体部'">
<el-tabs v-model="activePriceType" @tab-click="handlePriceTypeClick">
<el-tab-pane label="门禁" name="门禁">
<accessControlPrice ref="accessControlPriceRef" />
</el-tab-pane>
<el-tab-pane label="候车厅" name="候车厅">
<waitingHallPrice ref="waitingHallPriceRef" />
</el-tab-pane>
<el-tab-pane label="道闸" name="道闸">
<barrierGatePrice ref="barrierGatePriceRef" />
</el-tab-pane>
<el-tab-pane label="地铁" name="地铁">
<subwayPrice ref="subwayPriceRef" />
</el-tab-pane>
<el-tab-pane label="高铁" name="高铁">
<highSpeedRailway ref="highSpeedRailwayRef" />
</el-tab-pane>
<el-tab-pane label="写字楼" name="写字楼">
<officeBuilding ref="officeBuildingRef" />
</el-tab-pane>
<el-tab-pane label="车库灯箱" name="车库灯箱">
<garageLightBox ref="garageLightBoxRef" />
</el-tab-pane>
</el-tabs>
</div>
</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="媒体归属名称">
{{ detailForm.belongSupplierName }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系人">
{{ detailForm.contactUserName }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系电话" prop="business">
{{ detailForm.contactUserPhone }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="媒体是否有改造" prop="business">
{{ detailForm.hasReform }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="6">
<el-form-item label="发票类型">
{{ detailForm.invoiceType }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="税点">
{{ detailForm.taxRate }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="付款要求">
{{ detailForm.paymentRequirements }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="媒体公司名称" prop="business">
{{ detailForm.mediaCompanyName }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="6">
<el-form-item label="物业公司名称" prop="business">
{{ detailForm.propertyCompanyName }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="审批部门" prop="business">
{{ detailForm.approvalDept }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="批文情况">
{{ detailForm.approvalSituation }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="批文发布时间">
{{ detailForm.approvalReleaseTime }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="6">
<el-form-item label="媒体独家授权" prop="business">
{{ detailForm.soleAgentAuth }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="独家授权时间">
{{ detailForm.soleAgentAuthTime }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="媒体行业授权" prop="business">
{{ detailForm.industryAuth }}
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="媒体行业授权时间">
{{ detailForm.industryAuthTime }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="24">
<el-form-item label="行业限制" prop="business">
{{ detailForm.industryLimit }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="媒体曾经经营公司" prop="business">
{{ detailForm.everManagerCompany }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="媒体时间线" prop="business">
{{ detailForm.mediaTimeline }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="曾经媒体情况" prop="business">
{{ detailForm.everMediaSituation }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="媒体历史事件" prop="business">
{{ detailForm.mediaHistory }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '网络媒体部'">
<el-col :span="24">
<el-form-item label="同类媒体公司" prop="business">
{{ detailForm.equalsMediaCompany }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '网络媒体部'" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="其他" prop="business">
{{ detailForm.other }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="24">
<el-form-item label="批文文件" class="filesItemContent">
<supplierDetailFile ref="approvalDocumentRef" />
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="24">
<el-form-item label="独家授权文件" class="filesItemContent">
<supplierDetailFile ref="exclusiveLicenseFileRef" />
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="24">
<el-form-item label="媒体行业授权文件" class="filesItemContent">
<supplierDetailFile ref="mediaLicenseFileRef" />
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '网络媒体部'">
<el-col :span="24">
<el-form-item label="媒体归属附件" class="filesItemContent">
<supplierDetailFile ref="mediaOwnershipRef" />
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '网络媒体部'" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="曾经媒体照片" prop="business" class="filesItemContent">
<supplierDetailFile ref="onceMediaPhotoRef" />
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="其他信息" name="5">
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="优势" prop="business">
{{ detailForm.advantages }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="备注" prop="business">
{{ detailForm.remark }}
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="图片上传" class="filesItemContent" prop="business_department">
<supplierDetailFile ref="mediaPicRef" />
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" />
<el-row :gutter="30" class="my_form_row">
<el-col :span="24">
<el-form-item label="视频上传" class="filesItemContent" prop="business_department">
<supplierDetailFile ref="mediaVideoRef" />
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="24">
<el-form-item label="盖章刊例" class="filesItemContent" prop="business">
<supplierDetailFile ref="stampedPublicationRef" />
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="24">
<el-form-item label="资质文件" class="filesItemContent" prop="business">
<supplierDetailFile ref="qualificationFileRef" />
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="24">
<el-form-item label="媒体链条" class="filesItemContent" prop="business">
<supplierDetailFile ref="mediaChainRef" />
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '优势媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '优势媒体部'">
<el-col :span="24">
<el-form-item label="刊例照片" class="filesItemContent" prop="business">
<supplierDetailFile ref="journalCataloguePhotoRef" />
</el-form-item>
</el-col>
</el-row>
<div class="splineBar" v-if="businessTypeName == '网络媒体部'" />
<el-row :gutter="30" class="my_form_row" v-if="businessTypeName == '网络媒体部'">
<el-col :span="24">
<el-form-item label="MR和制作要求" class="filesItemContent" prop="business">
<supplierDetailFile ref="mRProductionRequirementsRef" />
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</el-form>
</el-card>
</template>
<script setup>
import { onMounted, nextTick, defineEmits, ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { mediaDetail } from "@/api/mediaLibrary"
import competitiveOffer from './components/competitiveOffer.vue'
import accessControlPrice from './components/accessControlPrice.vue'
import waitingHallPrice from './components/waitingHallPrice.vue'
import barrierGatePrice from './components/barrierGatePrice.vue'
import subwayPrice from './components/subwayPrice.vue'
import highSpeedRailway from './components/highSpeedRailway.vue'
import officeBuilding from './components/officeBuilding.vue'
import garageLightBox from './components/garageLightBox.vue'
import supplierDetailFile from '../../components/FileUpload/supplierDetailFile.vue';
import { useBackgroundStore } from '@/store/modules/background'
import otherbg from '@/assets/images/otherbg.png'
const bgStore = useBackgroundStore()
const { proxy } = getCurrentInstance()
const emit = defineEmits(['handleShowList']);
// 详情参数
const detailForm = ref({})
const activePriceType = ref('门禁')
const activeNames = ref(['1', '2', '3', '4'])
const businessTypeName = ref('优势媒体部')
// 业务部门
const deptList = ref([
{ value: 1, label: '优势媒体部' },
{ value: 2, label: '网络媒体部' }
])
// 优势媒体报价组件
const competitiveOfferRef = ref(null)
// 网络媒体门禁报价组件
const accessControlPriceRef = ref(null)
// 网络媒体门候车厅报价组件
const waitingHallPriceRef = ref(null)
// 网络媒体道闸报价组件
const barrierGatePriceRef = ref(null)
// 网络媒体地铁报价组件
const subwayPriceRef = ref(null)
// 网络媒体高铁报价组件
const highSpeedRailwayRef = ref(null)
// 网络媒体写字楼报价组件
const officeBuildingRef = ref(null)
// 网络媒体车库灯箱报价组件
const garageLightBoxRef = ref(null)
// 批文文件组件
const approvalDocumentRef = ref(null)
// 独家授权文件
const exclusiveLicenseFileRef = ref(null)
// 媒体行业授权文件
const mediaLicenseFileRef = ref(null)
// 媒体归属附件
const mediaOwnershipRef = ref(null)
// 曾经媒体照片
const onceMediaPhotoRef = ref(null)
// 图片上传
const mediaPicRef = ref(null)
// 视频上传
const mediaVideoRef = ref(null)
// 盖章刊例
const stampedPublicationRef = ref(null)
// 资质文件
const qualificationFileRef = ref(null)
// 媒体链条
const mediaChainRef = ref(null)
// 刊例照片
const journalCataloguePhotoRef = ref(null)
// MR和制作要求
const mRProductionRequirementsRef = ref(null)
// 返回
const handleClose = () => {
emit('handleShowList')
}
// 折叠面板点击
const handleChange = (val) => {
console.log(val)
activeNames.value = val
}
// 报价类型切换
const handlePriceTypeClick = (tab, event) => {
console.log(tab, event)
activePriceType.value = tab
}
// 初始化
const handleChangeDept = (val) => {
const choseDep = deptList.value.filter(item => item.value == val)[0]
console.log('部门', choseDep)
detailForm.value.businessType = choseDep?.value
businessTypeName.value = choseDep?.label
nextTick(() => {
if (businessTypeName.value == '优势媒体部' && competitiveOfferRef.value) competitiveOfferRef.value.getMediaPrice(detailForm.value.id, false)
if (businessTypeName.value == '网络媒体部' && activePriceType.value == '门禁') accessControlPriceRef.value.getMediaPrice(detailForm.value.id, false)
if (businessTypeName.value == '网络媒体部' && activePriceType.value == '候车厅') waitingHallPriceRef.value.getMediaPrice(detailForm.value.id, false)
if (businessTypeName.value == '网络媒体部' && activePriceType.value == '道闸') barrierGatePriceRef.value.getMediaPrice(detailForm.value.id, false)
if (businessTypeName.value == '网络媒体部' && activePriceType.value == '地铁') subwayPriceRef.value.getMediaPrice(detailForm.value.id, false)
if (businessTypeName.value == '网络媒体部' && activePriceType.value == '高铁') highSpeedRailwayRef.value.getMediaPrice(detailForm.value.id, false)
if (businessTypeName.value == '网络媒体部' && activePriceType.value == '写字楼') officeBuildingRef.value.getMediaPrice(detailForm.value.id, false)
if (businessTypeName.value == '网络媒体部' && activePriceType.value == '车库灯箱') garageLightBoxRef.value.getMediaPrice(detailForm.value.id, false)
})
}
const getMediaInfo = () => {
mediaDetail({ mediaId: detailForm.value.id }).then(res => {
detailForm.value = res.data
handleChangeDept(res.data.businessType)
if (detailForm.value.mediaFile && detailForm.value.mediaFile.length > 0) {
if (approvalDocumentRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 1)
approvalDocumentRef.value.setFileInfo(fileList)
}
if (exclusiveLicenseFileRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 2)
exclusiveLicenseFileRef.value.setFileInfo(fileList)
}
if (mediaLicenseFileRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 3)
mediaLicenseFileRef.value.setFileInfo(fileList)
}
if (mediaOwnershipRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 4)
mediaOwnershipRef.value.setFileInfo(fileList)
}
if (onceMediaPhotoRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 5)
onceMediaPhotoRef.value.setFileInfo(fileList)
}
if (mediaPicRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 6)
mediaPicRef.value.setFileInfo(fileList)
}
if (mediaVideoRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 7)
mediaVideoRef.value.setFileInfo(fileList)
}
if (stampedPublicationRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 8)
stampedPublicationRef.value.setFileInfo(fileList)
}
if (qualificationFileRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 9)
qualificationFileRef.value.setFileInfo(fileList)
}
if (mediaChainRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 10)
mediaChainRef.value.setFileInfo(fileList)
}
if (journalCataloguePhotoRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 11)
journalCataloguePhotoRef.value.setFileInfo(fileList)
}
if (mRProductionRequirementsRef.value) {
const fileList = detailForm.value.mediaFile.filter(item => item.fileType == 12)
mRProductionRequirementsRef.value.setFileInfo(fileList)
}
}
})
}
const initForm = (_ruleForm) => {
detailForm.value = _ruleForm
if (detailForm.value.id) getMediaInfo()
}
// 暴露方法\属性给父组件
defineExpose({
initForm
});
</script>
<style lang='scss'>
.supplierTitleContainer {
width: 100%;
height: 26px;
margin-bottom: 20px;
}
.supplierNameIcon {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 2px;
background: #ffc63d;
margin: 0px 10px 4px 0px;
}
.supplierNameTitle {
display: inline-block;
font-family: Microsoft YaHei;
font-weight: 600;
font-size: 22px;
color: #1E1E1E;
}
// 分割线
.splineBar {
width: 100%;
height: 1px;
background: #D9DFE5;
}
.supplierNameLabel {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #1A75E6;
cursor: pointer;
}
.mybadge .el-badge__content.is-dot {
width: 6px;
height: 6px;
background-color: #126601;
margin-right: 10px;
}
.myMedioStatus {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #126601;
}
</style>