895 lines
42 KiB
Vue
895 lines
42 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">
|
|
<Close />
|
|
</el-icon>
|
|
</div>
|
|
</template>
|
|
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="myInsertForm">
|
|
<el-row :gutter="30" class="my_form_row">
|
|
<el-col :span="6">
|
|
<el-form-item label="业务部门" prop="business">
|
|
<el-select v-model="ruleForm.business" placeholder="请选择" clearable style="min-width: 30px;">
|
|
<el-option v-for="dict in business" :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.postCode" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<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="展示形式">
|
|
<el-select v-model="ruleForm.display_form" placeholder="请选择" style="min-width: 30px;" clearable>
|
|
<el-option v-for="dict in display_form" :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-select v-model="ruleForm.media_form" placeholder="请选择" style="min-width: 30px;" clearable>
|
|
<el-option v-for="dict in media_form" :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-select v-model="ruleForm.whether_lighting" 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="是否实地考察">
|
|
<el-radio-group v-model="ruleForm.radio2">
|
|
<el-radio value="是">是</el-radio>
|
|
<el-radio value="否">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row">
|
|
<el-col :span="6">
|
|
<el-form-item label="夏季照明时间">
|
|
<el-time-picker v-model="timeRange" style="width: 100%;" is-range range-separator="至"
|
|
start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm"
|
|
value-format="HH:mm"></el-time-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="冬季照明时间">
|
|
<el-time-picker v-model="timeRange" style="width: 100%;" is-range range-separator="至"
|
|
start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm"
|
|
value-format="HH:mm"></el-time-picker>
|
|
</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="请输入">
|
|
<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="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-select v-model="ruleForm.approval_document_status" 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-select v-model="ruleForm.supplier" placeholder="请选择" style="min-width: 30px;" clearable>
|
|
<el-option v-for="dict in supplierList" :key="dict.value" :label="dict.label"
|
|
:value="dict.value" />
|
|
</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-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>m</span>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="宽">
|
|
<el-input v-model="ruleForm.postCode" placeholder="请输入">
|
|
<template #suffix>
|
|
<span>m</span>
|
|
</template>
|
|
</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-date-picker v-model="ruleForm.value1" style="width: 100%;" type="date" placeholder="请选择" />
|
|
</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-date-picker v-model="ruleForm.value2" style="width: 100%;" type="date" placeholder="请选择" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="出城时间">
|
|
<el-date-picker v-model="ruleForm.value3" style="width: 100%;" type="date" 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.media_schedule" placeholder="请选择" style="min-width: 30px;"
|
|
clearable>
|
|
<el-option v-for="dict in media_schedule" :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.postCode" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="媒介类型" style="margin-bottom: 0;">
|
|
<el-row :gutter="20" class="my_form_row">
|
|
<el-col :span="8">
|
|
<el-select v-model="ruleForm.mediaTypeOne" 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-col>
|
|
<el-col :span="8">
|
|
<el-select v-model="ruleForm.mediaTypeTwo" 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-col>
|
|
<el-col :span="8">
|
|
<el-select v-model="ruleForm.mediaTypeThree" 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-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row">
|
|
<el-col :span="18">
|
|
<el-form-item label="地区商圈" style="margin-bottom: 0;">
|
|
<el-row :gutter="20" class="my_form_row">
|
|
<el-col :span="6">
|
|
<el-select v-model="ruleForm.provinceId" 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.cityId" 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.countyId" 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.townId" placeholder="请选择" 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="商圈">
|
|
<el-select v-model="ruleForm.mediaTypeOne" 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-row>
|
|
<el-row :gutter="30" class="my_form_row">
|
|
<el-col :span="24">
|
|
<el-form-item label="所选商圈">
|
|
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="30" class="my_form_row">
|
|
<el-col :span="24">
|
|
<el-form-item label="地理位置">
|
|
<el-row :gutter="30" class="my_form_row">
|
|
<el-col :span="12">
|
|
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
|
</el-col>
|
|
</el-row>
|
|
</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.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-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>
|
|
<el-option v-for="dict in sales_method" :key="dict.value" :label="dict.label"
|
|
:value="dict.value" />
|
|
</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="请输入" />
|
|
</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>
|
|
<el-option v-for="dict in sales_method" :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.postCode" placeholder="请输入" />
|
|
</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="供应商联系方式" class="my_form_label" prop="business">
|
|
<el-input v-model="ruleForm.postCode" placeholder="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="首次是否包含安装制作费用" class="my_form_label">
|
|
<el-select v-model="ruleForm.sales_method" placeholder="请选择" style="min-width: 30px;" clearable>
|
|
<el-option v-for="dict in sales_method" :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-select v-model="ruleForm.invoice_type" 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.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-form-item label="换刊费用">
|
|
<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="6">
|
|
<el-form-item label="品牌" prop="business">
|
|
<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="请输入" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="关键词">
|
|
<el-select v-model="ruleForm.key_words" placeholder="请选择" style="min-width: 30px;" clearable>
|
|
<el-option v-for="dict in key_words" :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.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="请输入" />
|
|
</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="MR">
|
|
<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="请输入" />
|
|
</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="请输入" />
|
|
</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-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="请输入" />
|
|
</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="请输入" />
|
|
</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="24">
|
|
<el-form-item label="优势" prop="business">
|
|
<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="劣势" prop="business">
|
|
<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="备注" prop="business">
|
|
<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="文件上传" 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>
|
|
</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>
|
|
</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>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button type="primary" class="submitBtn" @click="handleSubmit">提交信息</el-button>
|
|
</template>
|
|
</el-card>
|
|
</template>
|
|
<script setup>
|
|
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()
|
|
|
|
const { proxy } = getCurrentInstance()
|
|
const emit = defineEmits(['handleShowList']);
|
|
const route = useRoute()
|
|
const formTitle = ref('新建')
|
|
|
|
// 媒体类型数据
|
|
const mediaTypeOne = ref([])
|
|
const mediaTypeTwo = ref([])
|
|
const mediaTypeThree = ref([])
|
|
// 省、市、县、镇数据
|
|
const province = ref([])
|
|
const city = ref([])
|
|
const county = ref([])
|
|
const town = ref([])
|
|
|
|
const supplierList = ref([])
|
|
const data = reactive({
|
|
ruleForm: {},
|
|
rules: {
|
|
business: [{ required: true, message: "业务部门不能为空", trigger: "change" }]
|
|
},
|
|
})
|
|
const { ruleForm, rules } = 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 = () => {
|
|
sysMediaTypeListByPid({ parentId: 0 }).then(res => {
|
|
mediaTypeOne.value = res.data
|
|
})
|
|
}
|
|
// 获取二级媒体类型
|
|
const getMediaTypeTwo = (value) => {
|
|
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
|
ruleForm.value.mediaTypeTwo = undefined
|
|
ruleForm.value.mediaTypeThree = undefined
|
|
mediaTypeTwo.value = res.data
|
|
})
|
|
}
|
|
// 获取三级媒体类型
|
|
const getMediaTypeThree = (value) => {
|
|
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
|
ruleForm.value.mediaTypeThree = undefined
|
|
mediaTypeThree.value = res.data
|
|
})
|
|
}
|
|
|
|
// 获取省/直辖市数据
|
|
const getProvinceList = () => {
|
|
sysRegionListByPid({ parentId: '0' }).then(res => {
|
|
province.value = res.data
|
|
})
|
|
}
|
|
// 获取地级市/区数据
|
|
const getCityList = (value) => {
|
|
sysRegionListByPid({ parentId: value }).then(res => {
|
|
ruleForm.value.cityId = undefined
|
|
ruleForm.value.countyId = undefined
|
|
ruleForm.value.townId = undefined
|
|
city.value = res.data
|
|
})
|
|
}
|
|
// 获取区/县数据
|
|
const getCountyList = (value) => {
|
|
sysRegionListByPid({ parentId: value }).then(res => {
|
|
ruleForm.value.countyId = undefined
|
|
ruleForm.value.townId = undefined
|
|
county.value = res.data
|
|
})
|
|
}
|
|
// 获取镇数据
|
|
const getTownList = (value) => {
|
|
sysRegionListByPid({ parentId: value }).then(res => {
|
|
ruleForm.value.townId = undefined
|
|
town.value = res.data
|
|
})
|
|
}
|
|
|
|
// 营业执照集合
|
|
const docUploadList = ref([])
|
|
const baseUrl = import.meta.env.VITE_APP_BASE_API
|
|
// 判断是否为图片文件
|
|
const isImageFile = (suffix) => {
|
|
return ['jpeg', 'jpg', 'png'].includes(suffix?.toLowerCase())
|
|
}
|
|
|
|
// 自定义上传
|
|
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) {
|
|
emit('handleShowList')
|
|
// if (form.value.postId != undefined) {
|
|
// updatePost(form.value).then(response => {
|
|
// proxy.$modal.msgSuccess("修改成功")
|
|
// open.value = false
|
|
// getList()
|
|
// })
|
|
// } else {
|
|
// addPost(form.value).then(response => {
|
|
// proxy.$modal.msgSuccess("新增成功")
|
|
// open.value = false
|
|
// getList()
|
|
// })
|
|
// }
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleClose = () => {
|
|
emit('handleShowList')
|
|
}
|
|
|
|
// 初始化
|
|
onMounted(() => {
|
|
bgStore.setBgImage(otherbg)
|
|
getMediaTypeOne()
|
|
getProvinceList()
|
|
const id = route.params && route.params.Id
|
|
if (id) {
|
|
ruleForm.value.id = id
|
|
formTitle.value = '编辑供应商'
|
|
} else {
|
|
ruleForm.value.id = null
|
|
formTitle.value = '新建供应商'
|
|
}
|
|
});
|
|
// 暴露方法\属性给父组件
|
|
defineExpose({
|
|
formTitle
|
|
});
|
|
</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);
|
|
}
|
|
}
|
|
</style> |