originality.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774
  1. <style>
  2. .account-statistics .ant-card-body .count {
  3. display: inline-block;
  4. /* height: 32px;
  5. line-height: 32px; */
  6. }
  7. /* .creative-name .ant-table td {
  8. white-space: nowrap;
  9. } */
  10. .else-label .ant-form-item-label label::after {
  11. content: '';
  12. position: relative;
  13. top: -0.5px;
  14. margin: 0 8px 0 2px;
  15. }
  16. </style>
  17. <template>
  18. <div class="creative-name">
  19. <a-row style="margin-top: 15px">
  20. <a-card title="">
  21. <!-- :tabList="title" :activeTabKey="titleKey" @tabChange="key => onTabChange(key, 'titleKey')" -->
  22. <a-tabs v-model="titleKey" type="editable-card" hideAdd @edit="remove" @change="onTabChange">
  23. <a-tab-pane v-for="pane in title" :tab="pane.tab" :key="pane.key">
  24. <a-button @click="dianji" style="margin-bottom: 15px" :disabled="ipagination.total == 15"
  25. >新增创意</a-button
  26. >
  27. <a-form layout="inline">
  28. <a-row class="image-list-heading vm-panel" style="padding: 8px 20px">
  29. <a-col :md="7" :sm="8" style="display: flex">
  30. <a-form-item label="创意id">
  31. <a-input placeholder="请输入广告创意id" v-model="creativeIdTwo"></a-input>
  32. </a-form-item>
  33. </a-col>
  34. <a-col :md="7" :sm="8" style="display: flex">
  35. <a-form-item label="创意名称">
  36. <a-input placeholder="请输入广告创意名称" v-model="creativeName"></a-input>
  37. </a-form-item>
  38. </a-col>
  39. <a-col :md="4" :sm="4" style="display: flex">
  40. <a-button type="primary" style="margin: 0 10px" @click="searchLabel">查询</a-button>
  41. <a-button type="primary" style="margin: 0 10px" @click="searchRe">重置</a-button>
  42. </a-col>
  43. </a-row>
  44. </a-form>
  45. <div v-show="selectedRowKeys.length > 0">
  46. 批量操作:
  47. <a-select style="width: 120px" v-model="allType">
  48. <a-select-option value="1">启动</a-select-option>
  49. <a-select-option value="2">暂停</a-select-option>
  50. <a-select-option value="4">修改监测链接</a-select-option>
  51. <a-select-option value="3">删除</a-select-option>
  52. </a-select>
  53. <a-button @click="editStatus" style="margin: 0 0 15px 15px" type="primary">确认</a-button>
  54. </div>
  55. <a-table
  56. :columns="columns"
  57. :dataSource="dataList"
  58. bordered
  59. :scroll="{ x: true }"
  60. :customRow="rowClick"
  61. size="middle"
  62. :pagination="ipagination"
  63. :loading="loadingList"
  64. :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
  65. >
  66. <span slot="action" slot-scope="text, record">
  67. <a-switch v-model="record.showSwich" @change="onChangeSwitch(record)" />
  68. </span>
  69. <span slot="actionTwo" slot-scope="text, record">
  70. <a @click="editOriginality(record)" :disabled="record.creativeMaterialType+''=='4'">编辑</a>
  71. </span>
  72. <span slot="status" slot-scope="text">{{ text | status }}</span>
  73. <span slot="putStatus" slot-scope="text">{{ text | putStatus }}</span>
  74. <div slot="coverUrl" slot-scope="text,record">
  75. <img v-if="record.creativeMaterialType+''=='4'" :src="JSON.parse(record.materialUrl)[0]" alt="" style="width: 100px" />
  76. <img v-else :src="text" alt="" style="width: 100px" />
  77. </div>
  78. <span slot="captions" slot-scope="text">
  79. <span v-for="(item, index) of JSON.parse(text)" :key="index">{{ item }}</span>
  80. </span>
  81. </a-table>
  82. </a-tab-pane>
  83. </a-tabs>
  84. </a-card>
  85. </a-row>
  86. <a-modal
  87. v-model="visibleAll"
  88. title="批量修改第三方监测链接"
  89. @ok="handleOkAll"
  90. :confirmLoading="allLoading"
  91. :width="800"
  92. >
  93. <a-form-item
  94. label="检测链接"
  95. :labelCol="{ lg: { span: 4 }, sm: { span: 2 } }"
  96. :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
  97. >
  98. <a-input v-model="clickTrackUrl" placeholder="请输入第三方检测链接"> </a-input>
  99. </a-form-item>
  100. </a-modal>
  101. <a-modal v-model="visibleFail" title="错误信息" :footer="null">
  102. <div v-if="visibleData">
  103. 修改条数:{{ visibleData.totalCount }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;失败条数:{{ visibleData.failCount }}
  104. <div style="margin-top: 20px">
  105. <p v-for="(item, index) of visibleData.failInfo" :key="index">
  106. <span>名称:{{ item.creativeName }}</span
  107. ><br />
  108. <span>错误信息:{{ item.message }}</span>
  109. </p>
  110. </div>
  111. </div>
  112. </a-modal>
  113. <a-modal v-model="visible" title="修改" @ok="handleOk" :width="800">
  114. <a-form @submit="handleSubmit" :form="form" style="margin-top: 20px" :hideRequiredMark="true">
  115. <a-form-item
  116. label="素材类型"
  117. :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
  118. :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
  119. >
  120. <a-radio-group buttonStyle="solid" v-decorator="['creativeMaterialType', { initialValue: 1 }]">
  121. <a-radio-button :value="1">竖版视频</a-radio-button>
  122. <a-radio-button :value="2">横版视频</a-radio-button>
  123. </a-radio-group>
  124. </a-form-item>
  125. <a-form-item
  126. label=" "
  127. :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
  128. :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
  129. class="else-label"
  130. >
  131. <a @click="getVideoList('video')">选择视频</a>
  132. <br />
  133. <video :src="video.url" controls="controls" style="width: 25%" v-if="video.url"></video>
  134. </a-form-item>
  135. <a-form-item
  136. label=" "
  137. :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
  138. :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
  139. class="else-label"
  140. >
  141. <a @click="getVideoList('image')">选择封面</a>
  142. <br />
  143. <img :src="image.coverUrl" style="width: 25%" v-if="image.coverUrl" />
  144. </a-form-item>
  145. <a-form-item
  146. label="创意标题"
  147. :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
  148. :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
  149. >
  150. <a-input
  151. class="rending"
  152. v-decorator="['creativeName', { rules: [{ required: true, message: '请输入创意标题' }] }]"
  153. >
  154. </a-input>
  155. </a-form-item>
  156. <a-form-item
  157. label="广告语"
  158. :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
  159. :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
  160. >
  161. <a-textarea
  162. class="rending"
  163. placeholder="请输入广告语"
  164. v-decorator="['description', { rules: [{ required: true, message: '请输入广告语' }] }]"
  165. :autosize="{ minRows: 2, maxRows: 6 }"
  166. ></a-textarea>
  167. </a-form-item>
  168. <a-form-item
  169. label="行动号召"
  170. :labelCol="{ lg: { span: 4 }, sm: { span: 4 } }"
  171. :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }"
  172. >
  173. <a-select
  174. v-decorator="['actionBarText', { rules: [{ required: true, message: '行动号召按钮文案' }] }]"
  175. showSearch
  176. allowClear
  177. placeholder="选择行动号召按钮文案"
  178. optionFilterProp="children"
  179. :filterOption="filterOption"
  180. >
  181. <a-select-option v-for="appModel in appList" :key="appModel.id" :value="appModel.actionBarText">
  182. {{ appModel.actionBarText }}
  183. </a-select-option>
  184. </a-select>
  185. </a-form-item>
  186. <a-form-item
  187. label="检测链接"
  188. :labelCol="{ lg: { span: 4 }, sm: { span: 2 } }"
  189. :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
  190. >
  191. <a-input
  192. v-decorator="[
  193. 'clickTrackUrl',
  194. {
  195. rules: [{ required: true, message: '请输入第三方检测链接' }],
  196. },
  197. ]"
  198. placeholder="请输入第三方检测链接"
  199. >
  200. </a-input>
  201. </a-form-item>
  202. </a-form>
  203. </a-modal>
  204. <checkMatemal ref="check" @showVideo="showData"></checkMatemal>
  205. </div>
  206. </template>
  207. <script>
  208. import ARow from 'ant-design-vue/es/grid/Row'
  209. import ACol from 'ant-design-vue/es/grid/Col'
  210. import moment from 'moment'
  211. import countTo from 'vue-count-to'
  212. import { mapGetters } from 'vuex'
  213. import { deleteAction, getAction, postAction } from '@/api/manage'
  214. import checkMatemal from './editMatemal'
  215. import pick from 'lodash.pick'
  216. // import lifting from './components/lifting'
  217. const columns = [
  218. {
  219. title: '开关',
  220. align: 'center',
  221. dataIndex: 'action',
  222. width: 100,
  223. scopedSlots: {
  224. customRender: 'action',
  225. },
  226. },
  227. {
  228. title: '创意名称',
  229. dataIndex: 'creativeName',
  230. align: 'center',
  231. },
  232. {
  233. title: '操作',
  234. align: 'center',
  235. dataIndex: 'actionTwo',
  236. width: 100,
  237. scopedSlots: {
  238. customRender: 'actionTwo',
  239. },
  240. },
  241. {
  242. title: '封面',
  243. dataIndex: 'coverUrl',
  244. scopedSlots: {
  245. customRender: 'coverUrl',
  246. },
  247. align: 'center',
  248. },
  249. {
  250. title: '广告创意状态',
  251. dataIndex: 'status',
  252. scopedSlots: {
  253. customRender: 'status',
  254. },
  255. align: 'center',
  256. },
  257. {
  258. title: '投放状态',
  259. dataIndex: 'putStatus',
  260. scopedSlots: {
  261. customRender: 'putStatus',
  262. },
  263. align: 'center',
  264. },
  265. {
  266. title: '广告语',
  267. dataIndex: 'description',
  268. scopedSlots: {
  269. customRender: 'description',
  270. },
  271. align: 'center',
  272. },
  273. ]
  274. const columnsCXH = [
  275. {
  276. title: '开关',
  277. align: 'center',
  278. dataIndex: 'action',
  279. width: 100,
  280. scopedSlots: {
  281. customRender: 'action',
  282. },
  283. },
  284. {
  285. title: '创意名称',
  286. dataIndex: 'packageName',
  287. align: 'center',
  288. },
  289. {
  290. title: '操作',
  291. align: 'center',
  292. dataIndex: 'actionTwo',
  293. width: 100,
  294. scopedSlots: {
  295. customRender: 'actionTwo',
  296. },
  297. },
  298. // {
  299. // title: '封面',
  300. // dataIndex: 'coverUrl',
  301. // scopedSlots: {
  302. // customRender: 'coverUrl'
  303. // },
  304. // align: 'center'
  305. // },
  306. // {
  307. // title: '广告创意状态',
  308. // dataIndex: 'status',
  309. // scopedSlots: {
  310. // customRender: 'status'
  311. // },
  312. // align: 'center'
  313. // },
  314. {
  315. title: '投放状态',
  316. dataIndex: 'putStatus',
  317. scopedSlots: {
  318. customRender: 'putStatus',
  319. },
  320. align: 'center',
  321. },
  322. {
  323. title: '广告语',
  324. dataIndex: 'captions',
  325. scopedSlots: {
  326. customRender: 'captions',
  327. },
  328. align: 'center',
  329. },
  330. ]
  331. export default {
  332. name: 'account-statistics',
  333. components: {
  334. ACol,
  335. ARow,
  336. countTo,
  337. checkMatemal,
  338. },
  339. data: function () {
  340. return {
  341. creativeName: '',
  342. creativeIdTwo: '',
  343. visible: false,
  344. visibleAll: false,
  345. allLoading: false,
  346. visibleFail: false,
  347. visibleData: null,
  348. clickTrackUrl: '',
  349. image: {},
  350. video: {},
  351. duration: 1000,
  352. showEdit: false,
  353. many: 1200,
  354. manyTwo: null,
  355. columns: columns,
  356. dataList: [],
  357. loadingList: false,
  358. rowClick: (record, index) => ({
  359. // 事件
  360. on: {
  361. dblclick: () => {
  362. // 点击改行时要做的事情
  363. // alert(index)
  364. },
  365. },
  366. }),
  367. ipagination: {
  368. current: 1,
  369. pageSize: 15,
  370. // pageSizeOptions: ['10', '20', '30'],
  371. showTotal: (total, range) => {
  372. return range[0] + '-' + range[1] + ' 共' + total + '条'
  373. },
  374. showQuickJumper: true,
  375. // showSizeChanger: true,
  376. total: 0,
  377. onChange: (current) => {
  378. // 切换分页时的回调,
  379. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  380. this.ipagination.current = current
  381. this.getDataList(this.titleKey)
  382. },
  383. },
  384. name: null,
  385. title: [],
  386. titleKey: null,
  387. selectedRowKeys: [],
  388. selectedRowKeysValue: [],
  389. allType: '1',
  390. form: this.$form.createForm(this),
  391. appList: [],
  392. creativeId: '',
  393. }
  394. },
  395. filters: {
  396. status(sta) {
  397. var data = {
  398. '-1': '不限',
  399. 1: '已暂停',
  400. 3: '计划超预算',
  401. 6: '余额不足',
  402. 11: '组审核中',
  403. 12: '组审核未通过',
  404. 14: '已结束',
  405. 15: '组已暂停',
  406. 17: '组超预算',
  407. 19: '未达投放时间',
  408. 41: '审核中',
  409. 42: '审核未通过',
  410. 46: '已暂停',
  411. 52: '投放中',
  412. 53: '作品异常',
  413. 54: '视频审核通过',
  414. }
  415. return data[sta]
  416. },
  417. putStatus(sta) {
  418. var data = {
  419. 1: '投放中',
  420. 2: '暂停',
  421. }
  422. return data[sta]
  423. },
  424. },
  425. methods: {
  426. editOriginality(item) {
  427. this.creativeId = item.creativeId
  428. if (item.creativeMaterialType + '' == '4') {
  429. this.image.coverUrl = JSON.parse(item.materialUrl)
  430. this.visible = true
  431. } else {
  432. getAction('/kuaishou/batch/getActionBarText', {
  433. campaignId: localStorage.getItem('campaignId'),
  434. }).then((res) => {
  435. if (res.success) {
  436. this.appList = res.result
  437. }
  438. })
  439. getAction('/kuaishou/batch/getVideoDetail', {
  440. photoId: item.photoId,
  441. }).then((res) => {
  442. if (res.success) {
  443. console.log(res)
  444. this.video.url = res.result.url
  445. this.video.photoId = res.result.photoId
  446. this.image.coverUrl = item.coverUrl
  447. this.image.imageToken = item.imageToken
  448. this.visible = true
  449. this.$nextTick(() => {
  450. this.form.setFieldsValue(
  451. pick(item, ['clickTrackUrl', 'actionBarText', 'creativeName', 'description', 'creativeMaterialType'])
  452. )
  453. })
  454. }
  455. })
  456. }
  457. },
  458. handleOk() {
  459. this.handleSubmit()
  460. },
  461. handleOkAll() {
  462. this.allLoading = true
  463. var params = {}
  464. params.accountId = localStorage.getItem('accountId')
  465. params.creativeJson = {
  466. clickTrackUrl: this.clickTrackUrl,
  467. }
  468. params.creativeIds = this.selectedRowKeysValue
  469. postAction('/kuaishou/batch/batchUpdateCreative', params).then((res) => {
  470. console.log(res)
  471. if (res.success) {
  472. if (res.result.failCount > 0) {
  473. this.allLoading = false
  474. this.visibleAll = false
  475. this.visibleFail = true
  476. this.visibleData = res.result
  477. } else {
  478. this.getDataList(localStorage.getItem('originalityKey'))
  479. this.$message.success('批量修改成功')
  480. this.allType = '1'
  481. this.selectedRowKeysValue = []
  482. this.selectedRowKeys = []
  483. this.clickTrackUrl = ''
  484. this.visibleAll = false
  485. }
  486. } else {
  487. this.$message.error('修改失败')
  488. this.visibleAll = false
  489. }
  490. })
  491. },
  492. handleSubmit() {
  493. this.form.validateFields((err, values) => {
  494. if (!err) {
  495. var params = {
  496. photoId: this.video.photoId,
  497. imageToken: this.image.imageToken,
  498. ...values,
  499. creativeId: this.creativeId,
  500. accountId: localStorage.getItem('accountId'),
  501. }
  502. console.log(params)
  503. postAction('/kuaishou/batch/updateCreative', params).then((res) => {
  504. console.log(res)
  505. if (res.result.code == 0) {
  506. this.visible = false
  507. this.$message.success('修改成功')
  508. this.getDataList(localStorage.getItem('originalityKey'))
  509. } else {
  510. this.$message.error(res.result.message)
  511. }
  512. })
  513. }
  514. })
  515. },
  516. getVideoList(type) {
  517. if (type == 'video') {
  518. this.$refs.check.showCheck(this.getData('creativeMaterialType'), '/kuaishou/batch/getVideoList', type)
  519. } else {
  520. this.$refs.check.showCheck(this.getData('creativeMaterialType'), '/kuaishou/batch/getImageList', type)
  521. }
  522. },
  523. showData(item, type) {
  524. if (type == 'video') {
  525. this.video = {}
  526. console.log(item, 'v')
  527. this.video.url = item.url
  528. this.video.photoId = item.photoId
  529. } else {
  530. console.log(item, 'i')
  531. this.image = {}
  532. this.image.coverUrl = item.url
  533. this.image.imageToken = item.imageToken
  534. }
  535. },
  536. getData(className) {
  537. return this.form.getFieldValue(className)
  538. },
  539. filterOption(input, option) {
  540. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  541. },
  542. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  543. onChangeSwitch(item) {
  544. console.log(item)
  545. var params = {}
  546. params.accountId = localStorage.getItem('accountId')
  547. params.putStatus = item.showSwich ? 1 : 2
  548. params.userId = this.userInfo().id
  549. params.creativeIds = [item.creativeId]
  550. postAction('/kuaishou/batch/batchUpdateCreativeStatus', params).then((res) => {
  551. console.log(res)
  552. })
  553. },
  554. editStatus() {
  555. if (this.allType == '4') {
  556. // /kuaishou/batch/batchUpdateCreative
  557. this.visibleAll = true
  558. this.allLoading = false
  559. } else {
  560. var params = {}
  561. params.accountId = localStorage.getItem('accountId')
  562. params.putStatus = this.allType
  563. params.userId = this.userInfo().id
  564. params.creativeIds = this.selectedRowKeysValue
  565. postAction('/kuaishou/batch/batchUpdateCreativeStatus', params).then((res) => {
  566. console.log(res)
  567. if (res.success) {
  568. this.getDataList(localStorage.getItem('originalityKey'))
  569. this.$message.success('批量修改成功')
  570. this.allType = '1'
  571. this.selectedRowKeysValue = []
  572. this.selectedRowKeys = []
  573. }
  574. })
  575. }
  576. },
  577. onSelectChange(selectedRowKeys, selectionRows) {
  578. this.selectedRowKeys = selectedRowKeys
  579. this.selectedRowKeysValue = selectionRows.map((item) => {
  580. return item.creativeId
  581. })
  582. // this.selectedRowKeysValue.length > 0 ? this.selectedRowKeysValue :
  583. },
  584. onTabChange(key) {
  585. this.ipagination.current = 1
  586. this.titleKey = key
  587. localStorage.setItem('originalityKey', key)
  588. this.getDataList(key)
  589. },
  590. show() {
  591. if (!this.showEdit) {
  592. this.many = this.manyTwo
  593. } else {
  594. this.manyTwo = this.many
  595. }
  596. },
  597. editShow(item) {
  598. if (!item.edit) {
  599. item.money = item.elseMoney
  600. } else {
  601. item.elseMoney = item.money
  602. }
  603. },
  604. dianji() {
  605. if (localStorage.getItem('step')) {
  606. this.$message.error('请关闭创建页面后,重新进行创建')
  607. return
  608. } else {
  609. localStorage.setItem('step', 2)
  610. var dataJson = JSON.stringify(this.title)
  611. console.log(this.title, this.titleKey)
  612. localStorage.setItem('pans', dataJson)
  613. localStorage.setItem('pansKey', this.titleKey)
  614. this.$router.replace({
  615. path: '/account/stepForm',
  616. })
  617. }
  618. },
  619. searchLabel() {
  620. this.ipagination.current = 1
  621. // this.getDataList(localStorage.getItem('originalityKey'))
  622. if (
  623. this.title.filter((item) => {
  624. return item.key == this.titleKey + ''
  625. })[0].unitType == 7
  626. ) {
  627. this.columns = columnsCXH
  628. this.getCXHList(localStorage.getItem('originalityKey'))
  629. } else {
  630. this.columns = columns
  631. this.getDataList(localStorage.getItem('originalityKey'))
  632. }
  633. },
  634. searchRe() {
  635. this.creativeIdTwo = ''
  636. this.creativeName = ''
  637. if (
  638. this.title.filter((item) => {
  639. return item.key == this.titleKey + ''
  640. })[0].unitType == 7
  641. ) {
  642. this.columns = columnsCXH
  643. this.getCXHList(localStorage.getItem('originalityKey'))
  644. } else {
  645. this.columns = columns
  646. this.getDataList(localStorage.getItem('originalityKey'))
  647. }
  648. },
  649. getDataList(id) {
  650. this.loadingList = true
  651. this.dataList = []
  652. var params = {}
  653. params.unitId = id
  654. params.accountId = localStorage.getItem('accountId')
  655. params.pageNo = this.ipagination.current
  656. params.pageSize = this.ipagination.pageSize
  657. params.creativeId = this.creativeIdTwo
  658. params.creativeName = this.creativeName
  659. getAction('/kuaishou/batch/getCreativeList', params).then((res) => {
  660. if (res.code == 0) {
  661. this.loadingList = false
  662. this.dataList = res.result.records.map((v, index) => {
  663. return {
  664. ...v,
  665. key: index,
  666. edit: false,
  667. showSwich: v.putStatus == 1 ? true : false,
  668. }
  669. })
  670. this.ipagination.total = res.result.total
  671. } else {
  672. this.$message.error(res.message)
  673. this.loadingList = false
  674. }
  675. })
  676. },
  677. getCXHList(id) {
  678. this.loadingList = true
  679. this.dataList = []
  680. var params = {}
  681. params.unitId = id
  682. params.accountId = localStorage.getItem('accountId')
  683. params.pageNo = this.ipagination.current
  684. params.pageSize = this.ipagination.pageSize
  685. // params.creativeId = this.creativeIdTwo
  686. // params.creativeName = this.creativeName
  687. getAction('/ctop/kuaishouProgramCreative/list', params).then((res) => {
  688. console.log(res)
  689. if (res.code == 0) {
  690. this.loadingList = false
  691. this.dataList = res.result.records.map((v, index) => {
  692. return {
  693. ...v,
  694. key: index,
  695. edit: false,
  696. showSwich: v.putStatus == 1 ? true : false,
  697. }
  698. })
  699. this.ipagination.total = res.result.total
  700. } else {
  701. this.$message.error(res.message)
  702. this.loadingList = false
  703. }
  704. })
  705. },
  706. remove(targetKey) {
  707. let activeKey = this.titleKey
  708. let lastIndex
  709. this.title.forEach((pane, i) => {
  710. if (pane.key === targetKey) {
  711. lastIndex = i - 1
  712. }
  713. })
  714. const panes = this.title.filter((pane) => pane.key !== targetKey)
  715. if (panes.length && activeKey === targetKey) {
  716. if (lastIndex >= 0) {
  717. activeKey = panes[lastIndex].key
  718. } else {
  719. activeKey = panes[0].key
  720. }
  721. }
  722. this.title = panes
  723. this.titleKey = activeKey
  724. if (this.title.length == 0) {
  725. this.$bus.$emit('remove', '/account/originality')
  726. } else {
  727. localStorage.setItem('originality', JSON.stringify(this.title))
  728. localStorage.setItem('originalityKey', this.titleKey)
  729. this.getDataList(activeKey)
  730. }
  731. },
  732. },
  733. watch: {},
  734. computed: {},
  735. activated() {
  736. this.titleKey = localStorage.getItem('originalityKey')
  737. this.creativeIdTwo = ''
  738. this.creativeName = ''
  739. console.log(this.$route.params)
  740. this.title = JSON.parse(localStorage.getItem('originality')).map((item) => {
  741. return {
  742. key: item.unitId ? item.unitId + '' : item.key + '',
  743. tab: item.unitName ? '广告组:' + item.unitName : '广告组:' + item.tab,
  744. sceneId: item.sceneId,
  745. bid_type: item.ocpxActionType,
  746. unitType: item.unitType,
  747. }
  748. })
  749. if (
  750. this.title.filter((item) => {
  751. return item.key == this.titleKey + ''
  752. })[0].unitType == 7
  753. ) {
  754. this.columns = columnsCXH
  755. this.getCXHList(localStorage.getItem('originalityKey'))
  756. } else {
  757. this.columns = columns
  758. this.getDataList(localStorage.getItem('originalityKey'))
  759. }
  760. this.data = JSON.parse(localStorage.getItem('originality'))
  761. },
  762. }
  763. </script>