完成流水明细查询结果区与详情展示
This commit is contained in:
@@ -23,7 +23,10 @@
|
||||
placeholder="请输入对方名称"
|
||||
clearable
|
||||
/>
|
||||
<el-checkbox v-model="queryParams.counterpartyNameEmpty" class="empty-checkbox">
|
||||
<el-checkbox
|
||||
v-model="queryParams.counterpartyNameEmpty"
|
||||
class="empty-checkbox"
|
||||
>
|
||||
匹配空值
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
@@ -121,7 +124,10 @@
|
||||
placeholder="请输入对方账号"
|
||||
clearable
|
||||
/>
|
||||
<el-checkbox v-model="queryParams.counterpartyAccountEmpty" class="empty-checkbox">
|
||||
<el-checkbox
|
||||
v-model="queryParams.counterpartyAccountEmpty"
|
||||
class="empty-checkbox"
|
||||
>
|
||||
匹配空值
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
@@ -132,7 +138,10 @@
|
||||
placeholder="请输入交易类型"
|
||||
clearable
|
||||
/>
|
||||
<el-checkbox v-model="queryParams.transactionTypeEmpty" class="empty-checkbox">
|
||||
<el-checkbox
|
||||
v-model="queryParams.transactionTypeEmpty"
|
||||
class="empty-checkbox"
|
||||
>
|
||||
匹配空值
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
@@ -143,26 +152,222 @@
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="shell-main">
|
||||
<div class="shell-header">
|
||||
<div class="shell-title-group">
|
||||
<span class="shell-title">流水明细查询</span>
|
||||
<span class="shell-subtitle">按项目范围查询交易明细并查看详情</span>
|
||||
</div>
|
||||
<el-button size="small" type="primary" plain @click="handleExport">
|
||||
导出流水
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="shell-panel-body">结果区域待接入</div>
|
||||
|
||||
<el-tabs v-model="activeTab" class="result-tabs" @tab-click="handleTabChange">
|
||||
<el-tab-pane label="全部" name="all" />
|
||||
<el-tab-pane label="流入" name="in" />
|
||||
<el-tab-pane label="流出" name="out" />
|
||||
</el-tabs>
|
||||
|
||||
<div class="result-card">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
border
|
||||
stripe
|
||||
class="result-table"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<el-table-column
|
||||
label="交易时间"
|
||||
prop="trxDate"
|
||||
min-width="180"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column label="本方账户" min-width="220">
|
||||
<template slot-scope="scope">
|
||||
<div class="multi-line-cell">
|
||||
<div class="primary-text">{{ formatField(scope.row.leAccountNo) }}</div>
|
||||
<div class="secondary-text">{{ formatField(scope.row.leAccountName) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="对方账户" min-width="220">
|
||||
<template slot-scope="scope">
|
||||
<div class="multi-line-cell">
|
||||
<div class="primary-text">
|
||||
{{ formatField(scope.row.customerAccountName) }}
|
||||
</div>
|
||||
<div class="secondary-text">
|
||||
{{ formatField(scope.row.customerAccountNo) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="摘要 / 交易类型" min-width="240">
|
||||
<template slot-scope="scope">
|
||||
<div class="multi-line-cell">
|
||||
<div class="primary-text">{{ formatField(scope.row.userMemo) }}</div>
|
||||
<div class="secondary-text">{{ formatField(scope.row.cashType) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="交易金额"
|
||||
prop="displayAmount"
|
||||
min-width="140"
|
||||
align="right"
|
||||
sortable="custom"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
class="amount-text"
|
||||
:class="scope.row.displayAmount >= 0 ? 'amount-in' : 'amount-out'"
|
||||
>
|
||||
{{ formatAmount(scope.row.displayAmount) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="详情" width="100" fixed="right" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="handleViewDetail(scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-drawer
|
||||
:visible.sync="detailVisible"
|
||||
append-to-body
|
||||
custom-class="detail-drawer"
|
||||
size="520px"
|
||||
title="流水详情"
|
||||
@close="closeDetailDialog"
|
||||
>
|
||||
<div v-loading="detailLoading" class="detail-drawer-body">
|
||||
<div class="detail-section">
|
||||
<div class="detail-section-title">基础信息</div>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">流水ID</span>
|
||||
<span class="detail-value">{{ formatField(detailData.bankStatementId) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">交易时间</span>
|
||||
<span class="detail-value">{{ formatField(detailData.trxDate) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">币种</span>
|
||||
<span class="detail-value">{{ formatField(detailData.currency) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">交易类型</span>
|
||||
<span class="detail-value">{{ formatField(detailData.cashType) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">显示金额</span>
|
||||
<span class="detail-value">{{ formatAmount(detailData.displayAmount) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">余额</span>
|
||||
<span class="detail-value">{{ formatAmount(detailData.amountBalance) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="detail-section-title">账户信息</div>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item detail-item-full">
|
||||
<span class="detail-label">本方账户</span>
|
||||
<span class="detail-value">
|
||||
{{ formatField(detailData.leAccountName) }} / {{ formatField(detailData.leAccountNo) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-item detail-item-full">
|
||||
<span class="detail-label">对方账户</span>
|
||||
<span class="detail-value">
|
||||
{{ formatField(detailData.customerAccountName) }} /
|
||||
{{ formatField(detailData.customerAccountNo) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">本方银行</span>
|
||||
<span class="detail-value">{{ formatField(detailData.bank) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">对方银行</span>
|
||||
<span class="detail-value">{{ formatField(detailData.customerBank) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="detail-section-title">补充信息</div>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-item detail-item-full">
|
||||
<span class="detail-label">摘要</span>
|
||||
<span class="detail-value">{{ formatField(detailData.userMemo) }}</span>
|
||||
</div>
|
||||
<div class="detail-item detail-item-full">
|
||||
<span class="detail-label">银行摘要</span>
|
||||
<span class="detail-value">{{ formatField(detailData.bankComments) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">银行交易号</span>
|
||||
<span class="detail-value">{{ formatField(detailData.bankTrxNumber) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">交易方式</span>
|
||||
<span class="detail-value">{{ formatField(detailData.paymentMethod) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">异常类型</span>
|
||||
<span class="detail-value">{{ formatField(detailData.exceptionType) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">创建时间</span>
|
||||
<span class="detail-value">{{ formatDate(detailData.createDate) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { parseTime } from "@/utils/ruoyi";
|
||||
import {
|
||||
listBankStatement,
|
||||
getBankStatementOptions,
|
||||
getBankStatementDetail
|
||||
getBankStatementDetail,
|
||||
} from "@/api/ccdiProjectBankStatement";
|
||||
|
||||
const TAB_MAP = {
|
||||
all: "all",
|
||||
in: "in",
|
||||
out: "out",
|
||||
};
|
||||
|
||||
const SORT_MAP = {
|
||||
trxDate: "trxDate",
|
||||
displayAmount: "amount",
|
||||
};
|
||||
|
||||
const createDefaultQueryParams = (projectId) => ({
|
||||
projectId,
|
||||
pageNum: 1,
|
||||
@@ -193,6 +398,27 @@ const createEmptyOptionData = () => ({
|
||||
ourAccountOptions: [],
|
||||
});
|
||||
|
||||
const createEmptyDetailData = () => ({
|
||||
bankStatementId: "",
|
||||
trxDate: "",
|
||||
currency: "",
|
||||
leAccountNo: "",
|
||||
leAccountName: "",
|
||||
customerAccountName: "",
|
||||
customerAccountNo: "",
|
||||
customerBank: "",
|
||||
userMemo: "",
|
||||
bankComments: "",
|
||||
bankTrxNumber: "",
|
||||
bank: "",
|
||||
cashType: "",
|
||||
amountBalance: "",
|
||||
displayAmount: "",
|
||||
paymentMethod: "",
|
||||
exceptionType: "",
|
||||
createDate: "",
|
||||
});
|
||||
|
||||
export default {
|
||||
name: "DetailQuery",
|
||||
props: {
|
||||
@@ -213,10 +439,13 @@ export default {
|
||||
return {
|
||||
loading: false,
|
||||
optionsLoading: false,
|
||||
detailLoading: false,
|
||||
detailVisible: false,
|
||||
activeTab: "all",
|
||||
dateRange: [],
|
||||
list: [],
|
||||
total: 0,
|
||||
detailData: createEmptyDetailData(),
|
||||
queryParams: createDefaultQueryParams(this.projectId),
|
||||
optionData: createEmptyOptionData(),
|
||||
};
|
||||
@@ -283,11 +512,11 @@ export default {
|
||||
},
|
||||
syncProjectId() {
|
||||
this.queryParams.projectId = this.projectId;
|
||||
this.queryParams.tabType = this.activeTab;
|
||||
this.queryParams.tabType = TAB_MAP[this.activeTab] || "all";
|
||||
},
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.queryParams.tabType = this.activeTab;
|
||||
this.syncProjectId();
|
||||
this.getList();
|
||||
},
|
||||
resetQuery() {
|
||||
@@ -298,10 +527,71 @@ export default {
|
||||
this.getOptions();
|
||||
this.getList();
|
||||
},
|
||||
handleExport() {
|
||||
void listBankStatement;
|
||||
void getBankStatementOptions;
|
||||
void getBankStatementDetail;
|
||||
handleTabChange(tab) {
|
||||
const tabName = tab && tab.name ? tab.name : this.activeTab;
|
||||
this.activeTab = tabName;
|
||||
this.queryParams.pageNum = 1;
|
||||
this.queryParams.tabType = TAB_MAP[tabName] || "all";
|
||||
this.getList();
|
||||
},
|
||||
handleSortChange({ prop, order }) {
|
||||
this.queryParams.orderBy = SORT_MAP[prop] || "trxDate";
|
||||
this.queryParams.orderDirection = order === "ascending" ? "asc" : "desc";
|
||||
if (!order) {
|
||||
this.queryParams.orderBy = "trxDate";
|
||||
this.queryParams.orderDirection = "desc";
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
handlePageChange(pageInfo) {
|
||||
if (typeof pageInfo === "number") {
|
||||
this.queryParams.pageNum = pageInfo;
|
||||
} else {
|
||||
this.queryParams.pageNum = pageInfo.page;
|
||||
this.queryParams.pageSize = pageInfo.limit;
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
async handleViewDetail(row) {
|
||||
if (!row || !row.bankStatementId) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.detailVisible = true;
|
||||
this.detailLoading = true;
|
||||
try {
|
||||
const res = await getBankStatementDetail(row.bankStatementId);
|
||||
this.detailData = {
|
||||
...createEmptyDetailData(),
|
||||
...(res.data || {}),
|
||||
};
|
||||
} catch (error) {
|
||||
this.detailData = createEmptyDetailData();
|
||||
this.$message.error("加载流水详情失败");
|
||||
console.error("加载流水详情失败", error);
|
||||
} finally {
|
||||
this.detailLoading = false;
|
||||
}
|
||||
},
|
||||
closeDetailDialog() {
|
||||
this.detailVisible = false;
|
||||
this.detailData = createEmptyDetailData();
|
||||
},
|
||||
handleExport() {},
|
||||
formatField(value) {
|
||||
return value || "-";
|
||||
},
|
||||
formatDate(value) {
|
||||
return value ? parseTime(value, "{y}-{m}-{d} {h}:{i}:{s}") : "-";
|
||||
},
|
||||
formatAmount(value) {
|
||||
if (value === null || value === undefined || value === "") {
|
||||
return "-";
|
||||
}
|
||||
return Number(value).toLocaleString("zh-CN", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -322,7 +612,6 @@ export default {
|
||||
|
||||
.shell-sidebar,
|
||||
.shell-main {
|
||||
min-height: 448px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
@@ -332,6 +621,36 @@ export default {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.shell-main {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.shell-panel-title,
|
||||
.shell-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.shell-title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.shell-subtitle {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.shell-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
margin-top: 20px;
|
||||
|
||||
@@ -368,28 +687,92 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.shell-main {
|
||||
padding: 20px;
|
||||
.result-tabs {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.shell-header {
|
||||
.result-card {
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.multi-line-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.shell-title,
|
||||
.shell-panel-title {
|
||||
font-size: 16px;
|
||||
.primary-text {
|
||||
color: #303133;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.secondary-text {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.amount-in {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.amount-out {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.detail-drawer-body {
|
||||
padding: 0 4px 24px;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.detail-section-title {
|
||||
margin-bottom: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.shell-panel-body {
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px 16px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.detail-item-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #303133;
|
||||
line-height: 20px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
@@ -401,4 +784,23 @@ export default {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.detail-query-container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.shell-sidebar,
|
||||
.shell-main {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.shell-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user