index.vue 65 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660
  1. <style lang="scss" scoped>
  2. .search-bar {
  3. display: flex;
  4. align-items: center;
  5. }
  6. .search-box p {
  7. display: inline-block;
  8. border: 1px solid #f2f2f2;
  9. border-radius: 5px;
  10. margin-right: 10px;
  11. padding: 5px 10px;
  12. cursor: pointer;
  13. }
  14. .card-person-drawer {
  15. width: 100%;
  16. height: 90%;
  17. overflow: hidden;
  18. padding: 10px 0px;
  19. display: flex;
  20. flex-wrap: wrap;
  21. margin-right: -10px;
  22. justify-content: space-between;
  23. /deep/ .ant-card-body {
  24. padding: 0;
  25. }
  26. /deep/ .ant-card-head {
  27. padding: 0 5px;
  28. }
  29. .card-item {
  30. width: calc(25% - 10px);
  31. margin-bottom: 10px;
  32. float: left;
  33. }
  34. .card-item-else {
  35. width: calc(20% - 10px);
  36. margin-bottom: 10px;
  37. float: left;
  38. }
  39. }
  40. </style>
  41. <style scoped>
  42. .showNumBox {
  43. margin: 10px 0;
  44. }
  45. .showNumBox .ant-card-body {
  46. display: flex;
  47. justify-content: center;
  48. }
  49. .showNumBox p,
  50. .showNumBox span {
  51. text-align: center;
  52. line-height: 40px;
  53. font-size: 30px;
  54. font-weight: 600;
  55. color: red;
  56. margin: 0;
  57. }
  58. .search-box .ant-card-body {
  59. padding: 5px 15px;
  60. }
  61. .showNumBox .ant-card-body .styleElse {
  62. line-height: 60px;
  63. height: 40px;
  64. font-size: 16px;
  65. font-weight: 400;
  66. margin-left: 10px;
  67. }
  68. .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  69. display: none !important;
  70. }
  71. .yincang .ant-col-6 p {
  72. text-align: left;
  73. color: red;
  74. font-size: 16px;
  75. font-weight: 500;
  76. }
  77. .ant-table-thead div {
  78. font-weight: 700;
  79. }
  80. .tool-tip {
  81. position: absolute;
  82. top: 65px;
  83. right: 10px;
  84. }
  85. </style>
  86. <style lang="less" scoped>
  87. .ant-card-head .ant-tabs-bar {
  88. padding: 0;
  89. }
  90. .search-box .ant-card-body {
  91. padding: 5px 15px;
  92. }
  93. .search-box {
  94. padding: 15px 10px;
  95. }
  96. .search-box p {
  97. display: inline-block;
  98. border: 1px solid #f2f2f2;
  99. border-radius: 5px;
  100. margin-right: 10px;
  101. padding: 5px 10px;
  102. cursor: pointer;
  103. }
  104. .statistics .ant-col-6 .ant-card-body .styleElse {
  105. line-height: 60px;
  106. height: 40px;
  107. font-size: 16px;
  108. font-weight: 400;
  109. margin-left: 10px;
  110. }
  111. .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  112. display: none !important;
  113. }
  114. .yincang .ant-col-6 p {
  115. text-align: left;
  116. color: red;
  117. font-size: 16px;
  118. font-weight: 500;
  119. }
  120. .ant-table-thead div {
  121. font-weight: 700;
  122. }
  123. .tool-tip {
  124. position: absolute;
  125. top: 65px;
  126. right: 10px;
  127. }
  128. .statistics {
  129. .ant-card-bordered {
  130. border: none;
  131. }
  132. .ant-card-head .ant-tabs {
  133. clear: both;
  134. margin-bottom: -13px;
  135. color: rgba(0, 0, 0, 0.65);
  136. font-weight: normal;
  137. font-size: 14px;
  138. }
  139. .duibi {
  140. position: absolute;
  141. right: 24px;
  142. top: 15px;
  143. }
  144. p {
  145. margin-bottom: 0;
  146. }
  147. }
  148. </style>
  149. <style lang="less" scoped>
  150. .middle-button {
  151. margin: 0 8px;
  152. }
  153. .newPlanStatic {
  154. .divider {
  155. height: 62px;
  156. }
  157. .showNumBox {
  158. background: white;
  159. overflow: hidden;
  160. margin: 15px 0;
  161. padding: 30px 0;
  162. text-align: center;
  163. .ant-card-body {
  164. padding-top: 0;
  165. }
  166. .title {
  167. font-size: 14px;
  168. font-family: PingFangSC-Regular, PingFang SC;
  169. font-weight: 400;
  170. color: #999999;
  171. line-height: 22px;
  172. display: inline-block;
  173. }
  174. }
  175. .tabbody {
  176. background: white;
  177. padding: 0 24px;
  178. margin-bottom: 15px;
  179. .ant-tabs-bar {
  180. margin: 0;
  181. }
  182. }
  183. .chartBox {
  184. background: white;
  185. padding: 20px 0;
  186. }
  187. .tableBody {
  188. background: white;
  189. padding: 20px;
  190. }
  191. }
  192. </style>
  193. <template>
  194. <div class="newPlanStatic config-project">
  195. <div class="tabbody">
  196. <a-tabs v-model="tabKey" @change="tabChange">
  197. <a-tab-pane :key="1" tab="素材测试配置信息"> </a-tab-pane>
  198. <!-- <a-tab-pane :key="2" tab="账户"> </a-tab-pane> -->
  199. <a-button slot="tabBarExtraContent" type="primary" @click="newCreat(null)">
  200. 创建投放策略
  201. </a-button>
  202. </a-tabs>
  203. </div>
  204. <a-card>
  205. <div class="table-page-search-wrapper">
  206. <a-form layout="inline" :form="form" hide-required-mark :selfUpdate="true" @submit="handleQueryList">
  207. <a-row :gutter="24" v-if="tabKey === 1">
  208. <a-col :md="8" :sm="8" :xxl="6">
  209. <a-form-item label="策略名称">
  210. <a-input
  211. v-decorator="['strategyName']"
  212. type="text"
  213. placeholder="请输入需要搜索的策略名称"
  214. />
  215. </a-form-item>
  216. </a-col>
  217. <!-- -->
  218. <a-col :md="8" :sm="8" :xxl="6">
  219. <a-form-item label="数据周期">
  220. <a-range-picker
  221. :disabled-date="disabledDate"
  222. format="YYYY-MM-DD"
  223. v-decorator="['timeRange', { initialValue: [moment(), moment()] }]"
  224. />
  225. </a-form-item>
  226. </a-col>
  227. <a-col :md="8" :sm="8" :xxl="6">
  228. <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
  229. <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
  230. <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button"
  231. >重置</a-button
  232. >
  233. </span>
  234. </a-col>
  235. </a-row>
  236. </a-form>
  237. </div>
  238. </a-card>
  239. <a-row style="margin-bottom:15px;margin-top:12px">
  240. <a-col :span="24">
  241. <div class="tableBody" style="min-height:200px;padding-bottom: 50px">
  242. <a-table
  243. :columns="columns"
  244. :dataSource="dataSource"
  245. :pagination="false"
  246. :loading="dataLoading"
  247. bordered
  248. @change="tableChange"
  249. :scroll="{ x: 2500 }"
  250. size="middle"
  251. style="word-break: break-all;font-size:16px;font-weight:600"
  252. id="outTable"
  253. ref="accountTable"
  254. >
  255. <span slot="strategyStatus" slot-scope="text, record">
  256. <a-switch :checked="text == 0" @change="onChangeStatus(text, record, 'strategyStatus')" />
  257. </span>
  258. <span slot="statDate" slot-scope="text, record">
  259. {{ record.projectName !== '-' ? text : '-' }}
  260. </span>
  261. <span slot="projectName" slot-scope="text, record">
  262. <a @click="toAccountDetail(record)" v-if="tabKey === 1 && text !== '-'">{{ text }}</a>
  263. <span v-else> {{ text }} </span>
  264. </span>
  265. <span slot="allAccountCount" slot-scope="text, record">
  266. {{ record.successCount + '/' + text }}
  267. </span>
  268. <span slot="action" slot-scope="text, record">
  269. <div v-if="record.projectName !== '-'">
  270. <a @click="editPrice(record)">出价</a>
  271. <a-divider type="vertical" />
  272. <a @click="newCreat(record.id)">编辑</a>
  273. <a-divider type="vertical" />
  274. <a @click="matchingAccount(record)">变量条件</a>
  275. <a-divider type="vertical" />
  276. <a @click="selectMaterial(record)">选择素材</a>
  277. <a-divider type="vertical" />
  278. <a @click="lookPreview(record)">预览</a>
  279. </div>
  280. <div v-else>
  281. -
  282. </div>
  283. </span>
  284. <span slot="charge" slot-scope="text, record">{{
  285. record.reportData.charge | decimalsHandle
  286. }}</span>
  287. <span slot="play3sRate" slot-scope="text, record">{{ record.reportData.play3sRate }}</span>
  288. <span slot="impression1kCost" slot-scope="text, record">{{
  289. record.reportData.impression1kCost
  290. }}</span>
  291. <span slot="photoClick" slot-scope="text, record">{{
  292. record.reportData.photoClick | formatCurrency
  293. }}</span>
  294. <span slot="bclick" slot-scope="text, record">{{
  295. record.reportData.bclick | formatCurrency
  296. }}</span>
  297. <span slot="eventRegister" slot-scope="text, record">{{
  298. record.reportData.eventRegister | decimalsHandle
  299. }}</span>
  300. <span slot="bclickPrice" slot-scope="text, record">{{
  301. record.reportData.bclickPrice | decimalsHandle
  302. }}</span>
  303. <span slot="photoShow" slot-scope="text, record">{{
  304. record.reportData.photoShow | formatCurrency
  305. }}</span>
  306. <span slot="aclick" slot-scope="text, record">{{
  307. record.reportData.aclick | formatCurrency
  308. }}</span>
  309. <span slot="activation" slot-scope="text, record">{{ record.reportData.activation }}</span>
  310. <span slot="eventRegisterPrice" slot-scope="text, record">{{
  311. record.reportData.eventRegisterPrice | decimalsHandle
  312. }}</span>
  313. <span slot="bclickRate" slot-scope="text, record">{{ record.reportData.bclickRate }}</span>
  314. </a-table>
  315. <a-pagination
  316. size="small"
  317. :showTotal="ipagination.showTotal"
  318. style="float: right;margin-top:10px"
  319. v-if="dataSource.length > 0"
  320. showQuickJumper
  321. :pageSize.sync="ipagination.pageSize"
  322. :total="ipagination.total"
  323. v-model="ipagination.current"
  324. @change="getDataSource"
  325. />
  326. </div>
  327. </a-col>
  328. </a-row>
  329. <!-- 修改出价 -->
  330. <a-modal
  331. title="修改出价"
  332. v-if="modifyPriceVisible"
  333. :visible="modifyPriceVisible"
  334. :confirm-loading="modifyPriceLoading"
  335. dialog-class="push-modal"
  336. @ok="handleOkPrice"
  337. @cancel="handleCancelPrice"
  338. >
  339. <a-form
  340. :form="priceForm"
  341. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  342. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  343. v-if="modifyPriceDetail"
  344. >
  345. <a-form-item label="策略名称"> {{ modifyPriceDetail.strategyName }} </a-form-item>
  346. <a-form-item label="优化目标">
  347. <a-button type="primary">{{ modifyPriceDetail.bidType | bidType }}</a-button></a-form-item
  348. >
  349. <a-form-item label="转化目标"> {{ modifyPriceDetail.ocpxActionType | ocpxActionType }}</a-form-item>
  350. <a-form-item label="计费方式">
  351. <a-button type="primary">{{
  352. modifyPriceDetail.bidType === 2 ? '点击计费(CPC)' : '按展示付费(oCPM)'
  353. }}</a-button>
  354. </a-form-item>
  355. <a-form-item label="转化目标出价">
  356. <a-input
  357. style="width:200px;ime-mode:disabled"
  358. v-decorator="['cpaBid', { rules: [{ required: true, validator: cpaBidValid }] }]"
  359. >
  360. </a-input>
  361. <br />
  362. <span style="color:red"
  363. >单出价请输入单数字,阶梯出价请用/隔开 例如10/12,区间出价请用-链接 例如20-25</span
  364. >
  365. </a-form-item>
  366. </a-form>
  367. </a-modal>
  368. <a-modal
  369. title="变量条件"
  370. :width="800"
  371. v-if="accountVisible"
  372. :visible="accountVisible"
  373. @ok="handleOkVariable"
  374. @cancel="accountVisible = false"
  375. dialog-class="push-modal"
  376. :confirm-loading="variableLoading"
  377. >
  378. <div style="height:600px;overflow:auto">
  379. <a-form
  380. :form="variableForm"
  381. :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
  382. :wrapperCol="{ lg: { span: 19 }, sm: { span: 19 } }"
  383. v-if="accountProjectDetail"
  384. >
  385. <a-form-item label="策略名称">{{ accountProjectDetail.strategyName }} </a-form-item>
  386. <a-form-item label="地区">
  387. <checkBoxGroup
  388. :options="regionData"
  389. v-decorator="[
  390. 'region',
  391. {
  392. rules: [{ required: true, message: '地区必选' }],
  393. initialValue: ['unlimited']
  394. }
  395. ]"
  396. @change="setData($event, 'region')"
  397. />
  398. </a-form-item>
  399. <a-form-item label="年龄">
  400. <checkBoxGroup
  401. :options="ageData"
  402. v-decorator="[
  403. 'agesRange',
  404. { rules: [{ required: true, message: '年龄必选' }], initialValue: ['unlimited'] }
  405. ]"
  406. @change="setData($event, 'agesRange')"
  407. />
  408. </a-form-item>
  409. <a-form-item label="性别">
  410. <checkBoxGroup
  411. :options="[
  412. { label: '不限', value: 'unlimited' },
  413. { label: '女', value: '1' },
  414. { label: '男', value: '2' }
  415. ]"
  416. v-decorator="[
  417. 'gender',
  418. { rules: [{ required: true, message: '性别必选' }], initialValue: ['unlimited'] }
  419. ]"
  420. @change="setData($event, 'gender')"
  421. />
  422. </a-form-item>
  423. <a-form-item label="行为意向">
  424. <checkBoxGroup
  425. :options="[
  426. { label: '不限', value: 'unlimited' },
  427. { label: '系统优选', value: '1' }
  428. ]"
  429. v-decorator="[
  430. 'intentionTarget',
  431. { rules: [{ required: true, message: '行为意向必选' }], initialValue: ['unlimited'] }
  432. ]"
  433. />
  434. </a-form-item>
  435. <a-form-item label="APP行为">
  436. <checkBoxGroup
  437. :options="[
  438. { label: '不限', value: 'unlimited' },
  439. { label: '按App名称', value: '1' }
  440. ]"
  441. v-decorator="[
  442. 'appIds',
  443. { rules: [{ required: true, message: 'APP行为必选' }], initialValue: ['unlimited'] }
  444. ]"
  445. @change="setData($event, 'appIds')"
  446. />
  447. <el-select
  448. v-if="getElseData('appIds') ? getElseData('appIds').includes('1') : false"
  449. v-model="appIds"
  450. multiple
  451. filterable
  452. remote
  453. reserve-keyword
  454. placeholder="请输入关键词"
  455. :remote-method="remoteMethod"
  456. style="margin-top:10px"
  457. >
  458. <el-option
  459. v-for="item in appOptions"
  460. :key="item.value"
  461. :label="item.label"
  462. :value="item.value"
  463. >
  464. </el-option>
  465. </el-select>
  466. </a-form-item>
  467. <a-form-item label="智能扩量">
  468. <!-- {
  469. label: '不可突破年龄',
  470. value: '2',
  471. disabled: getElseData('agesRange')
  472. ? getElseData('agesRange').includes('18') ||
  473. getElseData('agesRange').includes('24') ||
  474. getElseData('agesRange').includes('31') ||
  475. getElseData('agesRange').includes('41') ||
  476. getElseData('agesRange').includes('50')
  477. ? false
  478. : true
  479. : true
  480. },
  481. {
  482. label: '不可突破性别',
  483. value: '3',
  484. disabled: getElseData('gender')
  485. ? getElseData('gender').includes('0') || getElseData('gender').includes('1')
  486. ? false
  487. : true
  488. : true
  489. },
  490. {
  491. label: '不可突破地域',
  492. value: '4',
  493. disabled: getElseData('region')
  494. ? getElseData('region').includes('1') || getElseData('region').includes('2')
  495. ? false
  496. : true
  497. : true
  498. } -->
  499. <checkBoxGroup
  500. :options="[
  501. { label: '关闭', value: '0' },
  502. { label: '开启', value: '1' }
  503. ]"
  504. v-decorator="[
  505. 'intelliExtend',
  506. { rules: [{ required: true, message: '智能扩量必选' }], initialValue: ['0'] }
  507. ]"
  508. />
  509. </a-form-item>
  510. <a-form-item label="投放时段">
  511. <a-button type="primary" @click="addSchedule">新增变量</a-button>
  512. </a-form-item>
  513. <div style="width:100%">
  514. <div v-for="(item, index) in scheduleTimeData" style="margin-bottom:15px;display:flex">
  515. <selectCheckAll
  516. style="width:100%;margin-right:5px"
  517. :scheduleTime.sync="item.scheduleTime"
  518. ref="selectCheck"
  519. />
  520. <a-icon type="delete" v-if="scheduleTimeData.length > 1" @click="deleteSchedule(index)" />
  521. </div>
  522. </div>
  523. </a-form>
  524. </div>
  525. </a-modal>
  526. <!-- 选择素材 -->
  527. <a-modal
  528. title="选择素材"
  529. :width="1000"
  530. v-if="materialVisible"
  531. :visible="materialVisible"
  532. :confirm-loading="materialLoading"
  533. dialog-class="push-modal"
  534. @ok="handleOkMaterial"
  535. @cancel="
  536. materialVisible = false
  537. checkPersonElse = []
  538. checkVideo = []
  539. checkPersonOne = ''
  540. sumContent = 0
  541. "
  542. >
  543. <div style="width:100%;display:flex; justify-content: space-between;">
  544. <span>已选择:{{ sumContent }}</span>
  545. <a-button slot="tabBarExtraContent" type="primary" @click="tongbu()" :loading="tongbuLoading">
  546. 刷新素材</a-button
  547. >
  548. </div>
  549. <a-spin :spinning="spinning">
  550. <a-checkbox-group v-model="checkVideo" style="width: 100%;" @change="setVideoDataAll">
  551. <div class="card-person-drawer info-detail">
  552. <a-card class="card-person card-item" v-for="(item, index) in dataVideoList" :key="index">
  553. <div
  554. slot="title"
  555. style=" overflow: hidden;
  556. text-overflow: ellipsis;
  557. white-space: nowrap;"
  558. >
  559. {{ item.photoName }}
  560. </div>
  561. <div slot="extra">
  562. <a-checkbox :value="item.photoId" @change="setVideoData(item.photoId)"></a-checkbox>
  563. </div>
  564. <div style="width:100%;border: 1px solid #f2f2f2;position:relative">
  565. <img :src="item.coverUrl" style="width:100%" alt="" />
  566. <a-tag
  567. color="blue"
  568. v-if="item.useStatus == 0"
  569. style="position:absolute;top:5px;right:0px"
  570. >
  571. 已测试
  572. </a-tag>
  573. </div>
  574. </a-card>
  575. </div>
  576. </a-checkbox-group>
  577. <div style="text-align:right">
  578. <a-pagination
  579. size="small"
  580. :showTotal="ipaginationVideo.showTotal"
  581. style="float:right"
  582. v-if="dataVideoList.length > 0"
  583. showQuickJumper
  584. :pageSize.sync="ipaginationVideo.pageSize"
  585. :total="ipaginationVideo.total"
  586. v-model="ipaginationVideo.current"
  587. @change="getDataVideo"
  588. />
  589. </div>
  590. </a-spin>
  591. </a-modal>
  592. </div>
  593. </template>
  594. <script>
  595. import { TreeSelect } from 'ant-design-vue'
  596. const SHOW_PARENT = TreeSelect.SHOW_PARENT
  597. import ARow from 'ant-design-vue/es/grid/Row'
  598. import ACol from 'ant-design-vue/es/grid/Col'
  599. import moment from 'moment'
  600. import pick from 'lodash.pick'
  601. import { getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
  602. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  603. import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
  604. import selectCheckAll from '@/views/modules/kuaishouapp/account/stepForm/stepModule/test'
  605. import qs from 'qs'
  606. function tqFun(qcArr1) {
  607. var tempArr = []
  608. function bbFun(qcArr) {
  609. for (var i = 0; i < qcArr.length; i++) {
  610. if (qcArr[i] instanceof Array) {
  611. bbFun(qcArr[i])
  612. } else {
  613. tempArr.push(qcArr[i])
  614. }
  615. }
  616. return tempArr
  617. }
  618. return bbFun(qcArr1)
  619. }
  620. let TTcolumns = [
  621. {
  622. title: '开关',
  623. dataIndex: 'strategyStatus',
  624. scopedSlots: { customRender: 'strategyStatus' },
  625. align: 'center',
  626. key: 'strategyStatus'
  627. },
  628. {
  629. title: '策略名称',
  630. dataIndex: 'strategyName',
  631. scopedSlots: { customRender: 'strategyName' },
  632. align: 'center',
  633. key: 'strategyName'
  634. },
  635. {
  636. title: '策略日期',
  637. dataIndex: 'createTime',
  638. scopedSlots: { customRender: 'createTime' },
  639. align: 'center',
  640. key: 'createTime'
  641. },
  642. {
  643. title: '操作',
  644. dataIndex: 'action',
  645. scopedSlots: { customRender: 'action' },
  646. align: 'center',
  647. key: 'action',
  648. width: '300px'
  649. },
  650. {
  651. title: '消耗',
  652. dataIndex: 'charge',
  653. scopedSlots: { customRender: 'charge' },
  654. align: 'center',
  655. key: 'charge',
  656. sorter: () => {}
  657. },
  658. {
  659. title: '封面曝光数',
  660. dataIndex: 'photoShow',
  661. scopedSlots: { customRender: 'photoShow' },
  662. align: 'center',
  663. key: 'photoShow',
  664. sorter: () => {}
  665. },
  666. {
  667. title: '封面点击数',
  668. dataIndex: 'photoClick',
  669. scopedSlots: { customRender: 'photoClick' },
  670. align: 'center',
  671. key: 'photoClick',
  672. sorter: () => {}
  673. },
  674. {
  675. title: '素材曝光数',
  676. dataIndex: 'aclick',
  677. scopedSlots: { customRender: 'aclick' },
  678. align: 'center',
  679. key: 'aclick',
  680. sorter: () => {}
  681. },
  682. {
  683. title: '行为数',
  684. dataIndex: 'bclick',
  685. scopedSlots: { customRender: 'bclick' },
  686. align: 'center',
  687. key: 'bclick',
  688. sorter: () => {}
  689. },
  690. {
  691. title: '行为率',
  692. dataIndex: 'bclickRate',
  693. scopedSlots: { customRender: 'bclickRate' },
  694. align: 'center',
  695. key: 'bclickRate',
  696. sorter: () => {}
  697. },
  698. {
  699. title: '平均千次封面曝光花费(元)',
  700. dataIndex: 'impression1kCost',
  701. scopedSlots: { customRender: 'impression1kCost' },
  702. align: 'center',
  703. key: 'impression1kCost',
  704. sorter: () => {}
  705. },
  706. {
  707. title: '平均行为单价(元)',
  708. dataIndex: 'bclickPrice',
  709. scopedSlots: { customRender: 'bclickPrice' },
  710. align: 'center',
  711. key: 'bclickPrice',
  712. sorter: () => {}
  713. },
  714. {
  715. title: '注册数',
  716. dataIndex: 'eventRegister',
  717. scopedSlots: { customRender: 'eventRegister' },
  718. align: 'center',
  719. key: 'eventRegister',
  720. sorter: () => {}
  721. },
  722. {
  723. title: '注册单价',
  724. dataIndex: 'eventRegisterPrice',
  725. scopedSlots: { customRender: 'eventRegisterPrice' },
  726. align: 'center',
  727. key: 'eventRegisterPrice',
  728. sorter: () => {}
  729. }
  730. ]
  731. let KScolumns = []
  732. export default {
  733. components: {
  734. ACol,
  735. ARow,
  736. checkBoxGroup,
  737. selectCheckAll
  738. },
  739. data() {
  740. return {
  741. tongbuLoading: false,
  742. appIds: [],
  743. appOptions: [],
  744. materialVisible: false,
  745. materialLoading: false,
  746. scheduleTimeData: [{ scheduleTime: '' }],
  747. indexAll: 0,
  748. spinning: false,
  749. form: this.$form.createForm(this),
  750. priceForm: this.$form.createForm(this),
  751. variableForm: this.$form.createForm(this),
  752. variableLoading: false,
  753. exportloading: false,
  754. dateRange: [moment().subtract(1, 'weeks'), moment()],
  755. noImg: require('@/assets/noImg.png'),
  756. validationRules: {
  757. bid: [
  758. {
  759. required: true,
  760. message: '出价信息必须填写'
  761. // validator: this.validateBid,
  762. }
  763. ]
  764. },
  765. ipagination: {
  766. current: 1,
  767. pageSize: 10,
  768. // pageSizeOptions: ['10', '20', '30'],
  769. showTotal: (total, range) => {
  770. return range[0] + '-' + range[1] + ' 共' + total + '条'
  771. },
  772. showQuickJumper: true,
  773. showSizeChanger: true,
  774. pageSizeOptions: ['10', '30', '50'],
  775. total: 0,
  776. onChange: (current, pageSize) => {
  777. // 切换分页时的回调,
  778. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  779. this.ipagination.current = current
  780. this.ipagination.pageSize = pageSize
  781. }
  782. },
  783. ipaginationVideo: {
  784. current: 1,
  785. pageSize: 8,
  786. id: '',
  787. accountId: '',
  788. // pageSizeOptions: ['10', '20', '30'],
  789. showTotal: (total, range) => {
  790. return range[0] + '-' + range[1] + ' 共' + total + '条'
  791. },
  792. showQuickJumper: true,
  793. // showSizeChanger: true,
  794. total: 0,
  795. onChange: current => {
  796. // 切换分页时的回调,
  797. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  798. this.ipaginationVideo.current = current
  799. }
  800. },
  801. value: 'valid',
  802. KSaccountList: [],
  803. TTaccountList: [],
  804. KSdesignList: [],
  805. TTdesignList: [],
  806. operateDisabled: false,
  807. duration: 1000,
  808. //treeselect的参数
  809. treeValue: [],
  810. treeData: [],
  811. SHOW_PARENT,
  812. type: 3,
  813. dateValue: [moment().subtract(7, 'days'), moment()],
  814. operate: '',
  815. designList: [],
  816. tabKey: 1,
  817. loading: false,
  818. TTcolumns,
  819. KScolumns,
  820. columns: [...TTcolumns],
  821. dataSource: [],
  822. dataVideoList: [],
  823. checkVideo: [],
  824. checkPersonOne: '',
  825. checkPersonElse: [],
  826. sumContent: 0,
  827. tableTab: 1,
  828. newPlan: 0,
  829. effectPlan: 0,
  830. openOptions: false,
  831. target: 'createTime',
  832. order: 'descend',
  833. projectId: undefined,
  834. projectIdAll: undefined,
  835. dataLoading: false,
  836. url: '/kuaishouProjectStrategy/queryProjectList',
  837. modifyPriceVisible: false,
  838. modifyPriceLoading: false,
  839. modifyPriceDetail: null,
  840. accountVisible: false,
  841. againLoading: false,
  842. accountProjectDetail: null,
  843. regionData: [{ label: '不限', value: 'unlimited' }],
  844. ageData: [{ label: '不限', value: 'unlimited' }]
  845. }
  846. },
  847. methods: {
  848. moment,
  849. tongbu() {
  850. this.tongbuLoading = true
  851. this.getAction('/kuaishou/batch/syncVideo', {
  852. accountId: this.ipaginationVideo.accountId
  853. }).then(res => {
  854. if (res.success) {
  855. this.$message.success(res.message)
  856. this.tongbuLoading = false
  857. postAction('/dimension/kuaiShouDimensionMaterial/getVideoList', {
  858. id: this.ipaginationVideo.id,
  859. accountId: this.ipaginationVideo.accountId,
  860. pageSize: this.ipaginationVideo.pageSize,
  861. pageNo: this.ipaginationVideo.current
  862. }).then(resNei => {
  863. if (resNei.success) {
  864. this.materialVisible = true
  865. this.dataVideoList = resNei.result.list
  866. this.ipaginationVideo.total = resNei.result.total
  867. }
  868. })
  869. } else {
  870. this.$message.error(res.message)
  871. this.tongbuLoading = false
  872. }
  873. })
  874. },
  875. setData(e, type) {
  876. if (type == 'region') {
  877. if (e.includes('1') || e.includes('2')) {
  878. } else {
  879. let region = this.getElseData('intelliExtend')
  880. let regionIndex = region.findIndex(item => item === '4')
  881. if (regionIndex > -1) {
  882. region.splice(regionIndex, 1)
  883. this.variableForm.setFieldsValue({ intelliExtend: region })
  884. }
  885. }
  886. } else if (type == 'agesRange') {
  887. if (e.includes('18') || e.includes('24') || e.includes('31') || e.includes('41') || e.includes('50')) {
  888. } else {
  889. let agesRange = this.getElseData('intelliExtend')
  890. let agesRangeIndex = agesRange.findIndex(item => item === '2')
  891. if (agesRangeIndex > -1) {
  892. agesRange.splice(agesRangeIndex, 1)
  893. this.variableForm.setFieldsValue({ intelliExtend: agesRange })
  894. }
  895. }
  896. } else if (type == 'gender') {
  897. if (e.includes('1') || e.includes('0')) {
  898. } else {
  899. let gender = this.getElseData('intelliExtend')
  900. let genderIndex = gender.findIndex(item => item === '3')
  901. if (genderIndex > -1) {
  902. gender.splice(genderIndex, 1)
  903. this.variableForm.setFieldsValue({ intelliExtend: gender })
  904. }
  905. }
  906. } else if (type == 'appIds') {
  907. if (e.includes('1')) {
  908. } else {
  909. this.appIds = []
  910. }
  911. }
  912. },
  913. newCreat(id) {
  914. if (id) {
  915. this.$router.push({
  916. path: '/autoLaunch/creatMaterialTest?id=' + id
  917. })
  918. } else {
  919. // window.open('/creat-material-test', '_blank')
  920. this.$router.push({
  921. path: '/autoLaunch/creatMaterialTest'
  922. })
  923. }
  924. },
  925. remoteMethod(query) {
  926. if (query !== '') {
  927. getAction('/kuaishou/batch/getAppSearch', {
  928. accountId: this.accountProjectDetail.accountId,
  929. appName: query
  930. }).then(res => {
  931. if (res.result) {
  932. this.appOptions = res.result.map(item => {
  933. return {
  934. value: item.appId,
  935. label: item.appName
  936. }
  937. })
  938. } else {
  939. }
  940. })
  941. } else {
  942. this.appOptions = []
  943. }
  944. },
  945. addSchedule() {
  946. this.scheduleTimeData.push({ scheduleTime: '' })
  947. },
  948. deleteSchedule(index) {
  949. this.scheduleTimeData.splice(index, 1)
  950. },
  951. handleOkVariable() {
  952. this.variableForm.validateFields((err, values) => {
  953. if (!err) {
  954. this.variableLoading = true
  955. let params = { ...values }
  956. params.agesRange = JSON.stringify(values.agesRange)
  957. values.appIds = values.appIds.includes('unlimited') ? ['unlimited'] : []
  958. params.appIds =
  959. this.appIds.length > 0
  960. ? JSON.stringify([values.appIds, this.appIds])
  961. : JSON.stringify([values.appIds])
  962. params.gender = JSON.stringify(values.gender)
  963. params.intelliExtend = JSON.stringify(values.intelliExtend)
  964. params.intentionTarget = JSON.stringify(values.intentionTarget)
  965. params.region = JSON.stringify(values.region)
  966. params.scheduleTime = JSON.stringify(
  967. this.scheduleTimeData.map(item => {
  968. return item.scheduleTime
  969. })
  970. )
  971. if (this.accountProjectDetail.editId) {
  972. params.id = this.accountProjectDetail.editId
  973. this.postDataAction('/dimension/kuaiShouDimensionVariable/edit', params).then(res => {
  974. console.log(res)
  975. if (res.success) {
  976. this.accountVisible = false
  977. this.variableLoading = false
  978. this.variableForm.resetFields()
  979. this.scheduleTimeData = [{ scheduleTime: '' }]
  980. } else {
  981. this.variableLoading = false
  982. this.$message.error('修改失败')
  983. }
  984. })
  985. } else {
  986. params.strategyId = this.accountProjectDetail.id
  987. this.postDataAction('/dimension/kuaiShouDimensionVariable/add', params).then(res => {
  988. console.log(res)
  989. if (res.success) {
  990. this.accountVisible = false
  991. this.variableLoading = false
  992. this.variableForm.resetFields()
  993. this.scheduleTimeData = [{ scheduleTime: '' }]
  994. } else {
  995. this.variableLoading = false
  996. this.$message.error('添加失败')
  997. }
  998. })
  999. }
  1000. }
  1001. })
  1002. },
  1003. editPrice(item) {
  1004. this.modifyPriceVisible = true
  1005. this.modifyPriceDetail = { ...item }
  1006. this.$nextTick(() => {
  1007. let cpaBid = ''
  1008. let changeBid =
  1009. this.modifyPriceDetail.bidType === 2 ? this.modifyPriceDetail.bid : this.modifyPriceDetail.cpaBid
  1010. if ((changeBid + '').includes('/')) {
  1011. let bidArr = changeBid.split('/')
  1012. for (let index = 0; index < bidArr.length; index++) {
  1013. bidArr[index] = bidArr[index] / 1000
  1014. }
  1015. cpaBid = bidArr.join('/')
  1016. } else if ((changeBid + '').includes('-')) {
  1017. let bidArr = changeBid.split('-')
  1018. for (let index = 0; index < bidArr.length; index++) {
  1019. bidArr[index] = bidArr[index] / 1000
  1020. }
  1021. cpaBid = bidArr.join('-')
  1022. } else {
  1023. cpaBid = changeBid / 1000
  1024. }
  1025. let deepConversionBid = undefined
  1026. if (this.modifyPriceDetail.deepConversionBid && this.modifyPriceDetail.deepConversionBid != '') {
  1027. if ((this.modifyPriceDetail.deepConversionBid + '').includes('/')) {
  1028. let bidArr = this.modifyPriceDetail.deepConversionBid.split('/')
  1029. for (let index = 0; index < bidArr.length; index++) {
  1030. bidArr[index] = bidArr[index] / 1000
  1031. }
  1032. deepConversionBid = bidArr.join('/')
  1033. } else if ((this.modifyPriceDetail.deepConversionBid + '').includes('-')) {
  1034. let bidArr = this.modifyPriceDetail.deepConversionBid.split('-')
  1035. for (let index = 0; index < bidArr.length; index++) {
  1036. bidArr[index] = bidArr[index] / 1000
  1037. }
  1038. deepConversionBid = bidArr.join('-')
  1039. } else {
  1040. deepConversionBid = this.modifyPriceDetail.deepConversionBid / 1000
  1041. }
  1042. }
  1043. this.priceForm.setFieldsValue({
  1044. cpaBid: cpaBid,
  1045. deepConversionBid: deepConversionBid
  1046. })
  1047. })
  1048. },
  1049. handleOkPrice() {
  1050. this.priceForm.validateFields((err, values) => {
  1051. //console.log(values)
  1052. if (!err) {
  1053. this.modifyPriceLoading = true
  1054. if (values.cpaBid) {
  1055. if ((values.cpaBid + '').includes('/')) {
  1056. let bidArr = values.cpaBid.split('/')
  1057. for (let index = 0; index < bidArr.length; index++) {
  1058. bidArr[index] = bidArr[index] * 1000
  1059. }
  1060. values.cpaBid = bidArr.join('/')
  1061. } else if ((values.cpaBid + '').includes('-')) {
  1062. let bidArr = values.cpaBid.split('-')
  1063. for (let index = 0; index < bidArr.length; index++) {
  1064. bidArr[index] = bidArr[index] * 1000
  1065. }
  1066. values.cpaBid = bidArr.join('-')
  1067. } else {
  1068. values.cpaBid = values.cpaBid * 1000
  1069. }
  1070. } else {
  1071. values.cpaBid = 0
  1072. }
  1073. if (values.deepConversionBid) {
  1074. if ((values.deepConversionBid + '').includes('/')) {
  1075. let bidArr = values.deepConversionBid.split('/')
  1076. for (let index = 0; index < bidArr.length; index++) {
  1077. bidArr[index] = bidArr[index] * 1000
  1078. }
  1079. values.deepConversionBid = bidArr.join('/')
  1080. } else if ((values.deepConversionBid + '').includes('-')) {
  1081. let bidArr = values.deepConversionBid.split('-')
  1082. for (let index = 0; index < bidArr.length; index++) {
  1083. bidArr[index] = bidArr[index] * 1000
  1084. }
  1085. values.deepConversionBid = bidArr.join('-')
  1086. } else {
  1087. values.deepConversionBid = values.deepConversionBid * 1000
  1088. }
  1089. } else {
  1090. values.deepConversionBid = 0
  1091. }
  1092. // this.modifyPriceDetail
  1093. let params = {}
  1094. if (this.modifyPriceDetail.bidType === 2) {
  1095. params.bid = values.cpaBid
  1096. if (values.deepConversionBid) {
  1097. params.deepConversionBid = values.deepConversionBid
  1098. }
  1099. } else {
  1100. params = { ...values }
  1101. }
  1102. postAction('/dimension/kuaiShouDimensionStrategy/edit', {
  1103. ...params,
  1104. id: this.modifyPriceDetail.id
  1105. }).then(res => {
  1106. this.modifyPriceLoading = false
  1107. if (res.success) {
  1108. this.handleCancelPrice()
  1109. const paramsData = this.form.getFieldsValue()
  1110. this.handleGetTableList(paramsData)
  1111. } else {
  1112. this.$message.error(res.message)
  1113. }
  1114. })
  1115. } else {
  1116. this.$message.error('请正确填写必填项目')
  1117. }
  1118. })
  1119. },
  1120. handleCancelPrice() {
  1121. this.priceForm.resetFields()
  1122. this.modifyPriceVisible = false
  1123. },
  1124. cpaBidValid(rule, value, callback) {
  1125. let z = /-/g
  1126. let a = /\//g
  1127. let d = /\./g
  1128. if (value === '' || value === undefined) {
  1129. callback('出价必须填写')
  1130. } else if (value.startsWith('.') || value.endsWith('.')) {
  1131. callback('请填写正确出价')
  1132. } else if (value.startsWith('-') || value.endsWith('-')) {
  1133. callback('请填写正确出价')
  1134. } else if (value.match(a) && value.match(z)) {
  1135. callback('不允许出现除"-"和"/"之外的所有字符,并且二者不可同时出现')
  1136. } else if (value.match(/[^0-9+-\/]/g)) {
  1137. callback('请填写正确出价')
  1138. } else {
  1139. callback()
  1140. }
  1141. },
  1142. btKeyUp(e) {
  1143. //没有显示‘破折号’和 '.' 需要的可以手动加上
  1144. // this.priceForm.setFieldsValue({
  1145. // cpaBid: e.target.value.replace(/[^0-9+-\/]/g, '')
  1146. // })
  1147. // (
  1148. // /[\u4e00-\u9fa5/\s+/]|[`~!@#$%^&*() \+ =<>?"{}|, \/ ;' \\ [ \] ·~!@#¥%……&*()—— \+ ={}|《》?:“”【】、;‘’,。、]/g,
  1149. // ''
  1150. // )
  1151. },
  1152. getData(className) {
  1153. return this.priceForm.getFieldValue(className)
  1154. },
  1155. getElseData(className) {
  1156. return this.variableForm.getFieldValue(className)
  1157. },
  1158. againAccount() {
  1159. this.againLoading = true
  1160. this.getAction('/ai/projectCreate/projectAutomaticCreates', {
  1161. id: this.accountProjectDetail.id,
  1162. operationType: 1
  1163. }).then(res => {
  1164. this.againLoading = false
  1165. if (res.success) {
  1166. this.$message.success('重新匹配成功')
  1167. } else {
  1168. this.$message.error(res.message)
  1169. }
  1170. })
  1171. },
  1172. matchingAccount(item) {
  1173. this.accountVisible = true
  1174. this.accountProjectDetail = { ...item }
  1175. getAction('/dimension/kuaiShouDimensionAccount/getStrategyBindAccount', {
  1176. strategyId: item.id
  1177. }).then(res => {
  1178. console.log(res)
  1179. if (res.success) {
  1180. this.accountProjectDetail.accountId = res.result
  1181. } else {
  1182. this.accountProjectDetail.accountId = null
  1183. }
  1184. })
  1185. getAction('/dimension/kuaiShouDimensionVariable/selectVariableByStrategyId', { strategyId: item.id }).then(
  1186. res => {
  1187. if (res.success) {
  1188. getAction('/dimension/kuaiShouDimensionVariable/queryByStrategyId', {
  1189. strategyId: item.id
  1190. }).then(res => {
  1191. if (res.success) {
  1192. if (res.result) {
  1193. this.accountProjectDetail.editId = res.result.id
  1194. let data = {}
  1195. data.region = JSON.parse(res.result.region)
  1196. data.agesRange = JSON.parse(res.result.agesRange)
  1197. data.gender = JSON.parse(res.result.gender)
  1198. data.intentionTarget = JSON.parse(res.result.intentionTarget)
  1199. data.appIds = tqFun(JSON.parse(res.result.appIds))
  1200. if (data.appIds.length >= 1) {
  1201. this.appIds = tqFun(JSON.parse(res.result.appIds))
  1202. let index = this.appIds.findIndex(item => item == 'unlimited')
  1203. if (index > -1) {
  1204. this.appIds.splice(index, 1)
  1205. if (this.appIds.length > 0) {
  1206. data.appIds = ['unlimited', '1']
  1207. } else {
  1208. data.appIds = ['unlimited']
  1209. }
  1210. } else {
  1211. data.appIds = ['1']
  1212. }
  1213. } else if (data.appIds.length == 0) {
  1214. data.appIds = ['unlimited']
  1215. }
  1216. data.intelliExtend = JSON.parse(res.result.intelliExtend)
  1217. this.$nextTick(() => {
  1218. this.scheduleTimeData = JSON.parse(res.result.scheduleTime).map(item => {
  1219. return { scheduleTime: item }
  1220. })
  1221. this.variableForm.setFieldsValue(
  1222. pick(
  1223. data,
  1224. 'region',
  1225. 'agesRange',
  1226. 'gender',
  1227. 'intentionTarget',
  1228. 'appIds',
  1229. 'intelliExtend'
  1230. )
  1231. )
  1232. })
  1233. }
  1234. } else {
  1235. this.accountProjectDetail.editId = null
  1236. }
  1237. })
  1238. }
  1239. }
  1240. )
  1241. },
  1242. selectMaterial(item) {
  1243. getAction('/dimension/kuaiShouDimensionAccount/getStrategyBindAccount', {
  1244. strategyId: item.id
  1245. }).then(res => {
  1246. if (res.success) {
  1247. this.ipaginationVideo.id = item.id
  1248. this.ipaginationVideo.accountId = res.result
  1249. this.ipaginationVideo.current = 1
  1250. postAction('/dimension/kuaiShouDimensionMaterial/getVideoList', {
  1251. id: this.ipaginationVideo.id,
  1252. accountId: this.ipaginationVideo.accountId,
  1253. pageSize: this.ipaginationVideo.pageSize,
  1254. pageNo: this.ipaginationVideo.current
  1255. }).then(resNei => {
  1256. if (resNei.success) {
  1257. this.materialVisible = true
  1258. this.dataVideoList = resNei.result.list
  1259. this.ipaginationVideo.total = resNei.result.total
  1260. }
  1261. })
  1262. } else {
  1263. }
  1264. })
  1265. },
  1266. lookPreview(item) {
  1267. this.$router.push({
  1268. path: '/autoLaunch/lookPreview?id=' + item.id
  1269. })
  1270. // getAction('/dimension/kuaiShouDimensionUnit/previewByStrategyId', { strategyId: item.id }).then(res => {})
  1271. },
  1272. getDataVideo(current, pageSize) {
  1273. // 切换分页时的回调,
  1274. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  1275. this.spinning = true
  1276. this.ipaginationVideo.current = current
  1277. this.ipaginationVideo.pageSize = pageSize
  1278. this.checkVideo = this.checkPersonElse
  1279. this.dataVideoList = []
  1280. postAction('/dimension/kuaiShouDimensionMaterial/getVideoList', {
  1281. id: this.ipaginationVideo.id,
  1282. accountId: this.ipaginationVideo.accountId,
  1283. pageSize: this.ipaginationVideo.pageSize,
  1284. pageNo: this.ipaginationVideo.current
  1285. }).then(resNei => {
  1286. this.spinning = false
  1287. if (resNei.success) {
  1288. this.dataVideoList = resNei.result.list
  1289. this.ipaginationVideo.total = resNei.result.total
  1290. }
  1291. })
  1292. },
  1293. getDataSource(current, pageSize) {
  1294. // 切换分页时的回调,
  1295. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  1296. this.ipagination.current = current
  1297. this.ipagination.pageSize = pageSize
  1298. const paramsData = this.form.getFieldsValue()
  1299. this.handleGetTableList(paramsData)
  1300. },
  1301. handleOkMaterial() {
  1302. let dataAll = this.checkPersonElse
  1303. this.checkVideo = dataAll
  1304. this.materialLoading = true
  1305. this.postDataAction('/dimension/kuaiShouDimensionStrategy/create', {
  1306. id: this.ipaginationVideo.id,
  1307. materialArray: this.checkVideo
  1308. }).then(res => {
  1309. this.materialLoading = false
  1310. if (res.success) {
  1311. this.materialVisible = false
  1312. this.checkPersonElse = []
  1313. this.checkVideo = []
  1314. this.checkPersonOne = ''
  1315. this.sumContent = 0
  1316. }
  1317. })
  1318. },
  1319. setVideoData(data) {
  1320. this.checkPersonOne = data
  1321. },
  1322. setVideoDataAll(data) {
  1323. // checkPerson: [],
  1324. // checkPersonAll: [],
  1325. if (data.findIndex(item => item === this.checkPersonOne) > -1) {
  1326. this.checkPersonElse.push(...data)
  1327. this.checkPersonElse = [...new Set(this.checkPersonElse)]
  1328. } else {
  1329. data.findIndex(item => item === this.checkPersonOne) > -1
  1330. this.checkPersonElse.splice(
  1331. this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
  1332. 1
  1333. )
  1334. }
  1335. this.sumContent = this.checkPersonElse.length
  1336. // var dataCount = 20
  1337. // if (this.sumContent > dataCount) {
  1338. // this.$message.error('最多选择' + dataCount + '个定向')
  1339. // this.checkPerson.pop()
  1340. // this.checkPersonElse.splice(
  1341. // this.checkPersonElse.findIndex(item => item === this.checkPersonOne),
  1342. // 1
  1343. // )
  1344. // this.sumContent--
  1345. // // this.checkPersonAll[this.ipagination.current - 1] = this.checkPerson
  1346. // }
  1347. },
  1348. onChangeStatus(text, rescord, type) {
  1349. let status = text === 0 ? 1 : 0
  1350. let url = ''
  1351. let params = {}
  1352. params.id = rescord.id
  1353. params.strategyStatus = status
  1354. url = '/dimension/kuaiShouDimensionStrategy/edit'
  1355. this.postDataAction(url, params).then(res => {
  1356. if (res.success) {
  1357. const paramsData = this.form.getFieldsValue()
  1358. this.handleGetTableList(paramsData)
  1359. } else {
  1360. this.$message.error(res.message)
  1361. }
  1362. })
  1363. },
  1364. handleQueryList(event) {
  1365. this.ipagination.current = 1
  1366. event.preventDefault()
  1367. const paramsData = this.form.getFieldsValue()
  1368. this.handleGetTableList(paramsData)
  1369. },
  1370. handleResetForm() {
  1371. this.ipagination.current = 1
  1372. this.form.resetFields()
  1373. if (this.tabKey == 1) {
  1374. this.projectId = undefined
  1375. this.projectIdAll = undefined
  1376. }
  1377. const paramsData = this.form.getFieldsValue()
  1378. this.handleGetTableList(paramsData)
  1379. },
  1380. handleGetTableList(data) {
  1381. let paramsData = {
  1382. strategyName: data.strategyName,
  1383. // startTime:
  1384. // data.timeRange && data.timeRange.length === 2
  1385. // ? moment(data.timeRange[0]).format('YYYY-MM-DD')
  1386. // : null,
  1387. // endTime:
  1388. // data.timeRange && data.timeRange.length === 2
  1389. // ? moment(data.timeRange[1]).format('YYYY-MM-DD')
  1390. // : null,
  1391. pageNo: this.ipagination.current,
  1392. pageSize: this.ipagination.pageSize
  1393. }
  1394. this.dataSource = []
  1395. this.dataLoading = true
  1396. this.getAction('/dimension/kuaiShouDimensionStrategy/list', paramsData)
  1397. .then(result => {
  1398. this.dataLoading = false
  1399. if (result.success) {
  1400. this.dataSource = result.result.records || []
  1401. // if (result.result.total) {
  1402. // this.dataSource.unshift(result.result.total)
  1403. // }
  1404. this.ipagination.total = result.result.total || 0
  1405. // result.result.total
  1406. } else {
  1407. this.$message.error(result.message)
  1408. }
  1409. })
  1410. .catch(error => {
  1411. this.dataLoading = false
  1412. console.log(error, 'eeee')
  1413. })
  1414. },
  1415. getAccountNoProject() {
  1416. this.projectId = undefined
  1417. const paramsData = this.form.getFieldsValue()
  1418. this.handleGetTableList(paramsData)
  1419. },
  1420. toAccountDetail(item) {
  1421. this.tabKey = 2
  1422. this.projectId = { id: item.projectId, name: item.projectName }
  1423. this.url =
  1424. this.tabKey == 1
  1425. ? '/kuaishouProjectStrategy/queryProjectList'
  1426. : '/kuaishouProjectStrategy/queryAccountList'
  1427. this.$nextTick(() => {
  1428. this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
  1429. this.target = this.tabKey == 1 ? 'createTime' : 'statDate'
  1430. const paramsData = this.form.getFieldsValue()
  1431. this.handleGetTableList(paramsData)
  1432. })
  1433. },
  1434. disabledDate(current) {
  1435. // Can not select days before today and today
  1436. return current && current > moment().endOf('day')
  1437. },
  1438. dateChange(date, dateString) {
  1439. // console.log(date,dateString)
  1440. },
  1441. filterOption(input, option) {
  1442. // console.log(input, option)
  1443. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  1444. },
  1445. // 快手头条的切换
  1446. tabChange(key) {
  1447. this.ipagination.current = 1
  1448. this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
  1449. this.url =
  1450. this.tabKey == 1
  1451. ? '/kuaishouProjectStrategy/queryProjectList'
  1452. : '/kuaishouProjectStrategy/queryAccountList'
  1453. this.target = this.tabKey == 1 ? 'createTime' : 'statDate'
  1454. this.projectId = undefined
  1455. const paramsData = this.form.getFieldsValue()
  1456. this.handleGetTableList(paramsData)
  1457. },
  1458. operateChange(value) {
  1459. console.log(value)
  1460. if (value) {
  1461. this.accountDisabled = true
  1462. this.accountId = ''
  1463. } else {
  1464. this.accountDisabled = false
  1465. }
  1466. },
  1467. tableChange(pagination, filters, sorter, { currentDataSource }) {
  1468. this.ipagination.current = pagination.current
  1469. this.ipagination.pageSize = pagination.pageSize
  1470. if (sorter.order) {
  1471. this.order = sorter.order ? sorter.order : 'descend'
  1472. this.target = sorter.columnKey
  1473. const paramsData = this.form.getFieldsValue()
  1474. this.handleGetTableList({
  1475. ...paramsData,
  1476. target: sorter.columnKey,
  1477. order: sorter.order ? sorter.order : 'descend'
  1478. })
  1479. }
  1480. },
  1481. // table区域的tab切换
  1482. tableTabChange(key) {
  1483. if (key == 1) {
  1484. this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
  1485. this.target = 'new'
  1486. } else {
  1487. this.columns = this.tabKey == 1 ? [...TTcolumns] : [...KScolumns]
  1488. this.target = 'valid'
  1489. }
  1490. },
  1491. // 获取所有运营
  1492. getAllOperator(key) {
  1493. let url = '/sys/user/getAllUserListV1'
  1494. this.designList = []
  1495. getAction(url, {}).then(res => {
  1496. if (res.success) {
  1497. this.designList = res.result
  1498. }
  1499. })
  1500. }
  1501. },
  1502. watch: {
  1503. dateValue(newName, oldName) {
  1504. this.search()
  1505. }
  1506. },
  1507. computed: {
  1508. newDate() {
  1509. var myDate = new Date()
  1510. myDate.getYear() //获取当前年份(2位)
  1511. var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
  1512. var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
  1513. var d = myDate.getDate() //获取当前日(1-31)
  1514. var day = myDate.getHours()
  1515. return day
  1516. }
  1517. },
  1518. mounted() {
  1519. const paramsData = this.form.getFieldsValue()
  1520. this.handleGetTableList(paramsData)
  1521. this.getAllOperator()
  1522. this.getAction('/dimension/kuaiShouDimensionRegionConfig/list').then(res => {
  1523. if (res.success) {
  1524. let data = res.result.map(item => {
  1525. return {
  1526. label: item.regionGroupName,
  1527. value: item.regionGroupId
  1528. }
  1529. })
  1530. this.regionData.push(...data)
  1531. }
  1532. })
  1533. this.getAction('/dimension/kuaiShouDimensionAgeConfig/list').then(res => {
  1534. if (res.success) {
  1535. let data = res.result.map(item => {
  1536. return {
  1537. label: item.ageGroupName,
  1538. value: item.ageGroupId
  1539. }
  1540. })
  1541. this.ageData.push(...data)
  1542. }
  1543. })
  1544. },
  1545. activated: function() {},
  1546. filters: {
  1547. toPercentage(val) {
  1548. if (typeof val != 'string') {
  1549. return (val * 100).toFixed(2) + '%'
  1550. } else {
  1551. return val
  1552. }
  1553. },
  1554. //保留两位小数并且变成货币格式
  1555. decimalsHandle(val) {
  1556. if (val && typeof val != 'string') {
  1557. if (val >= 0) {
  1558. val = parseFloat(val).toFixed(2)
  1559. let numberStr = val.toString()
  1560. let str = numberStr.split('.')
  1561. let str0 = str[0].split('').reverse()
  1562. for (let i = 0; i < str0.length; i++) {
  1563. if ((i + 1) % 4 === 0) {
  1564. str0.splice(i, 0, ',')
  1565. }
  1566. }
  1567. str0.reverse()
  1568. let handleResult = ''
  1569. for (let j = 0; j < str0.length; j++) {
  1570. handleResult += str0[j]
  1571. }
  1572. return handleResult + '.' + str[1]
  1573. } else {
  1574. val = parseFloat(val).toFixed(2)
  1575. let numberStr = val.toString()
  1576. let str = numberStr.split('.')
  1577. let str0 = str[0]
  1578. .substr(1)
  1579. .split('')
  1580. .reverse()
  1581. for (let i = 0; i < str0.length; i++) {
  1582. if ((i + 1) % 4 === 0) {
  1583. str0.splice(i, 0, ',')
  1584. }
  1585. }
  1586. str0.reverse()
  1587. let handleResult = ''
  1588. for (let j = 0; j < str0.length; j++) {
  1589. handleResult += str0[j]
  1590. }
  1591. return '-' + handleResult + '.' + str[1]
  1592. }
  1593. } else if (typeof val == 'string') {
  1594. return val
  1595. } else {
  1596. return 0
  1597. }
  1598. },
  1599. //变成货币格式
  1600. formatCurrency(val) {
  1601. if (val) {
  1602. let numberStr = val.toString()
  1603. let str = numberStr.split('').reverse()
  1604. for (let i = 0; i < str.length; i++) {
  1605. if ((i + 1) % 4 === 0) {
  1606. str.splice(i, 0, ',')
  1607. }
  1608. }
  1609. str.reverse()
  1610. let handleResult = ''
  1611. for (let j = 0; j < str.length; j++) {
  1612. handleResult += str[j]
  1613. }
  1614. return handleResult
  1615. } else {
  1616. return '-'
  1617. }
  1618. }
  1619. }
  1620. }
  1621. </script>