300 lines
8.1 KiB
Vue
300 lines
8.1 KiB
Vue
<template>
|
|
<div class="project-analysis-abnormal-tab">
|
|
<template v-if="detailGroups.length">
|
|
<section
|
|
v-for="(group, groupIndex) in detailGroups"
|
|
:key="`${group.groupCode || group.groupType || groupIndex}-group`"
|
|
class="abnormal-card"
|
|
>
|
|
<div class="abnormal-card__header">
|
|
<div class="abnormal-card__title">{{ group.groupName || "异常明细" }}</div>
|
|
</div>
|
|
|
|
<el-table
|
|
v-if='group.groupType === "BANK_STATEMENT"'
|
|
:data="getStatementPageRecords(group)"
|
|
class="abnormal-table"
|
|
>
|
|
<el-table-column prop="trxDate" label="交易时间" min-width="160" />
|
|
<el-table-column label="本方账户" min-width="220">
|
|
<template slot-scope="scope">
|
|
<div class="multi-line-cell">
|
|
<div class="primary-text">{{ scope.row.leAccountNo || "-" }}</div>
|
|
<div class="secondary-text">{{ 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">{{ scope.row.customerAccountName || "-" }}</div>
|
|
<div class="secondary-text">{{ scope.row.customerAccountNo || "-" }}</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">{{ scope.row.userMemo || "-" }}</div>
|
|
<div class="secondary-text">{{ scope.row.cashType || "-" }}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="异常标签" min-width="220">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.hitTags && scope.row.hitTags.length" class="tag-list">
|
|
<el-tag
|
|
v-for="(tag, index) in scope.row.hitTags"
|
|
:key="`${scope.row.bankStatementId || index}-tag-${index}`"
|
|
size="mini"
|
|
effect="plain"
|
|
>
|
|
{{ tag.ruleName }}
|
|
</el-tag>
|
|
</div>
|
|
<span v-else class="summary-row__label">-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="displayAmount" label="交易金额" min-width="140" />
|
|
</el-table>
|
|
<div
|
|
v-if='group.groupType === "BANK_STATEMENT" && getStatementTotal(group) > statementPageSize'
|
|
class="abnormal-pagination"
|
|
>
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:current-page="getStatementPage(group)"
|
|
:page-size="statementPageSize"
|
|
:total="getStatementTotal(group)"
|
|
@current-change="handleStatementPageChange(group, $event)"
|
|
/>
|
|
</div>
|
|
|
|
<div v-else-if='group.groupType === "OBJECT"' class="object-card-grid">
|
|
<article
|
|
v-for="(item, index) in group.records || []"
|
|
:key="`${item.title || index}-object`"
|
|
class="object-card"
|
|
>
|
|
<div class="object-card__title">{{ item.title || "-" }}</div>
|
|
<div class="object-card__subtitle">{{ item.subtitle || "-" }}</div>
|
|
<div v-if="item.riskTags && item.riskTags.length" class="tag-list">
|
|
<el-tag
|
|
v-for="(tag, tagIndex) in item.riskTags"
|
|
:key="`${item.title || index}-risk-${tagIndex}`"
|
|
size="mini"
|
|
effect="plain"
|
|
>
|
|
{{ tag }}
|
|
</el-tag>
|
|
</div>
|
|
<div class="object-card__snapshot">
|
|
<div class="object-card__snapshot-label">异常原因快照</div>
|
|
<p class="object-card__snapshot-value">{{ item.reasonDetail || "-" }}</p>
|
|
</div>
|
|
<p class="object-card__summary">{{ item.summary || "-" }}</p>
|
|
<div
|
|
v-for="(field, fieldIndex) in item.extraFields || []"
|
|
:key="`${item.title || index}-field-${fieldIndex}`"
|
|
class="summary-row"
|
|
>
|
|
<span class="summary-row__label">{{ field.label }}</span>
|
|
<span class="summary-row__value">{{ field.value }}</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<el-empty v-else :image-size="80" description="暂无异常明细" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ProjectAnalysisAbnormalTab",
|
|
props: {
|
|
detailData: {
|
|
type: Object,
|
|
default: () => ({
|
|
groups: [],
|
|
}),
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
statementPageSize: 5,
|
|
statementPageMap: {},
|
|
};
|
|
},
|
|
watch: {
|
|
detailGroups: {
|
|
immediate: true,
|
|
handler(groups) {
|
|
const nextPageMap = {};
|
|
groups
|
|
.filter((group) => group && group.groupType === "BANK_STATEMENT")
|
|
.forEach((group, index) => {
|
|
const groupKey = this.resolveGroupKey(group, index);
|
|
nextPageMap[groupKey] = 1;
|
|
});
|
|
this.statementPageMap = nextPageMap;
|
|
},
|
|
},
|
|
},
|
|
computed: {
|
|
detailGroups() {
|
|
return Array.isArray(this.detailData && this.detailData.groups) ? this.detailData.groups : [];
|
|
},
|
|
},
|
|
methods: {
|
|
resolveGroupKey(group, index = 0) {
|
|
return group.groupCode || group.groupName || `BANK_STATEMENT_${index}`;
|
|
},
|
|
getStatementPage(group) {
|
|
const groupKey = this.resolveGroupKey(group);
|
|
return this.statementPageMap[groupKey] || 1;
|
|
},
|
|
getStatementTotal(group) {
|
|
return Array.isArray(group && group.records) ? group.records.length : 0;
|
|
},
|
|
getStatementPageRecords(group) {
|
|
const records = Array.isArray(group && group.records) ? group.records : [];
|
|
const currentPage = this.getStatementPage(group);
|
|
const startIndex = (currentPage - 1) * this.statementPageSize;
|
|
return records.slice(startIndex, startIndex + this.statementPageSize);
|
|
},
|
|
handleStatementPageChange(group, page) {
|
|
const groupKey = this.resolveGroupKey(group);
|
|
this.$set(this.statementPageMap, groupKey, page);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.project-analysis-abnormal-tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.abnormal-card {
|
|
padding: 20px;
|
|
border: 1px solid #e2e8f0;
|
|
background: #fff;
|
|
}
|
|
|
|
.abnormal-card__header {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.abnormal-card__title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.abnormal-card__subtitle {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.abnormal-table {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.abnormal-pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.multi-line-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.primary-text {
|
|
color: #0f172a;
|
|
}
|
|
|
|
.secondary-text,
|
|
.summary-row__label {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.tag-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.object-card-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.object-card {
|
|
padding: 16px;
|
|
border: 1px solid #e2e8f0;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.object-card__title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.object-card__subtitle {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.object-card__summary {
|
|
margin: 12px 0;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.object-card__snapshot {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
border: 1px solid #dbeafe;
|
|
background: #eff6ff;
|
|
}
|
|
|
|
.object-card__snapshot-label {
|
|
font-size: 12px;
|
|
color: #475569;
|
|
}
|
|
|
|
.object-card__snapshot-value {
|
|
margin: 8px 0 0;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 4px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.summary-row__value {
|
|
font-size: 13px;
|
|
color: #1e293b;
|
|
text-align: right;
|
|
}
|
|
</style>
|