refuseData.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <style>
  2. /* .data-display-statistics .ant-col-6 {
  3. margin: 10px 0;
  4. }
  5. .data-display-statistics .ant-col-6 .ant-card-body {
  6. display: flex;
  7. justify-content: center;
  8. }
  9. .data-display-statistics .ant-col-6 p,
  10. .data-display-statistics .ant-col-6 span {
  11. text-align: center;
  12. line-height: 40px;
  13. font-size: 30px;
  14. font-weight: 600;
  15. color: red;
  16. margin: 0;
  17. }
  18. .search-box .ant-card-body {
  19. padding: 5px 15px;
  20. }
  21. .data-display-statistics .ant-col-6 .ant-card-body .styleElse {
  22. line-height: 60px;
  23. height: 40px;
  24. font-size: 16px;
  25. font-weight: 400;
  26. margin-left: 10px;
  27. }
  28. .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  29. display: none !important;
  30. }
  31. .yincang .ant-col-6 p {
  32. text-align: left;
  33. color: red;
  34. font-size: 16px;
  35. font-weight: 500;
  36. }
  37. .ant-table-thead div {
  38. font-weight: 700;
  39. }
  40. .tool-tip {
  41. position: absolute;
  42. top: 65px;
  43. right: 10px;
  44. }
  45. th div {
  46. white-space: nowrap;
  47. }
  48. .data-display-statistics th {
  49. text-align: center !important;
  50. } */
  51. </style>
  52. <template>
  53. <div class="data-refuse-statistics">
  54. <a-row class="image-list-heading vm-panel">
  55. <div class="panel-heading" style="display:flex;justify-content: space-between;">{{ title }}</div>
  56. <a-row type="flex" align="middle" justify="space-between" class="panel-body">
  57. <div class="search-bar" style="width:100%">
  58. <span>账户选择:</span>
  59. <a-select
  60. v-model="appId"
  61. showSearch
  62. allowClear
  63. placeholder="请选择账户"
  64. optionFilterProp="children"
  65. style="width:600px"
  66. >
  67. <a-select-option
  68. v-for="appModel in options"
  69. :key="appModel.id+new Date().getTime()"
  70. :value="appModel.accountId"
  71. >{{appModel.advertiserName}}&#12288;&#12288;{{appModel.accountId}}&#12288;&nbsp;&#12288;{{appModel.authName}}&#12288;&#12288;{{appModel.operationName}}</a-select-option>
  72. </a-select>
  73. <a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
  74. </div>
  75. </a-row>
  76. </a-row>
  77. <a-row :gutter="10" style="margin-top:10px">
  78. <a-col :span="24">
  79. <a-card style="width:100%;">
  80. <div style="display:flex;margin:0 0 20px 0">
  81. <a-input placeholder="请输出要查找的创意名称" style="width:300px;" v-model="keyWord" />
  82. <a-button type="primary" style="margin-left:10px" @click="addUserKey">搜索</a-button>
  83. </div>
  84. <a-table :columns="columns" :dataSource="dataList" bordered :loading="loading">
  85. <div slot="videoUrl" slot-scope="videoUrl">
  86. <video
  87. class="video"
  88. :src="videoUrl"
  89. controls="controls"
  90. style="height:200px;width:112.5px"
  91. >您的浏览器不支持 video 标签。</video>
  92. </div>
  93. <div slot="coverUrl" slot-scope="coverUrl">
  94. <img :src="coverUrl" controls="controls" style="height:200px;width:112.5px" />
  95. </div>
  96. <template slot="creativeName" slot-scope="text, record">
  97. <!-- <editable-cell :text="text" @change="onCellChange(record, 'creativeName', $event)" /> -->
  98. <div>
  99. {{text}}
  100. <a-icon
  101. type="edit"
  102. style="cursor: pointer;"
  103. @click="onCellChange(record, 'creativeName')"
  104. />
  105. </div>
  106. </template>
  107. <template slot="description" slot-scope="text, record">
  108. <!-- <editable-cell :text="text" @change="onCellChange(record, 'description', $event)" /> -->
  109. <div>
  110. {{text}}
  111. <a-icon
  112. type="edit"
  113. style="cursor: pointer;"
  114. @click="onCellChange(record, 'description')"
  115. />
  116. </div>
  117. </template>
  118. </a-table>
  119. </a-card>
  120. </a-col>
  121. </a-row>
  122. <a-modal
  123. :title="editTitle"
  124. :visible="visible"
  125. @ok="handleOk"
  126. :confirmLoading="confirmLoading"
  127. @cancel="handleCancel"
  128. >
  129. <a-textarea v-model="editWord" autosize />
  130. </a-modal>
  131. </div>
  132. </template>
  133. <script>
  134. import moment from 'moment'
  135. import { getMaterialAccount, getRefuseCreative, updateCreative, selectByCreateName } from '@api/statistics'
  136. import axios from 'axios'
  137. import EditableCell from './components/EditableCell'
  138. import { mapGetters } from 'vuex'
  139. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  140. const columns = [
  141. {
  142. title: '账号Id',
  143. dataIndex: 'accountId',
  144. key: 'accountId',
  145. align: 'center'
  146. },
  147. {
  148. title: '计划Id',
  149. dataIndex: 'campaignId',
  150. key: 'campaignId',
  151. align: 'center'
  152. },
  153. {
  154. title: '广告组id',
  155. dataIndex: 'unitId',
  156. key: 'unitId',
  157. align: 'center'
  158. },
  159. {
  160. title: '创意id',
  161. dataIndex: 'creativeId',
  162. key: 'photoClick',
  163. align: 'center'
  164. },
  165. {
  166. title: '创意名称',
  167. dataIndex: 'creativeName',
  168. key: 'creativeName',
  169. align: 'left',
  170. scopedSlots: { customRender: 'creativeName' }
  171. },
  172. {
  173. title: '视频',
  174. dataIndex: 'videoUrl',
  175. key: 'videoUrl',
  176. align: 'center',
  177. scopedSlots: { customRender: 'videoUrl' }
  178. },
  179. {
  180. title: '封面',
  181. dataIndex: 'coverUrl',
  182. key: 'coverUrl',
  183. align: 'center',
  184. scopedSlots: { customRender: 'coverUrl' }
  185. },
  186. {
  187. title: '拒绝原因',
  188. dataIndex: 'reviewDetail',
  189. key: 'reviewDetail',
  190. align: 'left'
  191. },
  192. {
  193. title: '广告语',
  194. dataIndex: 'description',
  195. key: 'description',
  196. align: 'left',
  197. scopedSlots: { customRender: 'description' }
  198. }
  199. ]
  200. export default {
  201. name: 'refuse-data',
  202. components: {
  203. EditableCell
  204. },
  205. data: function() {
  206. return {
  207. title: '被拒创意列表',
  208. appId: null,
  209. options: [],
  210. loading: false,
  211. columns,
  212. dataList: [],
  213. keyWord: '',
  214. editTitle: '',
  215. confirmLoading: false,
  216. visible: false,
  217. editWord: '',
  218. nowData: null
  219. }
  220. },
  221. filters: {},
  222. methods: {
  223. handleOk(e) {
  224. this.confirmLoading = true
  225. var params = {}
  226. params.accountId = this.nowData.accountId
  227. params.campaignId = this.nowData.campaignId
  228. params.unitId = this.nowData.unitId
  229. params.creativeId = this.nowData.creativeId
  230. params.creativeName = this.editTitle == '创意名称修改' ? this.editWord : this.nowData.creativeName
  231. params.description = this.editTitle == '广告语修改' ? this.editWord : this.nowData.description
  232. updateCreative(params).then(res => {
  233. if (res.code == 0) {
  234. this.addUser()
  235. this.visible = false
  236. this.confirmLoading = false
  237. } else {
  238. this.$message.error(res.message)
  239. this.visible = false
  240. this.confirmLoading = false
  241. }
  242. })
  243. },
  244. handleCancel(e) {
  245. this.visible = false
  246. },
  247. onCellChange(item, dataIndex) {
  248. this.editWord = item[dataIndex]
  249. this.editTitle = dataIndex == 'creativeName' ? '创意名称修改' : '广告语修改'
  250. this.nowData = item
  251. this.visible = true
  252. },
  253. moment,
  254. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  255. addUser() {
  256. this.loading = true
  257. var params = {}
  258. params.accountId = this.appId + ''
  259. if (this.appId) {
  260. getRefuseCreative(params).then(res => {
  261. if (res.code == 0) {
  262. this.dataList = res.data.map((v, index) => {
  263. return {
  264. ...v,
  265. key: index
  266. }
  267. })
  268. this.list = this.dataList
  269. this.loading = false
  270. }
  271. })
  272. } else {
  273. this.$message.error('请选择账户')
  274. }
  275. },
  276. addUserKey() {
  277. this.dataList = this.list.filter(item => {
  278. return item.creativeName.toLowerCase().indexOf(this.keyWord.toLowerCase()) > -1
  279. })
  280. }
  281. },
  282. watch: {},
  283. distoryed() {},
  284. updated() {
  285. stopOtherVideo()
  286. },
  287. mounted: function() {
  288. this.$nextTick(() => {
  289. getMaterialAccount({ userId: this.userInfo().id }).then(res => {
  290. this.options = res
  291. })
  292. })
  293. }
  294. }
  295. </script>