299 lines
16 KiB
Vue
299 lines
16 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="60">
|
|
<template #default="scope">
|
|
{{ scope.$index + 1 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="年度" align="left" prop="mediaYear" width="100" />
|
|
<el-table-column label="城市/市场" align="left" prop="cityName" width="150" />
|
|
<el-table-column label="媒体大类" align="left" prop="mediaCategory" 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="listPrice" width="160" />
|
|
<el-table-column label="单位" align="left" prop="listPriceUnit" width="150" />
|
|
<el-table-column label="实际购买频次" align="left" prop="actualBuyFrequency" width="150" />
|
|
<el-table-column label="实际购买刊例价" align="left" prop="actualBuyListPrice" 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="totalMakeFee" width="160" />
|
|
<el-table-column label="总净价" align="center" prop="totalRegularPrice" width="130" />
|
|
<el-table-column label="单日覆盖人流量" align="center" prop="dailyAvgPeopleFlow" width="150" />
|
|
<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="remark" width="150" />
|
|
<el-table-column label="是否框内" align="center" prop="hasInBox" width="150">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.hasInBox == 0">否</span>
|
|
<span v-if="scope.row.hasInBox == 1">是</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="成本" align="center" prop="cost" width="150" />
|
|
<el-table-column label="制作成本" align="center" prop="makeCost" width="150" />
|
|
<el-table-column label="供应商" align="center" prop="supplier" width="150" />
|
|
<el-table-column label="项目名称" align="left" prop="projectName" width="150" />
|
|
<!-- <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="mediaYear">
|
|
<el-date-picker v-model="form.mediaYear" type="year" format="YYYY" value-format="YYYY"
|
|
placeholder="请选择年度" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<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="mediaCategory">
|
|
<el-input v-model="form.mediaCategory" 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="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="actualBuyFrequency">
|
|
<el-input v-model="form.actualBuyFrequency" 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="buyCycle">
|
|
<el-input-number v-model="form.buyCycle" placeholder="请输入购买周期(天)" style="width: 100%;" />
|
|
</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="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="dailyAvgPeopleFlow">
|
|
<el-input v-model="form.dailyAvgPeopleFlow" 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="hasInBox">
|
|
<el-select v-model="form.hasInBox" placeholder="请选择是否框内" clearable>
|
|
<el-option v-for="item in hasInBoxList" :key="item.value" :label="item.label"
|
|
:value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="成本" prop="cost">
|
|
<el-input v-model="form.cost" placeholder="请输入成本" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="制作成本" prop="makeCost">
|
|
<el-input v-model="form.makeCost" 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="12">
|
|
<el-form-item label="项目名称" prop="projectName">
|
|
<el-input v-model="form.projectName" 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 hasInBoxList = ref([
|
|
{ value: 0, label: '否' },
|
|
{ value: 1, label: '是' },
|
|
])
|
|
const data = reactive({
|
|
form: {},
|
|
rules: {
|
|
mediaYear: [{ required: true, message: "请输入年度", trigger: "change" }],
|
|
cityName: [{ required: true, message: "请输入城市/市场", trigger: "blur" }],
|
|
mediaCategory: [{ required: true, message: "请输入媒体大类", trigger: "blur" }],
|
|
mediaName: [{ required: true, message: "请输入媒体形式/名称", trigger: "blur" }],
|
|
frequency: [{ required: true, message: "请输入频次", trigger: "blur" }],
|
|
listPrice: [{ required: true, message: "请输入统一对外刊例价", trigger: "blur" }],
|
|
listPriceUnit: [{ required: true, message: "请输入单位", trigger: "blur" }],
|
|
actualBuyFrequency: [{ required: true, message: "请输入实际购买频次", trigger: "blur" }],
|
|
actualBuyListPrice: [{ required: true, message: "请输入实际购买刊例价", trigger: "blur" }],
|
|
buyCycle: [{ required: true, message: "请输入购买周期(天)", trigger: "change" }],
|
|
discount: [{ required: true, message: "请输入折扣", trigger: "blur" }],
|
|
mediaRegularPrice: [{ required: true, message: "请输入媒体总净价(元/购买周期)", trigger: "blur" }],
|
|
totalMakeFee: [{ required: true, message: "请输入总制作费(元/次)", trigger: "blur" }],
|
|
totalRegularPrice: [{ required: true, message: "请输入总净价", trigger: "blur" }],
|
|
dailyAvgPeopleFlow: [{ required: true, message: "请输入单日覆盖人流量", trigger: "blur" }],
|
|
sov: [{ required: true, message: "请输入SOV", trigger: "blur" }],
|
|
cpm: [{ required: true, message: "请输入CPM", trigger: "blur" }],
|
|
hasInBox: [{ required: true, message: "请输入是否框内", trigger: "change" }],
|
|
cost: [{ required: true, message: "请输入成本", trigger: "blur" }],
|
|
makeCost: [{ required: true, message: "请输入制作成本", trigger: "blur" }],
|
|
supplier: [{ required: true, message: "请输入供应商", trigger: "blur" }],
|
|
projectName: [{ 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 = 0
|
|
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', 0, 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', 0, quotationList.value)
|
|
}
|
|
})
|
|
}
|
|
// 获取历史报价
|
|
const getMediaPrice = (_mediaId, _showOptionColumn) => {
|
|
console.log('进来了？', _mediaId, _showOptionColumn)
|
|
showOptionColumn.value = _showOptionColumn
|
|
if (_mediaId) {
|
|
mediaPrice({ mediaId: _mediaId }).then(res => {
|
|
console.log('历史报价', res)
|
|
quotationList.value = res.data.filter(item => item.mediaType == 0)
|
|
quotationList.value.forEach(element => {
|
|
element.currentImageSrc = defaultImageSrc.value
|
|
});
|
|
console.log('历史报价结果', quotationList.value)
|
|
})
|
|
}
|
|
}
|
|
// 暴露方法\属性给父组件
|
|
defineExpose({
|
|
getMediaPrice
|
|
});
|
|
</script> |