123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509 |
- <!--
- * @Description: 财务管理 => 对账单
- * @Author: Rockery
- * @Date: 2021-07-28 15:14:06
- * @LastEditors: gcz
- * @LastEditTime: 2024-08-01 16:53:36
- * @FilePath: \great_webui\src\views\finance\Statements\StatementsIndex.vue
- * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
- -->
- <template>
- <div class="app-container app-container-scheduling">
- <div class="app-container_flex_auto">
- <div class="app-container_form app-container-queryform" v-show="showSearch">
- <!-- 页面查询表单 Start -->
- <el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" label-width="68px">
- <el-form-item label="业务订单号" prop="orderNo" label-width="85px" v-if="queryShow.orderNo">
- <el-input v-model="queryParams.orderNo" placeholder="请输入业务单号" clearable size="small"
- @keyup.enter.native="handleQuery" />
- <span @click="clearQuery('orderNo')" class="query_clear"><i class="el-icon-circle-close"></i></span>
- </el-form-item>
- <el-form-item label="支付单号" prop="trackId" v-if="queryShow.trackId">
- <el-input v-model="queryParams.trackId" placeholder="请输入支付单号" clearable size="small"
- @keyup.enter.native="handleQuery" />
- <span @click="clearQuery('trackId')" class="query_clear"><i class="el-icon-circle-close"></i></span>
- </el-form-item>
- <el-form-item label="购票渠道" prop="source" v-if="queryShow.source">
- <el-select v-model="queryParams.source" placeholder="请选择购票渠道" clearable>
- <el-option v-for="dict in dict.type.order_form_type" :key="dict.value" :label="dict.label"
- :value="dict.value" />
- </el-select>
- <span @click="clearQuery('source')" class="query_clear"><i class="el-icon-circle-close"></i></span>
- </el-form-item>
- <el-form-item label="支付时间" v-if="queryShow.dateRange">
- <el-date-picker v-model="queryParams.dateRange" size="small" style="width: 350px"
- value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始时间"
- end-placeholder="结束时间"></el-date-picker>
- <span @click="clearQuery('dateRange')" class="query_clear"><i class="el-icon-circle-close"></i></span>
- </el-form-item>
- <el-form-item label="支付方式" prop="payWay" v-if="queryShow.payWay">
- <el-select v-model="queryParams.payWay" placeholder="请选择支付方式" clearable>
- <el-option v-for="dict in dict.type.pay_way_type" :key="dict.value" :label="dict.label"
- :value="dict.value" />
- </el-select>
- <span @click="clearQuery('payWay')" class="query_clear"><i class="el-icon-circle-close"></i></span>
- </el-form-item>
- <el-form-item v-if="queryShow.performDate" label="场次时间" label-width="80px">
- <el-date-picker style="width: 250px;" v-model="queryParams.performDate" @change="pagePerformTimeListFun"
- type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
- </el-form-item>
- <el-form-item label="场次" label-width="60px" v-if="!multiPerformDate && queryShow.performDate">
- <el-select v-model="queryParams.performTimeId" placeholder="场次" clearable style="width: 100%">
- <el-option v-for="dict in pagePerformTimeList" :key="dict.id"
- :label="dict.timeSnapshot + '(' + dict.performTimeStart + '-' + dict.performTimeEnd + ')'"
- :value="dict.id" />
- </el-select>
- <span @click="clearQuery('performDate')" class="query_clear"><i class="el-icon-circle-close"></i></span>
- </el-form-item>
- <el-form-item>
- <el-dropdown @command="openQuery">
- <el-button size="mini" type="primary" icon="el-icon-plus"></el-button>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item command="orderNo">业务订单号</el-dropdown-item>
- <el-dropdown-item command="trackId">支付单号</el-dropdown-item>
- <el-dropdown-item command="source">购票渠道</el-dropdown-item>
- <el-dropdown-item command="payWay">支付方式</el-dropdown-item>
- <!-- <el-dropdown-item command="payType">交易类型</el-dropdown-item> -->
- <el-dropdown-item command="dateRange">支付时间</el-dropdown-item>
- <el-dropdown-item command="performDate">场次时间/场次</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" size="mini"
- @click="handleQuery">搜索</el-button>
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
- <!-- 页面查询表单 End -->
- </div>
- <div class="app-container_table app-container-main" :class="showSearch ? 'mt15' : ''">
- <!-- 页面批量操作按钮 -->
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button v-hasPermi="['financeMr:statements:StatementsIndexNew:download']" type="warning" plain
- icon="el-icon-download" size="mini" :disabled="tableDataList.length < 1" @click="handleExport"
- v-loading.fullscreen.lock="handleExportLoading" element-loading-text="正在拼命生成数据中..."
- element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">导出</el-button>
- </el-col>
- <right-toolbar :showSearch.sync="showSearch" @queryTable="initData"></right-toolbar>
- </el-row>
- <div class="app-container_table_main">
- <!-- 页面表格数据区域 Start -->
- <el-table
- v-loading="loading"
- ref="statementsTableRef"
- :data="tableDataList"
- border
- row-key="orderNo"
- :summary-method="getSummaries"
- show-summary
- class="cust-table"
- max-height="480px"
- >
- <el-table-column label="业务订单号" align="center" width="200" fixed="left">
- <template slot-scope="scope">
- <div style="display: inline-block">{{ scope.row.id }}</div>
- </template>
- </el-table-column>
- <el-table-column label="支付单号" align="center" width="200" prop="paymentId" fixed="left" show-overflow-tooltip />
- <el-table-column label="银联单号" align="center" width="200" prop="trackId" fixed="left" show-overflow-tooltip />
- <el-table-column label="演出日期" align="center" width="150" prop="performDate" />
- <el-table-column label="演出时段" align="center" width="150" prop="performTime" />
- <el-table-column label="交易总额(元)" align="center" width="150" prop="orderPrice" />
- <el-table-column label="核销金额(元)" align="center" width="150" prop="usePriceTotal" />
- <el-table-column label="应到账金额(元)" align="center" width="150" prop="realPrice" />
- <el-table-column label="佣金(元)" align="center" width="150" prop="retailPriceTotal" />
- <el-table-column label="费率(%)" align="center" width="150" prop="withdrawRate" />
- <el-table-column label="手续费(元)" align="center" width="150" prop="proceMoney" />
- <el-table-column label="退款金额(元)" align="center" width="150" prop="refundPriceTotal" />
- <el-table-column label="下单时间" align="center" width="200" prop="createTime" />
- <el-table-column label="支付时间" align="center" width="200" prop="payTime" />
- <el-table-column label="支付渠道" align="center" width="150" prop="payWay">
- <template slot-scope="scope">
- <dict-tag :options="dict.type.pay_way_type" :value="scope.row.payWay" />
- </template>
- </el-table-column>
- <el-table-column label="提现状态" align="center" width="150" prop="orderWithdrawStatus">
- <template slot-scope="scope">
- <dict-tag :options="dict.type.order_withdraw_status" :value="scope.row.orderWithdrawStatus" />
- </template>
- </el-table-column>
- <el-table-column label="提现金额(元)" align="center" width="150" prop="orderWithdrawRealPrice" />
- <el-table-column label="提现账户" align="center" width="200" prop="orderWithdrawAccount" />
- <el-table-column label="分销状态" align="center" width="150" prop="personWithdrawStatus">
- <template slot-scope="scope">
- <dict-tag :options="dict.type.person_withdraw_status" :value="scope.row.personWithdrawStatus" />
- </template>
- </el-table-column>
- <el-table-column label="分销税率(%)" align="center" width="150" prop="personRetailRate" />
- <el-table-column label="分销提现金额(元)" align="center" width="150" prop="personWithdrawRealPrice" />
- <el-table-column label="分销账户" align="center" width="150" prop="personUnionMid" />
- <el-table-column label="存在对账单" align="center" width="160" prop="hasBill">
- <template slot-scope="scope">
- <dict-tag :options="dict.type.has_bill" :value="scope.row.hasBill" />
- </template>
- </el-table-column>
- </el-table>
- <!-- 页面表格数据区域 End -->
- </div>
- </div>
- <div class="app-container_table_page">
- <PaginationNew
- :total="total"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="initData" />
- </div>
- </div>
- </div>
- </template>
- <script>
- import { listStatements, exportStatements } from '@/api/financeMr/StatementsNew';
- import { exportExcel } from '@/utils/exportexcel';
- import { pagePerformTimeList } from "@/api/schedulingMr/schedulingMr"
- import moment from "moment"
- export default {
- name: 'StatementsIndexNew',
- dicts: ['order_form_type', 'pay_way_type', 'transaction_type', 'order_withdraw_status', 'person_withdraw_status','has_bill'],
- data() {
- return {
- // 遮罩层
- loading: true,
- // 显示搜索条件
- showSearch: true,
- // 购票渠道格式化
- sourceOptions: [],
- // 支付渠道格式化
- payWayOptions: [],
- // 交易类型格式化
- tranTypeOptions: [],
- // 交易日期范围
- dateRange: [],
- rules: {},
- exportType: 1,
- // 总条数
- total: 0,
- // 表格数据
- tableDataList: [],
- // 查询参数
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- orderNo: undefined,
- trackId: undefined,
- payWay: undefined,
- payType: undefined,
- source: undefined,
- performTimeId: undefined,
- performDate: [],
- dateRange: [],
- },
- queryShow: {
- orderNo: true,
- trackId: true,
- source: true,
- payWay: true,
- payType: true,
- dateRange: true,
- performDate: true,
- },
- oweTotalObj: {},
- // 导出数据状态
- handleExportLoading: false,
- summary: '',
- otherSummary: [],
- pagePerformTimeList: [],
- multiPerformDate: false,
- };
- },
- async created() {
- let params = this.$route.query
- console.log(this.$route)
- if (params && JSON.stringify(params) != '{}') {
- this.$set(this.queryParams, 'performDate', params.performDate ? [params.performDate, params.performDate] : [])
- if (params.performDate) {
- await this.pagePerformTimeListFun([params.performDate, params.performDate])
- }
- this.$set(this.queryParams, 'performTimeId', params.performTimeId ? params.performTimeId : '')
- this.$set(this.queryShow, 'performDate', true)
- } else {
- this.$set(this.queryParams, 'performDate', [moment().subtract(1, 'days').format("yyyy-MM-DD"), moment().subtract(1, 'days').format("yyyy-MM-DD")])
- if (this.queryParams.performDate) {
- await this.pagePerformTimeListFun(this.queryParams.performDate)
- }
- }
- this.initData();
- },
- methods: {
- getSummaries(param) {
- const { columns, data } = param;
- const sums = [];
- columns.forEach((column, index) => {
- if (index === 0) {
- sums[index] = '合计';
- return;
- }
- if (column.property == 'paymentId' ||
- column.property == 'trackId' ||
- column.property == 'withdrawRate' ||
- column.property == 'orderWithdrawStatus' ||
- column.property == 'personWithdrawStatus' ||
- column.property == 'personUnionMid' ||
- column.property == 'personRetailRate' ||
- column.property == 'hasBill' ||
- column.property == 'orderWithdrawAccount'
- ) {
- sums[index] = '';
- return;
- }
- const values = data.map(item => Number(item[column.property]));
- if (!values.every(value => isNaN(value))) {
- sums[index] = values.reduce((prev, curr) => {
- const value = Number(curr);
- if (!isNaN(value)) {
- return prev + curr;
- } else {
- return prev;
- }
- }, 0);
- // sums[index] += '';
- sums[index] = Number(sums[index].toFixed(2));
- } else {
- sums[index] = '';
- }
- });
- return sums;
- },
- /** 初始化数据 */
- async initData() {
- this.loading = true;
- // this.getRevenueReportOwetotal();
- this.getList();
- },
- /** 查询列表信息 */
- getList() {
- this.loading = true;
- listStatements(this.formatDateRange(this.queryParams, this.dateRange))
- .then((response) => {
- this.tableDataList = response?.data?.rows || [];
- this.total = response?.data?.total ?? 0;
- this.loading = false;
- })
- .catch(() => {
- this.tableDataList = [];
- this.total = 0;
- this.loading = false;
- });
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.$refs?.['queryForm']?.validate?.((valid) => {
- if (valid) {
- this.loading = true;
- this.$refs.statementsTableRef?.clearSort?.();
- this.queryParams = {
- ...this.queryParams,
- pageNum: 1,
- sortField: undefined,
- sortOrder: undefined,
- payBeginTime: undefined,
- payEndTime: undefined
- };
- // 初始化表格数据
- this.tableDataList = [];
- this.total = 0;
- this.$nextTick(() => {
- // 重新加载表格数据
- this.initData();
- });
- }
- });
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.queryParams = {}
- this.queryParams.pageNum = 1
- this.queryParams.pageSize = 10
- this.handleQuery();
- },
- /** 导出按钮操作 */
- handleExport() {
- this.$confirm(`确定要导出对账明细的数据吗?`, '提示', {
- confirmButtonText: '确定 ',
- cancelButtonText: '取消 ',
- type: 'warning'
- })
- .then(() => {
- // 开启导出遮护罩
- this.handleExportLoading = true;
- // 排除不需要的属性
- let { pageNum, pageSize, ...otherObj } = this.formatDateRange(this.queryParams, this.dateRange);
- let handleExportReq = { ...otherObj };
- // 发送导出请求
- exportStatements(handleExportReq)
- .then((response) => {
- exportExcel(response, '对账明细_' + moment().format('yyyy_MM_DD'), '.xlsx');
- // 关闭导出遮护罩
- this.handleExportLoading = false;
- })
- .catch(() => {
- this.$message.error('导出异常!');
- // 关闭导出遮护罩
- this.handleExportLoading = false;
- });
- })
- .catch(() => {
- this.$message.info('您已取消导出!');
- // 关闭导出遮护罩
- this.handleExportLoading = false;
- });
- },
- /**
- * 格式参数数据
- */
- formatDateRange(params) {
- var search = JSON.parse(JSON.stringify(params));
- if (search.dateRange && search.dateRange.length > 0) {
- search['payBeginTime'] = search.dateRange[0];
- search['payEndTime'] = search.dateRange[1];
- } else {
- search['payBeginTime'] = undefined;
- search['payEndTime'] = undefined;
- }
- if (search.performDate && search.performDate.length > 0 && !search.performTimeId) {
- search['performStartDate'] = search.performDate[0];
- search['performEndDate'] = search.performDate[1];
- } else {
- search['performStartDate'] = undefined;
- search['performEndDate'] = undefined;
- }
- delete search.performDate
- delete search.dateRange
- return search;
- },
- /**
- * 当表格的排序条件发生变化的时候会触发该事件
- */
- handleSortChang({ column, prop, order }) {
- this.loading = true;
- this.queryParams = {
- ...this.queryParams,
- pageNum: 1,
- sortField: prop,
- sortOrder: order == 'descending' ? 'desc' : 'asc'
- };
- this.initData();
- },
- clearQuery(key) {
- this.$set(this.queryShow, key, false)
- this.$set(this.queryParams, key, '')
- if (key == 'performDate') {
- this.$set(this.queryParams, 'performTimeId', '')
- }
- },
- openQuery(key) {
- this.$set(this.queryShow, key, true)
- },
- async pagePerformTimeListFun(value) {
- // console.log('value',value);
- try {
- this.pagePerformTimeList = []
- this.$set(this.queryParams, 'performTimeId', null)
- if (!value) {
- return
- }
- if (value.length == 2 && value[0] == value[1]) {
- this.multiPerformDate = false
- } else {
- this.multiPerformDate = true
- return
- }
- let { data, code } = await pagePerformTimeList({
- performDate: value[0],
- pageNum: 1,
- pageSize: 999
- })
- this.pagePerformTimeList = [].concat(data.rows)
- } catch (error) {
- }
- },
- }
- };
- </script>
- <style lang="scss" scoped>
- ::v-deep {
- .pagination-container {
- text-align: center;
- .el-pagination {
- position: initial;
- }
- }
- }
- .cust-table {
- .statements-column-orderNo {
- color: #337ab7;
- text-decoration: none;
- cursor: pointer;
- &:hover {
- color: #409eff;
- text-decoration: underline;
- }
- }
- }
- .statements-total {
- .til {
- font-weight: bold;
- margin-bottom: 2px;
- margin-top: 10px;
- }
- .summary {
- ::v-deep span {
- color: blue;
- }
- }
- .other-summary {
- ::v-deep span {
- color: #f5bb00;
- }
- }
- }
- .app-container-scheduling ::v-deep .el-select__tags {
- flex-wrap: inherit !important;
- overflow-x: auto !important;
- }
- .app-container-scheduling ::v-deep .el-form-item__content {
- position: relative;
- }
- .app-container-scheduling ::v-deep .el-form-item__content .query_clear {
- position: absolute;
- top: -15px;
- right: -10px;
- display: none;
- cursor: pointer;
- z-index: 99;
- }
- .app-container-scheduling ::v-deep .el-form-item__content:hover .query_clear {
- display: block;
- }
- </style>
|