|
@@ -1,7 +1,8 @@
|
|
|
<template>
|
|
|
<div class="toutiaoBatch">
|
|
|
+ <keep-alive>
|
|
|
<div class="tabs">
|
|
|
- <a-tabs @change="callback">
|
|
|
+ <a-tabs v-model="tabkey" @change="callback">
|
|
|
<a-tab-pane key="group" tab="广告组">
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane key="plan" tab="广告计划">
|
|
@@ -13,6 +14,7 @@
|
|
|
</a-button>
|
|
|
</a-tabs>
|
|
|
</div>
|
|
|
+ </keep-alive>
|
|
|
<div class="topOptions">
|
|
|
<span class="OptinItem">
|
|
|
<a-select style="width: 120px" @change="statusChange" placeholder="请选择状态">
|
|
@@ -40,8 +42,7 @@
|
|
|
</div>
|
|
|
<div class="tableArea">
|
|
|
<div class="tableOption">
|
|
|
- <span class="OptinItem">
|
|
|
-
|
|
|
+ <span class="OptinItem">
|
|
|
<a-tooltip>
|
|
|
<template slot="title" :getPopupContainer='getPopupContainer'>
|
|
|
点我就可以批量启动、暂停、删除你的选择哦~
|
|
@@ -50,34 +51,420 @@
|
|
|
</a-tooltip>
|
|
|
</span>
|
|
|
<span class="OptinItem">
|
|
|
- <a-select style="width: 120px" @change="statusChange" placeholder="" :disable='selectDisable'>
|
|
|
+ <a-select style="width: 120px" @change="optChange" placeholder="" :disabled='selectDisable'>
|
|
|
<a-select-option value="open" >
|
|
|
启动
|
|
|
</a-select-option>
|
|
|
- <a-select-option value="close">
|
|
|
+ <a-select-option value="pause">
|
|
|
暂停
|
|
|
</a-select-option>
|
|
|
- <a-select-option value="close">
|
|
|
+ <a-select-option value="delete">
|
|
|
删除
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</span>
|
|
|
<span class="OptinItem">
|
|
|
- <a-button type='primary' @click="isOkHandle" class="ok">确定</a-button>
|
|
|
- <a-button type='default' @click="reset" v-show="tabkey!='idea'">更改预算</a-button>
|
|
|
- <a-button type='default' @click="reset" v-show="tabkey=='plan'">更改出价</a-button>
|
|
|
+ <a-popconfirm
|
|
|
+ title="确定要删除选择的内容吗?"
|
|
|
+ ok-text="删除"
|
|
|
+ cancel-text="取消"
|
|
|
+ @confirm="confirm"
|
|
|
+ @cancel="cancel"
|
|
|
+ v-if="optValue=='delete'"
|
|
|
+ >
|
|
|
+ <a-button type='primary' @click="isOkHandle" class="ok">确定</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ <a-button type='primary' @click="isOkHandle" class="ok" v-else>确定</a-button>
|
|
|
+
|
|
|
+
|
|
|
+ <a-popover v-model="visible" trigger="click" >
|
|
|
+ <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-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">
|
|
|
<a-button type='primary' @click="reset">自定义列</a-button>
|
|
|
</span>
|
|
|
</div>
|
|
|
+ <div class="table">
|
|
|
+ <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>
|
|
|
+ <span slot="groupBudget" 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)"/>
|
|
|
+ </span>
|
|
|
+ <span slot="options" slot-scope="record">
|
|
|
+ <a href="javascript:;" style="margin-right:10px">编辑</a>
|
|
|
+ <a href="javascript:;" v-if="tabkey=='plan'" @click="copyPlan(record)">复制</a>
|
|
|
+ <a href="javascript:;" v-if="tabkey=='idea'">预览</a>
|
|
|
+ </span>
|
|
|
+ <span slot="parentGroup" slot-scope="text,record">
|
|
|
+ <a href="javascript:;" >{{text}}</a>
|
|
|
+ </span>
|
|
|
+ <span slot="parentPlan" slot-scope="text,record">
|
|
|
+ <a href="javascript:;" >{{text}}</a>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 出价的模态框 -->
|
|
|
+ <div class="batchModal">
|
|
|
+ <a-modal v-model="offerPriceVisiable" :title="'批量修改'+ModalTitle" @ok="handleOk" width='55%' id="batchModal" >
|
|
|
+ <div class="selectePlan">已选{{}}个广告计划</div>
|
|
|
+ <div class="modifyRules">
|
|
|
+ <span class="rules">修改规则:</span>
|
|
|
+ <a-radio-group v-model="modifyRulesValue" @change="modifyRulesChange">
|
|
|
+ <a-radio-button value="total">
|
|
|
+ 统一修改
|
|
|
+ </a-radio-button>
|
|
|
+ <a-radio-button value="separately">
|
|
|
+ 分别修改
|
|
|
+ </a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ <span class="totalPrice" v-if="modifyRulesValue=='total'"><span>{{ModalTitle=='出价'?'出价':'总预算'}}</span>
|
|
|
+ :
|
|
|
+ <a-input-number :min="0" v-model="inputValue" :step="0.1" @change="budgetChange" size="small" /> 元
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="modifyTable">
|
|
|
+ <a-table
|
|
|
+ :columns="modifyTableCol"
|
|
|
+ :data-source="modifyTableData"
|
|
|
+ bordered
|
|
|
+ tableLayout="auto"
|
|
|
+ :pagination="false"
|
|
|
+ :loading='modifyTableloading'
|
|
|
+ style="word-break: break-all;"
|
|
|
+ >
|
|
|
+ <span slot="changeBudget" slot-scope="">
|
|
|
+ <span v-if="ModalTitle=='出价'">oCPM</span>
|
|
|
+ <span v-else>{{modifyRulesValue=='total'?'总预算':'日预算'}}</span>
|
|
|
+ :<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 v-if="ModalTitle=='出价'">oCPM: {{text | decimalsHandle}}</span>
|
|
|
+ <span v-else>日预算:{{ text | decimalsHandle }}</span>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-modal>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 复制计划的弹出框 -->
|
|
|
+ <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>
|
|
|
+ <a-input-number :min="1" :max="10" v-model="copyNum" style="width:250px" />
|
|
|
+
|
|
|
+ </p>
|
|
|
+ <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 }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </p>
|
|
|
+ </a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import moment from 'moment';
|
|
|
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
|
+import editableCell from './editableCell'
|
|
|
+let typeValue='预算'
|
|
|
+let modifyTableCol=[
|
|
|
+ {
|
|
|
+ title: '广告计划',
|
|
|
+ dataIndex: 'advertisingPlan',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '当前消耗',
|
|
|
+ dataIndex: 'currentCost',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'currentCost' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '当前'+typeValue,
|
|
|
+ dataIndex: 'currentBudget',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'currentBudget' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '统一修改'+typeValue,
|
|
|
+ dataIndex: 'changeBudget',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'changeBudget' },
|
|
|
+
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ key: 'status',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'status' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告组名称',
|
|
|
+ dataIndex: 'campaignName',
|
|
|
+ key: 'campaignName',
|
|
|
+ align: 'center',
|
|
|
+ width:450,
|
|
|
+ scopedSlots: { customRender: 'campaignName' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告组ID',
|
|
|
+ dataIndex: 'advantageID',
|
|
|
+ key: 'advantageID',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '推广目的',
|
|
|
+ dataIndex: 'promotionPurpose',
|
|
|
+ key: 'promotionPurpose',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '组预算(元)',
|
|
|
+ dataIndex: 'groupBudget',
|
|
|
+ key: 'groupBudget',
|
|
|
+ align: 'center',
|
|
|
+ width:250,
|
|
|
+ scopedSlots: { customRender: 'groupBudget' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创建时间',
|
|
|
+ dataIndex: 'creatTime',
|
|
|
+ key: 'creatTime',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'creatTime' }
|
|
|
+ },
|
|
|
+];
|
|
|
+const planColumns = [
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ key: 'status',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'status' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'options',
|
|
|
+ key: 'options',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'options' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '计划名称',
|
|
|
+ dataIndex: 'planName',
|
|
|
+ key: 'planName',
|
|
|
+ align: 'center',
|
|
|
+ width:300,
|
|
|
+ scopedSlots: { customRender: 'planName' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '计划ID',
|
|
|
+ dataIndex: 'planID',
|
|
|
+ key: 'planID',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '账户',
|
|
|
+ dataIndex: 'accountName',
|
|
|
+ key: 'promotionPurpose',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '计划预算(元)',
|
|
|
+ dataIndex: 'planBudget',
|
|
|
+ key: 'planBudget',
|
|
|
+ align: 'center',
|
|
|
+ width:150,
|
|
|
+ scopedSlots: { customRender: 'planBudget' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '出价(元)',
|
|
|
+ dataIndex: 'planoffer',
|
|
|
+ key: 'planoffer',
|
|
|
+ align: 'center',
|
|
|
+ width:150,
|
|
|
+ scopedSlots: { customRender: 'planoffer' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '投放方式',
|
|
|
+ dataIndex: 'Launchmode',
|
|
|
+ key: 'Launchmode',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'Launchmode' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '投放时间',
|
|
|
+ dataIndex: 'LaunchTime',
|
|
|
+ key: 'LaunchTime',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'LaunchTime' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '所属广告组',
|
|
|
+ dataIndex: 'parentGroup',
|
|
|
+ key: 'parentGroup',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'parentGroup' }
|
|
|
+ },
|
|
|
+];
|
|
|
+const ideaColumns = [
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ key: 'status',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'status' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'options',
|
|
|
+ key: 'options',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'options' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创意ID',
|
|
|
+ dataIndex: 'ideaID',
|
|
|
+ key: 'ideID',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告创意',
|
|
|
+ dataIndex: 'ideID',
|
|
|
+ key: 'ideaID',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创意方式',
|
|
|
+ dataIndex: 'iaID',
|
|
|
+ key: 'idaID',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '账户',
|
|
|
+ dataIndex: 'accountName',
|
|
|
+ key: 'promotionPurpose',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '投放时间',
|
|
|
+ dataIndex: 'LaunchTime',
|
|
|
+ key: 'LaunchTime',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'LaunchTime' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '投放位置',
|
|
|
+ dataIndex: 'LaunchPosition',
|
|
|
+ key: 'LaunchPosition',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'LaunchPosition' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '所属计划',
|
|
|
+ dataIndex: 'parentPlan',
|
|
|
+ key: 'parentPlan',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'parentPlan' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '所属广告组',
|
|
|
+ dataIndex: 'parentGroup',
|
|
|
+ key: 'parentGroup',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'parentGroup' }
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+let data=[
|
|
|
+ {
|
|
|
+ status:true,
|
|
|
+ campaignName:'有缘有相聚',
|
|
|
+ advantageID:28856,
|
|
|
+ promotionPurpose:'-',
|
|
|
+ groupBudget:12563,
|
|
|
+ creatTime:'2020-01-03',
|
|
|
+ key:28856
|
|
|
+ },
|
|
|
+ {
|
|
|
+ status:false,
|
|
|
+ campaignName:'有缘有相聚',
|
|
|
+ advantageID:27856,
|
|
|
+ promotionPurpose:'-',
|
|
|
+ groupBudget:'不限',
|
|
|
+ key:27856,
|
|
|
+ creatTime:'2020-03-03'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ status:true,
|
|
|
+ campaignName:'有缘有相聚',
|
|
|
+ advantageID:24856,
|
|
|
+ promotionPurpose:'-',
|
|
|
+ groupBudget:14563,
|
|
|
+ creatTime:'2020-04-03',
|
|
|
+ key:24856,
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+let rowSelection={
|
|
|
+ onChange: (selectedRowKeys, selectedRows) => {
|
|
|
+ console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
|
|
+ console.log(selectedRowKeys);
|
|
|
+ this.selectedRowKeys=selectedRowKeys;
|
|
|
+ },
|
|
|
+ onSelect: (record, selected, selectedRows) => {
|
|
|
+ console.log(record, selected, selectedRows);
|
|
|
+
|
|
|
+ },
|
|
|
+ onSelectAll: (selected, selectedRows, changeRows) => {
|
|
|
+ console.log(selected, selectedRows, changeRows);
|
|
|
+
|
|
|
+ },
|
|
|
+}
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ editableCell,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
account:'',//媒体账号
|
|
@@ -85,20 +472,62 @@ export default {
|
|
|
dateValue:'',//日期选择框选择的事件--我赋值的是dateString
|
|
|
tabkey:'group',//tab选中的页
|
|
|
selectDisable:true,
|
|
|
+ optValue:'',//操作设置的值 删除 暂停 开启
|
|
|
+ visible: false,//出价里的弹出框
|
|
|
+ radioValue:'unlimit',//出价的单选默认值
|
|
|
+ dayBudgetValue:0,//日预算的默认值
|
|
|
+ offerPriceVisiable:false,//修改出价的弹出框显示与否
|
|
|
+ modifyRulesValue:'total',//修改出价里的radio默认值
|
|
|
+ ModalTitle:'出价',//模态框的标题
|
|
|
+ inputValue:'',//模态框里统一修改时的金额
|
|
|
+ //主页的表格
|
|
|
+ data:[],
|
|
|
+ columns,
|
|
|
+ selectedRowKeys:[],
|
|
|
+ rowSelection,
|
|
|
+ editID:0,
|
|
|
+ //批量修改里的表格
|
|
|
+ typeValue,
|
|
|
+ modifyTableData:[
|
|
|
+ {
|
|
|
+ advertisingPlan:'王者荣耀',
|
|
|
+ currentCost:826595312,
|
|
|
+ currentBudget:10000,
|
|
|
+ changeBudget:''
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ modifyTableCol,
|
|
|
+ modifyTableloading:false,
|
|
|
+
|
|
|
+
|
|
|
+ //复制计划
|
|
|
+ copyPlanVisiable:false,
|
|
|
+ copyRecord:null,
|
|
|
+ copyNum:1,//复制个数
|
|
|
+ copyGroup:'',
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
methods: {
|
|
|
//tab切换页的函数
|
|
|
callback(key) {
|
|
|
console.log(key);
|
|
|
+ if(key=='plan'){
|
|
|
+ this.columns=planColumns
|
|
|
+ }else if(key=='group'){
|
|
|
+ this.columns=columns
|
|
|
+ }else if(key=='idea'){
|
|
|
+ this.columns=ideaColumns
|
|
|
+ }
|
|
|
},
|
|
|
//跳转到批量页面
|
|
|
goBatch(){
|
|
|
|
|
|
},
|
|
|
//状态改变
|
|
|
- statusChange(value){
|
|
|
- console.log('status--'+value)
|
|
|
+ statusChange(value){
|
|
|
+ console.log(value);
|
|
|
+
|
|
|
},
|
|
|
//日期改变
|
|
|
dateChange(date, dateString) {
|
|
@@ -116,24 +545,226 @@ export default {
|
|
|
reset(){
|
|
|
|
|
|
},
|
|
|
+ //状态改变
|
|
|
+ switchChange(text,record){
|
|
|
+ // console.log(`a-switch to ${checked}`);
|
|
|
+ console.log(text,record);
|
|
|
+ record.status=!text;
|
|
|
+ console.log(this.data)
|
|
|
+ },
|
|
|
+
|
|
|
|
|
|
//改变批量操作的按钮
|
|
|
changeSelectStatus(){
|
|
|
this.selectDisable=false;
|
|
|
},
|
|
|
+ //批量操作下的启动 删除 暂停
|
|
|
+ optChange(value){
|
|
|
+ console.log(value)
|
|
|
+ this.optValue=value;
|
|
|
+ },
|
|
|
//批量操作的确定按钮
|
|
|
isOkHandle(){
|
|
|
this.selectDisable=true;
|
|
|
+ if(this.optValue){
|
|
|
+ if(this.optValue=='pause'){
|
|
|
+ if(this.selectedRowKeys.length>0){
|
|
|
+ this.selectedRowKeys.forEach((item,index)=>{
|
|
|
+ this.data.forEach((ele)=>{
|
|
|
+ if(ele.key==item){
|
|
|
+ ele.status=false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }else if(this.optValue=='open'){
|
|
|
+ if(this.selectedRowKeys.length>0){
|
|
|
+ this.selectedRowKeys.forEach((item,index)=>{
|
|
|
+ this.data.forEach((ele)=>{
|
|
|
+ if(ele.key==item){
|
|
|
+ ele.status=true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.data)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //确定删除
|
|
|
+ confirm(e) {
|
|
|
+ console.log(e);
|
|
|
+ if(this.optValue=='delete'){
|
|
|
+ if(this.selectedRowKeys.length>0){
|
|
|
+
|
|
|
+ this.selectedRowKeys.forEach((item,index)=>{
|
|
|
+ this.data.splice(item,1)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$message.success('删除成功');
|
|
|
+
|
|
|
+ },
|
|
|
+ //取消删除
|
|
|
+ cancel(e) {
|
|
|
+ console.log(e);
|
|
|
+ // this.$message.error('删除成功');
|
|
|
+ },
|
|
|
+ //预算里 取消按钮点击
|
|
|
+ showPricecancel() {
|
|
|
+ // console.log(111);
|
|
|
+ this.visible = false;
|
|
|
+ this.dayBudgetValue=0
|
|
|
+ this.radioValue='unlimit'
|
|
|
+ },
|
|
|
+ showPriceOk(){
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ //单选按钮改变事件
|
|
|
+ radioChange(e) {
|
|
|
+ console.log('radio checked', e.target.value,this.radioValue);
|
|
|
+ },
|
|
|
+ budgetChange(){
|
|
|
+ console.log(this.inputValue)
|
|
|
+ },
|
|
|
+ //广告计划下的预算
|
|
|
+ changebudget(){
|
|
|
+ this.offerPriceVisiable=true;
|
|
|
+ this.ModalTitle='预算'
|
|
|
+ typeValue='预算'
|
|
|
+ },
|
|
|
+ //修改出价
|
|
|
+ changeofferPrice(){
|
|
|
+ this.offerPriceVisiable=true;
|
|
|
+ this.ModalTitle='出价'
|
|
|
+ typeValue='出价';
|
|
|
+ this.modifyTableCol[2].title='出价';
|
|
|
+
|
|
|
+ this.modifyTableCol[3].title='统一修改出价';
|
|
|
+
|
|
|
+ },
|
|
|
+ handleOk(e) {
|
|
|
+ console.log(e);
|
|
|
+ this.offerPriceVisiable = false;
|
|
|
+ },
|
|
|
+ //修改规则的改变
|
|
|
+ modifyRulesChange(e){
|
|
|
+ if(e.target.value=='total'){
|
|
|
+ this.inputValue=''
|
|
|
+ }else{
|
|
|
+ this.inputValue=10000
|
|
|
+ }
|
|
|
},
|
|
|
//更改文字提示的父节点
|
|
|
getPopupContainer(){
|
|
|
console.log(this);
|
|
|
return this.$el
|
|
|
},
|
|
|
+
|
|
|
+ //点击修改广告名
|
|
|
+ // 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) {
|
|
|
+ target[dataIndex] = value;
|
|
|
+ this.data = dataSource;
|
|
|
+ }
|
|
|
+ console.log(this.data)
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //复制广告计划
|
|
|
+ copyPlan(record){
|
|
|
+ this.copyRecord=record;
|
|
|
+ this.copyPlanVisiable=true;
|
|
|
+ },
|
|
|
+
|
|
|
+ copyPlanOk(e) {
|
|
|
+ this.copyPlanVisiable = false;
|
|
|
+ console.log(this.copyNum,'---',this.copyGroup)
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
- console.log(this)
|
|
|
+ console.log(this);
|
|
|
+ this.data=data;
|
|
|
},
|
|
|
+ filters: {
|
|
|
+ toPercentage(val) {
|
|
|
+ if(val){
|
|
|
+ if(typeof val != 'string'){
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
+ }else{
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ }else if(typeof val =='string'){
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //保留两位小数并且变成货币格式
|
|
|
+ decimalsHandle(val){
|
|
|
+
|
|
|
+ if(val && typeof val !='string'){
|
|
|
+ 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) {
|
|
|
+ str0.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str0.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ 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){
|
|
|
+ if((val||val==0)&& typeof val !='string'){
|
|
|
+ let numberStr = val.toString()
|
|
|
+ let str = numberStr.split('').reverse()
|
|
|
+ for (let i = 0; i < str.length; i++) {
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
+ str.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ for (let j = 0; j < str.length; j++) {
|
|
|
+ handleResult += str[j]
|
|
|
+ }
|
|
|
+ return handleResult
|
|
|
+ }else if(typeof val =='string'){
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return '-'
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
@@ -141,13 +772,53 @@ export default {
|
|
|
background-color: #fff;
|
|
|
color: #333;
|
|
|
}
|
|
|
+ #batchModal{
|
|
|
+ .rules,.totalPrice{
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
|
|
|
+ .selectePlan{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #333;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+ .totalPrice{
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .modifyTable{
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ height: 400px;
|
|
|
+ overflow: auto;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #copyModal{
|
|
|
+ .ant-modal-header{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .copyTip{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .copyName{
|
|
|
+ width: 118px;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: right;
|
|
|
+ .copyKeyStart{
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // font-weight: 600;
|
|
|
+ }
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.toutiaoBatch{
|
|
|
background-color: #fff;
|
|
|
padding: 10px 20px;
|
|
|
position: relative;
|
|
|
+ width: 100%;
|
|
|
.OptinItem{
|
|
|
display: inline-block;
|
|
|
margin-right: 15px;
|
|
@@ -166,7 +837,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.tableArea{
|
|
|
- margin-top: 20px;
|
|
|
+ .tableOption{
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
</style>
|