283 lines
15 KiB
Vue
283 lines
15 KiB
Vue
<!-- 写字楼 -->
|
|
<template>
|
|
<el-button type="primary" class="submitBtn" v-show="showOptionColumn" style="margin-bottom: 10px;" @click="handleAddPrice">添加报价信息</el-button>
|
|
<el-table v-loading="loading" :data="quotationList" height="362px">
|
|
<el-table-column label="序号" align="center" width="80">
|
|
<template #default="scope">
|
|
{{ scope.$index + 1 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="城市" align="left" prop="cityName" width="150" />
|
|
<el-table-column label="媒体名称" align="left" prop="mediaName" width="200" />
|
|
<el-table-column label="频次" align="left" prop="frequency" width="150" />
|
|
<el-table-column label="发布总量" align="left" prop="releaseTotal" width="150" />
|
|
<el-table-column label="刊例价" align="left" prop="listPrice" width="180" />
|
|
<el-table-column label="刊例价单位" align="left" prop="listPriceUnit" width="150" />
|
|
<el-table-column label="实际购买刊例价" align="left" prop="actualBuyListPrice" width="150" />
|
|
<el-table-column label="实际购买刊例价单位" align="left" prop="actualBuyListPriceUnit" width="150" />
|
|
<el-table-column label="购买周期" align="left" prop="buyCycle" width="150" />
|
|
<el-table-column label="折扣" align="left" prop="discount" width="150" />
|
|
<el-table-column label="媒体总净价" align="center" prop="mediaRegularPrice" width="230" />
|
|
<el-table-column label="首次制作安装费" align="center" prop="firstInstallFee" width="230" />
|
|
<el-table-column label="总制作费" align="center" prop="totalMakeFee" width="160" />
|
|
<el-table-column label="总净价" align="center" prop="totalRegularPrice" width="130" />
|
|
<el-table-column label="总净价单位" align="center" prop="totalRegularPriceUnit" width="130" />
|
|
<el-table-column label="媒体费总价" align="center" prop="mediaFeeTotalPrice" width="130" />
|
|
<el-table-column label="单日覆盖人流量" align="center" prop="dailyAvgPeopleFlow" width="150" />
|
|
<el-table-column label="总曝光/人次" align="center" prop="totalExposure" width="130" />
|
|
<el-table-column label="SOV" align="center" prop="sov" width="150" />
|
|
<el-table-column label="CPM" align="center" prop="cpm" width="150" />
|
|
<el-table-column label="成本折扣" align="center" prop="costDiscount" width="150" />
|
|
<el-table-column label="备注" align="center" prop="remark" width="230" :show-overflow-tooltip="true" />
|
|
<!-- <el-table-column label="录入人员" align="center" prop="postCode" width="150" />
|
|
<el-table-column label="录入时间" align="center" prop="postCode" width="150" /> -->
|
|
<template v-if="showOptionColumn">
|
|
<el-table-column label="操作" width="56" align="center" fixed="right">
|
|
<template #default="scope">
|
|
<el-popover popper-class="my_popover" placement="left-start">
|
|
<div class="popBtns" @click="handleUpdate(scope.$index, scope.row)">修改</div>
|
|
<div class="popBtns" @click="handleDelete(scope.$index)">删除</div>
|
|
<template #reference>
|
|
<img style="cursor: pointer;" :src="scope.row.currentImageSrc"
|
|
@mouseenter="scope.row.currentImageSrc = hoverImageSrc"
|
|
@mouseleave="scope.row.currentImageSrc = defaultImageSrc" />
|
|
</template>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</el-table>
|
|
|
|
<!-- 报价表单 -->
|
|
<el-dialog :title="_title" v-model="open" width="1350px" class="my_dialog" align-center :destroy-on-close="true"
|
|
:close-on-click-modal="false">
|
|
<el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="150px" label-position="top"
|
|
class="myInsertForm">
|
|
<el-row :gutter="30" class="my_form_row">
|
|
<el-col :span="6">
|
|
<el-form-item label="城市" prop="cityName">
|
|
<el-input v-model="form.cityName" placeholder="请输入城市" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="媒体名称" prop="mediaName">
|
|
<el-input v-model="form.mediaName" placeholder="请输入媒体名称" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="频次" prop="frequency">
|
|
<el-input v-model="form.frequency" placeholder="请输入频次" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="发布总量" prop="releaseTotal">
|
|
<el-input v-model="form.releaseTotal" placeholder="请输入发布总量" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="刊例价" prop="listPrice">
|
|
<el-input v-model="form.listPrice" placeholder="请输入刊例价" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="刊例价单位" prop="listPriceUnit">
|
|
<el-input v-model="form.listPriceUnit" placeholder="请输入刊例价单位" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="实际购买刊例价" prop="actualBuyListPrice">
|
|
<el-input v-model="form.actualBuyListPrice" placeholder="请输入实际购买刊例价" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="实际购买刊例价单位" prop="actualBuyListPriceUnit">
|
|
<el-input v-model="form.actualBuyListPriceUnit" placeholder="请输入实际购买刊例价单位" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="购买周期" prop="buyCycle">
|
|
<el-input v-model="form.buyCycle" placeholder="请输入购买周期" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="折扣" prop="discount">
|
|
<el-input v-model="form.discount" placeholder="请输入折扣" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="媒体总净价" prop="mediaRegularPrice">
|
|
<el-input v-model="form.mediaRegularPrice" placeholder="请输入媒体总净价" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="首次制作安装费" prop="firstInstallFee">
|
|
<el-input v-model="form.firstInstallFee" placeholder="请输入首次制作安装费" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="总制作费" prop="totalMakeFee">
|
|
<el-input v-model="form.totalMakeFee" placeholder="请输入总制作费" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="总净价" prop="totalRegularPrice">
|
|
<el-input v-model="form.totalRegularPrice" placeholder="请输入总净价" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="总净价单位" prop="totalRegularPriceUnit">
|
|
<el-input v-model="form.totalRegularPriceUnit" placeholder="请输入总净价单位" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="媒体费总价" prop="mediaFeeTotalPrice">
|
|
<el-input v-model="form.mediaFeeTotalPrice" placeholder="请输入媒体费总价" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="单日覆盖人流量" prop="dailyAvgPeopleFlow">
|
|
<el-input v-model="form.dailyAvgPeopleFlow" placeholder="请输入单日覆盖人流量" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="总曝光/人次" prop="totalExposure">
|
|
<el-input v-model="form.totalExposure" placeholder="请输入总曝光/人次" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="SOV" prop="sov">
|
|
<el-input v-model="form.sov" placeholder="请输入SOV" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="CPM" prop="cpm">
|
|
<el-input v-model="form.cpm" placeholder="请输入CPM" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="成本折扣" prop="costDiscount">
|
|
<el-input v-model="form.costDiscount" placeholder="请输入成本折扣" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="供应商" prop="supplier">
|
|
<el-input v-model="form.supplier" placeholder="请输入供应商" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model="form.remark" :rows="5" type="textarea" placeholder="请输入备注"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button class="my-cancel-btn" @click="open = false">取 消</el-button>
|
|
<el-button class="my-confirm-btn" type="primary" @click="handleSubmit">确 定</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, nextTick, defineEmits, ref } from 'vue'
|
|
import optionIcon from '@/assets/images/optionIcon.png'
|
|
import optionIconHover from '@/assets/images/optionIconHover.png'
|
|
import { mediaPrice } from "@/api/mediaLibrary"
|
|
|
|
const emit = defineEmits(['setCompetOfferMediaPrice']);
|
|
const { proxy } = getCurrentInstance()
|
|
const editRowIndex = ref(null)
|
|
const showOptionColumn = ref(true)
|
|
// 报价表格操作图标
|
|
const defaultImageSrc = ref(optionIcon);
|
|
const hoverImageSrc = ref(optionIconHover);
|
|
const _title = ref(null)
|
|
const open = ref(false)
|
|
const data = reactive({
|
|
form: {},
|
|
rules: {
|
|
cityName: [{ required: true, message: "请输入城市", trigger: "blur" }],
|
|
mediaName: [{ required: true, message: "请输入媒体名称", trigger: "blur" }],
|
|
frequency: [{ required: true, message: "请输入频次", trigger: "blur" }],
|
|
releaseTotal: [{ required: true, message: "请输入发布总量", trigger: "blur" }],
|
|
listPrice: [{ required: true, message: "请输入刊例价", trigger: "blur" }],
|
|
listPriceUnit: [{ required: true, message: "请输入刊例价单位", trigger: "blur" }],
|
|
actualBuyListPrice: [{ required: true, message: "请输入实际购买刊例价", trigger: "blur" }],
|
|
actualBuyListPriceUnit: [{ required: true, message: "请输入实际购买刊例价单位", trigger: "blur" }],
|
|
buyCycle: [{ required: true, message: "请输入购买周期", trigger: "blur" }],
|
|
discount: [{ required: true, message: "请输入折扣", trigger: "blur" }],
|
|
mediaRegularPrice: [{ required: true, message: "请输入媒体总净价", trigger: "blur" }],
|
|
firstInstallFee: [{ required: true, message: "请输入首次制作安装费", trigger: "blur" }],
|
|
totalMakeFee: [{ required: true, message: "请输入总制作费", trigger: "blur" }],
|
|
totalRegularPrice: [{ required: true, message: "请输入总净价", trigger: "blur" }],
|
|
totalRegularPriceUnit: [{ required: true, message: "请输入总净价单位", trigger: "blur" }],
|
|
mediaFeeTotalPrice: [{ required: true, message: "请输入媒体费总价", trigger: "blur" }],
|
|
dailyAvgPeopleFlow: [{ required: true, message: "请输入单日覆盖人流量", trigger: "blur" }],
|
|
totalExposure: [{ required: true, message: "请输入总曝光/人次", trigger: "blur" }],
|
|
sov: [{ required: true, message: "请输入SOV", trigger: "blur" }],
|
|
cpm: [{ required: true, message: "请输入CPM", trigger: "blur" }],
|
|
costDiscount: [{ required: true, message: "请输入成本折扣", trigger: "blur" }],
|
|
supplier: [{ required: true, message: "请输入供应商", trigger: "blur" }],
|
|
remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
|
|
}
|
|
})
|
|
const { form, rules } = toRefs(data)
|
|
// 报价信息列表
|
|
const loading = ref(false)
|
|
const quotationList = ref([])
|
|
const handleAddPrice = () => {
|
|
_title.value = '添加报价信息'
|
|
form.value.mediaType = 6
|
|
open.value = true
|
|
}
|
|
const handleUpdate = (index, row) => {
|
|
_title.value = '编辑报价信息'
|
|
editRowIndex.value = index
|
|
form.value = row
|
|
open.value = true
|
|
}
|
|
const handleDelete = (index) => {
|
|
proxy.$modal.confirm('是否确认删除这条报价信息吗？').then(() => {
|
|
quotationList.value.splice(index, 1)
|
|
emit('setCompetOfferMediaPrice', 6, quotationList.value)
|
|
proxy.$modal.msgSuccess("删除成功")
|
|
}).catch(() => { })
|
|
|
|
}
|
|
const handleSubmit = () => {
|
|
proxy.$refs["ruleFormRef"].validate(valid => {
|
|
if (valid) {
|
|
form.value.currentImageSrc = defaultImageSrc.value
|
|
if (editRowIndex.value !== null && editRowIndex.value !== undefined) {
|
|
quotationList.value[editRowIndex.value] = form.value
|
|
} else {
|
|
quotationList.value.push(form.value)
|
|
}
|
|
form.value = {}
|
|
open.value = false
|
|
emit('setCompetOfferMediaPrice', 6, quotationList.value)
|
|
}
|
|
})
|
|
}
|
|
// 获取历史报价
|
|
const getMediaPrice = (_mediaId, _showOptionColumn) => {
|
|
console.log('走了这里？')
|
|
showOptionColumn.value = _showOptionColumn
|
|
if (_mediaId) {
|
|
mediaPrice({ mediaId: _mediaId }).then(res => {
|
|
console.log('查询到报价', res.data)
|
|
quotationList.value = res.data.filter(item => item.mediaType == 6)
|
|
console.log('过滤后数据', quotationList.value)
|
|
quotationList.value.forEach(element => {
|
|
element.currentImageSrc = defaultImageSrc.value
|
|
});
|
|
})
|
|
}
|
|
}
|
|
// 暴露方法\属性给父组件
|
|
defineExpose({
|
|
getMediaPrice
|
|
});
|
|
</script> |