configLaunchList.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595
  1. <template>
  2. <div class="toutiaoBatch">
  3. <div class="toolbox-automate-rules-create-content_title">
  4. <h3>账户配置信息</h3>
  5. <a-button type='primary' @click="goNewConfigInfo" class="goNewConfigInfo">新建配置信息</a-button>
  6. </div>
  7. <div class="topOptions">
  8. <div >
  9. <Treeselect :appId.sync="accountId" :multiple="false" request="2,4" ref="treeSelect" style="margin-bottom:8px;width:600px " />
  10. </div>
  11. <span class="optionBtn">
  12. <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
  13. </span>
  14. </div>
  15. <div class="tableArea">
  16. <!-- <div class="tableOption" v-if="selectedRowKeys.length">
  17. :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
  18. </div> -->
  19. <div class="table">
  20. <a-table
  21. :columns="columns"
  22. :data-source="data"
  23. bordered
  24. :pagination="ipagination"
  25. :loading="loading"
  26. @change="sort"
  27. :scroll="{'x':scrollX}"
  28. >
  29. <span slot="cpaBid" slot-scope="text">
  30. {{text/1000}}
  31. </span>
  32. <span slot="authName" slot-scope="text">
  33. <!-- <a href="javascript:;" >{{text}}</a> -->
  34. {{text || '-'}}
  35. </span>
  36. <span slot="time" slot-scope="text,record">
  37. {{record.startTime}}至{{record.endTime}}
  38. </span>
  39. <span slot="operator" slot-scope="text,record">
  40. <a href="javascript:;" @click="goPlanList(record)">编辑</a>
  41. <a-divider type="vertical" />
  42. <a href="javascript:;" @click="deleteRecord(record)">删除</a>
  43. <a-divider type="vertical" />
  44. <a-popover v-model="record.show" trigger="click" placement="topRight" @visibleChange='visibleChange'>
  45. <div slot="content">
  46. <span style='font-weight:700;margin-right:15px;font-size:15px'>修改后重提</span>
  47. <a-radio-group v-model="examineAgainType" >
  48. <a-radio :value="1">修改广告语</a-radio>
  49. <a-radio :value="0">修改封面</a-radio>
  50. </a-radio-group>
  51. <a-button type='default' @click="examineAgainCancel(record)" size='small' style='margin-right:10px'>取消</a-button>
  52. <a-button type='primary' @click="examineAgainOk(record)" size='small' class="ok">重提</a-button>
  53. </div>
  54. <a href="javascript:;" type='primary' @click="()=>{record.show=true}">一键重提</a>
  55. </a-popover>
  56. <!-- <a-divider type="vertical" /> -->
  57. <a-popover v-model="record.visible" trigger="click" placement="topLeft" @visibleChange='visibleChange'>
  58. <span slot="title">出价</span>
  59. <template slot="content" style="width:300px;">
  60. <div style="margin:5px 0 0">
  61. <span ><a-input-number :min="0" v-model="newBid" :step="0.1" placeholder="请输入出价" size="small" style='margin-right:20px;width:120px' /></span>
  62. <p style="color:red;font-size:12px;height:16px;padding:5px 0">{{bidErrorMessage}}</p>
  63. </div>
  64. <div>
  65. <a-button type='default' @click="bidChangeCancel(record)" size='small' style='margin-right:10px'>取消</a-button>
  66. <a-button type='primary' @click="bidChangeOk(record)" size='small' class="ok">修改</a-button>
  67. </div>
  68. </template>
  69. <!-- <a href="javascript:;" type='primary' @click="()=>{record.visible=true}">修改出价</a> -->
  70. </a-popover>
  71. </span>
  72. </a-table>
  73. </div>
  74. </div>
  75. <!-- </a-spin> -->
  76. </div>
  77. </template>
  78. <script>
  79. import moment from 'moment';
  80. import { getAction, postAction, downFile, downFilePost,deleteAction } from '@/api/manage';
  81. // import { JeecgListMixin } from '@/mixins/ipagination'
  82. // import editableCell from './editableCell'
  83. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  84. import qs from 'qs'
  85. let typeValue='预算'
  86. const strategyColumns = [
  87. // {
  88. // title: 'ID',
  89. // dataIndex: 'id',
  90. // key: 'id',
  91. // align: 'center',
  92. // scopedSlots: { customRender: 'id' },
  93. // width:110,
  94. // },
  95. {
  96. title: '所属账户名称',
  97. dataIndex: 'authName',
  98. key: 'authName',
  99. align: 'center',
  100. scopedSlots: { customRender: 'authName' },
  101. width:200
  102. },
  103. {
  104. title: '所属账户ID',
  105. dataIndex: 'accountId',
  106. key: 'accountId',
  107. align: 'center',
  108. scopedSlots: { customRender: 'accountId' },
  109. },
  110. {
  111. title: '创建时间',
  112. dataIndex: 'createTime',
  113. key: 'createTime',
  114. align: 'center',
  115. scopedSlots: { customRender: 'createTime' },
  116. },
  117. {
  118. title: '出价',
  119. dataIndex: 'cpaBid',
  120. align: 'center',
  121. scopedSlots: { customRender: 'cpaBid' },
  122. // sorter:() => {}
  123. },
  124. {
  125. title: '操作',
  126. dataIndex: 'operator',
  127. key: 'operator',
  128. align: 'center',
  129. scopedSlots: { customRender: 'operator' },
  130. width:350,
  131. },
  132. ];
  133. const publicColumns = [
  134. ]
  135. export default {
  136. name:'strategy-list',
  137. components: {
  138. // editableCell,
  139. Treeselect,
  140. },
  141. // mixins: [JeecgListMixin],
  142. data() {
  143. return {
  144. selectedRecord:{},
  145. bidErrorMessage:'',
  146. examineAgainType:1,
  147. newBid:undefined,
  148. examineAgain:false,
  149. accountId:[],
  150. accountList:[],
  151. strategyState:undefined,
  152. strategyName:'',
  153. strategyId:undefined,
  154. accountId:[],
  155. scrollX:0,
  156. ipagination: {
  157. current: 1,
  158. pageSize: 10,
  159. // pageSizeOptions: ['10', '20', '30'],
  160. showTotal: (total, range) => {
  161. return range[0] + "-" + range[1] + " 共" + total + "条"
  162. },
  163. showQuickJumper: true,
  164. showSizeChanger:true,
  165. pageSizeOptions: ['10', '30', '50'],
  166. total: 0,
  167. onChange: (current, pageSize) => {
  168. // 切换分页时的回调,
  169. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  170. this.ipagination.current = current;
  171. this.ipagination.pageSize= pageSize;
  172. }
  173. },
  174. spinning:false,
  175. moment,
  176. optionId:'',//input输入的id或关键词
  177. selectDisable:true,
  178. optValue:undefined,//操作设置的值 删除 暂停 开启
  179. visible: false,//出价里的弹出框
  180. //主页的表格
  181. data:[],
  182. columns:[...strategyColumns,...publicColumns],
  183. selectedRowKeys:[],
  184. loading:false,
  185. editID:0,
  186. url: {
  187. list:'/ctop/aiKuaishouAdvertiserStrategy/list',
  188. delete:'/ctop/aiKuaishouAdvertiserStrategy/delete',
  189. },
  190. xiugaiData:[],//存分别修改时候的数组
  191. }
  192. },
  193. computed: {
  194. hasSelected() {
  195. return this.selectedRowKeys.length > 0;
  196. },
  197. },
  198. methods: {
  199. examineAgainMethod(record){
  200. console.log(record)
  201. this.examineAgain=true;
  202. this.selectedRecord=record
  203. },
  204. visibleChange(){
  205. this.bidErrorMessage='';
  206. this.examineAgainType=1;
  207. this.newBid=undefined;
  208. },
  209. bidChangeCancel(record){
  210. record.visible=false;
  211. this.newBid=undefined;
  212. this.bidErrorMessage=''
  213. },
  214. bidChangeOk(record){
  215. if(this.newBid){
  216. record.visible=false;
  217. postAction('',{
  218. accountId:record.accountId,
  219. bid:this.newBid
  220. }).then(res=>{
  221. console.log(res)
  222. this.newBid=undefined;
  223. })
  224. }else{
  225. this.bidErrorMessage='请正确填写出价'
  226. // this.$message.error('请正确填写出价')
  227. }
  228. },
  229. examineAgainCancel(record){
  230. record.show=false;
  231. this.examineAgainType=1
  232. },
  233. examineAgainOk(record){
  234. record.show=false;
  235. postAction('/kuaishou/creative/again',{
  236. accountId:record.accountId,
  237. updateType:this.examineAgainType
  238. }).then(res=>{
  239. console.log(res);
  240. if(res.code==0){
  241. this.$message.success('正在重提中,您可稍后查看结果')
  242. }else{
  243. this.$message.success(res.message)
  244. }
  245. this.examineAgainType=1
  246. })
  247. },
  248. onSelectChange(selectedRowKeys) {
  249. console.log('selectedRowKeys changed: ', selectedRowKeys);
  250. this.selectedRowKeys = selectedRowKeys;
  251. },
  252. goNewConfigInfo(){
  253. this.$router.push('/autoLaunch/configLaunchInfo')
  254. },
  255. goPlanList(record){
  256. console.log(record)
  257. this.$parent.currentStrategyId=record.id;
  258. this.$router.push(`/autoLaunch/configLaunchInfo?id=${record.id}`)
  259. },
  260. deleteRecord(record){
  261. this.loading=true
  262. deleteAction(this.url.delete,{
  263. id:record.id
  264. }).then(res=>{
  265. this.loading=false
  266. if(res.success){
  267. this.$message.success(res.message);
  268. this.getStrategyList()
  269. }else{
  270. this.$message.success(res.message);
  271. }
  272. })
  273. },
  274. filterOption(input, option) {
  275. return (
  276. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  277. );
  278. },
  279. //查询按钮事件
  280. search(){
  281. this.ipagination.current=1;
  282. this.getStrategyList()
  283. },
  284. //点击分页
  285. sort(pagination, filters, sorter, { currentDataSource }){
  286. console.log(pagination)
  287. this.ipagination.current=pagination.current;
  288. this.ipagination.pageSize=pagination.pageSize;
  289. this.getStrategyList()
  290. },
  291. getStrategyList(){
  292. this.loading = true
  293. console.log(this.accountId)
  294. getAction(this.url.list,{
  295. strategyId:this.strategyId==undefined?null:this.strategyId,
  296. accountId:this.accountId,
  297. pageNo:this.ipagination.current,
  298. pageSize:this.ipagination.pageSize
  299. }).then((res)=>{
  300. this.data=[]
  301. console.log(res)
  302. this.loading = false
  303. if(res.success){
  304. this.ipagination.total = res.result.total
  305. res.result.records.forEach((item)=>{
  306. item.key=item.id;
  307. item.show=false;
  308. item.visible=false;
  309. })
  310. this.data = res.result.records;
  311. this.selectedRowKeys=[];
  312. }
  313. })
  314. },
  315. },
  316. mounted() {
  317. this.getStrategyList()
  318. },
  319. activated() {
  320. this.getStrategyList()
  321. },
  322. beforeDestroy() {
  323. },
  324. filters: {
  325. toPercentage(val) {
  326. if(val){
  327. if(typeof val != 'string'){
  328. return (val * 100).toFixed(2) + '%'
  329. }else{
  330. return val
  331. }
  332. }else if(typeof val =='string'){
  333. return val
  334. }
  335. else{
  336. return 0
  337. }
  338. },
  339. //保留两位小数并且变成货币格式
  340. decimalsHandle(val){
  341. if(val && typeof val !='string'){
  342. if(val>=0){
  343. val=parseFloat(val).toFixed(2);
  344. let numberStr = val.toString()
  345. let str = numberStr.split('.')
  346. let str0=str[0].split('').reverse();
  347. for (let i = 0; i < str0.length; i++) {
  348. if ((i + 1) % 4 === 0) {
  349. str0.splice(i, 0, ',')
  350. }
  351. }
  352. str0.reverse()
  353. let handleResult = ''
  354. for (let j = 0; j < str0.length; j++) {
  355. handleResult += str0[j]
  356. }
  357. return handleResult+'.'+str[1]
  358. }else{
  359. val=parseFloat(val).toFixed(2);
  360. let numberStr = val.toString()
  361. let str = numberStr.split('.')
  362. let str0=str[0].substr(1).split('').reverse();
  363. for (let i = 0; i < str0.length; i++) {
  364. if ((i + 1) % 4 === 0) {
  365. str0.splice(i, 0, ',')
  366. }
  367. }
  368. str0.reverse()
  369. let handleResult = ''
  370. for (let j = 0; j < str0.length; j++) {
  371. handleResult += str0[j]
  372. }
  373. return '-'+handleResult+'.'+str[1]
  374. }
  375. }else if(typeof val =='string'){
  376. return val
  377. }
  378. else{
  379. return 0
  380. }
  381. },
  382. //变成货币格式
  383. formatCurrency(val){
  384. if((val||val==0)&& typeof val !='string'){
  385. let numberStr = val.toString()
  386. let str = numberStr.split('').reverse()
  387. for (let i = 0; i < str.length; i++) {
  388. if ((i + 1) % 4 === 0) {
  389. str.splice(i, 0, ',')
  390. }
  391. }
  392. str.reverse()
  393. let handleResult = ''
  394. for (let j = 0; j < str.length; j++) {
  395. handleResult += str[j]
  396. }
  397. return handleResult
  398. }else if(typeof val =='string'){
  399. return val
  400. }
  401. else{
  402. return '-'
  403. }
  404. },
  405. }
  406. }
  407. </script>
  408. <style lang="scss">
  409. #closeIcon{
  410. color: #0E74D2;
  411. }
  412. .toutiaoBatch{
  413. .ant-tag .anticon-close {
  414. color: #1890ff;
  415. }
  416. .ant-tag .anticon-close:hover{
  417. color: rgba(0, 0, 0, 0.85);
  418. }
  419. }
  420. .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
  421. background-color: #fff;
  422. color: #333;
  423. }
  424. #batchModal{
  425. .rules,.totalPrice{
  426. font-weight: 600;
  427. }
  428. .selectePlan{
  429. font-size: 14px;
  430. font-weight: 700;
  431. color: #333;
  432. padding: 20px 0;
  433. }
  434. .totalPrice{
  435. margin-left: 20px;
  436. }
  437. .modifyTable{
  438. margin-top: 20px;
  439. width: 100%;
  440. height: 400px;
  441. overflow: auto;
  442. font-weight: 600;
  443. }
  444. }
  445. #copyModal{
  446. .ant-modal-header{
  447. text-align: center;
  448. }
  449. .copyTip{
  450. font-size: 12px;
  451. color: #999;
  452. }
  453. .copyName{
  454. width: 118px;
  455. display: inline-block;
  456. text-align: right;
  457. .copyKeyStart{
  458. color: red;
  459. }
  460. }
  461. // font-weight: 600;
  462. }
  463. </style>
  464. <style lang="scss" scoped>
  465. .toutiaoBatch{
  466. .breadcrumb{
  467. height: 22px;
  468. font-size: 12px;
  469. font-family: PingFangSC-Regular, PingFang SC;
  470. font-weight: 400;
  471. color: #000000;
  472. line-height: 22px;
  473. }
  474. background-color: #fff;
  475. padding: 10px 20px;
  476. position: relative;
  477. width: 100%;
  478. .OptinItem{
  479. display: inline-block;
  480. margin-right: 15px;
  481. margin-top: 15px;
  482. .ok{
  483. margin-right: 15px;
  484. }
  485. }
  486. .OptinItem:first-child{
  487. margin-right: 10px;
  488. }
  489. .topOptions{
  490. padding: 15px 0;
  491. display: flex;
  492. justify-content: space-between;
  493. .topOpt{
  494. width: 100%;
  495. margin-bottom: 10px;
  496. }
  497. }
  498. .optionBtn{
  499. // display: inline-block;
  500. float: right;
  501. // .searchBtn{
  502. // margin-right: 10px;
  503. // }
  504. }
  505. .tableArea{
  506. .tableOption{
  507. padding: 20px 0;
  508. }
  509. }
  510. .toolbox-automate-rules-create-content_title {
  511. background-color: #fff;
  512. display: flex;
  513. flex-flow: row nowrap;
  514. justify-content: flex-start;
  515. align-items: center;
  516. margin-bottom: 28px;
  517. position: relative;
  518. h3 {
  519. font-size: 22px;
  520. margin: 0;
  521. font-weight: 400;
  522. height: 30px;
  523. line-height: 30px;
  524. }
  525. .goNewConfigInfo{
  526. position: absolute;
  527. right: 0;
  528. top: 4px;
  529. }
  530. }
  531. }
  532. </style>