groupList.vue 31 KB

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