StatementsIndexNew.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. <!--
  2. * @Description: 财务管理 => 对账单
  3. * @Author: Rockery
  4. * @Date: 2021-07-28 15:14:06
  5. * @LastEditors: gcz
  6. * @LastEditTime: 2024-08-01 16:53:36
  7. * @FilePath: \great_webui\src\views\finance\Statements\StatementsIndex.vue
  8. * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
  9. -->
  10. <template>
  11. <div class="app-container app-container-scheduling">
  12. <div class="app-container_flex_auto">
  13. <div class="app-container_form app-container-queryform" v-show="showSearch">
  14. <!-- 页面查询表单 Start -->
  15. <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" label-width="68px">
  16. <el-form-item label="业务订单号" prop="orderNo" label-width="85px" v-if="queryShow.orderNo">
  17. <el-input v-model="queryParams.orderNo" placeholder="请输入业务单号" clearable size="small"
  18. @keyup.enter.native="handleQuery" />
  19. <span @click="clearQuery('orderNo')" class="query_clear"><i class="el-icon-circle-close"></i></span>
  20. </el-form-item>
  21. <el-form-item label="支付单号" prop="trackId" v-if="queryShow.trackId">
  22. <el-input v-model="queryParams.trackId" placeholder="请输入支付单号" clearable size="small"
  23. @keyup.enter.native="handleQuery" />
  24. <span @click="clearQuery('trackId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
  25. </el-form-item>
  26. <el-form-item label="购票渠道" prop="source" v-if="queryShow.source">
  27. <el-select v-model="queryParams.source" placeholder="请选择购票渠道" clearable>
  28. <el-option v-for="dict in dict.type.order_form_type" :key="dict.value" :label="dict.label"
  29. :value="dict.value" />
  30. </el-select>
  31. <span @click="clearQuery('source')" class="query_clear"><i class="el-icon-circle-close"></i></span>
  32. </el-form-item>
  33. <el-form-item label="支付时间" v-if="queryShow.dateRange">
  34. <el-date-picker v-model="queryParams.dateRange" size="small" style="width: 350px"
  35. value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始时间"
  36. end-placeholder="结束时间"></el-date-picker>
  37. <span @click="clearQuery('dateRange')" class="query_clear"><i class="el-icon-circle-close"></i></span>
  38. </el-form-item>
  39. <el-form-item label="支付方式" prop="payWay" v-if="queryShow.payWay">
  40. <el-select v-model="queryParams.payWay" placeholder="请选择支付方式" clearable>
  41. <el-option v-for="dict in dict.type.pay_way_type" :key="dict.value" :label="dict.label"
  42. :value="dict.value" />
  43. </el-select>
  44. <span @click="clearQuery('payWay')" class="query_clear"><i class="el-icon-circle-close"></i></span>
  45. </el-form-item>
  46. <el-form-item v-if="queryShow.performDate" label="场次时间" label-width="80px">
  47. <el-date-picker style="width: 250px;" v-model="queryParams.performDate" @change="pagePerformTimeListFun"
  48. type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
  49. end-placeholder="结束日期">
  50. </el-date-picker>
  51. <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
  52. </el-form-item>
  53. <el-form-item label="场次" label-width="60px" v-if="!multiPerformDate && queryShow.performDate">
  54. <el-select v-model="queryParams.performTimeId" placeholder="场次" clearable style="width: 100%">
  55. <el-option v-for="dict in pagePerformTimeList" :key="dict.id"
  56. :label="dict.timeSnapshot + '(' + dict.performTimeStart + '-' + dict.performTimeEnd + ')'"
  57. :value="dict.id" />
  58. </el-select>
  59. <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
  60. </el-form-item>
  61. <el-form-item>
  62. <el-dropdown @command="openQuery">
  63. <el-button size="mini" type="primary" icon="el-icon-plus"></el-button>
  64. <el-dropdown-menu slot="dropdown">
  65. <el-dropdown-item command="orderNo">业务订单号</el-dropdown-item>
  66. <el-dropdown-item command="trackId">支付单号</el-dropdown-item>
  67. <el-dropdown-item command="source">购票渠道</el-dropdown-item>
  68. <el-dropdown-item command="payWay">支付方式</el-dropdown-item>
  69. <!-- <el-dropdown-item command="payType">交易类型</el-dropdown-item> -->
  70. <el-dropdown-item command="dateRange">支付时间</el-dropdown-item>
  71. <el-dropdown-item command="performDate">场次时间/场次</el-dropdown-item>
  72. </el-dropdown-menu>
  73. </el-dropdown>
  74. <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" size="mini"
  75. @click="handleQuery">搜索</el-button>
  76. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  77. </el-form-item>
  78. </el-form>
  79. <!-- 页面查询表单 End -->
  80. </div>
  81. <div class="app-container_table app-container-main" :class="showSearch ? 'mt15' : ''">
  82. <!-- 页面批量操作按钮 -->
  83. <el-row :gutter="10" class="mb8">
  84. <el-col :span="1.5">
  85. <el-button v-hasPermi="['financeMr:statements:StatementsIndexNew:download']" type="warning" plain
  86. icon="el-icon-download" size="mini" :disabled="tableDataList.length < 1" @click="handleExport"
  87. v-loading.fullscreen.lock="handleExportLoading" element-loading-text="正在拼命生成数据中..."
  88. element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">导出</el-button>
  89. </el-col>
  90. <right-toolbar :showSearch.sync="showSearch" @queryTable="initData"></right-toolbar>
  91. </el-row>
  92. <div class="app-container_table_main">
  93. <!-- 页面表格数据区域 Start -->
  94. <el-table
  95. v-loading="loading"
  96. ref="statementsTableRef"
  97. :data="tableDataList"
  98. border
  99. row-key="orderNo"
  100. :summary-method="getSummaries"
  101. show-summary
  102. class="cust-table"
  103. max-height="480px"
  104. >
  105. <el-table-column label="业务订单号" align="center" width="200" fixed="left">
  106. <template slot-scope="scope">
  107. <div style="display: inline-block">{{ scope.row.id }}</div>
  108. </template>
  109. </el-table-column>
  110. <el-table-column label="支付单号" align="center" width="200" prop="paymentId" fixed="left" show-overflow-tooltip />
  111. <el-table-column label="银联单号" align="center" width="200" prop="trackId" fixed="left" show-overflow-tooltip />
  112. <el-table-column label="演出日期" align="center" width="150" prop="performDate" />
  113. <el-table-column label="演出时段" align="center" width="150" prop="performTime" />
  114. <el-table-column label="交易总额(元)" align="center" width="150" prop="orderPrice" />
  115. <el-table-column label="核销金额(元)" align="center" width="150" prop="usePriceTotal" />
  116. <el-table-column label="应到账金额(元)" align="center" width="150" prop="realPrice" />
  117. <el-table-column label="佣金(元)" align="center" width="150" prop="retailPriceTotal" />
  118. <el-table-column label="费率(%)" align="center" width="150" prop="withdrawRate" />
  119. <el-table-column label="手续费(元)" align="center" width="150" prop="proceMoney" />
  120. <el-table-column label="退款金额(元)" align="center" width="150" prop="refundPriceTotal" />
  121. <el-table-column label="下单时间" align="center" width="200" prop="createTime" />
  122. <el-table-column label="支付时间" align="center" width="200" prop="payTime" />
  123. <el-table-column label="支付渠道" align="center" width="150" prop="payWay">
  124. <template slot-scope="scope">
  125. <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay" />
  126. </template>
  127. </el-table-column>
  128. <el-table-column label="提现状态" align="center" width="150" prop="orderWithdrawStatus">
  129. <template slot-scope="scope">
  130. <dict-tag :options="dict.type.order_withdraw_status" :value="scope.row.orderWithdrawStatus" />
  131. </template>
  132. </el-table-column>
  133. <el-table-column label="提现金额(元)" align="center" width="150" prop="orderWithdrawRealPrice" />
  134. <el-table-column label="提现账户" align="center" width="200" prop="orderWithdrawAccount" />
  135. <el-table-column label="分销状态" align="center" width="150" prop="personWithdrawStatus">
  136. <template slot-scope="scope">
  137. <dict-tag :options="dict.type.person_withdraw_status" :value="scope.row.personWithdrawStatus" />
  138. </template>
  139. </el-table-column>
  140. <el-table-column label="分销税率(%)" align="center" width="150" prop="personRetailRate" />
  141. <el-table-column label="分销提现金额(元)" align="center" width="150" prop="personWithdrawRealPrice" />
  142. <el-table-column label="分销账户" align="center" width="150" prop="personUnionMid" />
  143. <el-table-column label="存在对账单" align="center" width="160" prop="hasBill">
  144. <template slot-scope="scope">
  145. <dict-tag :options="dict.type.has_bill" :value="scope.row.hasBill" />
  146. </template>
  147. </el-table-column>
  148. </el-table>
  149. <!-- 页面表格数据区域 End -->
  150. </div>
  151. </div>
  152. <div class="app-container_table_page">
  153. <PaginationNew
  154. :total="total"
  155. :page.sync="queryParams.pageNum"
  156. :limit.sync="queryParams.pageSize"
  157. @pagination="initData" />
  158. </div>
  159. </div>
  160. </div>
  161. </template>
  162. <script>
  163. import { listStatements, exportStatements } from '@/api/financeMr/StatementsNew';
  164. import { exportExcel } from '@/utils/exportexcel';
  165. import { pagePerformTimeList } from "@/api/schedulingMr/schedulingMr"
  166. import moment from "moment"
  167. export default {
  168. name: 'StatementsIndexNew',
  169. dicts: ['order_form_type', 'pay_way_type', 'transaction_type', 'order_withdraw_status', 'person_withdraw_status','has_bill'],
  170. data() {
  171. return {
  172. // 遮罩层
  173. loading: true,
  174. // 显示搜索条件
  175. showSearch: true,
  176. // 购票渠道格式化
  177. sourceOptions: [],
  178. // 支付渠道格式化
  179. payWayOptions: [],
  180. // 交易类型格式化
  181. tranTypeOptions: [],
  182. // 交易日期范围
  183. dateRange: [],
  184. rules: {},
  185. exportType: 1,
  186. // 总条数
  187. total: 0,
  188. // 表格数据
  189. tableDataList: [],
  190. // 查询参数
  191. queryParams: {
  192. pageNum: 1,
  193. pageSize: 10,
  194. orderNo: undefined,
  195. trackId: undefined,
  196. payWay: undefined,
  197. payType: undefined,
  198. source: undefined,
  199. performTimeId: undefined,
  200. performDate: [],
  201. dateRange: [],
  202. },
  203. queryShow: {
  204. orderNo: true,
  205. trackId: true,
  206. source: true,
  207. payWay: true,
  208. payType: true,
  209. dateRange: true,
  210. performDate: true,
  211. },
  212. oweTotalObj: {},
  213. // 导出数据状态
  214. handleExportLoading: false,
  215. summary: '',
  216. otherSummary: [],
  217. pagePerformTimeList: [],
  218. multiPerformDate: false,
  219. };
  220. },
  221. async created() {
  222. let params = this.$route.query
  223. console.log(this.$route)
  224. if (params && JSON.stringify(params) != '{}') {
  225. this.$set(this.queryParams, 'performDate', params.performDate ? [params.performDate, params.performDate] : [])
  226. if (params.performDate) {
  227. await this.pagePerformTimeListFun([params.performDate, params.performDate])
  228. }
  229. this.$set(this.queryParams, 'performTimeId', params.performTimeId ? params.performTimeId : '')
  230. this.$set(this.queryShow, 'performDate', true)
  231. } else {
  232. this.$set(this.queryParams, 'performDate', [moment().subtract(1, 'days').format("yyyy-MM-DD"), moment().subtract(1, 'days').format("yyyy-MM-DD")])
  233. if (this.queryParams.performDate) {
  234. await this.pagePerformTimeListFun(this.queryParams.performDate)
  235. }
  236. }
  237. this.initData();
  238. },
  239. methods: {
  240. getSummaries(param) {
  241. const { columns, data } = param;
  242. const sums = [];
  243. columns.forEach((column, index) => {
  244. if (index === 0) {
  245. sums[index] = '合计';
  246. return;
  247. }
  248. if (column.property == 'paymentId' ||
  249. column.property == 'trackId' ||
  250. column.property == 'withdrawRate' ||
  251. column.property == 'orderWithdrawStatus' ||
  252. column.property == 'personWithdrawStatus' ||
  253. column.property == 'personUnionMid' ||
  254. column.property == 'personRetailRate' ||
  255. column.property == 'hasBill' ||
  256. column.property == 'orderWithdrawAccount'
  257. ) {
  258. sums[index] = '';
  259. return;
  260. }
  261. const values = data.map(item => Number(item[column.property]));
  262. if (!values.every(value => isNaN(value))) {
  263. sums[index] = values.reduce((prev, curr) => {
  264. const value = Number(curr);
  265. if (!isNaN(value)) {
  266. return prev + curr;
  267. } else {
  268. return prev;
  269. }
  270. }, 0);
  271. // sums[index] += '';
  272. sums[index] = Number(sums[index].toFixed(2));
  273. } else {
  274. sums[index] = '';
  275. }
  276. });
  277. return sums;
  278. },
  279. /** 初始化数据 */
  280. async initData() {
  281. this.loading = true;
  282. // this.getRevenueReportOwetotal();
  283. this.getList();
  284. },
  285. /** 查询列表信息 */
  286. getList() {
  287. this.loading = true;
  288. listStatements(this.formatDateRange(this.queryParams, this.dateRange))
  289. .then((response) => {
  290. this.tableDataList = response?.data?.rows || [];
  291. this.total = response?.data?.total ?? 0;
  292. this.loading = false;
  293. })
  294. .catch(() => {
  295. this.tableDataList = [];
  296. this.total = 0;
  297. this.loading = false;
  298. });
  299. },
  300. /** 搜索按钮操作 */
  301. handleQuery() {
  302. this.$refs?.['queryForm']?.validate?.((valid) => {
  303. if (valid) {
  304. this.loading = true;
  305. this.$refs.statementsTableRef?.clearSort?.();
  306. this.queryParams = {
  307. ...this.queryParams,
  308. pageNum: 1,
  309. sortField: undefined,
  310. sortOrder: undefined,
  311. payBeginTime: undefined,
  312. payEndTime: undefined
  313. };
  314. // 初始化表格数据
  315. this.tableDataList = [];
  316. this.total = 0;
  317. this.$nextTick(() => {
  318. // 重新加载表格数据
  319. this.initData();
  320. });
  321. }
  322. });
  323. },
  324. /** 重置按钮操作 */
  325. resetQuery() {
  326. this.queryParams = {}
  327. this.queryParams.pageNum = 1
  328. this.queryParams.pageSize = 10
  329. this.handleQuery();
  330. },
  331. /** 导出按钮操作 */
  332. handleExport() {
  333. this.$confirm(`确定要导出对账明细的数据吗?`, '提示', {
  334. confirmButtonText: '确定 ',
  335. cancelButtonText: '取消 ',
  336. type: 'warning'
  337. })
  338. .then(() => {
  339. // 开启导出遮护罩
  340. this.handleExportLoading = true;
  341. // 排除不需要的属性
  342. let { pageNum, pageSize, ...otherObj } = this.formatDateRange(this.queryParams, this.dateRange);
  343. let handleExportReq = { ...otherObj };
  344. // 发送导出请求
  345. exportStatements(handleExportReq)
  346. .then((response) => {
  347. exportExcel(response, '对账明细_' + moment().format('yyyy_MM_DD'), '.xlsx');
  348. // 关闭导出遮护罩
  349. this.handleExportLoading = false;
  350. })
  351. .catch(() => {
  352. this.$message.error('导出异常!');
  353. // 关闭导出遮护罩
  354. this.handleExportLoading = false;
  355. });
  356. })
  357. .catch(() => {
  358. this.$message.info('您已取消导出!');
  359. // 关闭导出遮护罩
  360. this.handleExportLoading = false;
  361. });
  362. },
  363. /**
  364. * 格式参数数据
  365. */
  366. formatDateRange(params) {
  367. var search = JSON.parse(JSON.stringify(params));
  368. if (search.dateRange && search.dateRange.length > 0) {
  369. search['payBeginTime'] = search.dateRange[0];
  370. search['payEndTime'] = search.dateRange[1];
  371. } else {
  372. search['payBeginTime'] = undefined;
  373. search['payEndTime'] = undefined;
  374. }
  375. if (search.performDate && search.performDate.length > 0 && !search.performTimeId) {
  376. search['performStartDate'] = search.performDate[0];
  377. search['performEndDate'] = search.performDate[1];
  378. } else {
  379. search['performStartDate'] = undefined;
  380. search['performEndDate'] = undefined;
  381. }
  382. delete search.performDate
  383. delete search.dateRange
  384. return search;
  385. },
  386. /**
  387. * 当表格的排序条件发生变化的时候会触发该事件
  388. */
  389. handleSortChang({ column, prop, order }) {
  390. this.loading = true;
  391. this.queryParams = {
  392. ...this.queryParams,
  393. pageNum: 1,
  394. sortField: prop,
  395. sortOrder: order == 'descending' ? 'desc' : 'asc'
  396. };
  397. this.initData();
  398. },
  399. clearQuery(key) {
  400. this.$set(this.queryShow, key, false)
  401. this.$set(this.queryParams, key, '')
  402. if (key == 'performDate') {
  403. this.$set(this.queryParams, 'performTimeId', '')
  404. }
  405. },
  406. openQuery(key) {
  407. this.$set(this.queryShow, key, true)
  408. },
  409. async pagePerformTimeListFun(value) {
  410. // console.log('value',value);
  411. try {
  412. this.pagePerformTimeList = []
  413. this.$set(this.queryParams, 'performTimeId', null)
  414. if (!value) {
  415. return
  416. }
  417. if (value.length == 2 && value[0] == value[1]) {
  418. this.multiPerformDate = false
  419. } else {
  420. this.multiPerformDate = true
  421. return
  422. }
  423. let { data, code } = await pagePerformTimeList({
  424. performDate: value[0],
  425. pageNum: 1,
  426. pageSize: 999
  427. })
  428. this.pagePerformTimeList = [].concat(data.rows)
  429. } catch (error) {
  430. }
  431. },
  432. }
  433. };
  434. </script>
  435. <style lang="scss" scoped>
  436. ::v-deep {
  437. .pagination-container {
  438. text-align: center;
  439. .el-pagination {
  440. position: initial;
  441. }
  442. }
  443. }
  444. .cust-table {
  445. .statements-column-orderNo {
  446. color: #337ab7;
  447. text-decoration: none;
  448. cursor: pointer;
  449. &:hover {
  450. color: #409eff;
  451. text-decoration: underline;
  452. }
  453. }
  454. }
  455. .statements-total {
  456. .til {
  457. font-weight: bold;
  458. margin-bottom: 2px;
  459. margin-top: 10px;
  460. }
  461. .summary {
  462. ::v-deep span {
  463. color: blue;
  464. }
  465. }
  466. .other-summary {
  467. ::v-deep span {
  468. color: #f5bb00;
  469. }
  470. }
  471. }
  472. .app-container-scheduling ::v-deep .el-select__tags {
  473. flex-wrap: inherit !important;
  474. overflow-x: auto !important;
  475. }
  476. .app-container-scheduling ::v-deep .el-form-item__content {
  477. position: relative;
  478. }
  479. .app-container-scheduling ::v-deep .el-form-item__content .query_clear {
  480. position: absolute;
  481. top: -15px;
  482. right: -10px;
  483. display: none;
  484. cursor: pointer;
  485. z-index: 99;
  486. }
  487. .app-container-scheduling ::v-deep .el-form-item__content:hover .query_clear {
  488. display: block;
  489. }
  490. </style>