wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

改造流水明细详情弹窗并统一列表样式

Browse Source
This commit is contained in:
wkc
2026-03-11 15:08:36 +08:00
parent 0de248a039
commit d9f3165872
10 changed files with 472 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

358
ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue
View File

@@ -136,7 +136,7 @@
</div>
<el-input
v-model="queryParams.userMemo"
placeholder="请输入摘要关键字"
placeholder="请输入摘要关键词"
clearable
/>
</el-form-item>
@@ -184,8 +184,6 @@
<el-table
v-loading="loading"
:data="list"
border
stripe
class="result-table"
@sort-change="handleSortChange"
>
@@ -265,103 +263,89 @@
</div>
</div>
<el-drawer
<el-dialog
:visible.sync="detailVisible"
append-to-body
custom-class="detail-drawer"
size="520px"
custom-class="detail-dialog"
title="流水详情"
width="980px"
@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 v-loading="detailLoading" class="detail-dialog-body">
<div class="detail-overview-grid">
<div class="detail-field">
<div class="detail-label">交易时间</div>
<div class="detail-value">{{ formatField(detailData.trxDate) }}</div>
</div>
<div class="detail-field">
<div class="detail-label">交易金额</div>
<div class="detail-value amount-text" :class="getAmountClass(detailData.displayAmount)">
{{ formatSignedAmount(detailData.displayAmount) }}
</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 class="detail-field">
<div class="detail-label">交易后余额</div>
<div class="detail-value">{{ formatAmount(detailData.amountBalance) }}</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 class="detail-field">
<div class="detail-label">本方主体</div>
<div class="detail-value">{{ formatField(detailData.leAccountName) }}</div>
</div>
<div class="detail-field">
<div class="detail-label">本方账号</div>
<div class="detail-value">{{ formatField(detailData.leAccountNo) }}</div>
</div>
<div class="detail-field">
<div class="detail-label">本方银行</div>
<div class="detail-value">{{ formatField(detailData.bank) }}</div>
</div>
<div class="detail-field">
<div class="detail-label">对方名称</div>
<div class="detail-value">{{ formatCounterpartyName(detailData) }}</div>
</div>
<div class="detail-field">
<div class="detail-label">对方账户</div>
<div class="detail-value">{{ formatField(detailData.customerAccountNo) }}</div>
</div>
<div class="detail-field">
<div class="detail-label">对方银行</div>
<div class="detail-value">{{ formatField(detailData.customerBank) }}</div>
</div>
<div class="detail-field">
<div class="detail-label">摘要</div>
<div class="detail-value">{{ formatField(detailData.userMemo) }}</div>
</div>
<div class="detail-field">
<div class="detail-label">交易类型</div>
<div class="detail-value">{{ formatField(detailData.cashType) }}</div>
</div>
<div class="detail-field">
<div class="detail-label">银行摘要</div>
<div class="detail-value">{{ formatField(detailData.bankComments) }}</div>
</div>
<div class="detail-field detail-field--full">
<div class="detail-label">原始文件</div>
<div class="detail-file-block">
<i class="el-icon-document detail-file-icon"></i>
<div class="detail-file-meta">
<div class="detail-file-name">{{ formatOriginalFileName(detailData) }}</div>
<div class="detail-file-time">
上传时间：{{ formatOriginalFileUploadTime(detailData) }}
</div>
</div>
</div>
</div>
</div>
</div>
</el-drawer>
<div slot="footer" class="detail-dialog-footer">
<el-button @click="closeDetailDialog">取消</el-button>
<el-button type="primary" @click="closeDetailDialog">确定</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -414,6 +398,7 @@ const createEmptyOptionData = () => ({
const createEmptyDetailData = () => ({
bankStatementId: "",
projectId: "",
trxDate: "",
currency: "",
leAccountNo: "",
@@ -421,16 +406,27 @@ const createEmptyDetailData = () => ({
customerAccountName: "",
customerAccountNo: "",
customerBank: "",
customerReference: "",
userMemo: "",
bankComments: "",
bankTrxNumber: "",
bank: "",
cashType: "",
amountDr: "",
amountCr: "",
amountBalance: "",
displayAmount: "",
paymentMethod: "",
trxFlag: "",
trxType: "",
exceptionType: "",
internalFlag: "",
paymentMethod: "",
cretNo: "",
createDate: "",
originalFileName: "",
uploadTime: "",
sourceFileName: "",
fileName: "",
});
export default {
@@ -593,6 +589,7 @@ export default {
},
closeDetailDialog() {
this.detailVisible = false;
this.detailLoading = false;
this.detailData = createEmptyDetailData();
},
handleExport() {
@@ -607,7 +604,10 @@ export default {
);
},
formatField(value) {
return value || "-";
if (value === null || value === undefined || value === "") {
return "-";
}
return String(value);
},
formatDate(value) {
return value ? parseTime(value, "{y}-{m}-{d} {h}:{i}:{s}") : "-";
@@ -616,11 +616,55 @@ export default {
if (value === null || value === undefined || value === "") {
return "-";
}
return Number(value).toLocaleString("zh-CN", {
const amount = Number(value);
if (Number.isNaN(amount)) {
return "-";
}
return amount.toLocaleString("zh-CN", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
},
formatSignedAmount(value) {
if (value === null || value === undefined || value === "") {
return "-";
}
const amount = Number(value);
if (Number.isNaN(amount)) {
return "-";
}
const text = this.formatAmount(amount);
return amount > 0 ? `+${text}` : text;
},
getAmountClass(value) {
if (value === null || value === undefined || value === "") {
return "";
}
return Number(value) >= 0 ? "amount-in" : "amount-out";
},
formatCounterpartyName(detail) {
if (!detail) {
return "-";
}
return this.formatField(detail.customerAccountName);
},
formatOriginalFileName(detail) {
if (!detail) {
return "暂无原始文件";
}
return (
detail.originalFileName ||
detail.sourceFileName ||
detail.fileName ||
"暂无原始文件"
);
},
formatOriginalFileUploadTime(detail) {
if (!detail) {
return "-";
}
return this.formatDate(detail.uploadTime);
},
},
};
</script>
@@ -747,7 +791,7 @@ export default {
}
.result-card {
border: 1px solid #ebeef5;
border: none;
border-radius: 4px;
overflow: hidden;
}
@@ -789,51 +833,106 @@ export default {
color: #f56c6c;
}
.detail-drawer-body {
padding: 0 4px 24px;
.detail-dialog-body {
min-height: 280px;
}
.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;
}
.detail-grid {
.detail-overview-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px 32px;
}
.detail-item {
.detail-field {
display: flex;
flex-direction: column;
gap: 6px;
gap: 10px;
min-width: 0;
}
.detail-item-full {
.detail-field--full {
grid-column: 1 / -1;
}
.detail-label {
font-size: 12px;
font-size: 14px;
line-height: 20px;
color: #909399;
}
.detail-value {
color: #303133;
line-height: 20px;
line-height: 22px;
font-size: 16px;
font-weight: 500;
word-break: break-all;
}
.detail-file-block {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 2px 0;
}
.detail-file-icon {
margin-top: 2px;
font-size: 20px;
color: #f59a23;
}
.detail-file-meta {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.detail-file-name {
color: #303133;
line-height: 22px;
word-break: break-all;
}
.detail-file-time {
color: #909399;
font-size: 12px;
line-height: 18px;
}
.detail-dialog-footer {
display: flex;
justify-content: center;
gap: 12px;
}
:deep(.detail-dialog) {
border-radius: 8px;
.el-dialog__header {
padding: 20px 24px;
border-bottom: 1px solid #ebeef5;
}
.el-dialog__title {
font-size: 20px;
font-weight: 600;
color: #303133;
}
.el-dialog__body {
padding: 24px;
}
.el-dialog__footer {
padding: 8px 24px 24px;
}
.el-button {
min-width: 180px;
}
}
@media (max-width: 992px) {
.query-page-shell {
grid-template-columns: 1fr;
@@ -842,6 +941,11 @@ export default {
.filter-actions {
flex-direction: column;
}
.detail-overview-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 24px;
}
}
@media (max-width: 768px) {
@@ -862,8 +966,30 @@ export default {
margin: 12px 12px 0;
}
.detail-grid {
.detail-overview-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.detail-dialog-footer {
flex-direction: column;
}
:deep(.detail-dialog) {
width: calc(100vw - 24px) !important;
margin-top: 8vh !important;
.el-dialog__header,
.el-dialog__body,
.el-dialog__footer {
padding-left: 16px;
padding-right: 16px;
}
.el-button {
width: 100%;
min-width: 0;
}
}
}
</style>