configLaunchList.vue 14 KB

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