settlement-information.vue 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783
  1. <template>
  2. <div class="settlement-information-content">
  3. <div class="control-con-title">
  4. <div>
  5. <span class="policy-export-btn">结算单信息</span>
  6. <span>
  7. <a-tooltip>
  8. <template slot="title">显示运营人员上传账户消耗截图,运营人员可查看自己所上传数据,销售人员可查看自己所负责产品的消耗截图数据</template>
  9. <a-icon class="settlement-header-icon" type="question-circle"/>
  10. </a-tooltip>
  11. 显示列表信息,销售人员只能操作与自己相关的项目
  12. </span>
  13. </div>
  14. <div>
  15. <span class="add-acount-policy-btn"><a-button @click="handleDownloadProfit">下载利润表</a-button></span>
  16. <span class="add-acount-policy-btn"><a-button @click="handleDownloadSettlement">下载结算单</a-button></span>
  17. <span class="add-acount-policy-btn"><a-button type="primary" @click="handleUploadAccount">上传截图</a-button></span>
  18. </div>
  19. </div>
  20. <div class="control-con-header">
  21. <a-form
  22. class="grid-form"
  23. layout="inline"
  24. :form="searchForm"
  25. hide-required-mark
  26. >
  27. <a-row class="grid-form-options">
  28. <a-form-item
  29. class="grid-form-item"
  30. label="产品名称:"
  31. :colon="false"
  32. >
  33. <a-input v-model="configForm.productName" placeholder="请输入产品名称"/>
  34. </a-form-item>
  35. <a-form-item
  36. class="grid-form-item"
  37. label="项目名称:"
  38. :colon="false"
  39. >
  40. <a-input v-model="configForm.projectName" placeholder="请输入项目名称"/>
  41. </a-form-item>
  42. <a-form-item
  43. class="grid-form-item"
  44. label="账户名称:"
  45. :colon="false"
  46. >
  47. <a-input v-model="configForm.accountName" placeholder="请输入账户名称"/>
  48. </a-form-item>
  49. <a-form-item label="运营:">
  50. <a-select
  51. v-model="configForm.createUserName"
  52. style="width: 140px"
  53. :filter-option="handleFilterOption"
  54. show-search
  55. allow-clear
  56. >
  57. <a-select-option
  58. v-for="item in allSaleListOption"
  59. :key="item.id"
  60. :value="item.realName"
  61. >
  62. {{ item.realName }}
  63. </a-select-option>
  64. </a-select>
  65. </a-form-item>
  66. </a-row>
  67. <a-row>
  68. <a-form-item label="媒体:">
  69. <a-select v-model="configForm.mediaId" style="width: 100px">
  70. <a-select-option value="no">不限</a-select-option>
  71. <a-select-option :value="1">头条</a-select-option>
  72. <a-select-option :value="2">快手</a-select-option>
  73. </a-select>
  74. </a-form-item>
  75. <a-form-item
  76. class="grid-form-item"
  77. label="时间:"
  78. :colon="false"
  79. >
  80. <a-range-picker
  81. :placeholder="['开始月份', '结束月份']"
  82. format="YYYY-MM"
  83. v-model="configForm.time"
  84. :mode="mode2"
  85. @panelChange="handlePanelChange2"
  86. @change="handleAddTimesChange"
  87. />
  88. </a-form-item>
  89. <a-form-item class="form-handle-btn">
  90. <a-button type="default" class="reset-class" @click="handleResetList">重置</a-button>
  91. <a-button type="primary" @click="handleQueryList">搜索</a-button>
  92. </a-form-item>
  93. </a-row>
  94. </a-form>
  95. </div>
  96. <div class="control-con-table">
  97. <a-table
  98. ref="table"
  99. size="middle"
  100. bordered
  101. :columns="settlementColumns"
  102. :dataSource="dataSource"
  103. :pagination="false"
  104. :loading="controlLoading"
  105. >
  106. <span slot="mediaId" slot-scope="text">
  107. <span>{{ text === 1 ? '头条' : '快手' }}</span>
  108. </span>
  109. <span slot="actions" slot-scope="text, record">
  110. <a @click="handleSettleDel(record)">删除</a>
  111. <a-divider type="vertical"/>
  112. <a disabled>更多</a>
  113. </span>
  114. </a-table>
  115. <a-pagination
  116. class="pagin-table-class"
  117. :total="totalAll"
  118. :show-total="total => `共 ${totalAll} 条`"
  119. size="small"
  120. show-size-changer
  121. show-quick-jumper
  122. @change="onShowSizeChange"
  123. @showSizeChange="onShowSizeChange"
  124. />
  125. </div>
  126. <!-- 上传截图 -->
  127. <a-modal
  128. v-if="policyOperationStatus"
  129. title="账户截图上传"
  130. :visible="policyOperationStatus"
  131. dialog-class="information-modal-class"
  132. @ok="handlePolicyOperationSure"
  133. @cancel="handlePolicyOperationCancel"
  134. >
  135. <div>
  136. <a-form-model
  137. class="policy-operation-form"
  138. ref="policyOperationForm"
  139. :model="policyOperationForm"
  140. :rules="policyOperationRules"
  141. :label-col="labelCol"
  142. :wrapper-col="wrapperCol"
  143. >
  144. <a-form-model-item label="选择广告主公司名称" prop="advertiserId">
  145. <a-select
  146. v-model="policyOperationForm.advertiserId"
  147. placeholder="请选择广告主名称"
  148. :filter-option="handleFilterOption"
  149. show-search
  150. @change="handleAdverOptionChange"
  151. >
  152. <a-select-option
  153. v-for="item in allAdverListOption"
  154. :key="item.id"
  155. :value="item.id"
  156. >
  157. {{ item.name }}
  158. </a-select-option>
  159. </a-select>
  160. </a-form-model-item>
  161. <a-form-model-item label="选择产品名称" prop="productId">
  162. <a-select
  163. v-model="policyOperationForm.productId"
  164. placeholder="请选择产品名称"
  165. :filter-option="handleFilterOption"
  166. show-search
  167. >
  168. <a-select-option
  169. v-for="item in allProductListOption"
  170. :key="item.id"
  171. :value="item.id"
  172. >
  173. {{ item.productName }}
  174. </a-select-option>
  175. </a-select>
  176. </a-form-model-item>
  177. <a-form-model-item label="选择媒体">
  178. <a-radio-group v-model="policyOperationForm.mediaId" button-style="solid">
  179. <a-radio-button :value="1">头条</a-radio-button>
  180. <a-radio-button :value="2">快手</a-radio-button>
  181. </a-radio-group>
  182. </a-form-model-item>
  183. <a-form-model-item label="时间" prop="uploadYears">
  184. <a-month-picker
  185. v-model="policyOperationForm.uploadYears"
  186. format="YYYY-MM"
  187. placeholder="请选择时间"
  188. @change="handleLaunchData"
  189. />
  190. </a-form-model-item>
  191. <a-form-model-item label="附件上传">
  192. <a-upload
  193. name="file"
  194. :file-list="policyOperationForm.settlementList"
  195. :before-upload="beforeUpload"
  196. :remove="handleFileRemove"
  197. >
  198. <a-button><a-icon type="upload"/>文件上传</a-button>
  199. </a-upload>
  200. <p class="upload-txt-rules">1、支持扩展名:.jpg、.png</p>
  201. <p>2、上传图片名称账户ID,若有多个图片则账户ID-1、账户ID-2</p>
  202. </a-form-model-item>
  203. </a-form-model>
  204. </div>
  205. </a-modal>
  206. <!-- 下载结算单 -->
  207. <a-modal
  208. v-if="settlementModalStatus"
  209. title="下载结算单"
  210. :visible="settlementModalStatus"
  211. dialog-class="information-modal-class"
  212. @ok="handleSettlementModalSure"
  213. @cancel="handleSettlementModalnCancel"
  214. >
  215. <div>
  216. <a-form-model
  217. class="policy-operation-form"
  218. ref="settlementModalForm"
  219. :model="settlementModalForm"
  220. :rules="settlementModalRules"
  221. :label-col="labelCol"
  222. :wrapper-col="wrapperCol"
  223. >
  224. <a-form-model-item label="选择广告主公司名称" prop="name6">
  225. <a-select v-model="settlementModalForm.name6" placeholder="请选择广告主公司名称">
  226. <a-select-option :value="1">快手</a-select-option>
  227. <a-select-option :value="2">头条</a-select-option>
  228. </a-select>
  229. </a-form-model-item>
  230. <a-form-model-item label="选择产品名称" prop="name7">
  231. <a-select v-model="settlementModalForm.name7" placeholder="请选择产品名称">
  232. <a-select-option :value="1">快手</a-select-option>
  233. <a-select-option :value="2">头条</a-select-option>
  234. </a-select>
  235. </a-form-model-item>
  236. <a-form-model-item label="选择媒体">
  237. <a-radio-group v-model="settlementModalForm.name9" button-style="solid">
  238. <a-radio-button value="a">头条</a-radio-button>
  239. <a-radio-button value="b">快手</a-radio-button>
  240. </a-radio-group>
  241. </a-form-model-item>
  242. <a-form-model-item label="时间" prop="time">
  243. <a-month-picker
  244. v-model="settlementModalForm.time"
  245. format="YYYY-MM"
  246. placeholder="请选择时间"
  247. @change="handleLaunchData"
  248. />
  249. </a-form-model-item>
  250. <a-form-model-item label="账户数量">
  251. <span>23</span>
  252. </a-form-model-item>
  253. <a-form-model-item label="截图已上传">
  254. <span>20</span>
  255. </a-form-model-item>
  256. </a-form-model>
  257. </div>
  258. </a-modal>
  259. <!-- 下载利润表 -->
  260. <a-modal
  261. v-if="profitModalStatus"
  262. title="下载利润单"
  263. :visible="profitModalStatus"
  264. dialog-class="information-modal-class"
  265. @ok="handleProfitModalSure"
  266. @cancel="handleProfitModalnCancel"
  267. >
  268. <div>
  269. <a-form-model
  270. class="policy-operation-form"
  271. ref="profitModalForm"
  272. :model="profitModalForm"
  273. :rules="profitModalRules"
  274. :label-col="labelCol"
  275. :wrapper-col="wrapperCol"
  276. >
  277. <a-form-model-item label="选择媒体">
  278. <a-radio-group v-model="profitModalForm.name9" button-style="solid">
  279. <a-radio-button value="a">头条</a-radio-button>
  280. <a-radio-button value="b">快手</a-radio-button>
  281. </a-radio-group>
  282. </a-form-model-item>
  283. <a-form-model-item label="时间" prop="launchDateRange">
  284. <a-range-picker
  285. v-model="profitModalForm.launchDateRange"
  286. format="YYYY-MM-DD"
  287. @change="handleLaunchDateRange"
  288. />
  289. </a-form-model-item>
  290. </a-form-model>
  291. </div>
  292. </a-modal>
  293. </div>
  294. </template>
  295. <script>
  296. import {getAction, postAction} from '@/api/manage';
  297. import moment from 'moment';
  298. import {mapGetters} from 'vuex';
  299. import {urlAcount} from './settlement-information-server.js';
  300. import BMF from 'browser-md5-file';
  301. let COS = require('cos-js-sdk-v5');
  302. let cos = new COS({
  303. SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
  304. SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
  305. });
  306. export default {
  307. name: 'settlement-information',
  308. data() {
  309. return {
  310. mode2: ['month', 'month'],
  311. allAdverListOption: [],
  312. allProductListOption: [],
  313. controlLoading: false,
  314. allSaleListOption: [],
  315. profitModalForm: {
  316. name9: 'a',
  317. launchDateRange: []
  318. },
  319. profitModalRules: {
  320. launchDateRange: [{required: true, message: '请选择时间', trigger: 'change'}]
  321. },
  322. profitModalStatus: false,
  323. settlementModalStatus: false,
  324. labelCol: {span: 7},
  325. wrapperCol: {span: 14},
  326. settlementModalForm: {
  327. name6: undefined,
  328. name7: undefined,
  329. name8: undefined,
  330. name9: 'a',
  331. name10: 'a',
  332. time: ''
  333. },
  334. settlementModalRules: {
  335. name6: [{required: true, message: '请选择广告主公司名称', trigger: 'change'}],
  336. name7: [{required: true, message: '请选择产品名称', trigger: 'change'}],
  337. name8: [{required: true, message: '请选择项目名称', trigger: 'change'}],
  338. time: [{required: true, message: '请选择时间', trigger: 'change'}]
  339. },
  340. policyOperationForm: {
  341. advertiserId: undefined,
  342. productId: undefined,
  343. mediaId: 1,
  344. uploadYears: '',
  345. settlementList: []
  346. },
  347. policyOperationRules: {
  348. advertiserId: [{required: true, message: '请选择广告主公司名称', trigger: 'change'}],
  349. productId: [{required: true, message: '请选择产品名称', trigger: 'change'}],
  350. uploadYears: [{required: true, message: '请选择时间', trigger: 'change'}]
  351. },
  352. policyOperationStatus: false,
  353. tablePag: {
  354. page: 1,
  355. size: 10
  356. },
  357. totalAll: 100,
  358. dataSource: [],
  359. settlementColumns: [
  360. {
  361. title: '广告主主体名称',
  362. align: 'center',
  363. dataIndex: 'advertiserName'
  364. },
  365. {
  366. title: '产品名称',
  367. align: 'center',
  368. dataIndex: 'productName',
  369. width: 220
  370. },
  371. {
  372. title: '账户名称',
  373. align: 'center',
  374. dataIndex: 'accountName',
  375. width: 220
  376. },
  377. {
  378. title: '媒体',
  379. align: 'center',
  380. dataIndex: 'mediaId',
  381. width: 200,
  382. scopedSlots: {customRender: 'mediaId'}
  383. },
  384. {
  385. title: '上传人',
  386. align: 'center',
  387. dataIndex: 'operateUserName',
  388. width: 150
  389. },
  390. {
  391. title: '上传数量',
  392. dataIndex: 'imgNum',
  393. align: 'center',
  394. width: 150
  395. },
  396. {
  397. title: '时间',
  398. align: 'center',
  399. dataIndex: 'uploadYears',
  400. width: 150
  401. },
  402. {
  403. title: '操作',
  404. align: 'center',
  405. dataIndex: 'actions',
  406. width: 250,
  407. fixed: 'right',
  408. scopedSlots: {customRender: 'actions'}
  409. }
  410. ],
  411. configForm: {
  412. productName: '',
  413. projectName: '',
  414. accountName: '',
  415. createUserName: undefined,
  416. mediaId: 'no',
  417. time: []
  418. }
  419. };
  420. },
  421. created() {
  422. this.searchForm = this.$form.createForm(this);
  423. },
  424. mounted() {
  425. this.handleInitTable();
  426. this.handleGetAllSaleList();
  427. this.handleGetAllAdverList();
  428. },
  429. methods: {
  430. ...mapGetters(['userInfo']),
  431. moment,
  432. handlePanelChange2(value, mode) {
  433. this.configForm.time = [moment(value[0]).format('YYYY-MM'), moment(value[1]).format('YYYY-MM')];
  434. this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
  435. },
  436. // 获取所有的广告主列表
  437. handleGetAllAdverList() {
  438. const paramsData = {
  439. pageNo: 1,
  440. pageSize: 1000
  441. };
  442. getAction('/ctop/advertiser/list', paramsData).then(result => {
  443. if (result.success) {
  444. this.allAdverListOption = result.result.records || [];
  445. }
  446. else {
  447. this.$message.error(result.message);
  448. }
  449. }).catch(error => {
  450. console.log(error, 'eeee');
  451. });
  452. },
  453. handleAdverOptionChange(e) {
  454. this.policyOperationForm.productId = undefined;
  455. const paramsData = {
  456. pageNo: 1,
  457. pageSize: 1000,
  458. advertiserId: e
  459. };
  460. getAction('/ctop/product/list', paramsData).then(result => {
  461. if (result.success) {
  462. this.allProductListOption = result.result.records || [];
  463. }
  464. else {
  465. this.$message.error(result.message);
  466. }
  467. }).catch(error => {
  468. console.log(error, 'eeee');
  469. });
  470. },
  471. handleAddTimesChange(data) {
  472. this.configForm.time = data;
  473. },
  474. // 获取所有的媒体 枚举值
  475. handleGetAllSaleList() {
  476. const paramsData = {
  477. userId: this.userInfo().id
  478. };
  479. getAction(urlAcount + '/finance/settLementController/getAllOperationUser', paramsData).then(result => {
  480. if (result.code === 0) {
  481. this.allSaleListOption = result.result || [];
  482. }
  483. else {
  484. this.$message.error(result.message);
  485. }
  486. }).catch(error => {
  487. console.log(error, 'eeee');
  488. });
  489. },
  490. handleFilterOption(input, option) {
  491. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  492. },
  493. // 获取默认的列表数据
  494. handleInitTable() {
  495. this.controlLoading = true;
  496. const paramsData = {
  497. userId: this.userInfo().id,
  498. productName: this.configForm.productName,
  499. projectName: this.configForm.projectName,
  500. accountName: this.configForm.accountName,
  501. createUserName: this.configForm.createUserName,
  502. mediaId: this.configForm.mediaId === 'no' ? '' : this.configForm.mediaId,
  503. startTime: this.configForm.time[0],
  504. endTime: this.configForm.time[1],
  505. pageNo: this.tablePag.page,
  506. pageSize: this.tablePag.size
  507. };
  508. getAction(urlAcount + '/finance/settLementFileController/getSettlementSheetList', paramsData).then(result => {
  509. if (result.code === 0) {
  510. let defaultList = result.result.list;
  511. this.dataSource = defaultList;
  512. this.totalAll = result.result.total;
  513. }
  514. else {
  515. this.dataSource = [];
  516. this.totalAll = 0;
  517. this.$message.error(result.message);
  518. }
  519. }).catch(error => {
  520. console.log(error, 'eeee');
  521. }).finally(() => {
  522. this.controlLoading = false;
  523. });
  524. },
  525. handleLaunchDateRange(date, dateString) {
  526. this.profitModalForm.launchDateRange = dateString;
  527. },
  528. handleProfitModalSure() {
  529. this.$refs.profitModalForm.validate(valid => {
  530. if (valid) {
  531. console.log('条件完全');
  532. }
  533. else {
  534. console.log('error submit!!');
  535. return false;
  536. }
  537. });
  538. },
  539. handleProfitModalnCancel() {
  540. this.profitModalStatus = false;
  541. },
  542. handleSettlementModalSure() {
  543. console.log(this.settlementModalForm, '下载结算单确定按钮');
  544. this.$refs.settlementModalForm.validate(valid => {
  545. if (valid) {
  546. console.log('条件完全');
  547. }
  548. else {
  549. console.log('error submit!!');
  550. return false;
  551. }
  552. });
  553. },
  554. handleSettlementModalnCancel() {
  555. this.settlementModalStatus = false;
  556. },
  557. // 月份时间选择器
  558. handleLaunchData(date, dateString) {
  559. this.policyOperationForm.uploadYears = dateString;
  560. },
  561. // 查询的按钮
  562. handleQueryList() {
  563. this.tablePag = {
  564. page: 1,
  565. size: 10
  566. };
  567. this.handleInitTable();
  568. },
  569. // 重置的按钮
  570. handleResetList() {
  571. this.configForm = {
  572. productName: '',
  573. projectName: '',
  574. accountName: '',
  575. createUserName: undefined,
  576. mediaId: 'no',
  577. time: [moment().subtract(6, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
  578. };
  579. this.tablePag = {
  580. page: 1,
  581. size: 10
  582. };
  583. this.handleInitTable();
  584. },
  585. handleFileRemove(file) {
  586. let formData = this.policyOperationForm.settlementList;
  587. this.policyOperationForm.settlementList = formData.filter(item => file.uid !== item.uid);
  588. },
  589. beforeUpload(file) {
  590. const isZip = file.type.includes('png') || file.type.includes('jpeg');
  591. if (!isZip) {
  592. this.$message.error('请上传正确的图片');
  593. return;
  594. }
  595. this.cosUpload(file);
  596. },
  597. handleMd5(file) {
  598. let bmf = new BMF();
  599. let that = this;
  600. return new Promise(function (resolve, reject) {
  601. bmf.md5(file, (err, md5) => {
  602. // getAction('kuaishouPopulationPackage/checkPopulationPackage', {signature: md5}).then(result => {
  603. // if (result.code === 200) {
  604. // that.personNameDisabled = false;
  605. // that.personResourceDisabled = false;
  606. // resolve();
  607. // }
  608. // else if (result.code === 201) {
  609. // that.$message.error(result.message);
  610. // that.personForm.name = result.result.orientationName;
  611. // that.personForm.resource = result.result.type;
  612. // that.personNameDisabled = true;
  613. // that.personResourceDisabled = true;
  614. // reject();
  615. // }
  616. // }).catch(error => {
  617. // console.log(error, 'eeee');
  618. // reject();
  619. // });
  620. });
  621. });
  622. },
  623. cosUpload(file) {
  624. let that = this;
  625. let date = new Date();
  626. let y = date.getFullYear();
  627. let MM = date.getMonth() + 1;
  628. MM = MM < 10 ? '0' + MM : MM;
  629. let d = date.getDate();
  630. d = d < 10 ? '0' + d : d;
  631. let timeElse = new Date().getTime();
  632. let arr = file.name.split('.');
  633. let str = '';
  634. for (let i = 0; i < arr.length; i++) {
  635. if (i === arr.length - 1) {
  636. }
  637. else {
  638. if (i === arr.length - 2) {
  639. str += arr[i];
  640. }
  641. else {
  642. str += arr[i] + '.';
  643. }
  644. }
  645. }
  646. cos.putObject(
  647. {
  648. Bucket: 'media-1301855440',
  649. Region: 'ap-chongqing',
  650. // 存储桶所在地域,必须字段
  651. Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
  652. StorageClass: 'STANDARD',
  653. Body: file // 上传文件对象
  654. },
  655. function (err, data) {
  656. if (err) {
  657. that.$message.error('上传失败!!!' + err);
  658. return;
  659. }
  660. that.loadingElse = false;
  661. that.policyOperationForm.settlementList.push({
  662. uid: file.name,
  663. name: file.name,
  664. status: 'done',
  665. url: '//' + data.Location
  666. });
  667. // that.handleMd5(file);
  668. }
  669. );
  670. },
  671. // 上传确定按钮操作
  672. handlePolicyOperationSure() {
  673. const {advertiserId, productId, mediaId, uploadYears, settlementList} = this.policyOperationForm;
  674. const changeFile = settlementList.map(item => {
  675. item.fileUrl = item.url;
  676. item.fileName = item.name;
  677. return item;
  678. });
  679. this.$refs.policyOperationForm.validate(valid => {
  680. if (valid) {
  681. if (!settlementList.length) {
  682. this.$message.error('请上传图片');
  683. return;
  684. }
  685. const paramsData = {
  686. advertiserId,
  687. productId,
  688. mediaId,
  689. uploadYears,
  690. settlementList: changeFile,
  691. createUserId: this.userInfo().id
  692. };
  693. postAction(urlAcount + '/finance/settLementFileController/insertAccountImages', paramsData).then(result => {
  694. if (result.code === 0) {
  695. this.$message.success(result.message);
  696. this.handlePolicyOperationCancel();
  697. this.handleInitTable();
  698. }
  699. else {
  700. this.$message.error(result.message);
  701. }
  702. }).catch(error => {
  703. console.log(error, 'eeee');
  704. }).finally(() => {
  705. this.confirmLoading = false;
  706. });
  707. }
  708. else {
  709. console.log('error submit!!');
  710. return false;
  711. }
  712. });
  713. },
  714. // 上传取消按钮操作
  715. handlePolicyOperationCancel() {
  716. this.policyOperationForm = {
  717. advertiserId: undefined,
  718. productId: undefined,
  719. mediaId: 1,
  720. uploadYears: '',
  721. settlementList: []
  722. };
  723. this.policyOperationStatus = false;
  724. },
  725. // 分页操作按钮
  726. onShowSizeChange(current, pageSize) {
  727. this.tablePag = {
  728. page: current,
  729. size: pageSize
  730. };
  731. this.handleInitTable();
  732. },
  733. // 删除操作
  734. handleSettleDel(list) {
  735. let that = this;
  736. const paramsData = {
  737. advertiserId: list.advertiserId,
  738. productId: list.productId,
  739. mediaId: list.mediaId,
  740. uploadYears: list.uploadYears,
  741. operateUserId: list.operateUserId
  742. };
  743. this.$confirm({
  744. title: '提示',
  745. content: '确认删除该条数据',
  746. onOk() {
  747. getAction(urlAcount + '/finance/settLementFileController/deleteSettlementFile', paramsData).then(result => {
  748. if (result.code === 0) {
  749. that.handleInitTable();
  750. that.$message.success('删除成功');
  751. }
  752. else {
  753. that.$message.error(result.message);
  754. }
  755. }).catch(error => {
  756. console.log(error, 'eeee');
  757. });
  758. }
  759. });
  760. },
  761. // 下载利润单
  762. handleDownloadProfit() {
  763. console.log('下载利润单');
  764. this.profitModalStatus = true;
  765. },
  766. // 下载结算单
  767. handleDownloadSettlement() {
  768. console.log('下载结算单');
  769. this.settlementModalStatus = true;
  770. },
  771. // 上传截图
  772. handleUploadAccount() {
  773. console.log('上传截图');
  774. this.policyOperationStatus = true;
  775. }
  776. }
  777. }
  778. </script>
  779. <style lang="less" scoped>
  780. @import "settlement-information";
  781. </style>