实现结果总览详情弹窗前端接线

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

@@ -1,46 +1,95 @@
 <template>
   <div class="project-analysis-abnormal-tab">
-    <section class="abnormal-card">
-      <div class="abnormal-card__header">
-        <div class="abnormal-card__title">异常交易明细</div>
-        <div class="abnormal-card__subtitle">使用当前行数据与静态模板拼装展示，不新增请求逻辑。</div>
-      </div>
+    <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 :data="detailData.transactionList" class="abnormal-table">
-        <el-table-column prop="tradeTime" label="交易时间" min-width="160" />
-        <el-table-column prop="ownAccountName" label="本方账号/主体" min-width="180" />
-        <el-table-column prop="counterpartyName" label="对方名称/账户" min-width="180" />
-        <el-table-column prop="tradeType" label="摘要/交易类型" min-width="160" />
-        <el-table-column prop="tradeAmount" label="交易金额" min-width="140" />
-        <el-table-column prop="markStatus" label="标记状态" min-width="120" />
-      </el-table>
-    </section>
-
-    <div class="abnormal-summary-grid">
-      <section class="abnormal-card">
-        <div class="abnormal-card__title">频繁转账账户异常摘要</div>
-        <div
-          v-for="(item, index) in detailData.frequentTransferSummary"
-          :key="`${item.accountNo || index}-transfer`"
-          class="summary-row"
+        <el-table
+          v-if='group.groupType === "BANK_STATEMENT"'
+          :data="group.records || []"
+          class="abnormal-table"
         >
-          <span class="summary-row__label">{{ item.accountNo }}</span>
-          <span class="summary-row__value">{{ item.description }}</span>
+          <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-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>
+            <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>
-
-      <section class="abnormal-card">
-        <div class="abnormal-card__title">关联交易异常摘要</div>
-        <div
-          v-for="(item, index) in detailData.relatedTradeSummary"
-          :key="`${item.title || index}-relation`"
-          class="summary-row"
-        >
-          <span class="summary-row__label">{{ item.title }}</span>
-          <span class="summary-row__value">{{ item.description }}</span>
-        </div>
-      </section>
-    </div>
+    </template>
+    <el-empty v-else :image-size="80" description="暂无异常明细" />
   </div>
 </template>
 
@@ -51,12 +100,15 @@ export default {
     detailData: {
       type: Object,
       default: () => ({
-        transactionList: [],
-        frequentTransferSummary: [],
-        relatedTradeSummary: [],
+        groups: [],
       }),
     },
   },
+  computed: {
+    detailGroups() {
+      return Array.isArray(this.detailData && this.detailData.groups) ? this.detailData.groups : [];
+    },
+  },
 };
 </script>
 
@@ -74,10 +126,6 @@ export default {
 }
 
 .abnormal-card__header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px;
   margin-bottom: 16px;
 }
 
@@ -97,30 +145,70 @@ export default {
   overflow: hidden;
 }
 
-.abnormal-summary-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
-}
-
-.summary-row + .summary-row {
-  margin-top: 12px;
-}
-
-.summary-row {
+.multi-line-cell {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
+.primary-text {
+  color: #0f172a;
+}
+
+.secondary-text,
 .summary-row__label {
   font-size: 12px;
   color: #64748b;
 }
 
-.summary-row__value {
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.object-card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 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;
 }
+
+.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>