|
@@ -0,0 +1,364 @@
|
|
|
+<!--
|
|
|
+ * @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="trId" label-width="100px">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.trId"
|
|
|
+ placeholder="请输入对手银行账户"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item> -->
|
|
|
+ <!-- <el-form-item label="对手方名称" prop="trStatus" label-width="85px">
|
|
|
+ <el-select v-model="queryParams.trStatus" placeholder="请选择对手方名称" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.pay_source_statu"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item label="交易日期" prop="dateRange">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.dateRange"
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <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"
|
|
|
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
+ class="cust-table"
|
|
|
+ height="100%"
|
|
|
+ >
|
|
|
+ <el-table-column label="序号" align="center" width="50" type="index" />
|
|
|
+ <el-table-column label="对手方账号" align="center" width="200" prop="payeeAcNo" />
|
|
|
+ <el-table-column label="对手方名称" align="center" width="200" prop="payeeName" />
|
|
|
+ <el-table-column label="开户信息" align="center" width="200" prop="payeeOpBank" />
|
|
|
+ <el-table-column label="交易时间" align="center" width="200" prop="transDate" />
|
|
|
+ <el-table-column label="交易金额(元)" align="center" width="200" prop="transAmt" />
|
|
|
+ <el-table-column label="借贷标志" align="center" width="200" prop="loan" />
|
|
|
+ <el-table-column label="余额(元)" align="center" width="200" prop="balance" />
|
|
|
+ <el-table-column label="摘要" align="center" prop="remark" />
|
|
|
+ </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/mingsheng';
|
|
|
+ import { exportExcel } from '@/utils/exportexcel';
|
|
|
+ import moment from "moment"
|
|
|
+ export default {
|
|
|
+ name: 'Statements',
|
|
|
+ dicts: ['pay_source_statu', 'pay_card_type'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ rules: {},
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 表格数据
|
|
|
+ tableDataList: [],
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ oweTotalObj: {},
|
|
|
+ // 导出数据状态
|
|
|
+ handleExportLoading: false,
|
|
|
+ summary:{},
|
|
|
+ pickerMinDate: null,
|
|
|
+ pickerOptions: {
|
|
|
+ disabledDate (time) {
|
|
|
+ // return time.getTime() == Date.now() - 80000000 || time.getTime() == Date.now() + 80000000
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$set(this.queryParams,'dateRange',[moment().subtract(1, 'days').format("yyyy-MM-DD"),moment().subtract(1, 'days').format("yyyy-MM-DD")])
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 初始化数据 */
|
|
|
+ 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?.rows|| [];
|
|
|
+ this.total = response?.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,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: this.total
|
|
|
+ };
|
|
|
+ // 发送导出请求
|
|
|
+ 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['startTime'] = search.dateRange[0];
|
|
|
+ search['endTime'] = search.dateRange[1];
|
|
|
+ } else {
|
|
|
+ search['startTime'] = undefined;
|
|
|
+ search['endTime'] = undefined;
|
|
|
+ }
|
|
|
+
|
|
|
+ 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();
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+ </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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .app-container_table_page {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .statements-total{
|
|
|
+ .til{
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ margin-top: 10px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .summary{
|
|
|
+ span{
|
|
|
+ color: #000;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .summary-num {
|
|
|
+ margin-right: 0px;
|
|
|
+ color: #f5bb00;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .other-summary{
|
|
|
+ ::v-deep span{
|
|
|
+ color: #f5bb00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|