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-26 09:15:13 +08:00
parent d4421862a8
commit b5733486fd
4 changed files with 117 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
View File

@@ -10,99 +10,101 @@
<div class="abnormal-card__title">{{ group.groupName || "异常明细" }}</div> <div class="abnormal-card__title">{{ group.groupName || "异常明细" }}</div>
</div> </div>
<el-table <div class="abnormal-card__content">
v-if='group.groupType === "BANK_STATEMENT"' <el-table
:data="getStatementPageRecords(group)" v-if='group.groupType === "BANK_STATEMENT"'
class="abnormal-table" :data="getStatementPageRecords(group)"
> class="abnormal-table"
<el-table-column prop="trxDate" label="交易时间" min-width="160" /> >
<el-table-column label="本方账户" min-width="220"> <el-table-column prop="trxDate" label="交易时间" min-width="160" />
<template slot-scope="scope"> <el-table-column label="本方账户" min-width="220">
<div class="multi-line-cell"> <template slot-scope="scope">
<div class="primary-text">{{ scope.row.leAccountNo || "-" }}</div> <div class="multi-line-cell">
<div class="secondary-text">{{ scope.row.leAccountName || "-" }}</div> <div class="primary-text">{{ scope.row.leAccountNo || "-" }}</div>
</div> <div class="secondary-text">{{ scope.row.leAccountName || "-" }}</div>
</template> </div>
</el-table-column> </template>
<el-table-column label="对方账户" min-width="220"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="对方账户" min-width="220">
<div class="multi-line-cell"> <template slot-scope="scope">
<div class="primary-text">{{ scope.row.customerAccountName || "-" }}</div> <div class="multi-line-cell">
<div class="secondary-text">{{ scope.row.customerAccountNo || "-" }}</div> <div class="primary-text">{{ scope.row.customerAccountName || "-" }}</div>
</div> <div class="secondary-text">{{ scope.row.customerAccountNo || "-" }}</div>
</template> </div>
</el-table-column> </template>
<el-table-column label="摘要/交易类型" min-width="220"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="摘要/交易类型" min-width="220">
<div class="multi-line-cell"> <template slot-scope="scope">
<div class="primary-text">{{ scope.row.userMemo || "-" }}</div> <div class="multi-line-cell">
<div class="secondary-text">{{ scope.row.cashType || "-" }}</div> <div class="primary-text">{{ scope.row.userMemo || "-" }}</div>
</div> <div class="secondary-text">{{ scope.row.cashType || "-" }}</div>
</template> </div>
</el-table-column> </template>
<el-table-column label="异常标签" min-width="220"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="异常标签" min-width="220">
<div v-if="scope.row.hitTags && scope.row.hitTags.length" class="tag-list"> <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 <el-tag
v-for="(tag, index) in scope.row.hitTags" v-for="(tag, tagIndex) in item.riskTags"
:key="`${scope.row.bankStatementId || index}-tag-${index}`" :key="`${item.title || index}-risk-${tagIndex}`"
size="mini" size="mini"
effect="plain" effect="plain"
> >
{{ tag.ruleName }} {{ tag }}
</el-tag> </el-tag>
</div> </div>
<span v-else class="summary-row__label">-</span> <div class="object-card__snapshot">
</template> <div class="object-card__snapshot-label">异常原因快照</div>
</el-table-column> <p class="object-card__snapshot-value">{{ item.reasonDetail || "-" }}</p>
<el-table-column prop="displayAmount" label="交易金额" min-width="140" /> </div>
</el-table> <p class="object-card__summary">{{ item.summary || "-" }}</p>
<div <div
v-if='group.groupType === "BANK_STATEMENT" && getStatementTotal(group) > statementPageSize' v-for="(field, fieldIndex) in item.extraFields || []"
class="abnormal-pagination" :key="`${item.title || index}-field-${fieldIndex}`"
> class="summary-row"
<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 }} <span class="summary-row__label">{{ field.label }}</span>
</el-tag> <span class="summary-row__value">{{ field.value }}</span>
</div> </div>
<div class="object-card__snapshot"> </article>
<div class="object-card__snapshot-label">异常原因快照</div> </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> </div>
</section> </section>
</template> </template>
@@ -186,7 +188,7 @@ export default {
} }
.abnormal-card__header { .abnormal-card__header {
margin-bottom: 16px; margin-bottom: 14px;
} }
.abnormal-card__title { .abnormal-card__title {
@@ -195,6 +197,11 @@ export default {
color: #0f172a; color: #0f172a;
} }
.abnormal-card__content {
display: grid;
gap: 16px;
}
.abnormal-card__subtitle { .abnormal-card__subtitle {
font-size: 12px; font-size: 12px;
color: #64748b; color: #64748b;

2
ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
View File

@@ -302,6 +302,6 @@ export default {
} }
.project-analysis-tabs { .project-analysis-tabs {
margin-top: -4px; margin-top: -8px;
} }
</style> </style>

9
ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<section class="project-analysis-placeholder-tab"> <section class="project-analysis-placeholder-tab placeholder-panel">
<div class="placeholder-title">{{ tabData.label }}</div> <div class="placeholder-title placeholder-panel__title">{{ tabData.label }}</div>
<div class="placeholder-text">{{ tabData.description }}</div> <div class="placeholder-text placeholder-panel__text">{{ tabData.description }}</div>
</section> </section>
</template> </template>
@@ -22,9 +22,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.project-analysis-placeholder-tab { .project-analysis-placeholder-tab {
min-height: 560px; min-height: 0;
padding: 24px; padding: 24px;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
} }

18
ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js
View File

@@ -16,18 +16,28 @@ const abnormalTab = fs.readFileSync(
), ),
"utf8" "utf8"
); );
const placeholderTab = fs.readFileSync(
path.resolve(
__dirname,
"../../src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue"
),
"utf8"
);
[ [
"<project-analysis-abnormal-tab", "<project-analysis-abnormal-tab",
':detail-data="dialogData.abnormalDetail"', ':detail-data="dialogData.abnormalDetail"',
"source-summary", 'class="project-analysis-tabs"',
].forEach((token) => assert(dialog.includes(token), token)); ].forEach((token) => assert(dialog.includes(token), token));
assert(!dialog.includes("project-analysis-layout__main-scroll"), "主区不应再有独立滚动容器");
[ [
"detailData.groups", "detailData.groups",
'group.groupType === "BANK_STATEMENT"', 'group.groupType === "BANK_STATEMENT"',
'group.groupType === "OBJECT"', 'group.groupType === "OBJECT"',
"group.groupName", "group.groupName",
"abnormal-card__content",
"statementPageSize: 5", "statementPageSize: 5",
"statementPageMap", "statementPageMap",
"slice(startIndex, startIndex + this.statementPageSize)", "slice(startIndex, startIndex + this.statementPageSize)",
@@ -48,3 +58,9 @@ const abnormalTab = fs.readFileSync(
"extraFields", "extraFields",
"grid-template-columns: minmax(0, 1fr)", "grid-template-columns: minmax(0, 1fr)",
].forEach((token) => assert(abnormalTab.includes(token), token)); ].forEach((token) => assert(abnormalTab.includes(token), token));
[
"placeholder-panel",
"placeholder-panel__title",
"placeholder-panel__text",
].forEach((token) => assert(placeholderTab.includes(token), token));