TouTiaoBatch.vue 63 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762
  1. <template>
  2. <div class="toutiaoBatch">
  3. <!-- <a-spin :spinning="spinning"> -->
  4. <div class="tabs">
  5. <a-tabs v-model="tabkey" @change="callback">
  6. <a-tab-pane key="group" tab="广告组">
  7. </a-tab-pane>
  8. <a-tab-pane key="plan" tab="广告计划">
  9. <a-tag color="blue" style="height:30px;line-height:30px;font-size:14px;" v-show="currentGroup.name">
  10. {{currentGroup.name}} <a-icon type="close" @click="clearGroup" />
  11. </a-tag>
  12. </a-tab-pane>
  13. <a-tab-pane key="idea" tab="广告创意">
  14. <a-tag color="blue" style="height:30px;line-height:30px;font-size:14px;" v-show="currentPlan.name ">
  15. {{currentPlan.name }} <a-icon type="close" @click="clearPlan" />
  16. </a-tag>
  17. </a-tab-pane>
  18. <!-- <a-button type='primary' slot="tabBarExtraContent" @click="goBatch" >
  19. + 头条批量创建
  20. </a-button> -->
  21. <a-button type='primary' slot="tabBarExtraContent" @click="goBatch" v-if="tabkey=='group'">
  22. + 头条批量创建
  23. </a-button>
  24. <a-button type='primary' slot="tabBarExtraContent" @click="createPlan" v-if="tabkey=='plan'">
  25. + 新建计划
  26. </a-button>
  27. <a-button type='primary' slot="tabBarExtraContent" @click="createIdea" v-if="tabkey=='idea'">
  28. + 新建创意
  29. </a-button>
  30. </a-tabs>
  31. </div>
  32. <div class="topOptions">
  33. <span class="OptinItem topOpt">
  34. <Treeselect :appId.sync="accountID" :multiple="false" request="1,3" ref="treeSelect" style="margin-bottom:8px " />
  35. <!-- <a-tree-select
  36. show-search
  37. allow-clear
  38. dropdownMatchSelectWidth
  39. v-model="accountID"
  40. style="width: 60%"
  41. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  42. :tree-data="treeData"
  43. placeholder="请选择具体账户"
  44. :filterOption='filterOption'
  45. treeNodeFilterProp='title'
  46. @change='accountIDChange'
  47. >
  48. </a-tree-select> -->
  49. </span>
  50. <span class="OptinItem">
  51. <a-select style="width: 120px" v-model="statusValue" @change="statusChange" placeholder="请选择状态">
  52. <a-select-option value=" " >
  53. 不限
  54. </a-select-option>
  55. <a-select-option value="ENABLE" >
  56. 启用
  57. </a-select-option>
  58. <a-select-option value="DISABLE" >
  59. 暂停
  60. </a-select-option>
  61. <a-select-option value="DELETE">
  62. 删除
  63. </a-select-option>
  64. </a-select>
  65. </span>
  66. <span class="OptinItem">
  67. <!-- <a-date-picker @change="dateChange" /> -->
  68. <a-range-picker v-model="dateValue" :disabled-date="disabledDate" style="width: 250px;" format="YYYY-MM-DD" @change="dateChange" />
  69. </span>
  70. <span class="OptinItem">
  71. <a-input-search placeholder="请输入名称关键词" v-model="optionId" style="width: 200px" />
  72. </span>
  73. <span class="optionBtn">
  74. <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
  75. <!-- <a-button type='default' @click="reset">重置</a-button> -->
  76. </span>
  77. </div>
  78. <div class="tableArea">
  79. <div class="tableOption">
  80. <span class="OptinItem">
  81. <a-tooltip>
  82. <template slot="title" >
  83. 这里可以批量启动、暂停、删除你的选择哦~
  84. </template>
  85. <!-- <a-button type="link" @click="changeSelectStatus">批量操作</a-button> -->
  86. <span >批量操作:</span>
  87. </a-tooltip>
  88. </span>
  89. <span class="OptinItem">
  90. <a-select style="width: 120px" @change="optChange" v-model="optValue" placeholder="请选择状态" :disabled='selectedRowKeys.length<=0'>
  91. <a-select-option value="open" >
  92. 启动
  93. </a-select-option>
  94. <a-select-option value="pause">
  95. 暂停
  96. </a-select-option>
  97. <a-select-option value="delete">
  98. 删除
  99. </a-select-option>
  100. </a-select>
  101. </span>
  102. <span class="OptinItem">
  103. <a-popconfirm
  104. title="确定要删除选择的内容吗?"
  105. ok-text="删除"
  106. cancel-text="取消"
  107. @confirm="confirm"
  108. @cancel="cancel"
  109. v-if="optValue=='delete'"
  110. >
  111. <a-button type='primary' @click="isOkHandle" class="ok">确定</a-button>
  112. </a-popconfirm>
  113. <a-button type='primary' @click="isOkHandle" class="ok" v-else>确定</a-button>
  114. <a-popover v-model="visible" trigger="click" >
  115. <div slot="content">
  116. <span style='font-weight:700;margin-right:15px;font-size:15px'>预算</span>
  117. <a-radio-group v-model="radioValue" @change="radioChange">
  118. <a-radio value="BUDGET_MODE_INFINITE">不限</a-radio>
  119. <a-radio value="BUDGET_MODE_DAY">日预算</a-radio>
  120. </a-radio-group>
  121. <span v-show="radioValue=='BUDGET_MODE_DAY'">预计金额: <a-input-number :min="0" v-model="dayBudgetValue" :step="0.1" @change="budgetChange" size="small" style='margin-right:20px' /></span>
  122. <a-button type='default' @click="showPricecancel" style='margin-right:10px'>取消</a-button>
  123. <a-button type='primary' @click="showPriceOk" class="ok">保存</a-button>
  124. </div>
  125. <!-- <a-button type='default' v-if="tabkey=='group'" class="ok">更改预算</a-button> -->
  126. </a-popover>
  127. <a-button type='default' @click="changebudget" v-if="tabkey=='plan'" class="ok">更改预算</a-button>
  128. <a-button type='default' @click="changeofferPrice" v-show="tabkey=='plan'">更改出价</a-button>
  129. </span>
  130. <!-- <span class="optionBtn">
  131. <a-button type='primary' @click="reset">自定义列</a-button>
  132. </span> -->
  133. </div>
  134. <div class="table">
  135. <a-table
  136. :columns="columns"
  137. :data-source="data"
  138. :rowSelection="{selectedRowKeys: selectedRowKeys,...rowSelection}"
  139. bordered
  140. :pagination="ipagination"
  141. :loading="loading"
  142. @change="sort"
  143. >
  144. <template slot="name" slot-scope="text,record">
  145. <a href="javascript:;" @click="goNextPage(record)">
  146. <editableCell :text="text" slotName='name' @change="onCellChange(record.key, 'name', $event)" />
  147. </a>
  148. </template>
  149. <span slot="budget" slot-scope="text,record">
  150. <editableCell :text="text" slotName='budget' @change="onCellChange(record.key, 'budget', $event)" />
  151. </span>
  152. <span slot="bid" slot-scope="text,record" >
  153. <editableCell :text="text" slotName='bid' @change="onCellChange(record.key, 'bid', $event)" />
  154. </span>
  155. <span slot="cpaBid" slot-scope="text,record">
  156. <editableCell :text="text" slotName='cpaBid' @change="onCellChange(record.key, 'cpaBid', $event)" />
  157. <!-- {{text}} -->
  158. </span>
  159. <span slot="campaignStatus" slot-scope="text,record">
  160. <a-spin :spinning="record.spin" size="small" >
  161. <div class="spin-content">
  162. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  163. </div>
  164. </a-spin>
  165. <!-- <a-switch size="default" :checked=text @change="switchChange(text,record)"/> -->
  166. </span>
  167. <span slot="createStatus" slot-scope="text,record">
  168. <a-spin :spinning="record.spin" size="small" >
  169. <div class="spin-content">
  170. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  171. </div>
  172. </a-spin>
  173. <!-- <a-switch size="default" :checked=text @change="switchChange(text,record)"/> -->
  174. </span>
  175. <span slot="planStatus" slot-scope="text,record">
  176. <a-spin :spinning="record.spin" size="small" >
  177. <div class="spin-content">
  178. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  179. </div>
  180. </a-spin>
  181. <!-- <a-switch size="default" :checked=text @change="switchChange(text,record)"/> -->
  182. </span>
  183. <span slot="createImg" slot-scope="text,record">
  184. <!-- <a-switch size="default" :checked=text @change="switchChange(text,record)"/> -->
  185. <a-popover placement="right">
  186. <template slot="content">
  187. <!-- {{record.videoId_dictText}} -->
  188. <video :src="record.videoId_dictText" style="width:250px" controls ></video>
  189. </template>
  190. <template slot="title">
  191. <!-- <span>Title</span> -->
  192. </template>
  193. <!-- <a-button>Right</a-button> -->
  194. <img :src="record.imageId_dictText" alt="" style="width:100px">
  195. </a-popover>
  196. </span>
  197. <!-- <span slot="options" slot-scope="record">
  198. <a href="javascript:;" style="margin-right:10px">编辑</a>
  199. <a href="javascript:;" v-if="tabkey=='plan'" @click="copyPlan(record)">复制</a>
  200. <a href="javascript:;" v-if="tabkey=='idea'">预览</a>
  201. </span> -->
  202. <span slot="parentGroup" slot-scope="text">
  203. <a href="javascript:;" >{{text}}</a>
  204. </span>
  205. <span slot="parentPlan" slot-scope="text">
  206. <a href="javascript:;" >{{text}}</a>
  207. </span>
  208. <span slot="time" slot-scope="text,record">
  209. {{record.startTime}}至{{record.endTime}}
  210. </span>
  211. <span slot="flowControlMode" slot-scope="text">
  212. <span v-if="text=='FLOW_CONTROL_MODE_FAST'">优先跑量</span>
  213. <span v-if="text=='FLOW_CONTROL_MODE_SMOOTH'">优先低成本</span>
  214. <span v-if="text=='FLOW_CONTROL_MODE_BALANCE'">均衡投放</span>
  215. </span>
  216. </a-table>
  217. </div>
  218. </div>
  219. <!-- 出价的模态框 -->
  220. <div class="batchModal" >
  221. <a-modal v-model="offerPriceVisiable" :title="'批量修改'+ModalTitle" @ok="modifyChangeOk" width='55%' id="batchModal" >
  222. <div id="batchModal">
  223. <div class="selectePlan">已选{{}}个广告计划</div>
  224. <div class="modifyRules">
  225. <span class="rules">修改规则:</span>
  226. <a-radio-group v-model="modifyRulesValue" @change="modifyRulesChange">
  227. <a-radio-button value="total">
  228. 统一修改
  229. </a-radio-button>
  230. <a-radio-button value="separately">
  231. 分别修改
  232. </a-radio-button>
  233. </a-radio-group>
  234. <span class="totalPrice" v-if="modifyRulesValue=='total'"><span>{{ModalTitle=='出价'?'出价:':'总预算:'}}</span>
  235. <a-input-number :min="0" v-model="inputValue" :step="0.1" @change="totalbudgetChange" size="small" /> 元
  236. </span>
  237. </div>
  238. <div class="modifyTable">
  239. <a-table
  240. :columns="modifyTableCol"
  241. :data-source="modifyTableData"
  242. bordered
  243. tableLayout="auto"
  244. :pagination="false"
  245. :loading='modifyTableloading'
  246. style="word-break: break-all;"
  247. >
  248. <span slot="changeBudget" slot-scope="text,records">
  249. <span v-if="ModalTitle=='出价'">oCPM</span>
  250. <span v-else>{{modifyRulesValue=='total'?'总预算:':'日预算:'}}</span>
  251. <a-input-number :min="0" :step="0.1" @blur='budgetChange($event,records)' size="small" :disabled="modifyRulesValue=='total'" /> 元
  252. </span>
  253. <span slot="currentCost" slot-scope="currentCost">{{ currentCost | decimalsHandle }}</span>
  254. <span slot="budget" slot-scope="text">
  255. <span >日预算:{{ text | decimalsHandle }}</span>
  256. </span>
  257. <span slot="bid" slot-scope="text" >
  258. <span >oCPM: {{text | decimalsHandle}}</span>
  259. </span>
  260. </a-table>
  261. </div>
  262. </div>
  263. </a-modal>
  264. </div>
  265. <!-- 复制计划的弹出框 -->
  266. <a-modal v-model="copyPlanVisiable" title="复制计划" @ok="copyPlanOk" id="copyModal" :maskClosable='false'>
  267. <div id="copyModal">
  268. <p class="copyTip">复制说明:适用于批量复制多个广告计划,默认同事复制所属创意。此类型不直接跨广告投放账号复制,且只能复制完成后逐一修改</p>
  269. <p style="font-weight:700;font-size:15px">被复制广告计划:<span>{{}}</span></p>
  270. <p><span class="copyName"><b class="copyKeyStart">*</b> 复制个数:</span>
  271. <a-input-number :min="1" :max="10" v-model="copyNum" style="width:250px" />
  272. </p>
  273. <p><span class="copyName"><b class="copyKeyStart">*</b>复制到广告组:</span>
  274. <a-select size="default" default-value="a1" style="width: 250px" v-model="copyGroup" >
  275. <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
  276. {{ (i + 9).toString(36) + i }}
  277. </a-select-option>
  278. </a-select>
  279. </p>
  280. </div>
  281. </a-modal>
  282. <!-- </a-spin> -->
  283. </div>
  284. </template>
  285. <script>
  286. import moment from 'moment';
  287. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  288. // import { JeecgListMixin } from '@/mixins/ipagination'
  289. import editableCell from './editableCell'
  290. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  291. import qs from 'qs'
  292. let typeValue='预算'
  293. let modifyTableCol=[
  294. {
  295. title: '广告计划',
  296. dataIndex: 'name',
  297. align: 'center',
  298. },
  299. {
  300. title: '当前消耗',
  301. dataIndex: 'currentCost',
  302. align: 'center',
  303. scopedSlots: { customRender: 'currentCost' },
  304. },
  305. {
  306. title: '当前预算',
  307. dataIndex: 'budget',
  308. align: 'center',
  309. scopedSlots: { customRender:'budget' },
  310. },
  311. {
  312. title: '当前出价',
  313. dataIndex: 'bid',
  314. align: 'center',
  315. scopedSlots: { customRender:'bid' },
  316. },
  317. {
  318. title: '修改'+typeValue,
  319. dataIndex: 'changeBudget',
  320. align: 'center',
  321. scopedSlots: { customRender: 'changeBudget' },
  322. },
  323. ]
  324. const columns = [
  325. {
  326. title: '状态',
  327. dataIndex: 'campaignStatus',
  328. key: 'campaignStatus',
  329. align: 'center',
  330. scopedSlots: { customRender: 'campaignStatus' }
  331. },
  332. {
  333. title: '广告组名称',
  334. dataIndex: 'name',
  335. key: 'name',
  336. align: 'center',
  337. scopedSlots: { customRender: 'name' }
  338. },
  339. {
  340. title: '广告组ID',
  341. dataIndex: 'id',
  342. key: 'id',
  343. align: 'center',
  344. },
  345. {
  346. title: '推广目的',
  347. dataIndex: 'landingType_dictText',
  348. key: 'landingType_text',
  349. align: 'center',
  350. },
  351. {
  352. title: '预算类型',
  353. dataIndex: 'budgetMode_dictText',
  354. key: 'budgetMode_text',
  355. align: 'center',
  356. width:250,
  357. scopedSlots: { customRender: 'budgetMode' }
  358. },
  359. {
  360. title: '组预算(元)',
  361. dataIndex: 'budget',
  362. key: 'budget',
  363. align: 'center',
  364. scopedSlots: { customRender: 'budget' }
  365. },
  366. {
  367. title: '创建时间',
  368. dataIndex: 'campaignCreateTime',
  369. key: 'campaignCreateTime',
  370. align: 'center',
  371. scopedSlots: { customRender: 'campaignCreateTime' }
  372. },
  373. ];
  374. const planColumns = [
  375. {
  376. title: '状态',
  377. dataIndex: 'planStatus',
  378. key: 'planStatus',
  379. align: 'center',
  380. scopedSlots: { customRender: 'planStatus' }
  381. },
  382. // {
  383. // title: '操作',
  384. // dataIndex: 'options',
  385. // key: 'options',
  386. // align: 'center',
  387. // width:200,
  388. // scopedSlots: { customRender: 'options' }
  389. // },
  390. {
  391. title: '计划名称',
  392. dataIndex: 'name',
  393. key: 'name',
  394. align: 'center',
  395. width:200,
  396. scopedSlots: { customRender: 'name' }
  397. },
  398. // {
  399. // title: '计划ID',
  400. // dataIndex: 'id',
  401. // key: 'id',
  402. // align: 'center',
  403. // },
  404. {
  405. title: '账户',
  406. dataIndex: 'accountId_dictText',
  407. key: 'accountId_dictText',
  408. align: 'center',
  409. },
  410. {
  411. title: '计划预算(元)',
  412. dataIndex: 'budget',
  413. key: 'budget',
  414. align: 'center',
  415. width:150,
  416. scopedSlots: { customRender: 'budget' }
  417. },
  418. {
  419. title: '出价(元)',
  420. dataIndex: 'bid',
  421. key: 'bid',
  422. align: 'center',
  423. width:150,
  424. scopedSlots: { customRender: 'bid' }
  425. },
  426. {
  427. title: '目标转化出价(元)',
  428. dataIndex: 'cpaBid',
  429. key: 'cpaBid',
  430. align: 'center',
  431. width:150,
  432. scopedSlots: { customRender: 'cpaBid' }
  433. },
  434. {
  435. title: '投放方式',
  436. dataIndex: 'flowControlMode',
  437. key: 'flowControlMode',
  438. align: 'center',
  439. scopedSlots: { customRender: 'flowControlMode' }
  440. },
  441. {
  442. title: '投放时间',
  443. dataIndex: 'time',
  444. key: 'time',
  445. align: 'center',
  446. scopedSlots: { customRender: 'time' }
  447. },
  448. {
  449. title: '所属广告组',
  450. dataIndex: 'campaignId_dictText',
  451. key: 'campaignId_dictText',
  452. align: 'center',
  453. scopedSlots: { customRender: 'campaignId_dictText' }
  454. },
  455. {
  456. title: '创建时间',
  457. dataIndex: 'adCreateTime',
  458. key: 'adCreateTime',
  459. align: 'center',
  460. scopedSlots: { customRender: 'adCreateTime' }
  461. },
  462. ];
  463. const ideaColumns = [
  464. {
  465. title: '开关',
  466. dataIndex: 'createStatus',
  467. key: 'status',
  468. align: 'center',
  469. scopedSlots: { customRender: 'createStatus' }
  470. },
  471. // {
  472. // title: '操作',
  473. // dataIndex: 'options',
  474. // key: 'options',
  475. // align: 'center',
  476. // scopedSlots: { customRender: 'options' }
  477. // },
  478. {
  479. title: '创意',
  480. dataIndex: 'createImg',
  481. key: 'createImg',
  482. align: 'center',
  483. width:120,
  484. scopedSlots: { customRender: 'createImg' }
  485. },
  486. /*{
  487. title: '广告创意',
  488. dataIndex: 'img',
  489. key: 'img',
  490. align: 'center',
  491. },*/
  492. {
  493. title: '创意标题',
  494. dataIndex: 'title',
  495. key: 'title',
  496. align: 'center',
  497. },
  498. {
  499. title: '创意ID',
  500. dataIndex: 'id',
  501. key: 'id',
  502. align: 'center',
  503. },
  504. /*{
  505. title: '创意方式',
  506. dataIndex: 'iaID',
  507. key: 'idaID',
  508. align: 'center',
  509. },*/
  510. {
  511. title: '创意状态',
  512. dataIndex: 'status_dictText',
  513. key: 'status_dictText',
  514. align: 'center',
  515. scopedSlots: { customRender: 'status_dictText' }
  516. },
  517. {
  518. title: '账户',
  519. dataIndex: 'accountId_dictText',
  520. key: 'accountId_dictText',
  521. align: 'center',
  522. },
  523. {
  524. title: '所属计划',
  525. dataIndex: 'planId_dictText',
  526. key: 'planId_dictText',
  527. align: 'center',
  528. scopedSlots: { customRender: 'planId_dictText' }
  529. },
  530. {
  531. title: '创建时间',
  532. dataIndex: 'creativeCreateTime',
  533. key: 'creativeCreateTime',
  534. align: 'center',
  535. scopedSlots: { customRender: 'creativeCreateTime' }
  536. },
  537. /* {
  538. title: '投放位置',
  539. dataIndex: 'LaunchPosition',
  540. key: 'LaunchPosition',
  541. align: 'center',
  542. scopedSlots: { customRender: 'LaunchPosition' }
  543. },*/
  544. ];
  545. export default {
  546. components: {
  547. editableCell,
  548. Treeselect,
  549. },
  550. // mixins: [JeecgListMixin],
  551. data() {
  552. return {
  553. ipagination: {
  554. current: 1,
  555. pageSize: 10,
  556. // pageSizeOptions: ['10', '20', '30'],
  557. showTotal: (total, range) => {
  558. return range[0] + "-" + range[1] + " 共" + total + "条"
  559. },
  560. showQuickJumper: true,
  561. showSizeChanger:true,
  562. pageSizeOptions: ['10', '30', '50'],
  563. total: 0,
  564. onChange: (current, pageSize) => {
  565. // 切换分页时的回调,
  566. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  567. this.ipagination.current = current;
  568. this.ipagination.pageSize= pageSize;
  569. }
  570. },
  571. currentGroup:{},
  572. currentPlan:{},
  573. spinning:false,
  574. moment,
  575. accountID:undefined,
  576. openID:undefined,
  577. treeData:[],
  578. // account:'',//媒体账号
  579. optionId:'',//input输入的id或关键词
  580. statusValue:undefined,
  581. dateValue:[],//日期选择框选择
  582. dateString:[],//--我赋值的是dateString
  583. tabkey:'group',//tab选中的页
  584. selectDisable:true,
  585. optValue:'',//操作设置的值 删除 暂停 开启
  586. visible: false,//出价里的弹出框
  587. radioValue:'unlimit',//出价的单选默认值
  588. dayBudgetValue:0,//日预算的默认值
  589. offerPriceVisiable:false,//修改出价的弹出框显示与否
  590. modifyRulesValue:'total',//修改出价里的radio默认值
  591. ModalTitle:'出价',//模态框的标题
  592. inputValue:'',//模态框里统一修改时的金额
  593. //主页的表格
  594. data:[],
  595. columns,
  596. selectedRowKeys:[],
  597. selectedRows:[],
  598. loading:false,
  599. editID:0,
  600. //批量修改里的表格
  601. typeValue,
  602. modifyTableData:[
  603. ],
  604. modifyTableCol,
  605. modifyTableloading:false,
  606. //复制计划
  607. copyPlanVisiable:false,
  608. copyRecord:null,
  609. copyNum:1,//复制个数
  610. copyGroup:'',
  611. url: {
  612. campaignList: "/ctop/byteDanceCampaign/list",
  613. planList: "/ctop/byteDanceAdvertisePlan/list",
  614. creativeList: "/ctop/byteDanceCreative/list",
  615. },
  616. xiugaiData:[],//存分别修改时候的数组
  617. }
  618. },
  619. computed: {
  620. rowSelection(){
  621. return {
  622. onChange: (selectedRowKeys, selectedRows) => {
  623. // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  624. this.selectedRowKeys=selectedRowKeys;
  625. this.selectedRows=selectedRows;
  626. },
  627. onSelect: (record, selected, selectedRows) => {
  628. // console.log(record, selected, selectedRows);
  629. this.modifyTableData=selectedRows;
  630. this.selectedRows=selectedRows;
  631. },
  632. onSelectAll: (selected, selectedRows, changeRows) => {
  633. // console.log(selected, selectedRows, changeRows);
  634. this.modifyTableData=selectedRows
  635. this.selectedRows=selectedRows;
  636. },
  637. }
  638. },
  639. },
  640. methods: {
  641. // 点击跳转
  642. goNextPage(item){
  643. console.log(item);
  644. if(this.tabkey=='group'){
  645. this.tabkey='plan';
  646. this.columns=planColumns;
  647. this.loading=true;
  648. this.data=[];
  649. this.currentGroup=item
  650. console.log(item.id)
  651. this.getplanList({
  652. accountId:this.accountID,
  653. name:this.optionId,
  654. status:this.statusValue,
  655. startDate:this.dateString[0],
  656. endDate:this.dateString[1],
  657. pageNo:this.ipagination.current,
  658. pageSize:this.ipagination.pageSize,
  659. campaignId:item.id
  660. })
  661. let groupInfo=JSON.stringify(item)
  662. localStorage.setItem('groupInfo',groupInfo)
  663. }else if(this.tabkey=='plan'){
  664. this.tabkey='idea';
  665. this.columns=ideaColumns;
  666. this.loading=true;
  667. this.data=[];
  668. this.currentPlan=item
  669. this.refreshCreativeList({
  670. accountId:this.accountID,
  671. planId:item.id,
  672. name:this.optionId,
  673. status:this.statusValue,
  674. startDate:this.dateString[0],
  675. endDate:this.dateString[1],
  676. pageNo:this.ipagination.current,
  677. pageSize:this.ipagination.pageSize,
  678. })
  679. let planInfo=JSON.stringify([item])
  680. localStorage.setItem('planInfo',planInfo)
  681. }
  682. },
  683. // 清空选中的组信息
  684. clearGroup(){
  685. this.currentGroup={};
  686. this.loading=true;
  687. this.getplanList({
  688. accountId:this.accountID,
  689. name:this.optionId,
  690. status:this.statusValue,
  691. startDate:this.dateString[0],
  692. endDate:this.dateString[1],
  693. pageNo:this.ipagination.current,
  694. pageSize:this.ipagination.pageSize,
  695. campaignId:this.currentGroup.id
  696. })
  697. },
  698. // 清空选中的计划
  699. clearPlan(){
  700. this.currentPlan={};
  701. this.loading=true;
  702. this.refreshCreativeList({
  703. accountId:this.accountID,
  704. name:this.optionId,
  705. status:this.statusValue,
  706. startDate:this.dateString[0],
  707. endDate:this.dateString[1],
  708. pageNo:this.ipagination.current,
  709. pageSize:this.ipagination.pageSize,
  710. planId:this.currentPlan.id,
  711. })
  712. },
  713. // table里的函数
  714. // table里的函数在上
  715. accountIDChange(val){
  716. // console.log(val);
  717. let currentData=this.treeData.filter((item)=>{
  718. return item.value==val
  719. })
  720. // console.log(currentData);
  721. if(currentData.length>0){
  722. this.accountID=undefined;
  723. this.openID=val
  724. }
  725. this.search();
  726. this.treeData.forEach((item)=>{
  727. item.children.forEach(ele=>{
  728. if(ele.value==this.accountID){
  729. let accountInfo=JSON.stringify(ele)
  730. localStorage.setItem('accountInfo',accountInfo)
  731. }
  732. })
  733. })
  734. },
  735. filterOption(input, option){
  736. // console.log(input, option)
  737. return (
  738. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  739. );
  740. },
  741. //tab切换页的函数
  742. callback(key) {
  743. // console.log(key);
  744. this.tabkey=key;
  745. // this.columns=[];
  746. if(key=='group'){
  747. this.columns=columns;
  748. }else if(key=='plan'){
  749. this.columns=planColumns;
  750. }else if(key=='idea'){
  751. this.columns=ideaColumns;
  752. }
  753. if(this.accountID){
  754. this.tabkey=key;
  755. this.loading=true
  756. if(key=='group'){
  757. this.refreshCampaignList({
  758. accountId:this.accountID,
  759. name:this.optionId,
  760. status:this.statusValue,
  761. startDate:this.dateString[0],
  762. endDate:this.dateString[1],
  763. pageNo:this.ipagination.current,
  764. pageSize:this.ipagination.pageSize,
  765. });
  766. }else if(key=='plan'){
  767. this.getplanList({
  768. accountId:this.accountID,
  769. name:this.optionId,
  770. toutiaoStatus:this.statusValue,
  771. startDate:this.dateString[0],
  772. endDate:this.dateString[1],
  773. pageNo:this.ipagination.current,
  774. pageSize:this.ipagination.pageSize,
  775. campaignId:this.currentGroup.id
  776. })
  777. }else if(key=='idea'){
  778. let params = {};
  779. this.refreshCreativeList({
  780. accountId:this.accountID,
  781. planId:this.currentPlan.id,
  782. name:this.optionId,
  783. status:this.statusValue,
  784. startDate:this.dateString[0],
  785. endDate:this.dateString[1],
  786. pageNo:this.ipagination.current,
  787. pageSize:this.ipagination.pageSize,
  788. });
  789. }
  790. }
  791. },
  792. //跳转到批量页面
  793. goBatch(){
  794. this.$router.push('/modules/BatchCreate/newGroup')
  795. },
  796. createPlan(){
  797. if(this.currentGroup.name){
  798. console.log(this.currentGroup)
  799. this.$router.push('/modules/BatchCreate/newPlan');
  800. let groupInfo=JSON.stringify(this.currentGroup);
  801. localStorage.setItem('groupInfo',groupInfo)
  802. }else {
  803. this.$router.push('/modules/BatchCreate/newGroup')
  804. }
  805. },
  806. createIdea(){
  807. if(this.accountID){
  808. if(this.currentPlan.name){
  809. // console.log(this.currentPlan)
  810. let groupInfo=JSON.stringify(this.currentGroup);
  811. localStorage.setItem('groupInfo',groupInfo)
  812. let planInfo=JSON.stringify([this.currentPlan]);
  813. localStorage.setItem('planInfo',planInfo)
  814. this.$router.push('/modules/BatchCreate/newCreate');
  815. }else if(!this.currentPlan.name){
  816. // console.log('hhhh 去新建或者选择已有');
  817. this.$router.push('/modules/BatchCreate/selectPlanList');
  818. }
  819. }else {
  820. this.$router.push('/modules/BatchCreate/newGroup')
  821. }
  822. },
  823. //状态改变
  824. statusChange(value){
  825. console.log(value);
  826. },
  827. //日期改变
  828. dateChange(date, dateString) {
  829. console.log(date, dateString);
  830. this.dateString=dateString;
  831. },
  832. disabledDate(current) {
  833. // console.log(current)
  834. return current && current > moment().subtract(1, 'day')
  835. },
  836. //输入框查询事件
  837. onSearch(value){
  838. // console.log('input--'+value);
  839. },
  840. //查询按钮事件
  841. search(){
  842. // console.log(this.accountID,this.dateString,this.statusValue,this.optionId);
  843. if(this.accountID){
  844. this.loading=true
  845. if(this.tabkey=='group'){
  846. this.columns=columns;
  847. this.refreshCampaignList({
  848. accountId:this.accountID,
  849. name:this.optionId,
  850. status:this.statusValue,
  851. startDate:this.dateString[0],
  852. endDate:this.dateString[1],
  853. pageNo:this.ipagination.current,
  854. pageSize:this.ipagination.pageSize,
  855. })
  856. }else if(this.tabkey=='plan'){
  857. this.columns=planColumns;
  858. this.getplanList({
  859. accountId:this.accountID,
  860. name:this.optionId,
  861. status:this.statusValue,
  862. startDate:this.dateString[0],
  863. endDate:this.dateString[1],
  864. pageNo:this.ipagination.current,
  865. pageSize:this.ipagination.pageSize,
  866. campaignId:this.currentGroup.id
  867. })
  868. }else if(this.tabkey=='idea'){
  869. this.columns=ideaColumns;
  870. this.refreshCreativeList({
  871. accountId:this.accountID,
  872. name:this.optionId,
  873. status:this.statusValue,
  874. startDate:this.dateString[0],
  875. endDate:this.dateString[1],
  876. pageNo:this.ipagination.current,
  877. pageSize:this.ipagination.pageSize,
  878. planId:this.currentPlan.id,
  879. })
  880. }
  881. }else{
  882. this.$message.error('请选择账户后重试')
  883. }
  884. },
  885. //点击分页
  886. sort(pagination, filters, sorter, { currentDataSource }){
  887. this.ipagination.current=pagination.current;
  888. this.ipagination.pageSize=pagination.pageSize;
  889. this.search()
  890. },
  891. //重置按钮事件
  892. reset(){
  893. },
  894. //状态改变
  895. switchChange(text,record){
  896. // this.spinning=true;
  897. // console.log(text,record);
  898. let recordData=JSON.parse(JSON.stringify(record))
  899. record.spin=true;
  900. if(this.tabkey=='group'){
  901. let ids=record.id;
  902. let status=text?'disable':'enable';
  903. postAction('/ctop/byteDanceCampaign/editStatus',qs.stringify({
  904. accountId:this.accountID,
  905. ids:`${ids}`,
  906. status:status,
  907. })).then((res)=>{
  908. // console.log(res);
  909. // this.spinning=false;
  910. record.spin=false;
  911. if(res.success){
  912. this.refreshCampaignList({
  913. accountId:this.accountID,
  914. name:this.optionId,
  915. status:this.statusValue,
  916. startDate:this.dateString[0],
  917. endDate:this.dateString[1],
  918. pageNo:this.ipagination.current,
  919. pageSize:this.ipagination.pageSize,
  920. })
  921. this.$message.success(res.message)
  922. }else{
  923. this.$message.error(res.message)
  924. }
  925. })
  926. }else if(this.tabkey=='plan'){
  927. if(text){
  928. recordData.optStatus='AD_STATUS_DISABLE';
  929. }else{
  930. recordData.optStatus='AD_STATUS_ENABLE'
  931. }
  932. this.batchEditHttp('status',[recordData])
  933. }else if(this.tabkey=='idea'){
  934. let ids=record.id;
  935. let status=text?'disable':'enable';
  936. postAction('/ctop//byteDanceCreative/editStatus',qs.stringify({
  937. accountId:this.accountID,
  938. ids:`${ids}`,
  939. status:status,
  940. })).then((res)=>{
  941. // console.log(res);
  942. if(res.success){
  943. // this.data=[];
  944. record.spin=false;
  945. this.refreshCreativeList({
  946. accountId:this.accountID,
  947. name:this.optionId,
  948. status:this.statusValue,
  949. startDate:this.dateString[0],
  950. endDate:this.dateString[1],
  951. pageNo:this.ipagination.current,
  952. pageSize:this.ipagination.pageSize,
  953. planId:this.currentPlan.id,
  954. })
  955. }else{
  956. record.spin=false;
  957. this.$message.error(res.message)
  958. }
  959. })
  960. }
  961. },
  962. //改变批量操作的按钮
  963. changeSelectStatus(){
  964. this.selectDisable=false;
  965. },
  966. //批量操作下的启动 删除 暂停
  967. optChange(value){
  968. // console.log(value)
  969. this.optValue=value;
  970. },
  971. editGroupStatus(url){
  972. let ids='';
  973. this.selectedRows.forEach((item,index)=>{
  974. if(index==0){
  975. ids=`${item.id}`
  976. }else{
  977. ids+=`,${item.id}`
  978. }
  979. })
  980. let status=''
  981. if(this.optValue=='pause'){
  982. status='disable'
  983. }else if(this.optValue=='open'){
  984. status='enable'
  985. }else if(this.optValue=='delete'){
  986. status='delete'
  987. }
  988. postAction(url,qs.stringify({
  989. accountId:this.accountID,
  990. ids,
  991. status,
  992. })).then((res)=>{
  993. console.log(res);
  994. // this.loading=false
  995. this.optValue=undefined;
  996. if(res.success){
  997. this.$message.success(res.message)
  998. // this.data=[];
  999. this.refreshCampaignList({
  1000. accountId:this.accountID,
  1001. name:this.optionId,
  1002. status:this.statusValue,
  1003. startDate:this.dateString[0],
  1004. endDate:this.dateString[1],
  1005. pageNo:this.ipagination.current,
  1006. pageSize:this.ipagination.pageSize,
  1007. })
  1008. }else{
  1009. this.loading=false
  1010. // if(this.selectedRows.length>0){
  1011. // this.selectedRows.forEach(item=>{
  1012. // item.spin=false;
  1013. // })
  1014. // }
  1015. this.selectedRowKeys=[];
  1016. this.selectedRows=[];
  1017. this.optValue=undefined;
  1018. this.$message.error(res.message)
  1019. }
  1020. })
  1021. },
  1022. //批量操作的确定按钮
  1023. isOkHandle(){
  1024. console.log(this.optValue&&this.selectedRowKeys.length>0)
  1025. if(this.optValue&&this.selectedRowKeys.length>0){
  1026. // this.selectedRows.forEach(item=>{
  1027. // item.spin=true;
  1028. // })
  1029. if(this.optValue=='pause'){
  1030. this.loading=true;
  1031. if(this.tabkey=='group'){
  1032. console.log(this.selectedRows);
  1033. this.editGroupStatus('/ctop/byteDanceCampaign/editStatus')
  1034. }else if(this.tabkey=='plan'){
  1035. // console.log(0)
  1036. this.loading=true;
  1037. if(this.selectedRowKeys.length>0){
  1038. this.selectedRows.forEach((item)=>{
  1039. item.optStatus='AD_STATUS_DISABLE'
  1040. })
  1041. }
  1042. console.log(0)
  1043. this.batchEditHttp('status',this.selectedRows)
  1044. }else if(this.tabkey=='idea'){
  1045. this.loading=true;
  1046. this.editGroupStatus('/ctop/byteDanceCreative/editStatus')
  1047. }
  1048. }else if(this.optValue=='open'){
  1049. this.loading=true;
  1050. if(this.tabkey=='group'){
  1051. this.editGroupStatus('/ctop/byteDanceCampaign/editStatus');
  1052. }else if(this.tabkey=='plan'){
  1053. if(this.selectedRowKeys.length>0){
  1054. this.selectedRows.forEach((item)=>{
  1055. item.optStatus='AD_STATUS_ENABLE'
  1056. })
  1057. }
  1058. this.batchEditHttp('status',this.selectedRows)
  1059. }else if(this.tabkey=='idea'){
  1060. this.editGroupStatus('/ctop/byteDanceCreative/editStatus');
  1061. }
  1062. }
  1063. // this.selectedRows=[];
  1064. // this.selectedRowKeys=[];
  1065. }
  1066. },
  1067. //确定删除
  1068. confirm(e) {
  1069. // console.log(e);
  1070. this.loading=true;
  1071. if(this.optValue=='delete'){
  1072. if(this.tabkey=='group'){
  1073. this.editGroupStatus('/ctop/byteDanceCampaign/editStatus')
  1074. }else if(this.tabkey=='plan'){
  1075. if(this.selectedRowKeys.length>0){
  1076. this.selectedRows.forEach((item)=>{
  1077. item.optStatus='AD_STATUS_DELETE'
  1078. })
  1079. }
  1080. this.batchEditHttp('status',this.selectedRows)
  1081. this.$message.success('删除成功');
  1082. }else if(this.tabkey=='idea'){
  1083. this.editGroupStatus('/ctop/byteDanceCreative/editStatus');
  1084. }
  1085. }
  1086. },
  1087. //取消删除
  1088. cancel(e) {
  1089. // console.log(e);
  1090. // this.$message.error('删除成功');
  1091. },
  1092. //预算里 取消按钮点击
  1093. showPricecancel() {
  1094. // console.log(111);
  1095. this.visible = false;
  1096. this.dayBudgetValue=0
  1097. this.radioValue='unlimit'
  1098. },
  1099. showPriceOk(){
  1100. this.visible = false;
  1101. },
  1102. //单选按钮改变事件
  1103. radioChange(e) {
  1104. // console.log('radio checked', e.target.value,this.radioValue);
  1105. },
  1106. totalbudgetChange(val){
  1107. // console.log(this.inputValue,'------',val)
  1108. },
  1109. budgetChange(e,record){
  1110. // console.log(e.target.value,'------',record);
  1111. this.xiugaiData.push(JSON.parse(JSON.stringify(record)))
  1112. if(this.typeValue=='预算'){
  1113. if(e.target.value ){
  1114. this.xiugaiData.forEach((item)=>{
  1115. if(item.id==record.id){
  1116. item.budget=e.target.value*1
  1117. }
  1118. })
  1119. // console.log(this.xiugaiData)
  1120. }
  1121. }else if(this.typeValue=='出价'){
  1122. if(e.target.value ){
  1123. this.xiugaiData.forEach((item)=>{
  1124. if(item.id==record.id){
  1125. item.bid==e.target.value*1
  1126. }
  1127. })
  1128. }
  1129. }
  1130. },
  1131. //广告计划下的预算
  1132. changebudget(){
  1133. this.offerPriceVisiable=true;
  1134. this.ModalTitle='预算'
  1135. this.typeValue='预算'
  1136. this.modifyTableCol[4].title='修改预算';
  1137. this.xiugaiData=[];
  1138. this.inputValue=undefined;
  1139. },
  1140. //修改出价
  1141. changeofferPrice(){
  1142. this.offerPriceVisiable=true;
  1143. this.ModalTitle='出价'
  1144. this.typeValue='出价';
  1145. this.modifyTableCol[4].title='修改出价';
  1146. this.xiugaiData=[]
  1147. this.inputValue=undefined
  1148. },
  1149. //批量修改出价和预算的弹出框确定
  1150. modifyChangeOk(e) {
  1151. // console.log(e);
  1152. this.offerPriceVisiable = false;
  1153. // console.log(this.inputValue);
  1154. if(this.modifyRulesValue=='separately'){
  1155. let batchArr=[...this.xiugaiData];
  1156. let changeZiduan=''
  1157. if(this.typeValue=='预算'){
  1158. changeZiduan='budget'
  1159. }else if(this.typeValue=='出价'){
  1160. changeZiduan='bid'
  1161. }
  1162. // console.log(batchArr)
  1163. this.batchEditHttp(changeZiduan,batchArr)
  1164. }else if(this.modifyRulesValue=='total'){
  1165. let batchArr=[...this.modifyTableData]
  1166. if(this.typeValue=='出价'){
  1167. batchArr.forEach((item)=>{
  1168. item.bid=this.inputValue
  1169. })
  1170. this.batchEditHttp('bid',batchArr)
  1171. }else if(this.typeValue=='预算'){
  1172. batchArr.forEach((item)=>{
  1173. item.budget=this.inputValue
  1174. })
  1175. this.batchEditHttp('budget',batchArr)
  1176. }
  1177. }
  1178. this.modifyTableData=[];
  1179. this.selectedRowKeys=[]
  1180. },
  1181. batchEditHttp(type,params){
  1182. postAction(`/ctop/byteDanceAdvertisePlan/batchEdit/${type}`,params).then((res)=>{
  1183. // console.log(res);
  1184. this.optValue=undefined;
  1185. if(res.success){
  1186. if(res.result.length>0){
  1187. this.modifyTableData=[]
  1188. this.modifyTableData=res.result
  1189. this.getplanList({
  1190. accountId:this.accountID,
  1191. name:this.optionId,
  1192. status:this.statusValue,
  1193. startDate:this.dateString[0],
  1194. endDate:this.dateString[1],
  1195. pageNo:this.ipagination.current,
  1196. pageSize:this.ipagination.pageSize,
  1197. campaignId:this.currentGroup.id
  1198. })
  1199. }
  1200. // params.spin=false;
  1201. params.forEach(item=>{
  1202. item.spin=false;
  1203. })
  1204. this.optValue=undefined;
  1205. this.selectedRowKeys=[];
  1206. this.$message.success(res.message)
  1207. }else{
  1208. // params.spin=false;
  1209. // params.forEach(item=>{
  1210. // item.spin=false;
  1211. // })
  1212. this.loading=false;
  1213. this.getplanList({
  1214. accountId:this.accountID,
  1215. name:this.optionId,
  1216. status:this.statusValue,
  1217. startDate:this.dateString[0],
  1218. endDate:this.dateString[1],
  1219. pageNo:this.ipagination.current,
  1220. pageSize:this.ipagination.pageSize,
  1221. campaignId:this.currentGroup.id
  1222. })
  1223. this.$message.error(res.message)
  1224. }
  1225. })
  1226. },
  1227. //修改规则的改变
  1228. modifyRulesChange(e){
  1229. // console.log(e.target.value)
  1230. this.modifyRulesValue=e.target.value
  1231. if(e.target.value=='total'){
  1232. this.inputValue=''
  1233. }else{
  1234. this.inputValue=0
  1235. }
  1236. },
  1237. //点击修改广告名
  1238. // changecampaignName(text,record){
  1239. // console.log(text,record)
  1240. // },
  1241. onCellChange(key, dataIndex, value) {
  1242. // console.log(key, dataIndex, value)
  1243. const dataSource = [...this.data];
  1244. const target = dataSource.find(item => item.key === key);
  1245. if (target) {
  1246. target[dataIndex] = value;
  1247. console.log(target)
  1248. //单独修改预算
  1249. if(this.tabkey=='group'){
  1250. if(dataIndex=='name'){
  1251. postAction('/ctop/byteDanceCampaign/edit',{
  1252. accountId:this.accountID,
  1253. id:key,
  1254. campaignName:value,
  1255. }).then((res)=>{
  1256. console.log(res);
  1257. if(res.success){
  1258. this.data=dataSource
  1259. this.$message.success(res.message)
  1260. }else{
  1261. this.$message.error(res.message)
  1262. this.data=[];
  1263. this.refreshCampaignList({
  1264. accountId:this.accountID,
  1265. name:this.optionId,
  1266. status:this.statusValue,
  1267. startDate:this.dateString[0],
  1268. endDate:this.dateString[1],
  1269. pageNo:this.ipagination.current,
  1270. pageSize:this.ipagination.pageSize,
  1271. })
  1272. }
  1273. })
  1274. }else if(dataIndex=='budget'){
  1275. postAction('/ctop/byteDanceCampaign/edit',{
  1276. accountId:this.accountID,
  1277. id:key,
  1278. budget:value,
  1279. }).then((res)=>{
  1280. console.log(res);
  1281. if(res.success){
  1282. // this.data = dataSource;
  1283. target[dataIndex] = value;
  1284. this.$message.success({
  1285. content:res.message,
  1286. duration:2
  1287. })
  1288. }else{
  1289. this.$message.error({
  1290. content:res.message,
  1291. duration:2
  1292. })
  1293. }
  1294. })
  1295. }
  1296. }else if(this.tabkey=='plan'){
  1297. postAction('/ctop/byteDanceAdvertisePlan/edit',target).then((res)=>{
  1298. console.log(res);
  1299. if(res.success){
  1300. this.data = dataSource;
  1301. this.$message.success('修改成功!')
  1302. }else{
  1303. this.$message.error(res.message);
  1304. this.getplanList({
  1305. accountId:this.accountID,
  1306. name:this.optionId,
  1307. status:this.statusValue,
  1308. startDate:this.dateString[0],
  1309. endDate:this.dateString[1],
  1310. pageNo:this.ipagination.current,
  1311. pageSize:this.ipagination.pageSize,
  1312. campaignId:this.currentGroup.id
  1313. })
  1314. }
  1315. })
  1316. }else if(this.tabkey=='idea'){
  1317. }
  1318. }
  1319. // console.log(this.data)
  1320. },
  1321. //复制广告计划
  1322. copyPlan(record){
  1323. this.copyRecord=record;
  1324. this.copyPlanVisiable=true;
  1325. },
  1326. copyPlanOk(e) {
  1327. this.copyPlanVisiable = false;
  1328. // console.log(this.copyNum,'---',this.copyGroup)
  1329. },
  1330. refreshCampaignList(params){
  1331. // this.loading=true
  1332. getAction(this.url.campaignList, params).then(res => {
  1333. // console.log(res);
  1334. this.loading = false;
  1335. if (res.success) {
  1336. this.ipagination.total = res.result.total
  1337. this.data = res.result.records.map(item=>{
  1338. return {
  1339. ...item,
  1340. spin:false,
  1341. key:item.id
  1342. }
  1343. });
  1344. this.selectedRows=[];
  1345. this.selectedRowKeys=[];
  1346. } else {
  1347. // console.log(res.message);
  1348. this.selectedRows=[];
  1349. this.selectedRowKeys=[];
  1350. }
  1351. })
  1352. },
  1353. getplanList(params){
  1354. getAction(this.url.planList,params).then((res)=>{
  1355. this.data=[]
  1356. console.log(res)
  1357. this.loading = false
  1358. if(res.success){
  1359. this.ipagination.total = res.result.total
  1360. res.result.records.forEach((item)=>{
  1361. item.key=item.id
  1362. })
  1363. this.data = res.result.records.map(item=>{
  1364. return {
  1365. ...item,
  1366. spin:false
  1367. }
  1368. });
  1369. // console.log(this.data)
  1370. this.selectedRowKeys=[];
  1371. }
  1372. })
  1373. },
  1374. refreshCreativeList(params){
  1375. this.loading=true;
  1376. getAction(this.url.creativeList, params).then(res => {
  1377. // console.log(res);
  1378. this.loading=false;
  1379. if (res.success) {
  1380. this.ipagination.total = res.result.total
  1381. this.loading = false;
  1382. res.result.records.forEach((item)=>{
  1383. item.key=item.id
  1384. })
  1385. // this.data = res.result.records;
  1386. this.data = res.result.records.map(item=>{
  1387. return {
  1388. ...item,
  1389. spin:false
  1390. }
  1391. });
  1392. } else {
  1393. // console.log(res.message);
  1394. }
  1395. })
  1396. },
  1397. //请求项目和账户内容
  1398. accountHttp(){
  1399. this.treeData=[];
  1400. this.accountID=undefined;
  1401. getAction('/ctop/projectMember/getProjectAccountByUserId?mediaType=1', {}).then(res => {
  1402. if(res.success){
  1403. // console.log(res);
  1404. if(res.result){
  1405. res.result.forEach((element,index) => {
  1406. if(element){
  1407. this.treeData.push({});
  1408. this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
  1409. this.treeData[index].value='project'+element.project.projectId;
  1410. this.treeData[index].key=element.project.projectId;
  1411. this.treeData[index].mediaId=element.project.mediaId;
  1412. this.treeData[index].children=[];
  1413. if(element.account.length){
  1414. element.account.forEach((ele,i)=>{
  1415. this.treeData[index].children.push({});
  1416. this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
  1417. this.treeData[index].children[i].value=ele.accountId;
  1418. this.treeData[index].children[i].key=ele.accountId;
  1419. })
  1420. }
  1421. }
  1422. });
  1423. // console.log(this.treeData)
  1424. }
  1425. }
  1426. })
  1427. },
  1428. },
  1429. mounted() {
  1430. this.accountHttp()
  1431. },
  1432. activated() {
  1433. // this.accountHttp()
  1434. },
  1435. beforeDestroy() {
  1436. this.treeData.forEach((item)=>{
  1437. item.children.forEach(ele=>{
  1438. if(ele.value==this.accountID){
  1439. let accountInfo=JSON.stringify(ele)
  1440. localStorage.setItem('accountInfo',accountInfo)
  1441. }
  1442. })
  1443. })
  1444. },
  1445. filters: {
  1446. toPercentage(val) {
  1447. if(val){
  1448. if(typeof val != 'string'){
  1449. return (val * 100).toFixed(2) + '%'
  1450. }else{
  1451. return val
  1452. }
  1453. }else if(typeof val =='string'){
  1454. return val
  1455. }
  1456. else{
  1457. return 0
  1458. }
  1459. },
  1460. //保留两位小数并且变成货币格式
  1461. decimalsHandle(val){
  1462. if(val && typeof val !='string'){
  1463. if(val>=0){
  1464. val=parseFloat(val).toFixed(2);
  1465. let numberStr = val.toString()
  1466. let str = numberStr.split('.')
  1467. let str0=str[0].split('').reverse();
  1468. for (let i = 0; i < str0.length; i++) {
  1469. if ((i + 1) % 4 === 0) {
  1470. str0.splice(i, 0, ',')
  1471. }
  1472. }
  1473. str0.reverse()
  1474. let handleResult = ''
  1475. for (let j = 0; j < str0.length; j++) {
  1476. handleResult += str0[j]
  1477. }
  1478. return handleResult+'.'+str[1]
  1479. }else{
  1480. val=parseFloat(val).toFixed(2);
  1481. let numberStr = val.toString()
  1482. let str = numberStr.split('.')
  1483. let str0=str[0].substr(1).split('').reverse();
  1484. for (let i = 0; i < str0.length; i++) {
  1485. if ((i + 1) % 4 === 0) {
  1486. str0.splice(i, 0, ',')
  1487. }
  1488. }
  1489. str0.reverse()
  1490. let handleResult = ''
  1491. for (let j = 0; j < str0.length; j++) {
  1492. handleResult += str0[j]
  1493. }
  1494. return '-'+handleResult+'.'+str[1]
  1495. }
  1496. }else if(typeof val =='string'){
  1497. return val
  1498. }
  1499. else{
  1500. return 0
  1501. }
  1502. },
  1503. //变成货币格式
  1504. formatCurrency(val){
  1505. if((val||val==0)&& typeof val !='string'){
  1506. let numberStr = val.toString()
  1507. let str = numberStr.split('').reverse()
  1508. for (let i = 0; i < str.length; i++) {
  1509. if ((i + 1) % 4 === 0) {
  1510. str.splice(i, 0, ',')
  1511. }
  1512. }
  1513. str.reverse()
  1514. let handleResult = ''
  1515. for (let j = 0; j < str.length; j++) {
  1516. handleResult += str[j]
  1517. }
  1518. return handleResult
  1519. }else if(typeof val =='string'){
  1520. return val
  1521. }
  1522. else{
  1523. return '-'
  1524. }
  1525. }
  1526. }
  1527. }
  1528. </script>
  1529. <style lang="scss">
  1530. #closeIcon{
  1531. color: #0E74D2;
  1532. }
  1533. .toutiaoBatch{
  1534. .ant-tag .anticon-close {
  1535. color: #1890ff;
  1536. }
  1537. .ant-tag .anticon-close:hover{
  1538. color: rgba(0, 0, 0, 0.85);
  1539. }
  1540. }
  1541. .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
  1542. background-color: #fff;
  1543. color: #333;
  1544. }
  1545. #batchModal{
  1546. .rules,.totalPrice{
  1547. font-weight: 600;
  1548. }
  1549. .selectePlan{
  1550. font-size: 14px;
  1551. font-weight: 700;
  1552. color: #333;
  1553. padding: 20px 0;
  1554. }
  1555. .totalPrice{
  1556. margin-left: 20px;
  1557. }
  1558. .modifyTable{
  1559. margin-top: 20px;
  1560. width: 100%;
  1561. height: 400px;
  1562. overflow: auto;
  1563. font-weight: 600;
  1564. }
  1565. }
  1566. #copyModal{
  1567. .ant-modal-header{
  1568. text-align: center;
  1569. }
  1570. .copyTip{
  1571. font-size: 12px;
  1572. color: #999;
  1573. }
  1574. .copyName{
  1575. width: 118px;
  1576. display: inline-block;
  1577. text-align: right;
  1578. .copyKeyStart{
  1579. color: red;
  1580. }
  1581. }
  1582. // font-weight: 600;
  1583. }
  1584. </style>
  1585. <style lang="scss" scoped>
  1586. .toutiaoBatch{
  1587. background-color: #fff;
  1588. padding: 10px 20px;
  1589. position: relative;
  1590. width: 100%;
  1591. .OptinItem{
  1592. display: inline-block;
  1593. margin-right: 15px;
  1594. .ok{
  1595. margin-right: 15px;
  1596. }
  1597. }
  1598. .OptinItem:first-child{
  1599. margin-right: 10px;
  1600. }
  1601. .topOptions{
  1602. padding: 15px 0;
  1603. .topOpt{
  1604. width: 100%;
  1605. margin-bottom: 10px;
  1606. }
  1607. }
  1608. .optionBtn{
  1609. // display: inline-block;
  1610. float: right;
  1611. .searchBtn{
  1612. margin-right: 10px;
  1613. }
  1614. }
  1615. .tableArea{
  1616. .tableOption{
  1617. padding: 20px 0;
  1618. }
  1619. }
  1620. }
  1621. </style>