补充媒体库界面
This commit is contained in:
wangchengming
parent
d1485520eb
commit
3d8f1a0136
|
|
@ -610,7 +610,7 @@ h6 {
|
|||
.choseResultTag .el-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.exportPPTTag {
|
||||
height: 26px;
|
||||
padding: 16px 20px;
|
||||
|
|
@ -621,8 +621,9 @@ h6 {
|
|||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #1E1E1E;
|
||||
margin-right: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.exportPPTTag .el-tag__close {
|
||||
color: #9CA6B2 !important;
|
||||
background: #EEEEEE !important;
|
||||
|
|
@ -926,6 +927,13 @@ h6 {
|
|||
height: calc(100vh - 240px);
|
||||
}
|
||||
|
||||
.myMediaFormCard .el-card__body {
|
||||
padding: 30px 30px 0 30px !important;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: calc(100vh - 240px);
|
||||
}
|
||||
|
||||
.myDetailCard .el-card__body {
|
||||
padding: 30px 30px 0 30px !important;
|
||||
overflow-y: auto;
|
||||
|
|
|
|||
|
|
@ -89,52 +89,47 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="媒介类型:">
|
||||
<el-select v-model="queryParams.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 v-model="queryParams.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-form-item label="">
|
||||
<el-select v-model="queryParams.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 v-model="queryParams.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-form-item>
|
||||
<el-form-item label="">
|
||||
<el-select v-model="queryParams.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 v-model="queryParams.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-form-item>
|
||||
<el-form-item label="城市:">
|
||||
<el-select v-model="queryParams.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 v-model="queryParams.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-form-item>
|
||||
<el-form-item label="">
|
||||
<el-select v-model="queryParams.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 v-model="queryParams.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-form-item>
|
||||
<el-form-item label="">
|
||||
<el-select v-model="queryParams.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 v-model="queryParams.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-form-item>
|
||||
<el-form-item label="">
|
||||
<el-select v-model="queryParams.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 v-model="queryParams.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-form-item>
|
||||
<el-form-item label="商圈">
|
||||
|
|
@ -281,6 +276,8 @@
|
|||
@pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
<media-form ref="mediaFormRef" v-if="showForm" @handleShowList="handleShowList" />
|
||||
<media-detail ref="mediaDetailRef" v-if="showDetail" @handleShowList="handleShowList" />
|
||||
|
||||
<!-- 导入对话框 -->
|
||||
<el-dialog :title="upload.title" v-model="upload.open" width="650px" class="my_dialog" align-center
|
||||
|
|
@ -313,12 +310,12 @@
|
|||
:destroy-on-close="true" :close-on-click-modal="false">
|
||||
<div class="my_dialog_itemHeader">已选内容</div>
|
||||
<div class="chosedMediaNamsConter">
|
||||
<el-tag v-for="tag in multipleChoseArr" :key="tag.id" class="exportPPTTag"
|
||||
@close="handleCloseTag(tag)" closable>
|
||||
{{ tag.mediaName }}
|
||||
</el-tag>
|
||||
<el-tag v-for="tag in multipleChoseArr" :key="tag.id" class="exportPPTTag" @close="handleCloseTag(tag)"
|
||||
closable>
|
||||
{{ tag.mediaName }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="my_dialog_itemHeader">选择需要写入方案的媒体字段</div>
|
||||
<div class="my_dialog_itemHeader">选择需要写入方案的媒体字段</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="my-cancel-btn" @click="exportPPT.open = false">取 消</el-button>
|
||||
|
|
@ -332,6 +329,8 @@
|
|||
import { getToken } from "@/utils/auth"
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
|
||||
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
|
||||
import optionIcon from '@/assets/images/optionIcon.png'
|
||||
import optionIconHover from '@/assets/images/optionIconHover.png'
|
||||
import viewFile from '@/assets/images/viewFile.png'
|
||||
|
|
@ -339,14 +338,26 @@ import viewFileHover from '@/assets/images/viewFileHover.png'
|
|||
import { useBackgroundStore } from '@/store/modules/background'
|
||||
import otherbg from '@/assets/images/otherbg.png'
|
||||
|
||||
import mediaForm from "./mediaForm.vue";
|
||||
import mediaDetail from "./mediaDetail.vue";
|
||||
|
||||
const bgStore = useBackgroundStore()
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { media_form, display_form, key_words, media_schedule, media_format, sales_method, business, media_status, approval_document_status } = proxy.useDict("media_form", "display_form", "key_words", "media_schedule", "media_format", "sales_method", "business", "media_status", "approval_document_status")
|
||||
// 省、市、县、镇数据
|
||||
const province = ref([])
|
||||
const city = ref([])
|
||||
const county = ref([])
|
||||
const town = ref([])
|
||||
// 媒体类型数据
|
||||
const mediaTypeOne = ref([])
|
||||
const mediaTypeTwo = ref([])
|
||||
const mediaTypeThree = ref([])
|
||||
|
||||
const showForm = ref(false)
|
||||
const supplierFormRef = ref(null)
|
||||
const mediaFormRef = ref(null)
|
||||
const showDetail = ref(false)
|
||||
const supplierDetailRef = ref(null)
|
||||
const mediaDetailRef = ref(null)
|
||||
// 归属选项
|
||||
const supplierList = ref([])
|
||||
// 多选数据
|
||||
|
|
@ -418,6 +429,58 @@ const data = reactive({
|
|||
|
||||
const { queryParams, form, rules } = toRefs(data)
|
||||
|
||||
// 获取一级媒体类型
|
||||
const getMediaTypeOne = () => {
|
||||
sysMediaTypeListByPid({ parentId: 0 }).then(res => {
|
||||
mediaTypeOne.value = res.data
|
||||
})
|
||||
}
|
||||
// 获取二级媒体类型
|
||||
const getMediaTypeTwo = (value) => {
|
||||
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
||||
queryParams.value.mediaTypeTwo = undefined
|
||||
queryParams.value.mediaTypeThree = undefined
|
||||
mediaTypeTwo.value = res.data
|
||||
})
|
||||
}
|
||||
// 获取三级媒体类型
|
||||
const getMediaTypeThree = (value) => {
|
||||
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
||||
queryParams.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 => {
|
||||
queryParams.value.cityId = undefined
|
||||
queryParams.value.countyId = undefined
|
||||
queryParams.value.townId = undefined
|
||||
city.value = res.data
|
||||
})
|
||||
}
|
||||
// 获取区/县数据
|
||||
const getCountyList = (value) => {
|
||||
sysRegionListByPid({ parentId: value }).then(res => {
|
||||
queryParams.value.countyId = undefined
|
||||
queryParams.value.townId = undefined
|
||||
county.value = res.data
|
||||
})
|
||||
}
|
||||
// 获取镇数据
|
||||
const getTownList = (value) => {
|
||||
sysRegionListByPid({ parentId: value }).then(res => {
|
||||
queryParams.value.townId = undefined
|
||||
town.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
// 折叠展开
|
||||
const unfoldFlag = ref(false)
|
||||
const handleFlod = () => {
|
||||
|
|
@ -466,21 +529,21 @@ const handleDelete = (row) => {
|
|||
const handleOpenAddForm = () => {
|
||||
showForm.value = true
|
||||
nextTick(() => {
|
||||
supplierFormRef.value.formTitle = '新建供应商'
|
||||
mediaFormRef.value.formTitle = '新建媒体信息'
|
||||
})
|
||||
}
|
||||
// 修改
|
||||
const handleUpdate = () => {
|
||||
showForm.value = true
|
||||
nextTick(() => {
|
||||
supplierFormRef.value.formTitle = '编辑供应商'
|
||||
mediaFormRef.value.formTitle = '编辑媒体信息'
|
||||
})
|
||||
}
|
||||
// 详情
|
||||
const handleOpenDetail = () => {
|
||||
showDetail.value = true
|
||||
nextTick(() => {
|
||||
// supplierFormRef.value.formTitle = '编辑供应商'
|
||||
// mediaDetailRef.value.formTitle = '编辑供应商'
|
||||
})
|
||||
}
|
||||
const handleShowList = () => {
|
||||
|
|
@ -527,6 +590,8 @@ const submitFileForm = () => {
|
|||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
getList()
|
||||
getMediaTypeOne()
|
||||
getProvinceList()
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
|
@ -575,7 +640,7 @@ onMounted(() => {
|
|||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #EEEEEE;
|
||||
margin-top: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 30px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
|
|
|||
517
src/views/mediaLibrary/mediaDetail.vue
Normal file
517
src/views/mediaLibrary/mediaDetail.vue
Normal file
|
|
@ -0,0 +1,517 @@
|
|||
<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="ruleFormRef" :model="detailForm" label-width="200px" class="myDetailForm">
|
||||
<div class="supplierTitleContainer">
|
||||
<div class="supplierNameIcon" />
|
||||
<div class="supplierNameTitle">银川金凤区新华联广场门口上方LED</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_department">
|
||||
优势媒体部门
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="状态" prop="business_department">
|
||||
生效中
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体编号" prop="business_department">
|
||||
媒体公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体名称" prop="business_department">
|
||||
公交车身
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="展示形式" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒介形式" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否照明" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="是否实地考察" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="夏季照明时间" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="冬季照明时间" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="日均人流量" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="日均车流量" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="播放时间" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="播放频次" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="批文情况" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="归属" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体尺寸" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="面积" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="高/宽（m）" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="可上画日期" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="当前画面" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体档期" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="城市-商圈" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="地理位置（经纬度）" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="媒体价格" name="2">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="刊例价（元）" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="常规折扣" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="常规净价（元）" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="成本折扣" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="成本净价（元）" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="销售方式" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="CPM" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="SOV" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="价格情况说明" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="付款要求" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商联系人" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="供应商联系方式" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="首次是否包含安装制作费用" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="发票类型" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="税点（%）" prop="business_department">
|
||||
待定
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="评估信息" name="3">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="品牌" prop="business_department">
|
||||
有限责任公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="标签" prop="business_department">
|
||||
长期
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="关键词" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="地标" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="适用人群" prop="business_department">
|
||||
有限责任公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="最短发布期" prop="business_department">
|
||||
长期
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="MR" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="行车可视情况" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="可视距离" prop="business_department">
|
||||
有限责任公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="可视角度（度）" prop="business_department">
|
||||
长期
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体朝向" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="周边广告环境" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="遮挡情况" prop="business_department">
|
||||
有限责任公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="媒体距地面高度" prop="business_department">
|
||||
长期
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="地图显示比例" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="小区" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="优势" prop="business_department">
|
||||
有限责任公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="劣势" prop="business_department">
|
||||
有限责任公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="business_department">
|
||||
有限责任公司
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="附件" name="4">
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="媒体文件" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="媒体图片" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="媒体视频" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="刊例照片" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="媒体链条" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="资质文件" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="splineBar" />
|
||||
<el-row :gutter="30" class="my_form_row">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="盖章刊例" prop="business_department">
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, defineEmits, ref } from 'vue'
|
||||
import { Close } from '@element-plus/icons-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({
|
||||
supplierList: [
|
||||
{ medioName: '银川金凤区新华联广场门口上方LED', medioCode: 'MT2023101100009', medioType: 'LED', medioClass: '电子广告', medioStatus: 1 },
|
||||
{ medioName: '银川金凤区新华联广场门口上方LED', medioCode: 'MT2023101100009', medioType: 'LED', medioClass: '电子广告', medioStatus: 1 }
|
||||
]
|
||||
})
|
||||
const activeNames = ref(['1', '2', '3', '4'])
|
||||
const handleClose = () => {
|
||||
emit('handleShowList')
|
||||
}
|
||||
const handleChange = (val) => {
|
||||
console.log(val)
|
||||
activeNames.value = val
|
||||
}
|
||||
const handleOpenMedio = () => {
|
||||
|
||||
}
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
bgStore.setBgImage(otherbg)
|
||||
});
|
||||
// 暴露方法\属性给父组件
|
||||
defineExpose({
|
||||
|
||||
});
|
||||
</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>
|
||||
895
src/views/mediaLibrary/mediaForm.vue
Normal file
895
src/views/mediaLibrary/mediaForm.vue
Normal file
|
|
@ -0,0 +1,895 @@
|
|||
<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>
|
||||
|
|
@ -150,32 +150,26 @@
|
|||
<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-form-item label="">
|
||||
<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-form-item>
|
||||
<el-col :span="8">
|
||||
<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="8">
|
||||
<el-form-item label="">
|
||||
<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-form-item>
|
||||
<el-col :span="8">
|
||||
<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="8">
|
||||
<el-form-item label="">
|
||||
<el-select v-model="ruleForm.countyId" placeholder="请选择" clearable
|
||||
style="min-width: 30px">
|
||||
<el-option v-for="item in county" :key="item.id" :label="item.name"
|
||||
:value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-col :span="8">
|
||||
<el-select v-model="ruleForm.countyId" placeholder="请选择" 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-row>
|
||||
</el-form-item>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user