|
@@ -1,13 +1,13 @@
|
|
|
<template>
|
|
|
<div class="toutiaoBatch">
|
|
|
- <keep-alive>
|
|
|
+ <keep-alive>
|
|
|
<div class="tabs">
|
|
|
<a-tabs v-model="tabkey" @change="callback">
|
|
|
- <a-tab-pane key="group" tab="广告组">
|
|
|
+ <a-tab-pane key="group" tab="广告组">
|
|
|
</a-tab-pane>
|
|
|
- <a-tab-pane key="plan" tab="广告计划">
|
|
|
+ <a-tab-pane key="plan" tab="广告计划">
|
|
|
</a-tab-pane>
|
|
|
- <a-tab-pane key="idea" tab="广告创意">
|
|
|
+ <a-tab-pane key="idea" tab="广告创意">
|
|
|
</a-tab-pane>
|
|
|
<a-button type='primary' slot="tabBarExtraContent" @click="goBatch">
|
|
|
+ 头条批量创建
|
|
@@ -17,7 +17,7 @@
|
|
|
</keep-alive>
|
|
|
<div class="topOptions">
|
|
|
<span class="OptinItem">
|
|
|
- <a-select style="width: 120px" @change="statusChange" placeholder="请选择状态">
|
|
|
+ <a-select style="width: 120px" @change="statusChange" placeholder="请选择状态">
|
|
|
<a-select-option value="open" >
|
|
|
开
|
|
|
</a-select-option>
|
|
@@ -26,7 +26,7 @@
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</span>
|
|
|
- <span class="OptinItem">
|
|
|
+ <span class="OptinItem">
|
|
|
<a-input-search placeholder="请选择媒体账户" style="width: 200px" v-model="account" />
|
|
|
</span>
|
|
|
<span class="OptinItem">
|
|
@@ -42,7 +42,7 @@
|
|
|
</div>
|
|
|
<div class="tableArea">
|
|
|
<div class="tableOption">
|
|
|
- <span class="OptinItem">
|
|
|
+ <span class="OptinItem">
|
|
|
<a-tooltip>
|
|
|
<template slot="title" :getPopupContainer='getPopupContainer'>
|
|
|
点我就可以批量启动、暂停、删除你的选择哦~
|
|
@@ -51,7 +51,7 @@
|
|
|
</a-tooltip>
|
|
|
</span>
|
|
|
<span class="OptinItem">
|
|
|
- <a-select style="width: 120px" @change="optChange" placeholder="" :disabled='selectDisable'>
|
|
|
+ <a-select style="width: 120px" @change="optChange" placeholder="" :disabled='selectDisable'>
|
|
|
<a-select-option value="open" >
|
|
|
启动
|
|
|
</a-select-option>
|
|
@@ -81,36 +81,36 @@
|
|
|
<div slot="content">
|
|
|
<span style='font-weight:700;margin-right:15px;font-size:15px'>预算</span>
|
|
|
<a-radio-group v-model="radioValue" @change="radioChange">
|
|
|
- <a-radio value="unlimit">不限</a-radio>
|
|
|
- <a-radio value="dayBudget">日预算</a-radio>
|
|
|
+ <a-radio value="BUDGET_MODE_INFINITE">不限</a-radio>
|
|
|
+ <a-radio value="BUDGET_MODE_DAY">日预算</a-radio>
|
|
|
</a-radio-group>
|
|
|
<span v-show="radioValue=='dayBudget'">预计金额: <a-input-number :min="0" v-model="dayBudgetValue" :step="0.1" @change="budgetChange" size="small" style='margin-right:20px' /></span>
|
|
|
<a-button type='default' @click="showPricecancel" style='margin-right:10px'>取消</a-button>
|
|
|
<a-button type='primary' @click="showPriceOk" class="ok">保存</a-button>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<a-button type='default' v-if="tabkey=='group'" class="ok">更改预算</a-button>
|
|
|
</a-popover>
|
|
|
<a-button type='default' @click="changebudget" v-if="tabkey=='plan'" class="ok">更改预算</a-button>
|
|
|
<a-button type='default' @click="changeofferPrice" v-show="tabkey=='plan'">更改出价</a-button>
|
|
|
-
|
|
|
+
|
|
|
</span>
|
|
|
- <span class="optionBtn">
|
|
|
+ <span class="optionBtn">
|
|
|
<a-button type='primary' @click="reset">自定义列</a-button>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="table">
|
|
|
- <a-table
|
|
|
- :columns="columns"
|
|
|
- :data-source="data"
|
|
|
- :row-selection="rowSelection"
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="data"
|
|
|
+ :row-selection="rowSelection"
|
|
|
bordered
|
|
|
>
|
|
|
- <template slot="campaignName" slot-scope="text,record">
|
|
|
- <editableCell :text="text" slotName='campaignName' @change="onCellChange(record.key, 'campaignName', $event)" />
|
|
|
+ <template slot="name" slot-scope="text,record">
|
|
|
+ <editableCell :text="text" slotName='campaignName' @change="onCellChange(record.key, 'campaignName', $event)" />
|
|
|
</template>
|
|
|
- <span slot="groupBudget" slot-scope="text,record">
|
|
|
- <editableCell :text="text" slotName='groupBudget' @change="onCellChange(record.key, 'groupBudget', $event)" />
|
|
|
+ <span slot="budget" slot-scope="text,record">
|
|
|
+ <editableCell :text="text" slotName='groupBudget' @change="onCellChange(record.key, 'groupBudget', $event)" />
|
|
|
</span>
|
|
|
<span slot="status" slot-scope="text,record">
|
|
|
<a-switch size="default" :checked=text @change="switchChange(text,record)"/>
|
|
@@ -130,7 +130,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 出价的模态框 -->
|
|
|
- <div class="batchModal">
|
|
|
+ <div class="batchModal">
|
|
|
<a-modal v-model="offerPriceVisiable" :title="'批量修改'+ModalTitle" @ok="handleOk" width='55%' id="batchModal" >
|
|
|
<div class="selectePlan">已选{{}}个广告计划</div>
|
|
|
<div class="modifyRules">
|
|
@@ -164,7 +164,7 @@
|
|
|
:<a-input-number :min="0" v-model="inputValue" :step="0.1" @change="budgetChange" size="small" :disabled="modifyRulesValue=='total'" /> 元
|
|
|
</span>
|
|
|
<span slot="currentCost" slot-scope="currentCost">{{ currentCost | decimalsHandle }}</span>
|
|
|
- <span slot="currentBudget" slot-scope="text">
|
|
|
+ <span slot="currentBudget" slot-scope="text">
|
|
|
<span v-if="ModalTitle=='出价'">oCPM: {{text | decimalsHandle}}</span>
|
|
|
<span v-else>日预算:{{ text | decimalsHandle }}</span>
|
|
|
</span>
|
|
@@ -176,14 +176,14 @@
|
|
|
|
|
|
<!-- 复制计划的弹出框 -->
|
|
|
<a-modal v-model="copyPlanVisiable" title="复制计划" @ok="copyPlanOk" id="copyModal" :maskClosable='false'>
|
|
|
-
|
|
|
+
|
|
|
<p class="copyTip">复制说明:适用于批量复制多个广告计划,默认同事复制所属创意。此类型不直接跨广告投放账号复制,且只能复制完成后逐一修改</p>
|
|
|
<p style="font-weight:700;font-size:15px">被复制广告计划:<span>{{}}</span></p>
|
|
|
- <p><span class="copyName"><b class="copyKeyStart">*</b> 复制个数:</span>
|
|
|
+ <p><span class="copyName"><b class="copyKeyStart">*</b> 复制个数:</span>
|
|
|
<a-input-number :min="1" :max="10" v-model="copyNum" style="width:250px" />
|
|
|
-
|
|
|
+
|
|
|
</p>
|
|
|
- <p><span class="copyName"><b class="copyKeyStart">*</b>复制到广告组:</span>
|
|
|
+ <p><span class="copyName"><b class="copyKeyStart">*</b>复制到广告组:</span>
|
|
|
<a-select size="default" default-value="a1" style="width: 250px" v-model="copyGroup" >
|
|
|
<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
|
|
|
{{ (i + 9).toString(36) + i }}
|
|
@@ -222,7 +222,7 @@ let modifyTableCol=[
|
|
|
dataIndex: 'changeBudget',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'changeBudget' },
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
]
|
|
|
|
|
@@ -236,38 +236,46 @@ const columns = [
|
|
|
},
|
|
|
{
|
|
|
title: '广告组名称',
|
|
|
- dataIndex: 'campaignName',
|
|
|
- key: 'campaignName',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
align: 'center',
|
|
|
width:450,
|
|
|
- scopedSlots: { customRender: 'campaignName' }
|
|
|
+ scopedSlots: { customRender: 'name' }
|
|
|
},
|
|
|
{
|
|
|
title: '广告组ID',
|
|
|
- dataIndex: 'advantageID',
|
|
|
- key: 'advantageID',
|
|
|
+ dataIndex: 'id',
|
|
|
+ key: 'id',
|
|
|
align: 'center',
|
|
|
},
|
|
|
{
|
|
|
title: '推广目的',
|
|
|
- dataIndex: 'promotionPurpose',
|
|
|
- key: 'promotionPurpose',
|
|
|
+ dataIndex: 'landingType_dictText',
|
|
|
+ key: 'landingType_text',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '预算类型',
|
|
|
+ dataIndex: 'budgetMode_dictText',
|
|
|
+ key: 'budgetMode_text',
|
|
|
align: 'center',
|
|
|
+ width:250,
|
|
|
+ scopedSlots: { customRender: 'budgetMode' }
|
|
|
},
|
|
|
{
|
|
|
title: '组预算(元)',
|
|
|
- dataIndex: 'groupBudget',
|
|
|
- key: 'groupBudget',
|
|
|
+ dataIndex: 'budget',
|
|
|
+ key: 'budget',
|
|
|
align: 'center',
|
|
|
width:250,
|
|
|
- scopedSlots: { customRender: 'groupBudget' }
|
|
|
+ scopedSlots: { customRender: 'budget' }
|
|
|
},
|
|
|
{
|
|
|
title: '创建时间',
|
|
|
- dataIndex: 'creatTime',
|
|
|
- key: 'creatTime',
|
|
|
+ dataIndex: 'campaignCreateTime',
|
|
|
+ key: 'campaignCreateTime',
|
|
|
align: 'center',
|
|
|
- scopedSlots: { customRender: 'creatTime' }
|
|
|
+ scopedSlots: { customRender: 'campaignCreateTime' }
|
|
|
},
|
|
|
];
|
|
|
const planColumns = [
|
|
@@ -295,19 +303,19 @@ const planColumns = [
|
|
|
},
|
|
|
{
|
|
|
title: '计划ID',
|
|
|
- dataIndex: 'planID',
|
|
|
+ dataIndex: 'planID',
|
|
|
key: 'planID',
|
|
|
align: 'center',
|
|
|
},
|
|
|
{
|
|
|
title: '账户',
|
|
|
- dataIndex: 'accountName',
|
|
|
+ dataIndex: 'accountName',
|
|
|
key: 'promotionPurpose',
|
|
|
align: 'center',
|
|
|
},
|
|
|
{
|
|
|
title: '计划预算(元)',
|
|
|
- dataIndex: 'planBudget',
|
|
|
+ dataIndex: 'planBudget',
|
|
|
key: 'planBudget',
|
|
|
align: 'center',
|
|
|
width:150,
|
|
@@ -315,7 +323,7 @@ const planColumns = [
|
|
|
},
|
|
|
{
|
|
|
title: '出价(元)',
|
|
|
- dataIndex: 'planoffer',
|
|
|
+ dataIndex: 'planoffer',
|
|
|
key: 'planoffer',
|
|
|
align: 'center',
|
|
|
width:150,
|
|
@@ -323,21 +331,21 @@ const planColumns = [
|
|
|
},
|
|
|
{
|
|
|
title: '投放方式',
|
|
|
- dataIndex: 'Launchmode',
|
|
|
+ dataIndex: 'Launchmode',
|
|
|
key: 'Launchmode',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'Launchmode' }
|
|
|
},
|
|
|
{
|
|
|
title: '投放时间',
|
|
|
- dataIndex: 'LaunchTime',
|
|
|
+ dataIndex: 'LaunchTime',
|
|
|
key: 'LaunchTime',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'LaunchTime' }
|
|
|
},
|
|
|
{
|
|
|
title: '所属广告组',
|
|
|
- dataIndex: 'parentGroup',
|
|
|
+ dataIndex: 'parentGroup',
|
|
|
key: 'parentGroup',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'parentGroup' }
|
|
@@ -357,57 +365,57 @@ const ideaColumns = [
|
|
|
key: 'options',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'options' }
|
|
|
- },
|
|
|
+ },
|
|
|
{
|
|
|
title: '创意ID',
|
|
|
- dataIndex: 'ideaID',
|
|
|
+ dataIndex: 'ideaID',
|
|
|
key: 'ideID',
|
|
|
align: 'center',
|
|
|
},
|
|
|
{
|
|
|
title: '广告创意',
|
|
|
- dataIndex: 'ideID',
|
|
|
+ dataIndex: 'ideID',
|
|
|
key: 'ideaID',
|
|
|
align: 'center',
|
|
|
},
|
|
|
{
|
|
|
title: '创意方式',
|
|
|
- dataIndex: 'iaID',
|
|
|
+ dataIndex: 'iaID',
|
|
|
key: 'idaID',
|
|
|
align: 'center',
|
|
|
},
|
|
|
{
|
|
|
title: '账户',
|
|
|
- dataIndex: 'accountName',
|
|
|
+ dataIndex: 'accountName',
|
|
|
key: 'promotionPurpose',
|
|
|
align: 'center',
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
{
|
|
|
title: '投放时间',
|
|
|
- dataIndex: 'LaunchTime',
|
|
|
+ dataIndex: 'LaunchTime',
|
|
|
key: 'LaunchTime',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'LaunchTime' }
|
|
|
},
|
|
|
{
|
|
|
title: '投放位置',
|
|
|
- dataIndex: 'LaunchPosition',
|
|
|
+ dataIndex: 'LaunchPosition',
|
|
|
key: 'LaunchPosition',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'LaunchPosition' }
|
|
|
},
|
|
|
{
|
|
|
title: '所属计划',
|
|
|
- dataIndex: 'parentPlan',
|
|
|
+ dataIndex: 'parentPlan',
|
|
|
key: 'parentPlan',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'parentPlan' }
|
|
|
},
|
|
|
{
|
|
|
title: '所属广告组',
|
|
|
- dataIndex: 'parentGroup',
|
|
|
+ dataIndex: 'parentGroup',
|
|
|
key: 'parentGroup',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'parentGroup' }
|
|
@@ -478,11 +486,11 @@ export default {
|
|
|
},
|
|
|
onSelect: (record, selected, selectedRows) => {
|
|
|
console.log(record, selected, selectedRows);
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
onSelectAll: (selected, selectedRows, changeRows) => {
|
|
|
console.log(selected, selectedRows, changeRows);
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
},
|
|
|
editID:0,
|
|
@@ -498,26 +506,33 @@ export default {
|
|
|
],
|
|
|
modifyTableCol,
|
|
|
modifyTableloading:false,
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
//复制计划
|
|
|
copyPlanVisiable:false,
|
|
|
copyRecord:null,
|
|
|
copyNum:1,//复制个数
|
|
|
copyGroup:'',
|
|
|
+ url: {
|
|
|
+ campaignList: "/ctop/byteDanceCampaign/list",
|
|
|
+ planList: "/ctop/byteDanceAdvertisePlan/list",
|
|
|
+ creativeList: "/ctop/byteDanceCreative/list",
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
methods: {
|
|
|
//tab切换页的函数
|
|
|
callback(key) {
|
|
|
console.log(key);
|
|
|
if(key=='plan'){
|
|
|
- this.columns=planColumns
|
|
|
+ this.columns=planColumns;
|
|
|
+ let params = {};
|
|
|
+ this.refreshCampaignList();
|
|
|
}else if(key=='group'){
|
|
|
- this.columns=columns
|
|
|
+ this.columns=columns;
|
|
|
}else if(key=='idea'){
|
|
|
- this.columns=ideaColumns
|
|
|
+ this.columns=ideaColumns;
|
|
|
}
|
|
|
},
|
|
|
//跳转到批量页面
|
|
@@ -525,7 +540,7 @@ export default {
|
|
|
|
|
|
},
|
|
|
//状态改变
|
|
|
- statusChange(value){
|
|
|
+ statusChange(value){
|
|
|
console.log(value);
|
|
|
|
|
|
},
|
|
@@ -575,7 +590,7 @@ export default {
|
|
|
ele.status=false;
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
})
|
|
|
}
|
|
|
}else if(this.optValue=='open'){
|
|
@@ -591,7 +606,7 @@ export default {
|
|
|
}
|
|
|
console.log(this.data)
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
//确定删除
|
|
|
confirm(e) {
|
|
@@ -641,9 +656,9 @@ export default {
|
|
|
this.ModalTitle='出价'
|
|
|
typeValue='出价';
|
|
|
this.modifyTableCol[2].title='出价';
|
|
|
-
|
|
|
+
|
|
|
this.modifyTableCol[3].title='统一修改出价';
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
handleOk(e) {
|
|
|
console.log(e);
|
|
@@ -667,14 +682,14 @@ export default {
|
|
|
// changecampaignName(text,record){
|
|
|
// console.log(text,record)
|
|
|
// },
|
|
|
-
|
|
|
+
|
|
|
onCellChange(key, dataIndex, value) {
|
|
|
console.log(key, dataIndex, value)
|
|
|
const dataSource = [...this.data];
|
|
|
const target = dataSource.find(item => item.key === key);
|
|
|
- if (target) {
|
|
|
+ if (target) {
|
|
|
target[dataIndex] = value;
|
|
|
- this.data = dataSource;
|
|
|
+ this.data = dataSource;
|
|
|
}
|
|
|
console.log(this.data)
|
|
|
},
|
|
@@ -690,10 +705,24 @@ export default {
|
|
|
this.copyPlanVisiable = false;
|
|
|
console.log(this.copyNum,'---',this.copyGroup)
|
|
|
},
|
|
|
+ refreshCampaignList(params){
|
|
|
+ getAction(this.url.campaignList, params).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.success) {
|
|
|
+ this.data = res.result.records;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ console.log(res.message);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
console.log(this);
|
|
|
this.data=data;
|
|
|
+ let params = {}
|
|
|
+ //初始
|
|
|
+ this.refreshCampaignList(params);
|
|
|
},
|
|
|
filters: {
|
|
|
toPercentage(val) {
|
|
@@ -708,17 +737,17 @@ export default {
|
|
|
}
|
|
|
else{
|
|
|
return 0
|
|
|
- }
|
|
|
+ }
|
|
|
},
|
|
|
//保留两位小数并且变成货币格式
|
|
|
decimalsHandle(val){
|
|
|
-
|
|
|
+
|
|
|
if(val && typeof val !='string'){
|
|
|
if(val>=0){
|
|
|
val=parseFloat(val).toFixed(2);
|
|
|
let numberStr = val.toString()
|
|
|
let str = numberStr.split('.')
|
|
|
-
|
|
|
+
|
|
|
let str0=str[0].split('').reverse();
|
|
|
for (let i = 0; i < str0.length; i++) {
|
|
|
if ((i + 1) % 4 === 0) {
|
|
@@ -730,13 +759,13 @@ export default {
|
|
|
for (let j = 0; j < str0.length; j++) {
|
|
|
handleResult += str0[j]
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
return handleResult+'.'+str[1]
|
|
|
}else{
|
|
|
val=parseFloat(val).toFixed(2);
|
|
|
let numberStr = val.toString()
|
|
|
let str = numberStr.split('.')
|
|
|
-
|
|
|
+
|
|
|
let str0=str[0].substr(1).split('').reverse();
|
|
|
for (let i = 0; i < str0.length; i++) {
|
|
|
if ((i + 1) % 4 === 0) {
|
|
@@ -748,16 +777,16 @@ export default {
|
|
|
for (let j = 0; j < str0.length; j++) {
|
|
|
handleResult += str0[j]
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
return '-'+handleResult+'.'+str[1]
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}else if(typeof val =='string'){
|
|
|
return val
|
|
|
}
|
|
|
else{
|
|
|
return 0
|
|
|
- }
|
|
|
+ }
|
|
|
},
|
|
|
//变成货币格式
|
|
|
formatCurrency(val){
|
|
@@ -781,7 +810,7 @@ export default {
|
|
|
else{
|
|
|
return '-'
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -796,7 +825,7 @@ export default {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
- .selectePlan{
|
|
|
+ .selectePlan{
|
|
|
font-size: 14px;
|
|
|
font-weight: 700;
|
|
|
color: #333;
|
|
@@ -860,8 +889,8 @@ export default {
|
|
|
padding: 20px 0;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
</style>
|