accountIndex.vue 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233
  1. <style>
  2. .account-index .ant-card-body .count {
  3. display: inline-block;
  4. /* height: 32px; */
  5. /* line-height: 32px; */
  6. }
  7. /* .account-index .ant-table td {
  8. white-space: nowrap;
  9. } */
  10. </style>
  11. <template>
  12. <div class="account-index">
  13. <a-row class="image-list-heading vm-panel">
  14. <a-col :span="24" style="display: flex">
  15. <Treeselect :appId.sync="appId" :multiple="false" request="2,4" ref="treeSelect" style="margin: 8px 20px" />
  16. <a-button type="primary" style="margin: 10px" @click="addUser">搜索</a-button>
  17. <a-button type="primary" style="margin: 10px; float: right" @click="newCreat">批量创建</a-button>
  18. </a-col>
  19. </a-row>
  20. <a-form layout="inline">
  21. <a-row class="image-list-heading vm-panel" style="padding: 8px 20px">
  22. <a-col :md="7" :sm="8" style="display: flex">
  23. <a-form-item label="计划id">
  24. <a-input placeholder="请输入计划id" v-model="campaignIdSearch"></a-input>
  25. </a-form-item>
  26. </a-col>
  27. <a-col :md="7" :sm="8" style="display: flex">
  28. <a-form-item label="计划名称">
  29. <a-input placeholder="请输入计划名称" v-model="campaignName"></a-input>
  30. </a-form-item>
  31. </a-col>
  32. <a-col :md="4" :sm="8" style="display: flex">
  33. <a-button type="primary" style="margin: 0 10px" @click="searchLabel">查询</a-button>
  34. <a-button type="primary" style="margin: 0 10px" @click="searchRe">重置</a-button>
  35. </a-col>
  36. </a-row>
  37. </a-form>
  38. <a-row :gutter="15" style="margin-top: 15px">
  39. <a-col :span="12">
  40. <a-card hoverable title="总花费">
  41. <countTo :startVal="0" :endVal="cost" :duration="duration" :decimals="2" class="count"></countTo>
  42. </a-card>
  43. </a-col>
  44. <a-col :span="12">
  45. <a-card hoverable title="余额">
  46. <countTo :startVal="0" :endVal="balance" :duration="duration" :decimals="2" class="count"></countTo>
  47. </a-card>
  48. </a-col>
  49. </a-row>
  50. <a-row style="margin-top: 15px">
  51. <a-card>
  52. <a-button @click="dianji" style="margin-bottom: 15px">新增广告计划</a-button>
  53. <div v-show="selectedRowKeys.length > 0">
  54. 请输入修改金额:
  55. <a-select style="width: 120px" v-model="allPrice">
  56. <a-select-option value="1">比例</a-select-option>
  57. <a-select-option value="2">出价</a-select-option>
  58. </a-select>
  59. <a-input-number
  60. :min="-1"
  61. :step="0.1"
  62. v-model="allMoneyProportion"
  63. style="width: 150px"
  64. @fouse.stop
  65. v-if="allPrice == '1'"
  66. />
  67. <a-input-number :min="0" :step="0.01" v-model="allMoney" style="width: 150px" @fouse.stop v-else />
  68. <!-- <a-input-number :min="0" :step="0.01" v-model="allMoney" style="width:150px" @fouse.stop /> -->
  69. <a-button @click="editMoney" style="margin: 0 15px 15px 15px" type="primary" :loading="loadingMoney"
  70. >修改</a-button
  71. >
  72. 批量操作:
  73. <a-select style="width: 120px" v-model="allType">
  74. <a-select-option value="1">启动</a-select-option>
  75. <a-select-option value="2">暂停</a-select-option>
  76. <a-select-option value="3">删除</a-select-option>
  77. </a-select>
  78. <a-button @click="editStatus" style="margin: 0 0 15px 15px" type="primary" :loading="loadingState"
  79. >确认</a-button
  80. >
  81. </div>
  82. <a-modal v-model="visible" title="错误信息" onOk="handleOk" :footer="null">
  83. <div v-if="visibleData">
  84. 修改条数:{{ visibleData.totalCount }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;失败条数:{{
  85. visibleData.failCount
  86. }}
  87. <div style="margin-top: 20px">
  88. <p v-for="(item, index) of visibleData.failInfo" :key="index">
  89. <span>名称:{{ item.campaignName ? item.campaignName : item.unitName }}</span
  90. ><br />
  91. <span>错误信息:{{ item.message }}</span>
  92. </p>
  93. </div>
  94. </div>
  95. </a-modal>
  96. <a-table
  97. size="middle"
  98. :loading="loadingList"
  99. :columns="columns"
  100. :dataSource="dataList"
  101. bordered
  102. :scroll="{ x: 2000 }"
  103. :customRow="rowClick"
  104. :pagination="ipagination"
  105. @change="sort"
  106. :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
  107. >
  108. <template slot="campaignName" slot-scope="text, record">
  109. <div style="display: flex; justify-content: center">
  110. <a @click="toDetail(record)" class="count" v-show="!record.editName">{{ text }}</a>
  111. <a-input v-show="record.editName" v-model="record.campaignName" style="width: 150px" @fouse.stop />
  112. <a-icon
  113. :type="record.editName ? 'check' : 'edit'"
  114. @click.stop="editShowName(record)"
  115. style="margin-left: 10px"
  116. class="count"
  117. />
  118. </div>
  119. </template>
  120. <span slot="action" slot-scope="text, record">
  121. <a-switch v-model="record.showSwich" @change="onChangeSwitch(record)" />
  122. </span>
  123. <span slot="actionTwo" slot-scope="text, record">
  124. <a-popconfirm @confirm="getInfo(record)">
  125. <div slot="title">
  126. <div>
  127. 计划名称:
  128. <a-input placeholder="请输入" v-model="refuseReason" style="display: inline-block; width: 500px" />
  129. </div>
  130. </div>
  131. <!-- <a-button slot="okText" type="primary" :disabled="refuseReason == ''">确定</a-button> -->
  132. <a @click="setData(record)">复制</a>
  133. </a-popconfirm>
  134. <a-divider type="vertical" />
  135. <a @click="realTimedata(record)">查看实时数据</a>
  136. <a-divider type="vertical" />
  137. <a-popconfirm @confirm="getInfo(record, 'allUnit')">
  138. <div slot="title">
  139. <div>
  140. 计划名称:
  141. <a-input placeholder="请输入" v-model="refuseReason" style="display: inline-block; width: 500px" />
  142. </div>
  143. </div>
  144. <a @click="setData(record)">复制此计划下所有组</a>
  145. </a-popconfirm>
  146. </span>
  147. <span slot="campaignType" slot-scope="text">
  148. {{ text | typeStatus }}
  149. </span>
  150. <span slot="status" slot-scope="text">
  151. {{ text | status }}
  152. </span>
  153. <span slot="putStatus" slot-scope="text">
  154. {{ text | putStatus }}
  155. </span>
  156. <span slot="createChannel" slot-scope="text">
  157. {{ text | createChannel }}
  158. </span>
  159. <template slot="dayBudget" slot-scope="text, record">
  160. <div style="display: flex; justify-content: center">
  161. <span v-show="!record.edit" class="count">{{ text ? (text / 1000).toFixed(2) : '不限制预算' }}</span>
  162. <a-input-number
  163. :min="0"
  164. :step="0.01"
  165. v-show="record.edit"
  166. v-model="record.elseMoney"
  167. style="width: 150px"
  168. @fouse.stop
  169. />
  170. <a-icon
  171. :type="record.edit ? 'check' : 'edit'"
  172. @click.stop=";(record.edit = !record.edit), editShow(record)"
  173. style="margin-left: 10px"
  174. class="count"
  175. />
  176. </div>
  177. </template>
  178. </a-table>
  179. </a-card>
  180. </a-row>
  181. <a-modal v-model="jihua" title="广告组选择" @afterClose="clear" :width="900" :maskClosable="false">
  182. <a-form-item
  183. label="广告组名称"
  184. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  185. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  186. >
  187. <a-select
  188. v-model="unitId"
  189. style="width: 100%"
  190. optionFilterProp="children"
  191. showSearch
  192. :filterOption="filterOption"
  193. @change="getUnitData($event)"
  194. >
  195. <a-select-option v-for="item in groupList" :key="item.unitId" :value="item.unitId">{{
  196. item.unitName
  197. }}</a-select-option>
  198. </a-select>
  199. </a-form-item>
  200. <copyGroup
  201. ref="copyGroup"
  202. v-show="unitId != ''"
  203. @failInfo="failInfoShow"
  204. :loadingGroup.sync="loadingGroup"
  205. :jihua.sync="jihua"
  206. />
  207. <template slot="footer">
  208. <a-button key="submit" type="primary" @click="handleSubmit" :loading="loadingGroup"> 确定 </a-button>
  209. </template>
  210. </a-modal>
  211. <a-modal v-model="nameEdit" title="广告计划名称修改" @afterClose="clear" :width="900" :maskClosable="false">
  212. <a-form-item
  213. label="广告计划名称"
  214. :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
  215. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  216. >
  217. <a-input placeholder="请输入" v-model="campaignNameEdit" style="display: inline-block" />
  218. </a-form-item>
  219. <template slot="footer">
  220. <a-button key="submit" type="primary" @click="campaignEdit" :loading="loadingCampaign"> 确定 </a-button>
  221. </template>
  222. </a-modal>
  223. <!-- 实时数据 -->
  224. <a-modal
  225. v-model="realTimeVisiable"
  226. title="广告计划实时数据"
  227. @afterClose="clear"
  228. width="80%"
  229. :maskClosable="false"
  230. :footer="false"
  231. >
  232. <div class="optBody">
  233. <a-range-picker
  234. :disabled-date="disabledDate"
  235. format="YYYY-MM-DD"
  236. style="width: 250px"
  237. @change="dateValueChange"
  238. v-model="dateValue"
  239. />
  240. </div>
  241. <div class="tableBox" style="margin-top: 20px; min-height: 400px">
  242. <a-table
  243. size="middle"
  244. :columns="realTimeColumn"
  245. :dataSource="realTimeData"
  246. bordered
  247. :pagination="false"
  248. :scroll="{ x: scrollX }"
  249. :loading="realTimeLoading"
  250. ref="accountTable"
  251. style="word-break: break-all"
  252. >
  253. <span slot="ctr" slot-scope="text">{{ text | toPercentage }}</span>
  254. <span slot="action_ratio" slot-scope="text">{{ text | toPercentage }}</span>
  255. <span slot="photo_click_ratio" slot-scope="text">{{ text | toPercentage }}</span>
  256. <span slot="charge" slot-scope="text">{{ text | decimalsHandle }}</span>
  257. <span slot="activationCost" slot-scope="text, records">{{
  258. (records.activation / records.charge) | decimalsHandle
  259. }}</span>
  260. <span slot="event_register_cost" slot-scope="text">{{ text | decimalsHandle }}</span>
  261. <span slot="form_cost" slot-scope="text">{{ text | decimalsHandle }}</span>
  262. <span slot="event_order_paid_cost" slot-scope="text">{{ text | decimalsHandle }}</span>
  263. <span slot="show" slot-scope="text">{{ text | formatCurrency }}</span>
  264. <span slot="photo_click" slot-scope="text">{{ text | formatCurrency }}</span>
  265. <span slot="aclick" slot-scope="text">{{ text | formatCurrency }}</span>
  266. <span slot="bclick" slot-scope="text">{{ text | formatCurrency }}</span>
  267. <span slot="activation" slot-scope="text">{{ text | formatCurrency }}</span>
  268. <span slot="event_register" slot-scope="text">{{ text | formatCurrency }}</span>
  269. <span slot="form_count" slot-scope="text">{{ text | formatCurrency }}</span>
  270. <span slot="event_order_paid" slot-scope="text">{{ text | formatCurrency }}</span>
  271. </a-table>
  272. </div>
  273. </a-modal>
  274. <a-modal v-model="allUnitCopy" title="复制计划下所有组" width="80%" :maskClosable="false">
  275. <a-form-item
  276. label="是否修改定向与出价"
  277. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  278. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  279. >
  280. <a-radio-group buttonStyle="solid" v-model="editUnit" @change="editUnitType">
  281. <a-radio-button value="1">是</a-radio-button>
  282. <a-radio-button value="2">否</a-radio-button>
  283. </a-radio-group>
  284. </a-form-item>
  285. <copyAllUnit ref="copyAllUnit" v-if="editUnit == '1'" @getUnitData="getUnitDataAll" />
  286. <template slot="footer">
  287. <a-button key="submit" type="primary" @click="handleEditAllUnit"> 确定 </a-button>
  288. </template>
  289. </a-modal>
  290. </div>
  291. </template>
  292. <script>
  293. import ARow from 'ant-design-vue/es/grid/Row'
  294. import ACol from 'ant-design-vue/es/grid/Col'
  295. import moment from 'moment'
  296. import countTo from 'vue-count-to'
  297. import { mapGetters } from 'vuex'
  298. import { deleteAction, getAction, postAction } from '@/api/manage'
  299. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  300. import copyGroup from './copyGroup'
  301. import copyAllUnit from './copyAllUnit'
  302. var columns = [
  303. {
  304. title: '开关',
  305. align: 'center',
  306. dataIndex: 'action',
  307. fixed: 'left',
  308. width: 100,
  309. scopedSlots: {
  310. customRender: 'action',
  311. },
  312. },
  313. {
  314. title: '广告计划名称',
  315. align: 'center',
  316. dataIndex: 'campaignName',
  317. fixed: 'left',
  318. width: 300,
  319. scopedSlots: {
  320. customRender: 'campaignName',
  321. },
  322. },
  323. {
  324. title: '操作',
  325. align: 'center',
  326. dataIndex: 'actionTwo',
  327. fixed: 'left',
  328. width: 300,
  329. scopedSlots: {
  330. customRender: 'actionTwo',
  331. },
  332. },
  333. {
  334. title: '计划单日预算金额',
  335. align: 'center',
  336. dataIndex: 'dayBudget',
  337. scopedSlots: {
  338. customRender: 'dayBudget',
  339. },
  340. width: 200,
  341. },
  342. {
  343. title: '计划状态',
  344. align: 'center',
  345. dataIndex: 'status',
  346. scopedSlots: {
  347. customRender: 'status',
  348. },
  349. },
  350. {
  351. title: '计划类型',
  352. align: 'center',
  353. dataIndex: 'campaignType',
  354. scopedSlots: {
  355. customRender: 'campaignType',
  356. },
  357. },
  358. {
  359. title: '渠道',
  360. align: 'center',
  361. dataIndex: 'createChannel',
  362. filters: [
  363. {
  364. text: '投放后台创建',
  365. value: '0',
  366. },
  367. {
  368. text: '汇创助手创建',
  369. value: '1',
  370. },
  371. ],
  372. onFilter: (value, record) => record.createChannel.toString().toLowerCase().includes(value.toLowerCase()),
  373. scopedSlots: {
  374. customRender: 'createChannel',
  375. },
  376. },
  377. {
  378. title: '投放状态',
  379. align: 'center',
  380. dataIndex: 'putStatus',
  381. scopedSlots: {
  382. customRender: 'putStatus',
  383. },
  384. filters: [
  385. {
  386. text: '投放中',
  387. value: '1',
  388. },
  389. {
  390. text: '暂停',
  391. value: '2',
  392. },
  393. ],
  394. onFilter: (value, record) => record.putStatus.toString().toLowerCase().includes(value.toLowerCase()),
  395. },
  396. {
  397. title: '创建时间',
  398. align: 'center',
  399. dataIndex: 'putCreateTime',
  400. },
  401. {
  402. title: '更新时间',
  403. align: 'center',
  404. dataIndex: 'putUpdateTime',
  405. },
  406. ]
  407. let realTimeColumn = [
  408. {
  409. title: '广告计划名称',
  410. align: 'center',
  411. dataIndex: 'campaignName',
  412. fixed: 'left',
  413. width: 300,
  414. scopedSlots: {
  415. customRender: 'campaignName',
  416. },
  417. },
  418. {
  419. title: '时间',
  420. align: 'center',
  421. dataIndex: 'stat_date',
  422. fixed: 'left',
  423. width: 200,
  424. scopedSlots: {
  425. customRender: 'stat_date',
  426. },
  427. },
  428. {
  429. title: '消耗',
  430. align: 'center',
  431. dataIndex: 'charge',
  432. scopedSlots: { customRender: 'charge' },
  433. },
  434. {
  435. title: '封面曝光数',
  436. align: 'center',
  437. dataIndex: 'show',
  438. scopedSlots: { customRender: 'show' },
  439. },
  440. {
  441. title: '封面点击数',
  442. align: 'center',
  443. dataIndex: 'photo_click',
  444. scopedSlots: { customRender: 'photo_click' },
  445. },
  446. {
  447. title: '素材曝光数',
  448. align: 'center',
  449. dataIndex: 'aclick',
  450. scopedSlots: { customRender: 'aclick' },
  451. },
  452. {
  453. title: '行为数',
  454. align: 'center',
  455. dataIndex: 'bclick',
  456. scopedSlots: { customRender: 'bclick' },
  457. },
  458. {
  459. title: '行为率',
  460. align: 'center',
  461. dataIndex: 'action_ratio',
  462. scopedSlots: { customRender: 'action_ratio' },
  463. },
  464. {
  465. title: '封面点击率',
  466. align: 'center',
  467. dataIndex: 'photo_click_ratio',
  468. scopedSlots: { customRender: 'photo_click_ratio' },
  469. },
  470. {
  471. title: '激活数',
  472. align: 'center',
  473. dataIndex: 'activation',
  474. scopedSlots: { customRender: 'activation' },
  475. },
  476. {
  477. title: '激活成本',
  478. align: 'center',
  479. dataIndex: 'activationCost',
  480. scopedSlots: { customRender: 'activationCost' },
  481. },
  482. {
  483. title: '注册数',
  484. align: 'center',
  485. dataIndex: 'event_register',
  486. scopedSlots: { customRender: 'event_register' },
  487. },
  488. {
  489. title: '注册成本',
  490. align: 'center',
  491. dataIndex: 'event_register_cost',
  492. scopedSlots: { customRender: 'event_register_cost' },
  493. },
  494. {
  495. title: '表单提交数',
  496. align: 'center',
  497. dataIndex: 'form_count',
  498. scopedSlots: { customRender: 'form_count' },
  499. },
  500. {
  501. title: '表单提交单价',
  502. align: 'center',
  503. dataIndex: 'form_cost',
  504. scopedSlots: { customRender: 'form_cost' },
  505. },
  506. {
  507. title: '付费数',
  508. align: 'center',
  509. dataIndex: 'event_order_paid',
  510. scopedSlots: { customRender: 'event_order_paid' },
  511. },
  512. {
  513. title: '付费成本',
  514. align: 'center',
  515. dataIndex: 'event_order_paid_cost',
  516. scopedSlots: { customRender: 'event_order_paid_cost' },
  517. },
  518. ]
  519. export default {
  520. name: 'account-statistics',
  521. components: {
  522. ACol,
  523. ARow,
  524. countTo,
  525. Treeselect,
  526. copyGroup,
  527. copyAllUnit,
  528. },
  529. data: function () {
  530. return {
  531. // 实时数据
  532. editUnit: '2',
  533. allUnitCopy: false,
  534. realTimeVisiable: false,
  535. realTimeColumn,
  536. realTimeData: [],
  537. scrollX: 2500,
  538. realTimeLoading: false,
  539. dateValue: [moment(), moment()],
  540. realTimeRecords: {},
  541. // 实时数据
  542. loadingMoney: false,
  543. loadingState: false,
  544. nameEdit: false,
  545. campaignIdSearch: '',
  546. loadingList: false,
  547. form: this.$form.createForm(this),
  548. jihua: false,
  549. refuseReason: '',
  550. visibleEdit: false,
  551. loadingGroup: false,
  552. allType: '1',
  553. duration: 1000,
  554. showEdit: false,
  555. many: 0,
  556. manyTwo: 0,
  557. cost: 0,
  558. balance: 0,
  559. columns,
  560. dataList: [],
  561. groupList: [],
  562. appId: '',
  563. planId: '',
  564. selectedRowKeys: [],
  565. selectedRowKeysValue: [],
  566. allMoney: null,
  567. allPrice: '1',
  568. allMoneyProportion: 1.2,
  569. visible: false,
  570. visibleData: null,
  571. rowClick: (record, index) => ({
  572. // 事件
  573. on: {
  574. dblclick: () => {},
  575. },
  576. }),
  577. ipagination: {
  578. current: 1,
  579. pageSize: 10,
  580. // pageSizeOptions: ['10', '20', '30'],
  581. showTotal: (total, range) => {
  582. return range[0] + '-' + range[1] + ' 共' + total + '条'
  583. },
  584. showQuickJumper: true,
  585. showSizeChanger: true,
  586. pageSizeOptions: ['10', '30', '50'],
  587. total: 0,
  588. onChange: (current, pageSize) => {
  589. // 切换分页时的回调,
  590. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  591. this.ipagination.current = current
  592. this.ipagination.pageSize = pageSize
  593. // if (this.campaignId == '' && this.campaignName == '') {
  594. // this.addUser()
  595. // } else {
  596. // var params = {}
  597. // params.accountId = this.appId + ''
  598. // params.pageNo = this.ipagination.current
  599. // params.pageSize = this.ipagination.pageSize
  600. // params.campaignId = this.campaignId
  601. // params.campaignName = this.campaignName
  602. // this.getCampaignList(params)
  603. // }
  604. },
  605. total: 0,
  606. },
  607. url: {},
  608. type: '',
  609. campaignName: '',
  610. campaignNameEdit: '',
  611. loadingCampaign: false,
  612. campaignIdEdit: '',
  613. campaignBudget: 'UNLIMITED',
  614. unitId: '',
  615. campaignId: '',
  616. oldCampaignId: '',
  617. oldCampaignName: '',
  618. newCampaignId: '',
  619. campaignType: '',
  620. }
  621. },
  622. filters: {
  623. typeStatus(type) {
  624. // 2 - 提升应用安装;
  625. // 3 - 获取电商下单;
  626. // 4 - 推广品牌活动;
  627. // 5 - 收集销售线索;
  628. var data = ['', '', '提升应用安装', '获取电商下单', '推广品牌活动', '收集销售线索', '', '提高应用活跃']
  629. return data[type]
  630. },
  631. status(sta) {
  632. var data = {
  633. '-1': '不限',
  634. 1: '已暂停',
  635. 3: '计划超预算',
  636. 4: '有效',
  637. 6: '余额不足',
  638. }
  639. return data[sta]
  640. },
  641. putStatus(sta) {
  642. var data = {
  643. 1: '投放中',
  644. 2: '暂停',
  645. }
  646. return data[sta]
  647. },
  648. createChannel(sta) {
  649. var data = {
  650. 0: '投放后台',
  651. 1: '汇创助手',
  652. }
  653. return data[sta]
  654. },
  655. toPercentage(val) {
  656. if (val) {
  657. if (typeof val != 'string') {
  658. return (val * 100).toFixed(2) + '%'
  659. } else {
  660. return val
  661. }
  662. } else if (typeof val == 'string') {
  663. return val
  664. } else {
  665. return 0
  666. }
  667. },
  668. //保留两位小数并且变成货币格式
  669. decimalsHandle(val) {
  670. if (val && typeof val != 'string') {
  671. if (val >= 0) {
  672. val = parseFloat(val).toFixed(2)
  673. let numberStr = val.toString()
  674. let str = numberStr.split('.')
  675. let str0 = str[0].split('').reverse()
  676. for (let i = 0; i < str0.length; i++) {
  677. if ((i + 1) % 4 === 0) {
  678. str0.splice(i, 0, ',')
  679. }
  680. }
  681. str0.reverse()
  682. let handleResult = ''
  683. for (let j = 0; j < str0.length; j++) {
  684. handleResult += str0[j]
  685. }
  686. return handleResult + '.' + str[1]
  687. } else {
  688. val = parseFloat(val).toFixed(2)
  689. let numberStr = val.toString()
  690. let str = numberStr.split('.')
  691. let str0 = str[0].substr(1).split('').reverse()
  692. for (let i = 0; i < str0.length; i++) {
  693. if ((i + 1) % 4 === 0) {
  694. str0.splice(i, 0, ',')
  695. }
  696. }
  697. str0.reverse()
  698. let handleResult = ''
  699. for (let j = 0; j < str0.length; j++) {
  700. handleResult += str0[j]
  701. }
  702. return '-' + handleResult + '.' + str[1]
  703. }
  704. } else if (typeof val == 'string') {
  705. return val
  706. } else {
  707. return 0
  708. }
  709. },
  710. //变成货币格式
  711. formatCurrency(val) {
  712. if ((val || val == 0) && typeof val != 'string') {
  713. let numberStr = val.toString()
  714. let str = numberStr.split('').reverse()
  715. for (let i = 0; i < str.length; i++) {
  716. if ((i + 1) % 4 === 0) {
  717. str.splice(i, 0, ',')
  718. }
  719. }
  720. str.reverse()
  721. let handleResult = ''
  722. for (let j = 0; j < str.length; j++) {
  723. handleResult += str[j]
  724. }
  725. return handleResult
  726. } else if (typeof val == 'string') {
  727. return val
  728. } else {
  729. return '-'
  730. }
  731. },
  732. },
  733. methods: {
  734. newCreat() {
  735. if (this.appId) {
  736. window.open('/user/new-batch?accountId=' + this.appId, '_blank')
  737. } else {
  738. window.open('/user/new-batch', '_blank')
  739. }
  740. },
  741. disabledDate(current) {
  742. // console.log(current)
  743. return (current && current > moment()) || (current && current < moment().subtract(7, 'days'))
  744. },
  745. // 查看实时数据
  746. realTimedata(records) {
  747. this.realTimeRecords = records
  748. this.realTimeVisiable = true
  749. this.realTimeHttp()
  750. },
  751. dateValueChange(date, dateString) {
  752. this.realTimeHttp()
  753. },
  754. // 获取实时数据请求
  755. realTimeHttp() {
  756. this.realTimeLoading = true
  757. postAction('/kuaishou/realTime/getCampaignDate', {
  758. accountId: this.realTimeRecords.accountId,
  759. campaignId: this.realTimeRecords.campaignId,
  760. startDate: this.dateValue[0].format('YYYY-MM-DD'),
  761. endDate: this.dateValue[1].format('YYYY-MM-DD'),
  762. }).then((res) => {
  763. this.realTimeData = []
  764. this.realTimeLoading = false
  765. if (res.success) {
  766. if (res.result) {
  767. res.result.forEach((item) => {
  768. item.campaignName = this.realTimeRecords.campaignName
  769. })
  770. this.realTimeData = res.result
  771. }
  772. }
  773. })
  774. },
  775. sort(pagination, filters, sorter, { currentDataSource }) {
  776. this.ipagination.current = pagination.current
  777. this.ipagination.pageSize = pagination.pageSize
  778. // this.search()
  779. if (this.campaignId == '' && this.campaignName == '') {
  780. this.addUser()
  781. } else {
  782. var params = {}
  783. params.accountId = this.appId + ''
  784. params.pageNo = this.ipagination.current
  785. params.pageSize = this.ipagination.pageSize
  786. params.campaignId = this.campaignId
  787. params.campaignName = this.campaignName
  788. this.getCampaignList(params)
  789. }
  790. },
  791. failInfoShow(item) {
  792. if (item) {
  793. this.visible = true
  794. this.visibleData = item
  795. } else {
  796. this.$message.success('创建成功')
  797. this.addUser()
  798. }
  799. },
  800. handleOkEdit(e) {},
  801. clear() {
  802. this.unitId = ''
  803. },
  804. filterOption(input, option) {
  805. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  806. },
  807. getUnitData(e) {
  808. var params = {
  809. accountId: this.appId,
  810. unitId: this.unitId,
  811. campaignId: this.campaignId,
  812. planId: this.planId,
  813. }
  814. localStorage.setItem('advertisingGroupKey', this.campaignId)
  815. this.$refs.copyGroup.handleOk(params)
  816. // handleSubmit
  817. },
  818. editUnitType() {
  819. if (this.editUnit == '2') {
  820. } else {
  821. var params = {
  822. accountId: this.appId,
  823. oldCampaignId: this.oldCampaignId,
  824. oldCampaignName: this.oldCampaignName,
  825. newCampaignId: this.newCampaignId,
  826. campaignType: this.campaignType,
  827. }
  828. this.$nextTick(() => {
  829. this.$refs.copyAllUnit.handleOk(params)
  830. })
  831. }
  832. },
  833. getUnitDataAll() {
  834. this.addUser()
  835. this.allUnitCopy = false
  836. this.editUnit = '2'
  837. this.$message.success('复制成功,异步创建中,请稍后')
  838. },
  839. handleEditAllUnit(e) {
  840. if (this.editUnit == '1') {
  841. this.$nextTick(() => {
  842. this.$refs.copyAllUnit.handleSubmit(e)
  843. })
  844. } else {
  845. postAction('/kuaishouCampaignCopyData/add', {
  846. accountId: this.appId,
  847. oldCampaignId: this.oldCampaignId,
  848. oldCampaignName: this.oldCampaignName,
  849. newCampaignId: this.newCampaignId,
  850. }).then((res) => {
  851. if (res.success) {
  852. this.addUser()
  853. this.allUnitCopy = false
  854. this.$message.success(res.message)
  855. } else {
  856. this.allUnitCopy = false
  857. this.$message.error(res.message)
  858. }
  859. })
  860. }
  861. },
  862. handleSubmit(e) {
  863. if (this.unitId) {
  864. this.$refs.copyGroup.handleSubmit(e)
  865. } else {
  866. this.$message.error('请选择广告组后操作')
  867. }
  868. },
  869. toDetail(record) {
  870. localStorage.setItem('advertisingGroupKey', record.campaignId)
  871. localStorage.setItem('accountId', this.appId)
  872. getAction('/kuaishou/batch/getAsyncCreativeList', {
  873. campaignId: record.campaignId,
  874. accountId: this.appId,
  875. }).then(() => {
  876. localStorage.setItem('campaignId', record.campaignId)
  877. if (localStorage.getItem('advertisingGroup')) {
  878. var dataElse = JSON.parse(localStorage.getItem('advertisingGroup'))
  879. for (let i = 0; i < dataElse.length; i++) {
  880. if (dataElse[i].key == record.key) {
  881. this.$router.replace({
  882. path: '/account/advertisingGroup',
  883. })
  884. return
  885. }
  886. }
  887. dataElse.push(record)
  888. localStorage.setItem('advertisingGroup', JSON.stringify(dataElse))
  889. } else {
  890. var data = [record]
  891. localStorage.setItem('advertisingGroup', JSON.stringify(data))
  892. }
  893. this.$router.replace({
  894. path: '/account/advertisingGroup',
  895. })
  896. })
  897. },
  898. setData(item) {
  899. let date = new Date()
  900. let y = date.getFullYear()
  901. let MM = date.getMonth() + 1
  902. MM = MM < 10 ? '0' + MM : MM
  903. let d = date.getDate()
  904. d = d < 10 ? '0' + d : d
  905. this.refuseReason = item.campaignName + '-' + y + '/' + MM + '/' + d
  906. },
  907. getInfo(item, type) {
  908. this.editUnit == '2'
  909. if (this.refuseReason == '') {
  910. this.$message.error('请输入计划名称')
  911. return
  912. } else {
  913. let params = {}
  914. params.type = item.campaignType
  915. // params.campaignBudget = this.campaignBudget
  916. params.dayBudget = item.dayBudget
  917. params.campaignName = this.refuseReason
  918. params.accountId = this.appId + ''
  919. postAction('/kuaishou/batch/campaignCreate', params).then((res) => {
  920. if (res.success) {
  921. if (type) {
  922. this.allUnitCopy = true
  923. this.oldCampaignId = item.campaignId
  924. this.oldCampaignName = item.campaignName
  925. this.newCampaignId = res.result
  926. this.campaignType = item.campaignType
  927. } else {
  928. this.jihua = true
  929. this.loadingGroup = false
  930. this.refuseReason = ''
  931. this.unitId = ''
  932. // 7156834
  933. this.planId = res.result
  934. this.campaignId = item.campaignId
  935. this.getDataList(item.campaignId)
  936. this.addUser()
  937. }
  938. } else {
  939. this.$message.error(res.message)
  940. }
  941. })
  942. }
  943. },
  944. onChangeSwitch(item) {
  945. var params = {}
  946. params.accountId = this.appId + ''
  947. params.putStatus = item.showSwich ? 1 : 2
  948. params.userId = this.userInfo().id
  949. params.campaignIds = [item.campaignId]
  950. postAction('/kuaishou/batch/batchUpdateStatus', params).then((res) => {})
  951. },
  952. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  953. searchLabel() {
  954. this.ipagination.current = 1
  955. if (this.appId) {
  956. var params = {}
  957. params.accountId = this.appId + ''
  958. params.pageNo = this.ipagination.current
  959. params.pageSize = this.ipagination.pageSize
  960. params.campaignId = this.campaignIdSearch
  961. params.campaignName = this.campaignName
  962. this.getCampaignList(params)
  963. } else {
  964. this.$message.error('请选择账户')
  965. }
  966. },
  967. searchRe() {
  968. this.campaignIdSearch = ''
  969. this.campaignName = ''
  970. this.ipagination.current = 1
  971. this.searchLabel()
  972. },
  973. addUser() {
  974. this.loading = true
  975. this.dataList = []
  976. var params = {}
  977. params.accountId = this.appId + ''
  978. params.pageNo = this.ipagination.current
  979. params.pageSize = this.ipagination.pageSize
  980. if (this.appId) {
  981. this.getSpend(params)
  982. this.getCampaignList(params)
  983. localStorage.setItem('accountId', this.appId)
  984. } else {
  985. this.$message.error('请选择账户')
  986. }
  987. },
  988. onSelectChange(selectedRowKeys, selectionRows) {
  989. this.selectedRowKeys = selectedRowKeys
  990. this.selectedRowKeysValue = selectionRows.map((item) => {
  991. return item.campaignId
  992. })
  993. // this.selectedRowKeysValue.length > 0 ? this.selectedRowKeysValue :
  994. },
  995. editStatus() {
  996. this.loadingState = true
  997. var params = {}
  998. params.accountId = this.appId + ''
  999. params.putStatus = this.allType
  1000. params.userId = this.userInfo().id
  1001. params.campaignIds = this.selectedRowKeysValue
  1002. postAction('/kuaishou/batch/batchUpdateStatus', params).then((res) => {
  1003. if (res.success) {
  1004. this.addUser()
  1005. this.selectedRowKeysValue = []
  1006. this.selectedRowKeys = []
  1007. this.loadingState = false
  1008. } else {
  1009. this.loadingState = false
  1010. }
  1011. })
  1012. },
  1013. editMoney() {
  1014. this.loadingMoney = true
  1015. if (this.allPrice == '1') {
  1016. var params = {}
  1017. params.accountId = this.appId + ''
  1018. params.proportion = this.allMoneyProportion
  1019. params.userId = this.userInfo().id
  1020. params.campaignIds = this.selectedRowKeysValue
  1021. postAction('/kuaishou/batch/batchUpdateDayBudgetByProportion', params).then((res) => {
  1022. if (res.success) {
  1023. if (res.result.failCount > 0) {
  1024. this.visible = true
  1025. this.visibleData = res.result
  1026. this.addUser()
  1027. this.loadingMoney = false
  1028. } else {
  1029. this.addUser()
  1030. this.selectedRowKeysValue = []
  1031. this.selectedRowKeys = []
  1032. this.loadingMoney = false
  1033. }
  1034. } else {
  1035. this.$message.error(res.message)
  1036. this.loadingMoney = false
  1037. }
  1038. })
  1039. } else if (this.allPrice == '2') {
  1040. var params = {}
  1041. params.accountId = this.appId + ''
  1042. params.dayBudget = this.allMoney * 1000
  1043. params.userId = this.userInfo().id
  1044. params.campaignIds = this.selectedRowKeysValue
  1045. postAction('/kuaishou/batch/batchUpdateDayBudget', params).then((res) => {
  1046. if (res.success) {
  1047. if (res.result.failCount > 0) {
  1048. this.visible = true
  1049. this.visibleData = res.result
  1050. this.addUser()
  1051. this.loadingMoney = false
  1052. } else {
  1053. this.addUser()
  1054. this.selectedRowKeysValue = []
  1055. this.selectedRowKeys = []
  1056. this.loadingMoney = false
  1057. }
  1058. } else {
  1059. this.$message.error(res.message)
  1060. this.loadingMoney = false
  1061. }
  1062. })
  1063. }
  1064. },
  1065. getCampaignList(params) {
  1066. this.loadingList = true
  1067. getAction('/kuaishou/batch/getCampaignList', params).then((res) => {
  1068. if (res.code == 0) {
  1069. this.loadingList = false
  1070. this.dataList = res.result.records.map((v, index) => {
  1071. return {
  1072. ...v,
  1073. key: index,
  1074. edit: false,
  1075. editName: false,
  1076. showSwich: v.putStatus == 1 ? true : false,
  1077. }
  1078. })
  1079. this.ipagination.total = res.result.total
  1080. } else {
  1081. this.loadingList = false
  1082. this.$message.error(res.message)
  1083. }
  1084. })
  1085. },
  1086. getSpend(item) {
  1087. getAction('/kuaishou/batch/spend', {
  1088. accountId: item.accountId,
  1089. }).then((res) => {
  1090. if (res.success) {
  1091. this.many = res.result.budget
  1092. this.manyTwo = res.result.budget
  1093. this.cost = res.result.cost
  1094. this.balance = res.result.balance
  1095. } else {
  1096. this.$message.error(res.message)
  1097. }
  1098. })
  1099. },
  1100. show() {
  1101. if (!this.showEdit) {
  1102. this.many = this.manyTwo
  1103. } else {
  1104. this.manyTwo = this.many
  1105. }
  1106. },
  1107. editShow(item) {
  1108. if (!item.edit) {
  1109. if (item.elseMoney < 500 || item.elseMoney > 100000000) {
  1110. this.$message.error('请输入大于500并且小于100000000的预算')
  1111. return
  1112. } else {
  1113. item.dayBudget = item.elseMoney * 1000
  1114. var params = {}
  1115. params.accountId = this.appId + ''
  1116. params.dayBudget = item.elseMoney * 1000
  1117. params.userId = this.userInfo().id
  1118. params.campaignIds = [item.campaignId]
  1119. postAction('/kuaishou/batch/batchUpdateDayBudget', params).then((res) => {
  1120. if (res.result.failCount > 0) {
  1121. this.$message.error(
  1122. '广告计划:' +
  1123. res.result.failInfo[0].campaignName +
  1124. ' ' +
  1125. '错误:' +
  1126. res.result.failInfo[0].message
  1127. )
  1128. }
  1129. })
  1130. }
  1131. } else {
  1132. item.elseMoney = item.dayBudget / 1000
  1133. }
  1134. },
  1135. campaignEdit(e) {
  1136. this.loadingCampaign = true
  1137. var params = {}
  1138. params.accountId = this.appId + ''
  1139. params.campaignId = this.campaignIdEdit
  1140. params.campaignName = this.campaignNameEdit
  1141. postAction('/kuaishou/batch/updateCampaign', params).then((res) => {
  1142. if (res.result.code == 0) {
  1143. this.loadingCampaign = false
  1144. this.nameEdit = false
  1145. this.$message.success('修改成功')
  1146. this.addUser()
  1147. } else {
  1148. this.loadingCampaign = false
  1149. this.$message.error(res.result.message)
  1150. }
  1151. })
  1152. },
  1153. editShowName(item) {
  1154. this.nameEdit = true
  1155. this.campaignNameEdit = item.campaignName
  1156. this.campaignIdEdit = item.campaignId
  1157. },
  1158. dianji() {
  1159. if (this.appId == '') {
  1160. this.$message.error('尚未选择需要创建的账户')
  1161. } else {
  1162. localStorage.setItem('accountId', this.appId)
  1163. if (localStorage.getItem('step')) {
  1164. this.$message.error('正在进行广告组创建,请关闭创建页面后,重新进行创建')
  1165. return
  1166. } else {
  1167. localStorage.setItem('step', 0)
  1168. this.$router.replace({
  1169. path: '/account/stepForm',
  1170. })
  1171. }
  1172. }
  1173. },
  1174. getDataList(id) {
  1175. this.groupList = []
  1176. var params = {}
  1177. params.campaignId = id
  1178. params.accountId = this.appId
  1179. params.pageNo = 1
  1180. params.pageSize = 1000
  1181. getAction('/kuaishou/batch/getUnitList', params).then((res) => {
  1182. if (res.success) {
  1183. this.groupList = res.result.records
  1184. }
  1185. })
  1186. },
  1187. },
  1188. watch: {
  1189. allUnitCopy: function (n, o) {
  1190. if (!n) {
  1191. this.editUnit = '2'
  1192. }
  1193. },
  1194. },
  1195. computed: {},
  1196. activated() {
  1197. this.manyTwo = this.many
  1198. // this.$refs.treeSelect.getParticipateList()
  1199. if (this.appId == '') {
  1200. return
  1201. } else {
  1202. this.searchLabel()
  1203. }
  1204. },
  1205. }
  1206. </script>