329 lines
18 KiB
Vue
329 lines
18 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" border 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="center" prop="cityName" width="90" />
|
|
<el-table-column label="资源描述" align="left" prop="resourceRemark" width="150" />
|
|
<el-table-column label="媒体名称" align="left" prop="mediaName" width="150" />
|
|
<el-table-column label="频次" align="center" prop="frequency" width="100" />
|
|
<el-table-column label="发布总量" align="right" prop="releaseTotal" width="120" />
|
|
<el-table-column label="刊例价" align="right" prop="listPrice" width="120" />
|
|
<el-table-column label="刊例价单位" align="center" prop="listPriceUnit" width="120" />
|
|
<el-table-column label="实际购买刊例价" align="right" prop="actualBuyListPrice" width="140" />
|
|
<el-table-column label="实际购买刊例价单位" align="center" prop="actualBuyListPriceUnit" width="170" />
|
|
<el-table-column label="购买周期" align="right" prop="buyCycle" width="120" />
|
|
<el-table-column label="折扣" align="center" prop="discount" width="100" />
|
|
<el-table-column label="媒体总净价" align="right" prop="mediaRegularPrice" width="120" />
|
|
<el-table-column label="首次制作安装费" align="right" prop="firstInstallFee" width="150" />
|
|
<el-table-column label="总制作费" align="right" prop="totalMakeFee" width="130" />
|
|
<el-table-column label="总净价" align="right" prop="totalRegularPrice" width="120" />
|
|
<el-table-column label="总净价单位" align="center" prop="totalRegularPriceUnit" width="130" />
|
|
<el-table-column label="媒体费单价" align="right" prop="mediaFeeUnitPrice" width="130" />
|
|
<el-table-column label="制作费" align="right" prop="makeFee" width="130" />
|
|
<el-table-column label="媒体费总价" align="right" prop="mediaFeeTotalPrice" width="130" />
|
|
<el-table-column label="最终媒体费优惠价" align="right" prop="finalMediaFeeDiscountPrice" width="170" />
|
|
<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="100" />
|
|
<el-table-column label="CPM" align="center" prop="cpm" width="100" />
|
|
<el-table-column label="是否亮灯" align="left" prop="hasLighting" width="130" />
|
|
<el-table-column label="单面/双面" align="left" prop="oddEven" width="130" />
|
|
<el-table-column label="中途换画制作费" align="right" prop="changeDrawMakeFee" width="150" />
|
|
<el-table-column label="备注" align="left" prop="remark" width="230" :show-overflow-tooltip="true" />
|
|
<el-table-column label="录入人员" align="center" prop="createBy" width="100" />
|
|
<el-table-column label="录入时间" align="center" prop="createTime" width="210" />
|
|
<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="resourceRemark">
|
|
<el-input v-model="form.resourceRemark" 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="unitPrice">
|
|
<el-input v-model="form.unitPrice" 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="mediaFeeUnitPrice">
|
|
<el-input v-model="form.mediaFeeUnitPrice" placeholder="请输入媒体费单价" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="制作费" prop="makeFee">
|
|
<el-input v-model="form.makeFee" 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="finalMediaFeeDiscountPrice">
|
|
<el-input v-model="form.finalMediaFeeDiscountPrice" 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="hasLighting">
|
|
<el-input v-model="form.hasLighting" placeholder="请输入是否亮灯" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="单面/双面" prop="oddEven">
|
|
<el-input v-model="form.oddEven" placeholder="请输入单面/双面" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="中途换画制作费" prop="changeDrawMakeFee">
|
|
<el-input v-model="form.changeDrawMakeFee" 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" }],
|
|
resourceRemark: [{ 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" }],
|
|
unitPrice: [{ required: true, message: "请输入单价", trigger: "blur" }],
|
|
totalRegularPrice: [{ required: true, message: "请输入总净价", trigger: "blur" }],
|
|
totalRegularPriceUnit: [{ required: true, message: "请输入总净价单位", trigger: "blur" }],
|
|
mediaFeeUnitPrice: [{ required: true, message: "请输入媒体费单价", trigger: "blur" }],
|
|
makeFee: [{ required: true, message: "请输入制作费", trigger: "blur" }],
|
|
mediaFeeTotalPrice: [{ required: true, message: "请输入媒体费总价", trigger: "blur" }],
|
|
finalMediaFeeDiscountPrice: [{ 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" }],
|
|
hasLighting: [{ required: true, message: "请选择是否亮灯", trigger: "blur" }],
|
|
oddEven: [{ required: true, message: "请输入单面/双面", trigger: "blur" }],
|
|
changeDrawMakeFee: [{ 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 = 2
|
|
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', 2, 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', 2, quotationList.value)
|
|
}
|
|
})
|
|
}
|
|
// 获取历史报价
|
|
const getMediaPrice = (_mediaId, _showOptionColumn) => {
|
|
showOptionColumn.value = _showOptionColumn
|
|
if (_mediaId) {
|
|
mediaPrice({ mediaId: _mediaId }).then(res => {
|
|
quotationList.value = res.data.filter(item => item.mediaType == 2)
|
|
quotationList.value.forEach(element => {
|
|
element.currentImageSrc = defaultImageSrc.value
|
|
});
|
|
})
|
|
}
|
|
}
|
|
// 暴露方法\属性给父组件
|
|
defineExpose({
|
|
getMediaPrice
|
|
});
|
|
</script> |