1232 lines
60 KiB
Vue
1232 lines
60 KiB
Vue
<template>
|
|
<el-card class="myMediaFormCard">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>{{ formTitle }}</span>
|
|
<el-icon style="float: right;cursor: pointer;" @click="handleClose" v-if="showClose">
|
|
<Close />
|
|
</el-icon>
|
|
</div>
|
|
</template>
|
|
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="180px" class="myInsertForm">
|
|
<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="dataScopeDeptId">
|
|
<el-select v-model="ruleForm.dataScopeDeptId" placeholder="请选择"
|
|
@change="handleChangeDept" clearable style="min-width: 30px;">
|
|
<el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName"
|
|
:value="item.deptId" />
|
|
</el-select>
|
|
</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" v-if="ruleForm.id">
|
|
<el-form-item label="媒体编号">
|
|
<el-input v-model="ruleForm.mediaCode" placeholder="请输入" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="供应商/媒体形式/名称" prop="mediaName">
|
|
<el-input v-model="ruleForm.mediaName" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="供应商名称">
|
|
<el-select class="filterSelect" v-model="ruleForm.belongSupplierId"
|
|
@change="handleChoseSupplier" filterable remote reserve-keyword
|
|
:remote-method="getSupplierList" :loading="selectLoading" placeholder="请输入"
|
|
remote-show-suffix clearable style="min-width: 70px;">
|
|
<el-option v-for="item in supplierList" :key="item.supplierId"
|
|
:label="item.supplierName" :value="item.supplierId" />
|
|
<template #footer>
|
|
<div class="select-footer">
|
|
<el-button v-if="!isAddSuppliering" @click="onAddSupplierOption"
|
|
type="primary" text
|
|
style="justify-content: flex-start; width: 100%; color: #1a75e6;">
|
|
添加供应商
|
|
</el-button>
|
|
<template v-else>
|
|
<el-input v-model="addSupplierName" class="option-input"
|
|
placeholder="请输入供应商名称" />
|
|
<div class="footer-buttons">
|
|
<el-button class="my-confirm-btn" type="primary"
|
|
@click="onSupplierConfirm">确认</el-button>
|
|
<el-button class="my-cancel-btn"
|
|
@click="clearSupplier">取消</el-button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</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="媒体类型" prop="mediaType">
|
|
<el-select v-model="ruleForm.mediaType" placeholder="请选择" @change="getMediaTypeTwo"
|
|
clearable style="min-width: 30px">
|
|
<el-option v-for="item in mediaTypeOne" :key="item.id" :label="item.name"
|
|
:value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="媒体大类" prop="mediaCategory">
|
|
<el-select v-model="ruleForm.mediaCategory" placeholder="请选择"
|
|
@change="getMediaTypeThree" clearable style="min-width: 30px">
|
|
<el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name"
|
|
:value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="展示形式" prop="displayForm">
|
|
<el-select v-model="ruleForm.displayForm" placeholder="请选择" clearable
|
|
style="min-width: 30px">
|
|
<el-option v-for="item in mediaTypeThree" :key="item.id" :label="item.name"
|
|
:value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="6">
|
|
<el-form-item label="是否有照明" prop="hasLighting">
|
|
<el-select v-model="ruleForm.hasLighting" placeholder="请选择" style="min-width: 30px;"
|
|
clearable>
|
|
<el-option v-for="dict in whether_lighting" :key="dict.value" :label="dict.label"
|
|
:value="dict.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="播放时间" prop="playbackTime">
|
|
<el-input v-model="ruleForm.playbackTime" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="MR">
|
|
<el-input v-model="ruleForm.mr" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="媒体流量">
|
|
<el-input v-model="ruleForm.dailyAvgVehicleFlow" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="12">
|
|
<el-form-item label="媒体尺寸" prop="mediaSize">
|
|
<el-input v-model="ruleForm.mediaSize" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="媒体朝向" prop="mediaOrientation">
|
|
<el-input v-model="ruleForm.mediaOrientation" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row">
|
|
<el-col :span="18">
|
|
<el-form-item label="城市" prop="mediaCity" style="margin-bottom: 0;">
|
|
<el-row :gutter="20" class="my_form_row">
|
|
<el-col :span="6">
|
|
<el-select v-model="ruleForm.provinceCode" placeholder="请选择"
|
|
@change="getCityList" clearable style="min-width: 30px">
|
|
<el-option v-for="item in province" :key="item.id" :label="item.name"
|
|
:value="item.id" />
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select v-model="ruleForm.cityCode" placeholder="请选择" @change="getCountyList"
|
|
clearable style="min-width: 30px">
|
|
<el-option v-for="item in city" :key="item.id" :label="item.name"
|
|
:value="item.id" />
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select v-model="ruleForm.areaCode" placeholder="请选择" @change="getTownList"
|
|
clearable style="min-width: 30px">
|
|
<el-option v-for="item in county" :key="item.id" :label="item.name"
|
|
:value="item.id" />
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-select v-model="ruleForm.townCode" placeholder="请选择" @change="setTown"
|
|
clearable style="min-width: 30px">
|
|
<el-option v-for="item in town" :key="item.id" :label="item.name"
|
|
:value="item.id" />
|
|
</el-select>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="区域属性" prop="businessDistrictId">
|
|
<el-select v-model="ruleForm.businessDistrictId" placeholder="请选择"
|
|
@change="handleChosebusiness" clearable style="min-width: 30px;">
|
|
<el-option v-for="item in businessAreaList" :key="item.id" :label="item.name"
|
|
:value="item.id" />
|
|
<template #footer>
|
|
<div class="select-footer">
|
|
<el-button v-if="!isAdding" @click="onAddOption" type="primary" text
|
|
style="justify-content: flex-start; width: 100%; color: #1a75e6;">
|
|
添加区域属性
|
|
</el-button>
|
|
<template v-else>
|
|
<el-input v-model="optionName" class="option-input"
|
|
placeholder="请输入区域属性名称" />
|
|
<div class="footer-buttons">
|
|
<el-button class="my-confirm-btn" type="primary"
|
|
@click="onConfirm">确认</el-button>
|
|
<el-button class="my-cancel-btn" @click="clear">取消</el-button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row">
|
|
<el-col :span="24">
|
|
<el-form-item label="地址">
|
|
<el-input v-model="ruleForm.address" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row">
|
|
<el-col :span="24">
|
|
<el-form-item label="地理位置">
|
|
<el-input v-model="latVal" placeholder="请获取经纬度" readonly>
|
|
<template #append>
|
|
<el-button type="info" @click="handlePickLat">
|
|
<el-icon style="top: -4px">
|
|
<LocationInformation />
|
|
</el-icon>
|
|
</el-button>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="8">
|
|
<el-form-item label="最小购买周期">
|
|
<el-input v-model="ruleForm.minPurchaseCycle" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="首次制作安装费" prop="firstInstallFee">
|
|
<el-input v-model="ruleForm.firstInstallFee" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="换刊制作安装费" prop="changeInstallFee">
|
|
<el-input v-model="ruleForm.changeInstallFee" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="媒体报价信息" name="3">
|
|
<div v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<competitiveOffer ref="competitiveOfferRef"
|
|
@setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
|
|
</div>
|
|
<div v-if="ruleForm.dataScopeDeptName == '网络媒体事业部'">
|
|
<el-tabs v-model="activePriceType" @tab-click="handlePriceTypeClick">
|
|
<el-tab-pane label="门禁" name="门禁">
|
|
<accessControlPrice ref="accessControlPriceRef"
|
|
@setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="候车厅" name="候车厅">
|
|
<waitingHallPrice ref="waitingHallPriceRef"
|
|
@setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="道闸" name="道闸">
|
|
<barrierGatePrice ref="barrierGatePriceRef"
|
|
@setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="地铁" name="地铁">
|
|
<subwayPrice ref="subwayPriceRef"
|
|
@setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="高铁" name="高铁">
|
|
<highSpeedRailway ref="highSpeedRailwayRef"
|
|
@setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="写字楼" name="写字楼">
|
|
<officeBuilding ref="officeBuildingRef"
|
|
@setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="车库灯箱" name="车库灯箱">
|
|
<garageLightBox ref="garageLightBoxRef"
|
|
@setCompetOfferMediaPrice="handleSetCompetOfferMediaPrice" />
|
|
</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="媒体归属名称">
|
|
<el-input v-model="ruleForm.belongName" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="联系人">
|
|
<el-input v-model="ruleForm.contactUserName" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="联系电话" prop="business">
|
|
<el-input v-model="ruleForm.contactUserPhone" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="媒体是否有改造" prop="business">
|
|
<el-select v-model="ruleForm.hasReform" placeholder="请选择" style="min-width: 30px;"
|
|
clearable>
|
|
<el-option v-for="item in hasReformList" :key="item.value" :label="item.label"
|
|
:value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="6">
|
|
<el-form-item label="发票类型">
|
|
<el-select v-model="ruleForm.invoiceType" placeholder="请选择" style="min-width: 30px;"
|
|
clearable>
|
|
<el-option v-for="dict in invoice_type" :key="dict.value" :label="dict.label"
|
|
:value="dict.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="税点">
|
|
<el-input v-model="ruleForm.taxRate" 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.paymentRequirements" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="媒体公司名称" prop="business">
|
|
<el-input v-model="ruleForm.mediaCompanyName" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="6">
|
|
<el-form-item label="物业公司名称" prop="business">
|
|
<el-input v-model="ruleForm.propertyCompanyName" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="审批部门" prop="business">
|
|
<el-input v-model="ruleForm.approvalDept" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="批文情况">
|
|
<el-select v-model="ruleForm.approvalSituation" placeholder="请选择" clearable
|
|
style="min-width: 30px;">
|
|
<el-option v-for="dict in approval_document_status" :key="dict.value"
|
|
:label="dict.label" :value="dict.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="批文发布时间">
|
|
<el-date-picker v-model="ruleForm.approvalReleaseTime" style="width: 100%;" type="date"
|
|
placeholder="请选择" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="6">
|
|
<el-form-item label="媒体独家授权" prop="business">
|
|
<el-input v-model="ruleForm.soleAgentAuth" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="独家授权时间">
|
|
<el-date-picker v-model="ruleForm.soleAgentAuthTime" style="width: 100%;" type="date"
|
|
placeholder="请选择" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="媒体行业授权" prop="business">
|
|
<el-input v-model="ruleForm.industryAuth" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="媒体行业授权时间">
|
|
<el-date-picker v-model="ruleForm.industryAuthTime" style="width: 100%;" type="date"
|
|
placeholder="请选择" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="24">
|
|
<el-form-item label="行业限制" prop="business">
|
|
<el-input v-model="ruleForm.industryLimit" :rows="5" type="textarea"
|
|
placeholder="请输入内容"></el-input>
|
|
</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">
|
|
<el-input v-model="ruleForm.everManagerCompany" :rows="5" type="textarea"
|
|
placeholder="请输入内容"></el-input>
|
|
</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">
|
|
<el-input v-model="ruleForm.mediaTimeline" :rows="5" type="textarea"
|
|
placeholder="请输入内容"></el-input>
|
|
</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">
|
|
<el-input v-model="ruleForm.everMediaSituation" :rows="5" type="textarea"
|
|
placeholder="请输入内容"></el-input>
|
|
</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">
|
|
<el-input v-model="ruleForm.mediaHistory" :rows="5" type="textarea"
|
|
placeholder="请输入内容"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '网络媒体事业部'">
|
|
<el-col :span="24">
|
|
<el-form-item label="同类媒体公司" prop="business">
|
|
<el-input v-model="ruleForm.equalsMediaCompany" :rows="5" type="textarea"
|
|
placeholder="请输入内容"></el-input>
|
|
</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">
|
|
<el-input v-model="ruleForm.other" :rows="5" type="textarea"
|
|
placeholder="请输入内容"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="24">
|
|
<el-form-item label="批文文件">
|
|
<multiFileUpload ref="approvalDocumentRef" @set-form-file="handleSetMediaFile" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="24">
|
|
<el-form-item label="独家授权文件">
|
|
<multiFileUpload ref="exclusiveLicenseFileRef" @set-form-file="handleSetMediaFile" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="24">
|
|
<el-form-item label="媒体行业授权文件">
|
|
<multiFileUpload ref="mediaLicenseFileRef" @set-form-file="handleSetMediaFile" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '网络媒体事业部'">
|
|
<el-col :span="24">
|
|
<el-form-item label="媒体归属附件">
|
|
<multiFileUpload ref="mediaOwnershipRef" @set-form-file="handleSetMediaFile" />
|
|
</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="onceMediaPhotoRef" @set-form-file="handleSetMediaFile" />
|
|
</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="优势">
|
|
<el-input v-model="ruleForm.advantages" :rows="5" type="textarea"
|
|
placeholder="请输入内容"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row">
|
|
<el-col :span="24">
|
|
<el-form-item label="备注">
|
|
<el-input v-model="ruleForm.remark" :rows="5" type="textarea"
|
|
placeholder="请输入内容"></el-input>
|
|
</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="mediaPicRef" @set-form-file="handleSetMediaFile" />
|
|
</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="mediaVideoRef" @set-form-file="handleSetMediaFile" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="24">
|
|
<el-form-item label="盖章刊例">
|
|
<multiFileUpload ref="stampedPublicationRef" @set-form-file="handleSetMediaFile" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="24">
|
|
<el-form-item label="资质文件">
|
|
<multiFileUpload ref="qualificationFileRef" @set-form-file="handleSetMediaFile" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="24">
|
|
<el-form-item label="媒体链条">
|
|
<multiFileUpload ref="mediaChainRef" @set-form-file="handleSetMediaFile" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '优势媒体事业部'">
|
|
<el-col :span="24">
|
|
<el-form-item label="刊例照片">
|
|
<multiFileUpload ref="journalCataloguePhotoRef" @set-form-file="handleSetMediaFile" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row" v-if="ruleForm.dataScopeDeptName == '网络媒体事业部'">
|
|
<el-col :span="24">
|
|
<el-form-item label="MR和制作要求">
|
|
<multiFileUpload ref="mRProductionRequirementsRef"
|
|
@set-form-file="handleSetMediaFile" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<el-button type="primary" class="submitBtn" @click="handleSubmit">提交信息</el-button>
|
|
</template>
|
|
<pickLat ref="pickLatRef" @closePickLat="handleClosePickLat" />
|
|
</el-card>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, nextTick, defineEmits, ref } from 'vue'
|
|
import { Close, LocationInformation } from '@element-plus/icons-vue'
|
|
import { addBusSupplier, listBusSupplier, getBusSupplier } from "@/api/supplier"
|
|
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
|
|
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
|
|
import { listDept } from "@/api/system/dept"
|
|
import { busTradingAreaPage, addBusTradingArea } from "@/api/system/businessArea"
|
|
import { addMedia, updateMedia, mediaDetail } from "@/api/mediaLibrary"
|
|
|
|
import multiFileUpload from '../../components/FileUpload/multiFileUpload.vue'
|
|
import pickLat from './pickLat.vue'
|
|
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'
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
const emit = defineEmits(['handleShowList']);
|
|
const showClose = ref(true)
|
|
// 表单标题
|
|
const formTitle = ref('新建')
|
|
// 网络报价类型
|
|
const activePriceType = ref('门禁')
|
|
// 选择的经纬度
|
|
const latVal = ref(null)
|
|
const pickLatRef = ref(null)
|
|
|
|
// 报价信息列表
|
|
const mediaPrice = ref([])
|
|
// 优势媒体报价组件
|
|
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 mediaFile = ref([])
|
|
// 批文文件组件
|
|
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 isAdding = ref(false)
|
|
const optionName = ref('')
|
|
// 自定义添加供应商
|
|
const isAddSuppliering = ref(false)
|
|
const addSupplierName = ref('')
|
|
|
|
// 媒体类型数据
|
|
const mediaTypeOne = ref([])
|
|
const mediaTypeTwo = ref([])
|
|
const mediaTypeThree = ref([])
|
|
// 省、市、县、镇数据
|
|
const province = ref([])
|
|
const city = ref([])
|
|
const county = ref([])
|
|
const town = ref([])
|
|
// 业务部门
|
|
const deptList = ref([])
|
|
// 归属选项
|
|
const supplierList = ref([])
|
|
const selectLoading = ref(false)
|
|
// 区域属性信息列表
|
|
const businessAreaList = ref([])
|
|
// 是否有改造
|
|
const hasReformList = ref([
|
|
{ value: 0, label: '否' },
|
|
{ value: 1, label: '是' }
|
|
])
|
|
|
|
const data = reactive({
|
|
ruleForm: {},
|
|
rules: {
|
|
dataScopeDeptId: [{ required: true, message: "业务部门不能为空", trigger: "change" }],
|
|
mediaName: [{ required: true, message: "媒体形式/名称不能为空", trigger: "blur" }],
|
|
mediaType: [{ required: true, message: "媒体类型不能为空", trigger: "change" }],
|
|
mediaCategory: [{ required: true, message: "媒体大类不能为空", trigger: "change" }],
|
|
hasLighting: [{ required: true, message: "是否有照明不能为空", trigger: "change" }],
|
|
playbackTime: [{ required: true, message: "播放时间不能为空", trigger: "change" }],
|
|
mediaSize: [{ required: true, message: "媒体尺寸不能为空", trigger: "blur" }],
|
|
mediaOrientation: [{ required: true, message: "媒体朝向不能为空", trigger: "blur" }],
|
|
mediaCity: [{ required: true, message: "城市不能为空", trigger: "change" }],
|
|
businessDistrictId: [{ required: true, message: "区域属性不能为空", trigger: "change" }],
|
|
firstInstallFee: [{ required: true, message: "首次制作安装费不能为空", trigger: "blur" }],
|
|
changeInstallFee: [{ required: true, message: "换刊制作安装费不能为空", trigger: "blur" }],
|
|
},
|
|
})
|
|
const { ruleForm, rules } = toRefs(data)
|
|
const { whether_lighting, invoice_type, approval_document_status } = proxy.useDict("whether_lighting", "invoice_type", "approval_document_status")
|
|
const activeNames = ref(['1', '2', '3', '4', '5'])
|
|
// 折叠面板点击
|
|
const handleChange = (val) => {
|
|
activeNames.value = val
|
|
}
|
|
// 报价类型切换
|
|
const handlePriceTypeClick = (tab, event) => {
|
|
activePriceType.value = tab.props.name
|
|
if (activePriceType.value == '门禁') accessControlPriceRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (activePriceType.value == '候车厅') waitingHallPriceRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (activePriceType.value == '道闸') barrierGatePriceRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (activePriceType.value == '地铁') subwayPriceRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (activePriceType.value == '高铁') highSpeedRailwayRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (activePriceType.value == '写字楼') officeBuildingRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (activePriceType.value == '车库灯箱') garageLightBoxRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
}
|
|
// 打开拾取经纬度弹窗
|
|
const handlePickLat = () => {
|
|
pickLatRef.value.loadMap()
|
|
}
|
|
const handleClosePickLat = (backValue) => {
|
|
latVal.value = backValue.lat + ',' + backValue.lng
|
|
ruleForm.value.mapX = backValue.lng //经度
|
|
ruleForm.value.mapY = backValue.lat //纬度
|
|
}
|
|
// 业务部门切换
|
|
const handleChangeDept = (val) => {
|
|
const choseDep = deptList.value.filter(item => item.deptId == val)[0]
|
|
ruleForm.value.dataScopeDeptId = choseDep?.deptId
|
|
ruleForm.value.dataScopeDeptName = choseDep?.deptName
|
|
nextTick(() => {
|
|
if (ruleForm.value.dataScopeDeptName == '优势媒体事业部' && competitiveOfferRef.value) competitiveOfferRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (ruleForm.value.dataScopeDeptName == '网络媒体事业部' && activePriceType.value == '门禁') accessControlPriceRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (ruleForm.value.dataScopeDeptName == '网络媒体事业部' && activePriceType.value == '候车厅') waitingHallPriceRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (ruleForm.value.dataScopeDeptName == '网络媒体事业部' && activePriceType.value == '道闸') barrierGatePriceRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (ruleForm.value.dataScopeDeptName == '网络媒体事业部' && activePriceType.value == '地铁') subwayPriceRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (ruleForm.value.dataScopeDeptName == '网络媒体事业部' && activePriceType.value == '高铁') highSpeedRailwayRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (ruleForm.value.dataScopeDeptName == '网络媒体事业部' && activePriceType.value == '写字楼') officeBuildingRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
if (ruleForm.value.dataScopeDeptName == '网络媒体事业部' && activePriceType.value == '车库灯箱') garageLightBoxRef.value.getMediaPrice(ruleForm.value.id, true)
|
|
// 批文文件-1,独家授权文件-2,媒体行业授权文件-3,媒体归属附件-4,曾经媒体照片-5,图片上传-6,视频上传-7,盖章刊例-8, 资质文件-9, 媒体链条-10, 刊例照片-11,MR和制作要求-12
|
|
if (approvalDocumentRef.value) approvalDocumentRef.value._fileType = 1;
|
|
if (exclusiveLicenseFileRef.value) exclusiveLicenseFileRef.value._fileType = 2;
|
|
if (mediaLicenseFileRef.value) mediaLicenseFileRef.value._fileType = 3;
|
|
if (mediaOwnershipRef.value) mediaOwnershipRef.value._fileType = 4;
|
|
if (onceMediaPhotoRef.value) onceMediaPhotoRef.value._fileType = 5;
|
|
if (mediaPicRef.value) mediaPicRef.value._fileType = 6;
|
|
if (mediaVideoRef.value) mediaVideoRef.value._fileType = 7;
|
|
if (stampedPublicationRef.value) stampedPublicationRef.value._fileType = 8;
|
|
if (qualificationFileRef.value) qualificationFileRef.value._fileType = 9;
|
|
if (mediaChainRef.value) mediaChainRef.value._fileType = 10;
|
|
if (journalCataloguePhotoRef.value) journalCataloguePhotoRef.value._fileType = 11;
|
|
if (mRProductionRequirementsRef.value) mRProductionRequirementsRef.value._fileType = 12;
|
|
})
|
|
}
|
|
// 选择区域属性
|
|
const handleChosebusiness = (val) => {
|
|
const choseBusiness = businessAreaList.value.filter(item => item.id == val)[0]
|
|
ruleForm.value.businessDistrictName = choseBusiness?.name
|
|
}
|
|
// 打开添加区域属性输入框
|
|
const onAddOption = () => {
|
|
isAdding.value = true
|
|
}
|
|
// 确认添加区域属性
|
|
const onConfirm = () => {
|
|
if (optionName.value) {
|
|
const paramsForm = {
|
|
provinceId: ruleForm.value.provinceCode,
|
|
cityId: ruleForm.value.cityCode,
|
|
countyId: ruleForm.value.areaCode,
|
|
townId: ruleForm.value.townCode,
|
|
name: optionName.value
|
|
}
|
|
addBusTradingArea(paramsForm).then(response => {
|
|
clear()
|
|
getbusinessAreaList()
|
|
})
|
|
}
|
|
}
|
|
// 取消添加区域属性
|
|
const clear = () => {
|
|
optionName.value = ''
|
|
isAdding.value = false
|
|
}
|
|
|
|
// 打开添加供应商输入框
|
|
const onAddSupplierOption = () => {
|
|
isAddSuppliering.value = true
|
|
}
|
|
// 确认添加供应商
|
|
const onSupplierConfirm = () => {
|
|
if (addSupplierName.value) {
|
|
const paramsForm = {
|
|
supplierName: addSupplierName.value
|
|
}
|
|
addBusSupplier(paramsForm).then(response => {
|
|
clearSupplier()
|
|
supplierList.value = []
|
|
listBusSupplier({ keyword: addSupplierName.value }).then(res => {
|
|
supplierList.value = res.data
|
|
})
|
|
})
|
|
}
|
|
}
|
|
// 取消添加供应商
|
|
const clearSupplier = () => {
|
|
addSupplierName.value = ''
|
|
isAddSuppliering.value = false
|
|
}
|
|
// 选择供应商
|
|
const handleChoseSupplier = (val) => {
|
|
const choseSupplier = supplierList.value.filter(item => item.supplierId == val)[0]
|
|
ruleForm.value.belongSupplierId = choseSupplier?.supplierId
|
|
ruleForm.value.belongSupplierName = choseSupplier?.supplierName
|
|
}
|
|
// 获取一级媒体类型
|
|
const getMediaTypeOne = () => {
|
|
sysMediaTypeListByPid({ parentId: 0 }).then(res => {
|
|
ruleForm.value.mediaCategory = undefined
|
|
mediaTypeOne.value = res.data
|
|
})
|
|
}
|
|
// 获取二级媒体类型
|
|
const getMediaTypeTwo = (value) => {
|
|
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
|
ruleForm.value.displayForm = undefined
|
|
mediaTypeTwo.value = res.data
|
|
})
|
|
}
|
|
// 获取三级媒体类型
|
|
const getMediaTypeThree = (value) => {
|
|
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
|
mediaTypeThree.value = res.data
|
|
})
|
|
}
|
|
|
|
// 获取业务部门
|
|
const getDepList = () => {
|
|
listDept({ businessFlag: 1 }).then(response => {
|
|
deptList.value = response.data
|
|
})
|
|
}
|
|
// 查询条件获取供应商
|
|
const getSupplierList = (queryText) => {
|
|
if (queryText) {
|
|
selectLoading.value = true
|
|
listBusSupplier({ keyword: queryText }).then(res => {
|
|
supplierList.value = res.data
|
|
selectLoading.value = false
|
|
})
|
|
} else {
|
|
selectLoading.value = false
|
|
supplierList.value = []
|
|
}
|
|
}
|
|
// 获取省/直辖市数据
|
|
const getProvinceList = () => {
|
|
sysRegionListByPid({ parentId: '0' }).then(res => {
|
|
province.value = res.data
|
|
})
|
|
}
|
|
// 获取地级市/区数据
|
|
const getCityList = (value) => {
|
|
var choseProvince = province.value.filter(item => item.id == value)[0]
|
|
if (choseProvince) {
|
|
ruleForm.value.mediaCity = choseProvince.name
|
|
ruleForm.value.provinceName = choseProvince.name
|
|
} else {
|
|
ruleForm.value.mediaCity = undefined
|
|
ruleForm.value.provinceCode = undefined
|
|
ruleForm.value.provinceName = undefined
|
|
ruleForm.value.cityCode = undefined
|
|
ruleForm.value.cityName = undefined
|
|
ruleForm.value.areaCode = undefined
|
|
ruleForm.value.areaName = undefined
|
|
ruleForm.value.townCode = undefined
|
|
ruleForm.value.townName = undefined
|
|
}
|
|
sysRegionListByPid({ parentId: value }).then(res => {
|
|
ruleForm.value.cityCode = undefined
|
|
ruleForm.value.cityName = undefined
|
|
ruleForm.value.areaCode = undefined
|
|
ruleForm.value.areaName = undefined
|
|
ruleForm.value.townCode = undefined
|
|
ruleForm.value.townName = undefined
|
|
city.value = res.data
|
|
})
|
|
getbusinessAreaList()
|
|
}
|
|
// 获取区/县数据
|
|
const getCountyList = (value) => {
|
|
var choseCity = city.value.filter(item => item.id == value)[0]
|
|
if (choseCity) {
|
|
ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + choseCity.name
|
|
ruleForm.value.cityName = choseCity.name
|
|
} else {
|
|
ruleForm.value.cityCode = undefined
|
|
ruleForm.value.cityName = undefined
|
|
ruleForm.value.areaCode = undefined
|
|
ruleForm.value.areaName = undefined
|
|
ruleForm.value.townCode = undefined
|
|
ruleForm.value.townName = undefined
|
|
}
|
|
sysRegionListByPid({ parentId: value }).then(res => {
|
|
ruleForm.value.areaCode = undefined
|
|
ruleForm.value.areaName = undefined
|
|
ruleForm.value.townCode = undefined
|
|
ruleForm.value.townName = undefined
|
|
county.value = res.data
|
|
})
|
|
getbusinessAreaList()
|
|
}
|
|
// 获取镇数据
|
|
const getTownList = (value) => {
|
|
var choseCounty = county.value.filter(item => item.id == value)[0]
|
|
if (choseCounty) {
|
|
ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + choseCounty.name
|
|
ruleForm.value.areaName = choseCounty.name
|
|
} else {
|
|
ruleForm.value.areaCode = undefined
|
|
ruleForm.value.areaName = undefined
|
|
ruleForm.value.townCode = undefined
|
|
ruleForm.value.townName = undefined
|
|
}
|
|
sysRegionListByPid({ parentId: value }).then(res => {
|
|
ruleForm.value.townCode = undefined
|
|
ruleForm.value.townName = undefined
|
|
town.value = res.data
|
|
})
|
|
getbusinessAreaList()
|
|
}
|
|
// 设置末级城市
|
|
const setTown = (value) => {
|
|
var choseTown = town.value.filter(item => item.id == value)[0]
|
|
if (choseTown) {
|
|
ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + ruleForm.value.areaName + '/' + choseTown.name
|
|
ruleForm.value.townName = choseTown.name
|
|
} else {
|
|
ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + ruleForm.value.areaName
|
|
ruleForm.value.townName = undefined
|
|
}
|
|
getbusinessAreaList()
|
|
}
|
|
|
|
// 详情信息联动 设置区/县数据
|
|
const getCityList2 = (value) => {
|
|
sysRegionListByPid({ parentId: value }).then(res => {
|
|
city.value = res.data
|
|
})
|
|
}
|
|
const getCountyList2 = (value) => {
|
|
sysRegionListByPid({ parentId: value }).then(res => {
|
|
county.value = res.data
|
|
})
|
|
}
|
|
const getTownList2 = (value) => {
|
|
sysRegionListByPid({ parentId: value }).then(res => {
|
|
town.value = res.data
|
|
})
|
|
}
|
|
// 依据省市县镇查询区域属性
|
|
const getbusinessAreaList = (val) => {
|
|
const _params = {
|
|
pageIndex: 1,
|
|
pageSize: 200,
|
|
provinceId: ruleForm.value.provinceCode,
|
|
cityId: ruleForm.value.cityCode,
|
|
countyId: ruleForm.value.areaCode,
|
|
townId: ruleForm.value.townCode,
|
|
}
|
|
busTradingAreaPage(_params).then(res => {
|
|
if (res.code == 200) {
|
|
businessAreaList.value = res.data.list
|
|
}
|
|
})
|
|
}
|
|
|
|
// 详情信息设置媒体类型
|
|
const getMediaTypeTwo2 = (value) => {
|
|
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
|
mediaTypeTwo.value = res.data
|
|
})
|
|
}
|
|
const getMediaTypeThree2 = (value) => {
|
|
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
|
mediaTypeThree.value = res.data
|
|
})
|
|
}
|
|
|
|
// 设置文件结果
|
|
const handleSetMediaFile = (_fileType, _files) => {
|
|
// 获取当前的所有文件
|
|
const currentFiles = [...mediaFile.value]; // 创建副本以避免直接修改原数组
|
|
// 过滤掉指定类型的旧文件
|
|
const filteredFiles = currentFiles.filter(item => item.fileType !== _fileType);
|
|
// 如果新文件存在，则添加到过滤后的数组中
|
|
if (_files.length > 0) {
|
|
filteredFiles.push(..._files); // 使用 push 追加新文件
|
|
mediaFile.value = filteredFiles; // 更新 ref
|
|
} else {
|
|
// 如果没有新文件，仍然需要更新 mediaFile.value 以反映过滤结果
|
|
mediaFile.value = filteredFiles;
|
|
}
|
|
}
|
|
// 设置媒体价格
|
|
const handleSetCompetOfferMediaPrice = (mediaType, _priceList) => {
|
|
// 先按类型去除旧的报价数据
|
|
const cachPriceList = mediaPrice.value.filter(item => item.mediaType !== mediaType)
|
|
// 将新的数据追加进结果
|
|
if (_priceList.length > 0) mediaPrice.value = cachPriceList.concat(_priceList)
|
|
else mediaPrice.value = cachPriceList
|
|
}
|
|
|
|
const handleSubmit = () => {
|
|
proxy.$refs["ruleFormRef"].validate(valid => {
|
|
if (valid) {
|
|
if (ruleForm.value.dataScopeDeptName == '优势媒体事业部') {
|
|
mediaFile.value = mediaFile.value.filter(item => [1, 2, 3, 5, 6, 7, 8, 9, 10, 11].includes(item.fileType))
|
|
ruleForm.value.mediaPrice = mediaPrice.value.filter(item => item.mediaType == 0)
|
|
} else if (ruleForm.value.dataScopeDeptName == '网络媒体事业部') {
|
|
mediaFile.value = mediaFile.value.filter(item => [4, 5, 6, 7, 12].includes(item.fileType))
|
|
ruleForm.value.mediaPrice = mediaPrice.value.filter(item => [1, 2, 3, 4, 5, 6, 7].includes(item.mediaType))
|
|
}
|
|
ruleForm.value.mediaFile = mediaFile.value
|
|
|
|
ruleForm.value.displayForm = ruleForm.value.displayForm ? ruleForm.value.displayForm : -1
|
|
|
|
if (ruleForm.value.id != undefined) {
|
|
updateMedia(ruleForm.value).then(response => {
|
|
proxy.$modal.msgSuccess("修改成功")
|
|
emit('handleShowList')
|
|
})
|
|
} else {
|
|
addMedia(ruleForm.value).then(response => {
|
|
proxy.$modal.msgSuccess("新增成功")
|
|
emit('handleShowList')
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleClose = () => {
|
|
emit('handleShowList')
|
|
}
|
|
|
|
// 获取供应商详情，设置供应商名称反渲染
|
|
const getSupplierInfo = () => {
|
|
getBusSupplier(ruleForm.value.belongSupplierId).then(res => {
|
|
supplierList.value = [{ supplierId: res.data.supplierId, supplierName: res.data.supplierName }]
|
|
})
|
|
}
|
|
// 获取媒体详情
|
|
const getMediaInfo = () => {
|
|
mediaDetail({ mediaId: ruleForm.value.id }).then(res => {
|
|
ruleForm.value = res.data
|
|
mediaFile.value = ruleForm.value.mediaFile
|
|
ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + ruleForm.value.areaName + '/' + ruleForm.value.townName
|
|
if (ruleForm.value.mapY && ruleForm.value.mapX) latVal.value = ruleForm.value.mapY + ',' + ruleForm.value.mapX
|
|
if (ruleForm.value.belongSupplierId) getSupplierInfo()
|
|
handleChangeDept(res.data.dataScopeDeptId)
|
|
if (ruleForm.value.mediaFile && ruleForm.value.mediaFile.length > 0) {
|
|
if (approvalDocumentRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 1)
|
|
approvalDocumentRef.value.setFileInfo(fileList)
|
|
}
|
|
if (exclusiveLicenseFileRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 2)
|
|
exclusiveLicenseFileRef.value.setFileInfo(fileList)
|
|
}
|
|
if (mediaLicenseFileRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 3)
|
|
mediaLicenseFileRef.value.setFileInfo(fileList)
|
|
}
|
|
if (mediaOwnershipRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 4)
|
|
mediaOwnershipRef.value.setFileInfo(fileList)
|
|
}
|
|
if (onceMediaPhotoRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 5)
|
|
onceMediaPhotoRef.value.setFileInfo(fileList)
|
|
}
|
|
if (mediaPicRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 6)
|
|
mediaPicRef.value.setFileInfo(fileList)
|
|
}
|
|
if (mediaVideoRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 7)
|
|
mediaVideoRef.value.setFileInfo(fileList)
|
|
}
|
|
if (stampedPublicationRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 8)
|
|
stampedPublicationRef.value.setFileInfo(fileList)
|
|
}
|
|
if (qualificationFileRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 9)
|
|
qualificationFileRef.value.setFileInfo(fileList)
|
|
}
|
|
if (mediaChainRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 10)
|
|
mediaChainRef.value.setFileInfo(fileList)
|
|
}
|
|
if (journalCataloguePhotoRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 11)
|
|
journalCataloguePhotoRef.value.setFileInfo(fileList)
|
|
}
|
|
if (mRProductionRequirementsRef.value) {
|
|
const fileList = ruleForm.value.mediaFile.filter(item => item.fileType == 12)
|
|
mRProductionRequirementsRef.value.setFileInfo(fileList)
|
|
}
|
|
}
|
|
handleResponse(res)
|
|
})
|
|
}
|
|
|
|
// 刷新联动数据
|
|
async function handleResponse(response) {
|
|
const promises = [];
|
|
|
|
if (response.data.provinceCode) {
|
|
promises.push(getCityList2(response.data.provinceCode));
|
|
}
|
|
if (response.data.cityCode) {
|
|
promises.push(getCountyList2(response.data.cityCode));
|
|
}
|
|
if (response.data.areaCode) {
|
|
promises.push(getTownList2(response.data.areaCode));
|
|
}
|
|
|
|
if (response.data.mediaType) {
|
|
promises.push(getMediaTypeTwo2(response.data.mediaType));
|
|
}
|
|
if (response.data.mediaCategory) {
|
|
promises.push(getMediaTypeThree2(response.data.mediaCategory));
|
|
}
|
|
|
|
getbusinessAreaList()
|
|
|
|
// 等待所有请求完成
|
|
await Promise.all(promises);
|
|
}
|
|
// 初始化
|
|
const initForm = (_formTitle, _ruleForm) => {
|
|
showClose.value = true
|
|
formTitle.value = _formTitle
|
|
ruleForm.value = _ruleForm
|
|
ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + ruleForm.value.areaName + '/' + ruleForm.value.townName
|
|
if (ruleForm.value.mapY && ruleForm.value.mapX) latVal.value = ruleForm.value.mapY + ',' + ruleForm.value.mapX
|
|
getDepList()
|
|
getMediaTypeOne()
|
|
getProvinceList()
|
|
if (ruleForm.value.id) getMediaInfo()
|
|
}
|
|
|
|
// 工作台链接过来的
|
|
const linkInitForm = (_formTitle, _ruleForm) => {
|
|
showClose.value = false
|
|
formTitle.value = _formTitle
|
|
ruleForm.value = _ruleForm
|
|
ruleForm.value.mediaCity = ruleForm.value.provinceName + '/' + ruleForm.value.cityName + '/' + ruleForm.value.areaName + '/' + ruleForm.value.townName
|
|
if (ruleForm.value.mapY && ruleForm.value.mapX) latVal.value = ruleForm.value.mapY + ',' + ruleForm.value.mapX
|
|
getDepList()
|
|
getMediaTypeOne()
|
|
getProvinceList()
|
|
if (ruleForm.value.id) getMediaInfo()
|
|
}
|
|
// 暴露方法\属性给父组件
|
|
defineExpose({
|
|
initForm,
|
|
linkInitForm
|
|
});
|
|
</script>
|
|
<style lang='scss'>
|
|
.el-upload--picture-card {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.viewFile {
|
|
width: 80px;
|
|
height: 80px;
|
|
border: 1px solid #dedede;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.upload-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.image-wrapper {
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-right: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.actions {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: none;
|
|
}
|
|
|
|
.image-wrapper:hover .actions {
|
|
display: block;
|
|
}
|
|
|
|
.delete {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
color: white;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
transition: background 0.3s;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
}
|
|
|
|
.pickMapContainer {
|
|
width: 100%;
|
|
height: calc(100vh - 316px);
|
|
background: #3f8bff;
|
|
}
|
|
|
|
.select-footer {
|
|
padding: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0px;
|
|
}
|
|
|
|
.option-input {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.footer-buttons {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
</style> |