auto-copy-library.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487
  1. <template>
  2. <div class="auto-copylibrary-content">
  3. <div class="control-con-header">
  4. <a-form
  5. class="grid-form"
  6. layout="inline"
  7. hide-required-mark
  8. >
  9. <a-row>
  10. <a-form-item
  11. class="grid-form-item"
  12. label="账户:"
  13. :colon="false"
  14. >
  15. <acount-search
  16. class="acount-search-class"
  17. :appId.sync="configForm.acountId"
  18. :multiple="false"
  19. request="2,4"
  20. >
  21. </acount-search>
  22. </a-form-item>
  23. <a-form-item label="状态">
  24. <a-select v-model="configForm.searchStatus" style="width: 100px">
  25. <a-select-option :value="2">不限</a-select-option>
  26. <a-select-option :value="0">可投放</a-select-option>
  27. <a-select-option :value="1">已下架</a-select-option>
  28. </a-select>
  29. </a-form-item>
  30. </a-row>
  31. <a-row class="grid-form-options">
  32. <a-form-item
  33. class="grid-form-item"
  34. label="关键词:"
  35. :colon="false"
  36. >
  37. <a-input v-model="configForm.num" placeholder="请输入关键词"/>
  38. </a-form-item>
  39. <a-form-item
  40. class="grid-form-item"
  41. label="选择时间:"
  42. :colon="false"
  43. >
  44. <a-range-picker
  45. v-model="configForm.launchDateRange"
  46. format="YYYY-MM-DD"
  47. @change="handleLaunchData"
  48. />
  49. </a-form-item>
  50. <a-form-item class="form-handle-btn">
  51. <a-button type="primary" class="reset-class" icon="reload" @click="handleResetList">重置</a-button>
  52. <a-button type="primary" class="reset-class" icon="search" @click="handleQueryList">查询</a-button>
  53. <a-button type="primary" @click="handleAddAccountConfig">新增文案</a-button>
  54. </a-form-item>
  55. </a-row>
  56. </a-form>
  57. </div>
  58. <div class="control-con-table">
  59. <a-table
  60. ref="table"
  61. size="middle"
  62. bordered
  63. :columns="currencyColumns"
  64. :dataSource="currencyData"
  65. :pagination="false"
  66. :loading="controlLoading"
  67. >
  68. <span slot="action" slot-scope="text, record">
  69. <a @click="handleEditCopyLibrary(record)" :disabled="record.status !== 0">编辑</a>
  70. <a-divider type="vertical"/>
  71. <a @click="handleOffSheif(record)" :disabled="record.status !== 0">下架</a>
  72. </span>
  73. <span slot="reason" slot-scope="text, record">
  74. <a @click="handleRejectionReason(record)">被拒创意详情</a>
  75. </span>
  76. </a-table>
  77. <a-pagination
  78. class="pagin-table-class"
  79. v-model="currencyPag.page"
  80. :page-size="currencyPag.size"
  81. :total="currencyTotalAll"
  82. :show-total="total => `共 ${currencyTotalAll} 条`"
  83. size="small"
  84. show-size-changer
  85. show-quick-jumper
  86. @change="handleCurrentPage"
  87. @showSizeChange="handleCurrentPage"
  88. />
  89. </div>
  90. <a-modal
  91. v-if="causeVisible"
  92. :title="copywritingType === 'add' ? '新建文案' : '编辑文案'"
  93. :visible="causeVisible"
  94. :confirmLoading="confirmLoading"
  95. dialog-class="auto-copy-library-modal"
  96. @ok="handleCauseSure"
  97. @cancel="handleCauseCancel"
  98. >
  99. <div>
  100. <div class="acount-title">
  101. <div class="acount-title-left">广告账户</div>
  102. <div class="acount-title-right">
  103. <div class="only-title-mater">
  104. <acount-search :appId.sync="advertisingAccount" request="2,4"></acount-search>
  105. </div>
  106. </div>
  107. </div>
  108. <div v-if="copywritingType === 'add'" class="acount-title">
  109. <div class="acount-title-left">批量上传</div>
  110. <div class="acount-title-right">
  111. <div class="only-title-mater">
  112. <a-upload
  113. name="file"
  114. :file-list="fileList"
  115. :customRequest="handleCustomRequest"
  116. :remove="handleRemoveUpload"
  117. >
  118. <a-button><a-icon type="upload"/>文件上传</a-button>
  119. </a-upload>
  120. <p class="upload-prompt-information special-number-line">1、 文件格式为xls或xlsx,每行一条文案,每条文案不多于30字</p>
  121. <p class="upload-prompt-information">2、 请将文案写在Excel表的第一列,否则将无法上传</p>
  122. </div>
  123. </div>
  124. </div>
  125. <div v-if="copywritingType === 'edit'" class="acount-title">
  126. <div class="acount-title-left">文案</div>
  127. <div class="acount-title-right">
  128. <div class="only-title-mater">
  129. <a-input v-model="editTextShow.copy_writer" disabled/>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </a-modal>
  135. <a-modal
  136. v-if="rejectIdeasVisible"
  137. title="被拒创意详情"
  138. dialog-class="reject-ideas-modal"
  139. :visible="rejectIdeasVisible"
  140. :footer="null"
  141. @cancel="handleRejectIdeasCancel"
  142. >
  143. <div>
  144. <a-table
  145. ref="table"
  146. size="middle"
  147. bordered
  148. :columns="rejectIdeasColumns"
  149. :dataSource="rejectIdeasData"
  150. :pagination="false"
  151. >
  152. </a-table>
  153. <a-pagination
  154. class="pagin-table-class"
  155. v-model="rejectIdeasPag.page"
  156. size="small"
  157. :page-size="rejectIdeasPag.size"
  158. :total="rejectIdeasTotalAll"
  159. :show-total="total => `共 ${rejectIdeasTotalAll} 条`"
  160. @change="handleRejectIdeasPage"
  161. @showSizeChange="handleRejectIdeasPage"
  162. />
  163. </div>
  164. </a-modal>
  165. </div>
  166. </template>
  167. <script>
  168. import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
  169. import {getAction, postAction} from '@/api/manage';
  170. import {mapGetters} from 'vuex';
  171. export default {
  172. name: 'autoCopyLibrary',
  173. components: {
  174. AcountSearch
  175. },
  176. data() {
  177. return {
  178. editShowAccountList: [],
  179. confirmLoading: false,
  180. controlLoading: false,
  181. refusedReasonList: {},
  182. rejectIdeasVisible: false,
  183. rejectIdeasPag: {
  184. page: 1,
  185. size: 10
  186. },
  187. rejectIdeasTotalAll: 0,
  188. rejectIdeasColumns: [
  189. {
  190. title: '账户名称',
  191. align: 'center',
  192. dataIndex: 'accountName'
  193. },
  194. {
  195. title: '广告组ID',
  196. align: 'center',
  197. dataIndex: 'unitId'
  198. },
  199. {
  200. title: '创意名称',
  201. align: 'center',
  202. dataIndex: 'creativeName'
  203. },
  204. {
  205. title: '被拒原因',
  206. align: 'center',
  207. dataIndex: 'reviewDetail'
  208. }
  209. ],
  210. rejectIdeasData: [],
  211. editTextShow: {},
  212. fileList: [],
  213. advertisingAccount: [],
  214. currencyData: [],
  215. currencyTotalAll: 0,
  216. currencyPag: {
  217. page: 1,
  218. size: 20
  219. },
  220. currencyColumns: [
  221. {
  222. title: '文案',
  223. align: 'center',
  224. dataIndex: 'copy_writer'
  225. },
  226. {
  227. title: '相关创意数',
  228. align: 'center',
  229. dataIndex: 'relatedSize'
  230. },
  231. {
  232. title: '被拒创意数',
  233. align: 'center',
  234. dataIndex: 'refusedSize'
  235. },
  236. {
  237. title: '状态',
  238. align: 'center',
  239. dataIndex: 'status',
  240. customRender(d) {
  241. return d === 0 ? '可投放' : '已下架'
  242. }
  243. },
  244. {
  245. title: '操作',
  246. dataIndex: 'action',
  247. align: 'center',
  248. scopedSlots: {customRender: 'action'}
  249. },
  250. {
  251. title: '更多',
  252. dataIndex: 'reason',
  253. align: 'center',
  254. scopedSlots: {customRender: 'reason'}
  255. }
  256. ],
  257. causeVisible: false,
  258. copywritingType: 'add',
  259. configForm: {
  260. acountId: '',
  261. num: '',
  262. adConvertId: undefined,
  263. launchDateRange: [],
  264. searchStatus: 2
  265. }
  266. };
  267. },
  268. mounted() {
  269. this.handleInitTable();
  270. },
  271. methods: {
  272. ...mapGetters(['userInfo']),
  273. handleInitTable() {
  274. this.controlLoading = true;
  275. const paramsData = {
  276. accountIds: this.configForm.acountId,
  277. status: this.configForm.searchStatus,
  278. keywords: this.configForm.num,
  279. startDate: this.configForm.launchDateRange[0] || '',
  280. endDate: this.configForm.launchDateRange[1] || '',
  281. pageNumber: this.currencyPag.page,
  282. pageSize: this.currencyPag.size
  283. };
  284. getAction('/document/library/getDocumentList', paramsData).then(result => {
  285. if (result.code === 0) {
  286. this.currencyData = result.result.list;
  287. this.currencyTotalAll = result.result.total;
  288. }
  289. else {
  290. this.$message.error(result.message);
  291. }
  292. }).catch(error => {
  293. console.log(error, 'eeee');
  294. }).finally(() => {
  295. this.controlLoading = false;
  296. });
  297. },
  298. handleRejectIdeasCancel() {
  299. this.refusedReasonList = {};
  300. this.rejectIdeasVisible = false;
  301. },
  302. handleRejectIdeasPage(current, pageSize) {
  303. this.currencyPag = {
  304. page: current,
  305. size: pageSize
  306. };
  307. this.handleGetRefusedList(this.refusedReasonList);
  308. },
  309. handleCustomRequest(info) {
  310. const isZip = info.file.name.indexOf('xlsx') !== -1 || info.file.name.indexOf('xls') !== -1;
  311. if (!isZip) {
  312. this.$message.error('文件上传格式只能是xls、xlsx !');
  313. return;
  314. }
  315. this.fileList = [];
  316. this.$nextTick(() => {
  317. this.fileList.push(info.file);
  318. });
  319. },
  320. handleRemoveUpload(data) {
  321. let index = this.fileList.indexOf(data);
  322. let newUploadFile = this.fileList;
  323. newUploadFile.splice(index, 1);
  324. this.fileList = newUploadFile;
  325. },
  326. handleCauseSure() {
  327. if (!this.advertisingAccount.length) {
  328. this.$message.error('请选择账户');
  329. return;
  330. }
  331. let paramsData = new FormData();
  332. paramsData.append('accountIds', [...this.advertisingAccount, ...this.editShowAccountList]);
  333. if (this.copywritingType === 'add') {
  334. if (!this.fileList.length) {
  335. this.$message.error('请上传文件');
  336. return;
  337. }
  338. this.confirmLoading = true;
  339. paramsData.append('file', this.fileList[0]);
  340. this.handleSubmitOperation(paramsData, '/document/library/createdocument');
  341. }
  342. else if (this.copywritingType === 'edit') {
  343. this.confirmLoading = true;
  344. paramsData.append('copyWriterId', this.editTextShow.copyWriterId);
  345. paramsData.append('copyWriter', this.editTextShow.copy_writer);
  346. this.handleSubmitOperation(paramsData, '/document/library/updateDocument');
  347. }
  348. },
  349. handleSubmitOperation(data, url) {
  350. postAction(url, data).then(result => {
  351. if (result.code === 200) {
  352. this.$message.success(result.message);
  353. this.advertisingAccount = [];
  354. this.fileList = [];
  355. this.editShowAccountList = [];
  356. this.causeVisible = false;
  357. this.currencyPag = {
  358. page: 1,
  359. size: 10
  360. };
  361. this.handleInitTable();
  362. }
  363. else {
  364. this.$message.error(result.message);
  365. }
  366. }).catch(error => {
  367. console.log(error, 'eeee');
  368. }).finally(() => {
  369. this.confirmLoading = false;
  370. });
  371. },
  372. handleCauseCancel() {
  373. this.advertisingAccount = [];
  374. this.fileList = [];
  375. this.editShowAccountList = [];
  376. this.causeVisible = false;
  377. },
  378. handleEditCopyLibrary(list) {
  379. const defaultData = list;
  380. this.editTextShow = defaultData;
  381. this.handleGetAcoountId(list);
  382. this.copywritingType = 'edit';
  383. this.$nextTick(() => {
  384. this.causeVisible = true;
  385. });
  386. },
  387. handleGetAcoountId(list) {
  388. getAction('/document/library/getAcoountId', {copyWriterId: list.copyWriterId}).then(result => {
  389. if (result.code === 0) {
  390. const defaultData = result.result.map(item => Number(item));
  391. this.editShowAccountList = defaultData;
  392. this.advertisingAccount = defaultData;
  393. }
  394. else {
  395. this.$message.error(result.message);
  396. }
  397. }).catch(error => {
  398. console.log(error, 'eeee');
  399. });
  400. },
  401. handleOffSheif(list) {
  402. let that = this;
  403. this.$confirm({
  404. title: '提示',
  405. content: '是否确认下架该条文案',
  406. onOk() {
  407. const params = {
  408. copyWriterId: list.copyWriterId,
  409. status: 1
  410. };
  411. getAction('/document/library/updateStatus', params).then(result => {
  412. if (result.code === 200) {
  413. that.$message.success(result.message);
  414. that.handleInitTable();
  415. }
  416. else {
  417. that.$message.error(result.message);
  418. }
  419. }).catch(error => {
  420. console.log(error, 'eeee');
  421. });
  422. }
  423. });
  424. },
  425. handleCurrentPage(current, pageSize) {
  426. this.currencyPag = {
  427. page: current = pageSize !== this.currencyPag.size ? 1 : current,
  428. size: pageSize
  429. };
  430. this.handleInitTable();
  431. },
  432. // 被拒理由的操作
  433. handleRejectionReason(list) {
  434. this.refusedReasonList = list;
  435. this.handleGetRefusedList(list);
  436. this.rejectIdeasVisible = true;
  437. },
  438. handleGetRefusedList(list) {
  439. const paramsData = {
  440. copyWriterId: list.copyWriterId,
  441. pageNumber: this.rejectIdeasPag.page,
  442. pageSize: this.rejectIdeasPag.size
  443. };
  444. getAction('/document/library/getRefusedList', paramsData).then(result => {
  445. if (result.code === 0) {
  446. this.rejectIdeasData = result.result.list;
  447. this.rejectIdeasTotalAll = result.result.total;
  448. }
  449. else {
  450. this.$message.error(result.message);
  451. }
  452. }).catch(error => {
  453. console.log(error, 'eeee');
  454. });
  455. },
  456. handleAddAccountConfig() {
  457. this.causeVisible = true;
  458. this.copywritingType = 'add';
  459. },
  460. handleResetList() {
  461. this.configForm = {
  462. acountId: '',
  463. num: '',
  464. adConvertId: undefined,
  465. launchDateRange: [],
  466. searchStatus: 2
  467. };
  468. this.currencyPag = {
  469. page: 1,
  470. size: 20
  471. };
  472. this.handleInitTable();
  473. },
  474. handleQueryList() {
  475. this.handleInitTable();
  476. },
  477. handleLaunchData(date, dateString) {
  478. this.configForm.launchDateRange = dateString;
  479. }
  480. }
  481. }
  482. </script>
  483. <style lang="less" scoped>
  484. @import "auto-copy-library";
  485. </style>