|
@@ -1,13 +1,22 @@
|
|
|
<template>
|
|
|
<div class="toutiaoBatch">
|
|
|
+ <!-- <a-spin :spinning="spinning"> -->
|
|
|
+
|
|
|
<keep-alive>
|
|
|
<div class="tabs">
|
|
|
<a-tabs v-model="tabkey" @change="callback">
|
|
|
<a-tab-pane key="group" tab="广告组">
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="plan" tab="广告计划">
|
|
|
+ <a-tag color="blue" style="height:30px;line-height:30px;font-size:14px;" v-show="currentGroup.name">
|
|
|
+ {{currentGroup.name}} <a-icon type="close" @click="clearGroup" />
|
|
|
+ </a-tag>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="idea" tab="广告创意">
|
|
|
+
|
|
|
+ <a-tag color="blue" style="height:30px;line-height:30px;font-size:14px;" v-show="currentPlan.name">
|
|
|
+ {{currentPlan.name}} <a-icon type="close" @click="clearPlan" />
|
|
|
+ </a-tag>
|
|
|
</a-tab-pane>
|
|
|
<a-button type='primary' slot="tabBarExtraContent" @click="goBatch">
|
|
|
+ 头条批量创建
|
|
@@ -77,7 +86,7 @@
|
|
|
</a-tooltip>
|
|
|
</span>
|
|
|
<span class="OptinItem">
|
|
|
- <a-select style="width: 120px" @change="optChange" placeholder="请选择状态" :disabled='selectedRowKeys.length<=0'>
|
|
|
+ <a-select style="width: 120px" @change="optChange" v-model="optValue" placeholder="请选择状态" :disabled='selectedRowKeys.length<=0'>
|
|
|
<a-select-option value="open" >
|
|
|
启动
|
|
|
</a-select-option>
|
|
@@ -127,16 +136,16 @@
|
|
|
</div>
|
|
|
<div class="table">
|
|
|
<a-table
|
|
|
- :columns="columns"
|
|
|
- :data-source="data"
|
|
|
- :rowSelection="{selectedRowKeys: selectedRowKeys,...rowSelection}"
|
|
|
- bordered
|
|
|
- :pagination="ipagination"
|
|
|
- :loading="loading"
|
|
|
- @change="sort"
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="data"
|
|
|
+ :rowSelection="{selectedRowKeys: selectedRowKeys,...rowSelection}"
|
|
|
+ bordered
|
|
|
+ :pagination="ipagination"
|
|
|
+ :loading="loading"
|
|
|
+ @change="sort"
|
|
|
>
|
|
|
<template slot="name" slot-scope="text,record">
|
|
|
- <a href="javascript:;" @click="goNextPage(text)">
|
|
|
+ <a href="javascript:;" @click="goNextPage(record)">
|
|
|
<editableCell :text="text" slotName='name' @change="onCellChange(record.key, 'name', $event)" />
|
|
|
</a>
|
|
|
</template>
|
|
@@ -146,14 +155,31 @@
|
|
|
<span slot="bid" slot-scope="text,record">
|
|
|
<editableCell :text="text" slotName='bid' @change="onCellChange(record.key, 'bid', $event)" />
|
|
|
</span>
|
|
|
+
|
|
|
<span slot="campaignStatus" slot-scope="text,record">
|
|
|
- <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
|
|
|
+ <a-spin :spinning="record.spin" size="small" >
|
|
|
+ <div class="spin-content">
|
|
|
+ <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
|
|
|
+ </div>
|
|
|
+ </a-spin>
|
|
|
+ <!-- <a-switch size="default" :checked=text @change="switchChange(text,record)"/> -->
|
|
|
</span>
|
|
|
+
|
|
|
<span slot="createStatus" slot-scope="text,record">
|
|
|
- <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
|
|
|
+ <a-spin :spinning="record.spin" size="small" >
|
|
|
+ <div class="spin-content">
|
|
|
+ <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
|
|
|
+ </div>
|
|
|
+ </a-spin>
|
|
|
+ <!-- <a-switch size="default" :checked=text @change="switchChange(text,record)"/> -->
|
|
|
</span>
|
|
|
<span slot="planStatus" slot-scope="text,record">
|
|
|
- <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
|
|
|
+ <a-spin :spinning="record.spin" size="small" >
|
|
|
+ <div class="spin-content">
|
|
|
+ <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
|
|
|
+ </div>
|
|
|
+ </a-spin>
|
|
|
+ <!-- <a-switch size="default" :checked=text @change="switchChange(text,record)"/> -->
|
|
|
</span>
|
|
|
|
|
|
<span slot="createImg" slot-scope="text,record">
|
|
@@ -161,7 +187,7 @@
|
|
|
<a-popover placement="right">
|
|
|
<template slot="content">
|
|
|
<!-- {{record.videoId_dictText}} -->
|
|
|
- <video :src="record.videoId_dictText" style="width:250px" controls autoplay muted ></video>
|
|
|
+ <video :src="record.videoId_dictText" style="width:250px" controls ></video>
|
|
|
</template>
|
|
|
<template slot="title">
|
|
|
<!-- <span>Title</span> -->
|
|
@@ -262,6 +288,8 @@
|
|
|
</div>
|
|
|
|
|
|
</a-modal>
|
|
|
+
|
|
|
+ <!-- </a-spin> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -525,6 +553,10 @@ export default {
|
|
|
mixins: [JeecgListMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
+ currentGroup:{},
|
|
|
+ currentPlan:{},
|
|
|
+
|
|
|
+ spinning:false,
|
|
|
moment,
|
|
|
loading:false,
|
|
|
accountID:undefined,
|
|
@@ -603,8 +635,69 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
// 点击跳转
|
|
|
- goNextPage(){
|
|
|
-
|
|
|
+ goNextPage(item){
|
|
|
+ console.log(item);
|
|
|
+ if(this.tabkey=='group'){
|
|
|
+ this.tabkey='plan';
|
|
|
+ this.columns=planColumns;
|
|
|
+ this.loading=true;
|
|
|
+ this.data=[];
|
|
|
+ this.currentGroup=item
|
|
|
+ console.log(item.id)
|
|
|
+ this.getplanList({
|
|
|
+ accountId:this.accountID,
|
|
|
+ name:this.optionId,
|
|
|
+ status:this.statusValue,
|
|
|
+ startDate:this.dateString[0],
|
|
|
+ endDate:this.dateString[1],
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+ campaignId:item.id
|
|
|
+ })
|
|
|
+ }else if(this.tabkey=='plan'){
|
|
|
+ this.tabkey='idea';
|
|
|
+ this.columns=ideaColumns;
|
|
|
+ this.loading=true;
|
|
|
+ this.data=[];
|
|
|
+ this.currentPlan=item
|
|
|
+ this.refreshCreativeList({
|
|
|
+ accountId:this.accountID,
|
|
|
+ planId:item.id,
|
|
|
+ name:this.optionId,
|
|
|
+ status:this.statusValue,
|
|
|
+ startDate:this.dateString[0],
|
|
|
+ endDate:this.dateString[1],
|
|
|
+ pageNo:this.ipagination.current
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 清空选中的组信息
|
|
|
+ clearGroup(){
|
|
|
+ this.currentGroup={};
|
|
|
+ this.loading=true;
|
|
|
+ this.getplanList({
|
|
|
+ accountId:this.accountID,
|
|
|
+ name:this.optionId,
|
|
|
+ status:this.statusValue,
|
|
|
+ startDate:this.dateString[0],
|
|
|
+ endDate:this.dateString[1],
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+ campaignId:this.currentGroup.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 清空选中的计划
|
|
|
+ clearPlan(){
|
|
|
+ this.currentPlan={};
|
|
|
+ this.loading=true;
|
|
|
+ this.refreshCreativeList({
|
|
|
+ accountId:this.accountID,
|
|
|
+ name:this.optionId,
|
|
|
+ status:this.statusValue,
|
|
|
+ startDate:this.dateString[0],
|
|
|
+ endDate:this.dateString[1],
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+ planId:this.currentPlan.id,
|
|
|
+ })
|
|
|
},
|
|
|
// table里的函数
|
|
|
|
|
@@ -648,14 +741,15 @@ export default {
|
|
|
this.tabkey=key;
|
|
|
this.loading=true
|
|
|
if(key=='group'){
|
|
|
- let params = {};
|
|
|
+
|
|
|
this.refreshCampaignList({
|
|
|
accountId:this.accountID,
|
|
|
name:this.optionId,
|
|
|
status:this.statusValue,
|
|
|
startDate:this.dateString[0],
|
|
|
endDate:this.dateString[1],
|
|
|
- pageNo:this.ipagination.current
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+
|
|
|
});
|
|
|
}else if(key=='plan'){
|
|
|
this.getplanList({
|
|
@@ -664,13 +758,15 @@ export default {
|
|
|
toutiaoStatus:this.statusValue,
|
|
|
startDate:this.dateString[0],
|
|
|
endDate:this.dateString[1],
|
|
|
- pageNo:this.ipagination.current
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+ campaignId:this.currentGroup.id
|
|
|
})
|
|
|
|
|
|
}else if(key=='idea'){
|
|
|
let params = {};
|
|
|
this.refreshCreativeList({
|
|
|
accountId:this.accountID,
|
|
|
+ planId:this.currentPlan.id,
|
|
|
name:this.optionId,
|
|
|
status:this.statusValue,
|
|
|
startDate:this.dateString[0],
|
|
@@ -727,10 +823,11 @@ export default {
|
|
|
this.getplanList({
|
|
|
accountId:this.accountID,
|
|
|
name:this.optionId,
|
|
|
- toutiaoStatus:this.statusValue,
|
|
|
+ status:this.statusValue,
|
|
|
startDate:this.dateString[0],
|
|
|
endDate:this.dateString[1],
|
|
|
- pageNo:this.ipagination.current
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+ campaignId:this.currentGroup.id
|
|
|
})
|
|
|
}else if(this.tabkey=='idea'){
|
|
|
this.columns=ideaColumns;
|
|
@@ -740,7 +837,8 @@ export default {
|
|
|
status:this.statusValue,
|
|
|
startDate:this.dateString[0],
|
|
|
endDate:this.dateString[1],
|
|
|
- pageNo:this.ipagination.current
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+ planId:this.currentPlan.id,
|
|
|
})
|
|
|
}
|
|
|
}else{
|
|
@@ -771,10 +869,10 @@ export default {
|
|
|
},
|
|
|
//状态改变
|
|
|
switchChange(text,record){
|
|
|
-
|
|
|
+ // this.spinning=true;
|
|
|
// console.log(text,record);
|
|
|
let recordData=JSON.parse(JSON.stringify(record))
|
|
|
-
|
|
|
+ record.spin=true;
|
|
|
if(this.tabkey=='group'){
|
|
|
let ids=record.id;
|
|
|
let status=text?'disable':'enable';
|
|
@@ -784,8 +882,9 @@ export default {
|
|
|
status:status,
|
|
|
})).then((res)=>{
|
|
|
// console.log(res);
|
|
|
+ // this.spinning=false;
|
|
|
+ record.spin=false;
|
|
|
if(res.success){
|
|
|
- this.data=[];
|
|
|
this.refreshCampaignList({
|
|
|
accountId:this.accountID,
|
|
|
name:this.optionId,
|
|
@@ -794,6 +893,9 @@ export default {
|
|
|
endDate:this.dateString[1],
|
|
|
pageNo:this.ipagination.current
|
|
|
})
|
|
|
+ this.$message.success(res.message)
|
|
|
+ }else{
|
|
|
+ this.$message.error(res.message)
|
|
|
}
|
|
|
})
|
|
|
}else if(this.tabkey=='plan'){
|
|
@@ -815,16 +917,19 @@ export default {
|
|
|
})).then((res)=>{
|
|
|
// console.log(res);
|
|
|
if(res.success){
|
|
|
- this.data=[];
|
|
|
- this.refreshCreativeList({
|
|
|
+ // this.data=[];
|
|
|
+ record.spin=false;
|
|
|
+ this.refreshCreativeList({
|
|
|
accountId:this.accountID,
|
|
|
name:this.optionId,
|
|
|
status:this.statusValue,
|
|
|
startDate:this.dateString[0],
|
|
|
endDate:this.dateString[1],
|
|
|
- pageNo:this.ipagination.current
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+ planId:this.currentPlan.id,
|
|
|
})
|
|
|
}else{
|
|
|
+ record.spin=false;
|
|
|
this.$message.error(res.message)
|
|
|
}
|
|
|
})
|
|
@@ -868,18 +973,27 @@ export default {
|
|
|
console.log(res);
|
|
|
if(res.success){
|
|
|
this.$message.success(res.message)
|
|
|
+ // this.data=[];
|
|
|
+ this.refreshCampaignList({
|
|
|
+ accountId:this.accountID,
|
|
|
+ name:this.optionId,
|
|
|
+ status:this.statusValue,
|
|
|
+ startDate:this.dateString[0],
|
|
|
+ endDate:this.dateString[1],
|
|
|
+ pageNo:this.ipagination.current
|
|
|
+ })
|
|
|
}else{
|
|
|
+ if(this.selectedRows.length>0){
|
|
|
+ this.selectedRows.forEach(item=>{
|
|
|
+ item.spin=false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.selectedRowKeys=[];
|
|
|
+ this.selectedRows=[];
|
|
|
+ this.optValue=undefined;
|
|
|
this.$message.error(res.message)
|
|
|
}
|
|
|
- this.data=[];
|
|
|
- this.refreshCampaignList({
|
|
|
- accountId:this.accountID,
|
|
|
- name:this.optionId,
|
|
|
- status:this.statusValue,
|
|
|
- startDate:this.dateString[0],
|
|
|
- endDate:this.dateString[1],
|
|
|
- pageNo:this.ipagination.current
|
|
|
- })
|
|
|
+
|
|
|
|
|
|
|
|
|
})
|
|
@@ -888,7 +1002,9 @@ export default {
|
|
|
isOkHandle(){
|
|
|
console.log(this.optValue&&this.selectedRowKeys.length>0)
|
|
|
if(this.optValue&&this.selectedRowKeys.length>0){
|
|
|
-
|
|
|
+ this.selectedRows.forEach(item=>{
|
|
|
+ item.spin=true;
|
|
|
+ })
|
|
|
if(this.optValue=='pause'){
|
|
|
if(this.tabkey=='group'){
|
|
|
console.log(this.selectedRows);
|
|
@@ -1061,17 +1177,39 @@ export default {
|
|
|
if(res.result.length>0){
|
|
|
this.modifyTableData=[]
|
|
|
this.modifyTableData=res.result
|
|
|
+
|
|
|
this.getplanList({
|
|
|
accountId:this.accountID,
|
|
|
name:this.optionId,
|
|
|
status:this.statusValue,
|
|
|
startDate:this.dateString[0],
|
|
|
endDate:this.dateString[1],
|
|
|
- pageNo:this.ipagination.current
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+ campaignId:this.currentGroup.id
|
|
|
})
|
|
|
}
|
|
|
+ // params.spin=false;
|
|
|
+ params.forEach(item=>{
|
|
|
+ item.spin=false;
|
|
|
+ })
|
|
|
this.optValue=undefined;
|
|
|
- this.selectedRowKeys=[]
|
|
|
+ this.selectedRowKeys=[];
|
|
|
+ this.$message.success(res.message)
|
|
|
+ }else{
|
|
|
+ // params.spin=false;
|
|
|
+ params.forEach(item=>{
|
|
|
+ item.spin=false;
|
|
|
+ })
|
|
|
+ this.getplanList({
|
|
|
+ accountId:this.accountID,
|
|
|
+ name:this.optionId,
|
|
|
+ status:this.statusValue,
|
|
|
+ startDate:this.dateString[0],
|
|
|
+ endDate:this.dateString[1],
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+ campaignId:this.currentGroup.id
|
|
|
+ })
|
|
|
+ this.$message.error(res.message)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
@@ -1166,7 +1304,8 @@ export default {
|
|
|
status:this.statusValue,
|
|
|
startDate:this.dateString[0],
|
|
|
endDate:this.dateString[1],
|
|
|
- pageNo:this.ipagination.current
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
+ campaignId:this.currentGroup.id
|
|
|
})
|
|
|
}
|
|
|
})
|
|
@@ -1195,16 +1334,22 @@ export default {
|
|
|
// this.loading=true
|
|
|
getAction(this.url.campaignList, params).then(res => {
|
|
|
// console.log(res);
|
|
|
+ this.loading = false;
|
|
|
if (res.success) {
|
|
|
this.ipagination.total = res.result.total
|
|
|
- this.loading = false;
|
|
|
- res.result.records.forEach((item)=>{
|
|
|
- item.key=item.id
|
|
|
- })
|
|
|
- this.data = res.result.records;
|
|
|
+
|
|
|
+
|
|
|
+ this.data = res.result.records.map(item=>{
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ spin:false,
|
|
|
+ key:item.id
|
|
|
+ }
|
|
|
+ });
|
|
|
this.selectedRows=[];
|
|
|
this.selectedRowKeys=[];
|
|
|
- this.$message.success(res.message)
|
|
|
+
|
|
|
} else {
|
|
|
// console.log(res.message);
|
|
|
this.selectedRows=[];
|
|
@@ -1216,16 +1361,23 @@ export default {
|
|
|
|
|
|
getAction(this.url.planList,params).then((res)=>{
|
|
|
this.data=[]
|
|
|
- // console.log(res)
|
|
|
+ console.log(res)
|
|
|
+ this.loading = false
|
|
|
if(res.success){
|
|
|
|
|
|
this.ipagination.total = res.result.total
|
|
|
- this.loading = false
|
|
|
+
|
|
|
res.result.records.forEach((item)=>{
|
|
|
item.key=item.id
|
|
|
})
|
|
|
|
|
|
- this.data = res.result.records;
|
|
|
+ this.data = res.result.records.map(item=>{
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ spin:false
|
|
|
+ }
|
|
|
+ });
|
|
|
// console.log(this.data)
|
|
|
this.selectedRowKeys=[];
|
|
|
}
|
|
@@ -1233,16 +1385,24 @@ export default {
|
|
|
},
|
|
|
|
|
|
refreshCreativeList(params){
|
|
|
+ this.loading=true;
|
|
|
getAction(this.url.creativeList, params).then(res => {
|
|
|
// console.log(res);
|
|
|
+ this.loading=false;
|
|
|
if (res.success) {
|
|
|
this.ipagination.total = res.result.total
|
|
|
this.loading = false;
|
|
|
res.result.records.forEach((item)=>{
|
|
|
item.key=item.id
|
|
|
})
|
|
|
- this.data = res.result.records;
|
|
|
+ // this.data = res.result.records;
|
|
|
+ this.data = res.result.records.map(item=>{
|
|
|
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ spin:false
|
|
|
+ }
|
|
|
+ });
|
|
|
} else {
|
|
|
// console.log(res.message);
|
|
|
}
|
|
@@ -1384,6 +1544,19 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
+ #closeIcon{
|
|
|
+ color: #0E74D2;
|
|
|
+ }
|
|
|
+ .toutiaoBatch{
|
|
|
+ .ant-tag .anticon-close {
|
|
|
+ color: #1890ff;
|
|
|
+ }
|
|
|
+ .ant-tag .anticon-close:hover{
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
.ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
|
|
|
background-color: #fff;
|
|
|
color: #333;
|