groupList.vue 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074
  1. <template>
  2. <div class="toutiaoBatch">
  3. <div>
  4. <p class="breadcrumb">
  5. <a-breadcrumb style="display:block;width:100%">
  6. <a-breadcrumb-item ><span class="muen" @click="goStrategyList()">策略列表</span></a-breadcrumb-item>
  7. <a-breadcrumb-item><span class="muen" @click="goPlanList()">计划列表</span></a-breadcrumb-item>
  8. <a-breadcrumb-item>组列表</a-breadcrumb-item>
  9. </a-breadcrumb>
  10. </p>
  11. </div>
  12. <div class="toolbox-automate-rules-create-content_title"><h3>广告组</h3></div>
  13. <div class="topOptions">
  14. <span class="OptinItem">
  15. <a-select style="width: 200px" v-model="groupStatus" @change="statusChange" placeholder="请选择组状态">
  16. <a-select-option value="" >
  17. 不限
  18. </a-select-option>
  19. <a-select-option :value="1" >
  20. 投放中
  21. </a-select-option>
  22. <!-- <a-select-option value="2" >
  23. 超预算
  24. </a-select-option>
  25. <a-select-option value="3">
  26. 余额不足
  27. </a-select-option> -->
  28. <a-select-option :value="0">
  29. 已关停
  30. </a-select-option>
  31. </a-select>
  32. </span>
  33. <span class="OptinItem">
  34. <a-input-search placeholder="组名称" v-model="groupName" style="width: 300px" />
  35. </span>
  36. <span class="OptinItem">
  37. <a-input-search placeholder="组ID" v-model="groupId" style="width: 300px" />
  38. </span>
  39. <span class="optionBtn">
  40. <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
  41. <!-- <a-button type='default' @click="reset">重置</a-button> -->
  42. </span>
  43. </div>
  44. <div class="tableArea">
  45. <div class="tableOption">
  46. <!-- <span class="OptinItem">
  47. <a-tooltip>
  48. <template slot="title" >
  49. 这里可以批量启动、暂停、删除你的选择哦~
  50. </template>
  51. <span >批量操作:</span>
  52. </a-tooltip>
  53. </span>
  54. <span class="OptinItem">
  55. <a-select style="width: 120px" @change="optChange" v-model="optValue" placeholder="请选择批量操作" :disabled='selectedRowKeys.length<=0'>
  56. <a-select-option value="open" >
  57. 启动
  58. </a-select-option>
  59. <a-select-option value="pause">
  60. 暂停
  61. </a-select-option>
  62. </a-select>
  63. </span>
  64. <span class="OptinItem">
  65. <a-popconfirm
  66. title="确定要删除选择的内容吗?"
  67. ok-text="删除"
  68. cancel-text="取消"
  69. @confirm="confirm"
  70. @cancel="cancel"
  71. v-if="optValue=='delete'"
  72. >
  73. <a-button type='primary' @click="isOkHandle" class="ok">确定</a-button>
  74. </a-popconfirm>
  75. <a-button type='primary' @click="isOkHandle" class="ok" v-else>确定</a-button>
  76. </span>
  77. -->
  78. </div>
  79. <div class="table">
  80. <!-- :rowSelection="{selectedRowKeys: selectedRowKeys,...rowSelection}" -->
  81. <a-table
  82. :columns="columns"
  83. :data-source="data"
  84. bordered
  85. :pagination="ipagination"
  86. :loading="loading"
  87. @change="sort"
  88. :scroll="{'x':scrollX}"
  89. >
  90. <span slot="switchStatus" slot-scope="text,record">
  91. <a-spin :spinning="record.spin" size="small" >
  92. <div class="spin-content">
  93. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  94. </div>
  95. </a-spin>
  96. </span>
  97. <span slot="createStatus" slot-scope="text,record">
  98. <a-spin :spinning="record.spin" size="small" >
  99. <div class="spin-content">
  100. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  101. </div>
  102. </a-spin>
  103. </span>
  104. <span slot="planStatus" slot-scope="text,record">
  105. <a-spin :spinning="record.spin" size="small" >
  106. <div class="spin-content">
  107. <a-switch size="default" :checked=text @change="switchChange(text,record)"/>
  108. </div>
  109. </a-spin>
  110. </span>
  111. <span slot="createImg" slot-scope="text,record">
  112. <a-popover placement="right">
  113. <template slot="content">
  114. <video :src="record.videoId_dictText" style="width:250px" controls ></video>
  115. </template>
  116. <template slot="title">
  117. </template>
  118. <img :src="record.imageId_dictText" alt="" style="width:100px">
  119. </a-popover>
  120. </span>
  121. <span slot="parentGroup" slot-scope="text">
  122. <a href="javascript:;" >{{text}}</a>
  123. </span>
  124. <span slot="parentPlan" slot-scope="text">
  125. <a href="javascript:;" >{{text}}</a>
  126. </span>
  127. <span slot="time" slot-scope="text,record">
  128. {{record.startTime}}至{{record.endTime}}
  129. </span>
  130. <span slot="status" slot-scope="text">
  131. {{text | handlerStatus}}
  132. </span>
  133. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  134. <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
  135. <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
  136. <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
  137. <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
  138. <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
  139. <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
  140. <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
  141. <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
  142. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  143. <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
  144. <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
  145. <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
  146. <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
  147. <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
  148. <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
  149. <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
  150. <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
  151. <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
  152. <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
  153. <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
  154. <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
  155. <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
  156. <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
  157. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  158. <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{ eventCreditGrantLandingPage | formatCurrency }}</span>
  159. <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
  160. <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{ eventCreditGrantLandingPageCost | decimalsHandle }}</span>
  161. <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
  162. <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{ eventCreditGrantLandingPageRate | toPercentage }}</span>
  163. <span
  164. slot="play25FeedBreakRate"
  165. slot-scope="play25FeedBreakRate"
  166. >{{ play25FeedBreakRate | toPercentage }}</span>
  167. <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
  168. <!-- 新加数据 -->
  169. <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
  170. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  171. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  172. <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
  173. <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
  174. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  175. <span
  176. slot="installFinishRate"
  177. slot-scope="installFinishRate"
  178. >{{ installFinishRate | toPercentage }}</span>
  179. <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
  180. <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
  181. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  182. <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
  183. <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
  184. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  185. <span
  186. slot="gameAddictionCost"
  187. slot-scope="gameAddictionCost"
  188. >{{ gameAddictionCost | decimalsHandle }}</span>
  189. <span
  190. slot="downloadFinishCost"
  191. slot-scope="downloadFinishCost"
  192. >{{ downloadFinishCost | decimalsHandle }}</span>
  193. <span
  194. slot="downloadStartCost"
  195. slot-scope="downloadStartCost"
  196. >{{ downloadStartCost | decimalsHandle }}</span>
  197. <span
  198. slot="installFinishCost"
  199. slot-scope="installFinishCost"
  200. >{{ installFinishCost | decimalsHandle }}</span>
  201. <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
  202. <!-- -->
  203. <span
  204. slot="downloadStartRate"
  205. slot-scope="downloadStartRate"
  206. >{{ downloadStartRate | toPercentage }}</span>
  207. <span
  208. slot="downloadFinishRate"
  209. slot-scope="downloadFinishRate"
  210. >{{ downloadFinishRate | toPercentage }}</span>
  211. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  212. <span
  213. slot="activeRegisterRate"
  214. slot-scope="activeRegisterRate"
  215. >{{ activeRegisterRate | toPercentage }}</span>
  216. <span
  217. slot="gameAddictionRate"
  218. slot-scope="gameAddictionRate"
  219. >{{ gameAddictionRate | toPercentage }}</span>
  220. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  221. <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
  222. </a-table>
  223. </div>
  224. </div>
  225. <!-- </a-spin> -->
  226. </div>
  227. </template>
  228. <script>
  229. import moment from 'moment';
  230. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  231. // import { JeecgListMixin } from '@/mixins/ipagination'
  232. // import editableCell from './editableCell'
  233. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  234. import qs from 'qs'
  235. let typeValue='预算'
  236. const groupColumns = [
  237. // {
  238. // title: '开关',
  239. // dataIndex: 'switchStatus',
  240. // key: 'switchStatus',
  241. // align: 'center',
  242. // scopedSlots: { customRender: 'switchStatus' },
  243. // fixed: 'left' ,
  244. // width:80,
  245. // },
  246. {
  247. title: '广告组名称',
  248. dataIndex: 'unitName',
  249. key: 'unitName',
  250. align: 'center',
  251. scopedSlots: { customRender: 'unitName' },
  252. fixed: 'left' ,
  253. width:150,
  254. },
  255. {
  256. title: '广告组ID',
  257. dataIndex: 'unitId',
  258. key: 'unitId',
  259. align: 'center',
  260. scopedSlots: { customRender: 'unitId' },
  261. fixed: 'left' ,
  262. width:100,
  263. },
  264. {
  265. title: '所属计划',
  266. dataIndex: 'campaignName',
  267. key: 'campaignName',
  268. align: 'center',
  269. scopedSlots: { customRender: 'campaignName' },
  270. },
  271. {
  272. title: '状态',
  273. dataIndex: 'status',
  274. key: 'status',
  275. align: 'center',
  276. scopedSlots: { customRender: 'status' },
  277. },
  278. ];
  279. const publicColumns = [
  280. {
  281. title: '消耗(元)',
  282. dataIndex: 'cost',
  283. width:150,
  284. tip: '广告在投放期间的花费总额',
  285. align: 'center',
  286. scopedSlots: { customRender: 'cost' },
  287. // sorter: () => {}
  288. },
  289. {
  290. title: '封面曝光数',
  291. dataIndex: 'photoShow',
  292. tip: '广告在瀑布流被观看次数',
  293. align: 'center',
  294. scopedSlots: { customRender: 'photoShow' },
  295. // sorter:() => {}
  296. },
  297. {
  298. title: '封面点击数',
  299. dataIndex: 'photoClick',
  300. tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
  301. align: 'center',
  302. scopedSlots: { customRender: 'photoClick' },
  303. // sorter: () => {}
  304. },
  305. {
  306. title: '素材曝光数',
  307. dataIndex: 'aclick',
  308. tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
  309. align: 'center',
  310. scopedSlots: { customRender: 'aClick' },
  311. // sorter:() => {}
  312. },
  313. {
  314. title: '行为数',
  315. dataIndex: 'bclick',
  316. tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
  317. align: 'center',
  318. scopedSlots: { customRender: 'bClick' },
  319. // sorter:() => {}
  320. },
  321. {
  322. title: '封面点击率',
  323. dataIndex: 'clickRate',
  324. tip: '封面点击数占封面展示数百分比',
  325. align: 'center',
  326. scopedSlots: { customRender: 'clickRate' },
  327. // sorter:() => {}
  328. },
  329. {
  330. title: '行为率',
  331. dataIndex: 'bClickRate',
  332. tip: '行为数占素材曝光数百分比',
  333. align: 'center',
  334. scopedSlots: { customRender: 'bClickRate' },
  335. // sorter:() => {}
  336. },
  337. {
  338. title: '平均千次封面曝光花费(元)',
  339. dataIndex: 'cpm',
  340. tip: '花费/封面曝光数*1000',
  341. align: 'center',
  342. scopedSlots: { customRender: 'cpm' },
  343. // sorter:() => {}
  344. },
  345. {
  346. title: '平均封面点击单价(元)',
  347. dataIndex: 'cpc',
  348. tip: '花费/封面点击数',
  349. align: 'center',
  350. scopedSlots: { customRender: 'cpc' },
  351. // sorter:() => {}
  352. },
  353. {
  354. title: '激活数',
  355. dataIndex: 'active',
  356. tip: '广告主回传的应用激活次数',
  357. align: 'center',
  358. scopedSlots: { customRender: 'active' },
  359. // sorter:() => {}
  360. },
  361. {
  362. title: '激活单价',
  363. dataIndex: 'activeCost',
  364. tip: '花费/激活数',
  365. align: 'center',
  366. scopedSlots: { customRender: 'activeCost' },
  367. // sorter:() => {}
  368. },
  369. {
  370. title: '下载完成激活率',
  371. dataIndex: 'activeRate',
  372. tip: '激活数/安卓下载完成数',
  373. align: 'center',
  374. scopedSlots: { customRender: 'activeRate' },
  375. // sorter:() => {}
  376. },
  377. {
  378. title: '注册数',
  379. dataIndex: 'register',
  380. tip: '付费金额/当日消耗',
  381. align: 'center',
  382. scopedSlots: { customRender: 'register' },
  383. // sorter:() => {}
  384. },
  385. {
  386. title: '注册成本',
  387. dataIndex: 'activeRegisterCost',
  388. tip: '当日消耗/当日回传注册数',
  389. align: 'center',
  390. scopedSlots: { customRender: 'activeRegisterCost' },
  391. // sorter:() => {}
  392. },
  393. {
  394. title: '注册率',
  395. dataIndex: 'activeRegisterRate',
  396. tip: '当日回传注册数/当日激活数',
  397. align: 'center',
  398. scopedSlots: { customRender: 'activeRegisterRate' },
  399. // sorter:() => {}
  400. },
  401. {
  402. title: '次留数',
  403. dataIndex: 'nextDayOpen',
  404. tip: '前一日激活用户在次日继续访问的PV',
  405. align: 'center',
  406. scopedSlots: { customRender: 'nextDayOpen' },
  407. // sorter:() => {}
  408. },
  409. {
  410. title: '次留率',
  411. dataIndex: 'nextDayOpenRate',
  412. tip: '前一日激活用户在次日继续访问的PV/前一日激活数',
  413. align: 'center',
  414. scopedSlots: { customRender: 'nextDayOpenRate' },
  415. // sorter:() => {}
  416. },
  417. ]
  418. export default {
  419. name:'group-list',
  420. components: {
  421. // editableCell,
  422. Treeselect,
  423. },
  424. // mixins: [JeecgListMixin],
  425. data() {
  426. return {
  427. groupId:undefined,
  428. groupName:'',
  429. groupStatus:undefined,
  430. scrollX:3500,
  431. ipagination: {
  432. current: 1,
  433. pageSize: 10,
  434. // pageSizeOptions: ['10', '20', '30'],
  435. showTotal: (total, range) => {
  436. return range[0] + "-" + range[1] + " 共" + total + "条"
  437. },
  438. showQuickJumper: true,
  439. showSizeChanger:true,
  440. pageSizeOptions: ['10', '30', '50'],
  441. total: 0,
  442. onChange: (current, pageSize) => {
  443. // 切换分页时的回调,
  444. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  445. this.ipagination.current = current;
  446. this.ipagination.pageSize= pageSize;
  447. }
  448. },
  449. currentGroup:{},
  450. currentPlan:{},
  451. spinning:false,
  452. moment,
  453. accountID:undefined,
  454. openID:undefined,
  455. treeData:[],
  456. // account:'',//媒体账号
  457. optionId:'',//input输入的id或关键词
  458. statusValue:undefined,
  459. dateValue:[],//日期选择框选择
  460. dateString:[],//--我赋值的是dateString
  461. tabkey:'group',//tab选中的页
  462. selectDisable:true,
  463. optValue:'',//操作设置的值 删除 暂停 开启
  464. visible: false,//出价里的弹出框
  465. //主页的表格
  466. data:[],
  467. columns:[...groupColumns,...publicColumns],
  468. selectedRowKeys:[],
  469. selectedRows:[],
  470. loading:false,
  471. editID:0,
  472. url: {
  473. planList: "/ai/list/pageCampaign",
  474. groupList:'/ai/list/pageUnit',
  475. strategyList:'/ai/list/pageStrategy'
  476. },
  477. xiugaiData:[],//存分别修改时候的数组
  478. }
  479. },
  480. computed: {
  481. rowSelection(){
  482. return {
  483. onChange: (selectedRowKeys, selectedRows) => {
  484. // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  485. this.selectedRowKeys=selectedRowKeys;
  486. this.selectedRows=selectedRows;
  487. },
  488. onSelect: (record, selected, selectedRows) => {
  489. // console.log(record, selected, selectedRows);
  490. this.modifyTableData=selectedRows;
  491. this.selectedRows=selectedRows;
  492. },
  493. onSelectAll: (selected, selectedRows, changeRows) => {
  494. // console.log(selected, selectedRows, changeRows);
  495. this.modifyTableData=selectedRows
  496. this.selectedRows=selectedRows;
  497. },
  498. }
  499. },
  500. },
  501. methods: {
  502. goStrategyList(){
  503. this.$parent.currentTabComponent='strategyList';
  504. this.$parent.currentStrategyId='';
  505. this.$parent.currentPlanId='';
  506. this.$parent.currentGroupId='';
  507. },
  508. goPlanList(){
  509. this.$parent.currentTabComponent='planList';
  510. this.$parent.currentGroupId='';
  511. this.$parent.currentPlanId='';
  512. },
  513. //状态改变
  514. statusChange(value){
  515. console.log(value);
  516. },
  517. //日期改变
  518. dateChange(date, dateString) {
  519. console.log(date, dateString);
  520. this.dateString=dateString;
  521. },
  522. disabledDate(current) {
  523. // console.log(current)
  524. return current && current > moment().subtract(1, 'day')
  525. },
  526. //查询按钮事件
  527. search(){
  528. this.ipagination.current=1
  529. this.getGroupList()
  530. },
  531. //点击分页
  532. sort(pagination, filters, sorter, { currentDataSource }){
  533. this.ipagination.current=pagination.current;
  534. this.ipagination.pageSize=pagination.pageSize;
  535. this.getGroupList()
  536. },
  537. //状态改变
  538. switchChange(text,record){
  539. // this.spinning=true;
  540. console.log(text,record);
  541. record.spin=true;
  542. let ids=record.id;
  543. let putStatus=text?2:1;
  544. postAction('/kuaishou/batch/batchUpdateUnitStatus',{
  545. accountId:record.accountId,
  546. putStatus,
  547. unitIds:[record.id],
  548. userId:this.$parent.userId
  549. }).then((res)=>{
  550. record.spin=false;
  551. if(res.success){
  552. this.getplanList()
  553. this.$message.success(res.message)
  554. }else{
  555. this.$message.error(res.message)
  556. }
  557. })
  558. },
  559. //改变批量操作的按钮
  560. changeSelectStatus(){
  561. this.selectDisable=false;
  562. },
  563. //批量操作下的启动 删除 暂停
  564. optChange(value){
  565. // console.log(value)
  566. this.optValue=value;
  567. },
  568. editGroupStatus(url){
  569. let ids='';
  570. this.selectedRows.forEach((item,index)=>{
  571. if(index==0){
  572. ids=`${item.id}`
  573. }else{
  574. ids+=`,${item.id}`
  575. }
  576. })
  577. let status=''
  578. if(this.optValue=='pause'){
  579. status='disable'
  580. }else if(this.optValue=='open'){
  581. status='enable'
  582. }else if(this.optValue=='delete'){
  583. status='delete'
  584. }
  585. postAction(url,qs.stringify({
  586. accountId:this.accountID,
  587. ids,
  588. status,
  589. })).then((res)=>{
  590. console.log(res);
  591. // this.loading=false
  592. this.optValue=undefined;
  593. if(res.success){
  594. this.$message.success(res.message)
  595. // this.data=[];
  596. this.refreshCampaignList({
  597. accountId:this.accountID,
  598. name:this.optionId,
  599. status:this.statusValue,
  600. startDate:this.dateString[0],
  601. endDate:this.dateString[1],
  602. pageNo:this.ipagination.current,
  603. pageSize:this.ipagination.pageSize,
  604. })
  605. }else{
  606. this.loading=false
  607. // if(this.selectedRows.length>0){
  608. // this.selectedRows.forEach(item=>{
  609. // item.spin=false;
  610. // })
  611. // }
  612. this.selectedRowKeys=[];
  613. this.selectedRows=[];
  614. this.optValue=undefined;
  615. this.$message.error(res.message)
  616. }
  617. })
  618. },
  619. //批量操作的确定按钮
  620. isOkHandle(){
  621. console.log(this.optValue&&this.selectedRowKeys.length>0)
  622. if(this.optValue&&this.selectedRowKeys.length>0){
  623. // this.selectedRows.forEach(item=>{
  624. // item.spin=true;
  625. // })
  626. if(this.optValue=='pause'){
  627. this.loading=true;
  628. postAction('/kuaishou/batch/batchUpdateUnitStatus',{
  629. accountId:record.accountId,
  630. putStatus:2,
  631. unitIds:this.selectedRowKeys,
  632. userId:this.$parent.userId
  633. }).then((res)=>{
  634. record.spin=false;
  635. if(res.success){
  636. this.getGroupList()
  637. this.$message.success(res.message)
  638. }else{
  639. this.$message.error(res.message)
  640. }
  641. })
  642. }else if(this.optValue=='open'){
  643. this.loading=true;
  644. postAction('/kuaishou/batch/batchUpdateUnitStatus',{
  645. accountId:record.accountId,
  646. putStatus:1,
  647. unitIds:this.selectedRowKeys,
  648. userId:this.$parent.userId
  649. }).then((res)=>{
  650. record.spin=false;
  651. if(res.success){
  652. this.getGroupList()
  653. this.$message.success(res.message)
  654. }else{
  655. this.$message.error(res.message)
  656. }
  657. })
  658. }
  659. // this.selectedRows=[];
  660. // this.selectedRowKeys=[];
  661. }
  662. },
  663. //确定删除
  664. confirm(e) {
  665. // console.log(e);
  666. this.loading=true;
  667. if(this.optValue=='delete'){
  668. if(this.tabkey=='group'){
  669. this.editGroupStatus('/ctop/byteDanceCampaign/editStatus')
  670. }else if(this.tabkey=='plan'){
  671. if(this.selectedRowKeys.length>0){
  672. this.selectedRows.forEach((item)=>{
  673. item.optStatus='AD_STATUS_DELETE'
  674. })
  675. }
  676. this.batchEditHttp('status',this.selectedRows)
  677. this.$message.success('删除成功');
  678. }else if(this.tabkey=='idea'){
  679. this.editGroupStatus('/ctop/byteDanceCreative/editStatus');
  680. }
  681. }
  682. },
  683. //取消删除
  684. cancel(e) {
  685. // console.log(e);
  686. // this.$message.error('删除成功');
  687. },
  688. getGroupList(){
  689. this.loading=true;
  690. postAction(this.url.groupList,{
  691. campaignId:this.$parent.currentPlanId,
  692. unitId:this.groupId,
  693. campaignName:this.groupName,
  694. campaignStatus:this.groupStatus,
  695. pageNo:this.ipagination.current,
  696. pageSize:this.ipagination.pageSize
  697. }).then((res)=>{
  698. this.data=[]
  699. console.log(res)
  700. this.loading = false
  701. if(res.success){
  702. this.ipagination.total = res.result.total
  703. res.result.list.forEach((item)=>{
  704. item.key=item.id
  705. })
  706. this.data = res.result.list.map(item=>{
  707. return {
  708. ...item,
  709. spin:false,
  710. switchStatus:item.strategyState=='1'?true:false,
  711. }
  712. });
  713. // console.log(this.data)
  714. this.selectedRowKeys=[];
  715. }
  716. })
  717. },
  718. },
  719. mounted() {
  720. this.getGroupList()
  721. },
  722. activated() {
  723. this.getGroupList()
  724. },
  725. beforeDestroy() {
  726. },
  727. filters: {
  728. toPercentage(val) {
  729. if(val){
  730. if(typeof val != 'string'){
  731. return (val * 100).toFixed(2) + '%'
  732. }else{
  733. return val
  734. }
  735. }else if(typeof val =='string'){
  736. return val
  737. }
  738. else{
  739. return 0
  740. }
  741. },
  742. //保留两位小数并且变成货币格式
  743. decimalsHandle(val){
  744. if(val && typeof val !='string'){
  745. if(val>=0){
  746. val=parseFloat(val).toFixed(2);
  747. let numberStr = val.toString()
  748. let str = numberStr.split('.')
  749. let str0=str[0].split('').reverse();
  750. for (let i = 0; i < str0.length; i++) {
  751. if ((i + 1) % 4 === 0) {
  752. str0.splice(i, 0, ',')
  753. }
  754. }
  755. str0.reverse()
  756. let handleResult = ''
  757. for (let j = 0; j < str0.length; j++) {
  758. handleResult += str0[j]
  759. }
  760. return handleResult+'.'+str[1]
  761. }else{
  762. val=parseFloat(val).toFixed(2);
  763. let numberStr = val.toString()
  764. let str = numberStr.split('.')
  765. let str0=str[0].substr(1).split('').reverse();
  766. for (let i = 0; i < str0.length; i++) {
  767. if ((i + 1) % 4 === 0) {
  768. str0.splice(i, 0, ',')
  769. }
  770. }
  771. str0.reverse()
  772. let handleResult = ''
  773. for (let j = 0; j < str0.length; j++) {
  774. handleResult += str0[j]
  775. }
  776. return '-'+handleResult+'.'+str[1]
  777. }
  778. }else if(typeof val =='string'){
  779. return val
  780. }
  781. else{
  782. return 0
  783. }
  784. },
  785. //变成货币格式
  786. formatCurrency(val){
  787. if((val||val==0)&& typeof val !='string'){
  788. let numberStr = val.toString()
  789. let str = numberStr.split('').reverse()
  790. for (let i = 0; i < str.length; i++) {
  791. if ((i + 1) % 4 === 0) {
  792. str.splice(i, 0, ',')
  793. }
  794. }
  795. str.reverse()
  796. let handleResult = ''
  797. for (let j = 0; j < str.length; j++) {
  798. handleResult += str[j]
  799. }
  800. return handleResult
  801. }else if(typeof val =='string'){
  802. return val
  803. }
  804. else{
  805. return '-'
  806. }
  807. },
  808. handlerStatus(val){
  809. let str=''
  810. switch (val) {
  811. case 1:
  812. str='投放中'
  813. break;
  814. case 1:
  815. str='已暂停'
  816. break;
  817. case 1:
  818. str='已删除'
  819. break;
  820. default:
  821. break;
  822. }
  823. return str
  824. }
  825. }
  826. }
  827. </script>
  828. <style lang="less">
  829. .toutiaoBatch{
  830. .ant-timeline-item-head{
  831. background: rgb(240,242,245);
  832. }
  833. .muen{
  834. cursor: pointer;
  835. }
  836. .muen:hover{
  837. color: #1890ff;
  838. }
  839. .ant-steps-item-content{
  840. width: 160px;
  841. }
  842. }
  843. </style>
  844. <style lang="scss">
  845. #closeIcon{
  846. color: #0E74D2;
  847. }
  848. .toutiaoBatch{
  849. .ant-tag .anticon-close {
  850. color: #1890ff;
  851. }
  852. .ant-tag .anticon-close:hover{
  853. color: rgba(0, 0, 0, 0.85);
  854. }
  855. }
  856. .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
  857. background-color: #fff;
  858. color: #333;
  859. }
  860. #batchModal{
  861. .rules,.totalPrice{
  862. font-weight: 600;
  863. }
  864. .selectePlan{
  865. font-size: 14px;
  866. font-weight: 700;
  867. color: #333;
  868. padding: 20px 0;
  869. }
  870. .totalPrice{
  871. margin-left: 20px;
  872. }
  873. .modifyTable{
  874. margin-top: 20px;
  875. width: 100%;
  876. height: 400px;
  877. overflow: auto;
  878. font-weight: 600;
  879. }
  880. }
  881. #copyModal{
  882. .ant-modal-header{
  883. text-align: center;
  884. }
  885. .copyTip{
  886. font-size: 12px;
  887. color: #999;
  888. }
  889. .copyName{
  890. width: 118px;
  891. display: inline-block;
  892. text-align: right;
  893. .copyKeyStart{
  894. color: red;
  895. }
  896. }
  897. // font-weight: 600;
  898. }
  899. </style>
  900. <style lang="scss" scoped>
  901. .toutiaoBatch{
  902. .breadcrumb{
  903. height: 22px;
  904. font-size: 12px;
  905. font-family: PingFangSC-Regular, PingFang SC;
  906. font-weight: 400;
  907. color: #000000;
  908. line-height: 22px;
  909. }
  910. background-color: #fff;
  911. padding: 10px 20px;
  912. position: relative;
  913. width: 100%;
  914. .OptinItem{
  915. display: inline-block;
  916. margin-right: 15px;
  917. .ok{
  918. margin-right: 15px;
  919. }
  920. }
  921. .OptinItem:first-child{
  922. margin-right: 10px;
  923. }
  924. .topOptions{
  925. padding: 15px 0;
  926. .topOpt{
  927. width: 100%;
  928. margin-bottom: 10px;
  929. }
  930. }
  931. .optionBtn{
  932. // display: inline-block;
  933. float: right;
  934. .searchBtn{
  935. margin-right: 10px;
  936. }
  937. }
  938. .tableArea{
  939. .tableOption{
  940. padding: 20px 0;
  941. }
  942. }
  943. .toolbox-automate-rules-create-content_title {
  944. background-color: #fff;
  945. display: flex;
  946. flex-flow: row nowrap;
  947. justify-content: flex-start;
  948. align-items: center;
  949. margin-bottom: 28px;
  950. h3 {
  951. font-size: 22px;
  952. margin: 0;
  953. font-weight: 400;
  954. height: 30px;
  955. line-height: 30px;
  956. }
  957. }
  958. }
  959. </style>