修复流水异常标签展示与导出

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

@@ -227,6 +227,22 @@
                 </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="hit-tag-list">
+                  <el-tag
+                    v-for="(tag, index) in scope.row.hitTags"
+                    :key="`${scope.row.bankStatementId}-tag-${index}`"
+                    size="mini"
+                    :type="mapRiskLevelToTagType(tag.riskLevel)"
+                    effect="plain"
+                  >
+                    {{ tag.ruleName }}
+                  </el-tag>
+                </div>
+                <span v-else class="empty-text">-</span>
+              </template>
+            </el-table-column>
             <el-table-column
               label="交易金额"
               prop="displayAmount"
@@ -340,6 +356,28 @@
             </div>
           </div>
         </div>
+        <div class="detail-hit-tag-section">
+          <div class="detail-section-title">命中异常标签</div>
+          <div
+            v-if="detailData.hitTags && detailData.hitTags.length"
+            class="detail-hit-tag-items"
+          >
+            <div
+              v-for="(tag, index) in detailData.hitTags"
+              :key="`detail-tag-${index}`"
+              class="detail-hit-tag-item"
+            >
+              <div class="detail-hit-tag-header">
+                <span class="detail-hit-tag-name">{{ formatField(tag.ruleName) }}</span>
+                <el-tag size="mini" :type="mapRiskLevelToTagType(tag.riskLevel)" effect="plain">
+                  {{ formatRiskLevel(tag.riskLevel) }}
+                </el-tag>
+              </div>
+              <div class="detail-hit-tag-reason">{{ formatField(tag.reasonDetail) }}</div>
+            </div>
+          </div>
+          <div v-else class="detail-hit-tag-empty">当前流水未命中异常标签</div>
+        </div>
       </div>
       <div slot="footer" class="detail-dialog-footer">
         <el-button @click="closeDetailDialog">取消</el-button>
@@ -396,6 +434,8 @@ const createEmptyOptionData = () => ({
   ourAccountOptions: [],
 });
 
+const normalizeHitTags = (hitTags) => (Array.isArray(hitTags) ? hitTags : []);
+
 const createEmptyDetailData = () => ({
   bankStatementId: "",
   projectId: "",
@@ -427,6 +467,7 @@ const createEmptyDetailData = () => ({
   uploadTime: "",
   sourceFileName: "",
   fileName: "",
+  hitTags: [],
 });
 
 export default {
@@ -489,7 +530,10 @@ export default {
       this.loading = true;
       try {
         const res = await listBankStatement(this.queryParams);
-        this.list = res.rows || [];
+        this.list = (res.rows || []).map((item) => ({
+          ...item,
+          hitTags: normalizeHitTags(item && item.hitTags),
+        }));
         this.total = res.total || 0;
         this.listError = "";
       } catch (error) {
@@ -575,9 +619,11 @@ export default {
       this.detailLoading = true;
       try {
         const res = await getBankStatementDetail(row.bankStatementId);
+        const detail = res.data || {};
         this.detailData = {
           ...createEmptyDetailData(),
-          ...(res.data || {}),
+          ...detail,
+          hitTags: normalizeHitTags(detail.hitTags),
         };
       } catch (error) {
         this.detailData = createEmptyDetailData();
@@ -665,6 +711,29 @@ export default {
       }
       return this.formatDate(detail.uploadTime);
     },
+    formatRiskLevel(value) {
+      const level = String(value || "").toUpperCase();
+      if (level === "HIGH") {
+        return "高风险";
+      }
+      if (level === "MEDIUM") {
+        return "中风险";
+      }
+      if (level === "LOW") {
+        return "低风险";
+      }
+      return "未标注";
+    },
+    mapRiskLevelToTagType(riskLevel) {
+      const level = String(riskLevel || "").toUpperCase();
+      if (level === "HIGH") {
+        return "danger";
+      }
+      if (level === "MEDIUM") {
+        return "warning";
+      }
+      return "info";
+    },
   },
 };
 </script>
@@ -821,6 +890,18 @@ export default {
   line-height: 18px;
 }
 
+.hit-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.empty-text {
+  color: #909399;
+  font-size: 13px;
+  line-height: 20px;
+}
+
 .amount-text {
   font-weight: 600;
 }
@@ -841,6 +922,7 @@ export default {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px 32px;
+  margin-bottom: 24px;
 }
 
 .detail-field {
@@ -900,6 +982,60 @@ export default {
   line-height: 18px;
 }
 
+.detail-hit-tag-section {
+  border-top: 1px solid #ebeef5;
+  padding-top: 24px;
+}
+
+.detail-section-title {
+  margin-bottom: 16px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.detail-hit-tag-items {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.detail-hit-tag-item {
+  padding: 12px 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #fafafa;
+}
+
+.detail-hit-tag-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.detail-hit-tag-name {
+  color: #303133;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  word-break: break-all;
+}
+
+.detail-hit-tag-reason {
+  margin-top: 8px;
+  color: #606266;
+  font-size: 13px;
+  line-height: 20px;
+  word-break: break-word;
+}
+
+.detail-hit-tag-empty {
+  color: #909399;
+  font-size: 13px;
+  line-height: 20px;
+}
+
 .detail-dialog-footer {
   display: flex;
   justify-content: center;
@@ -975,6 +1111,11 @@ export default {
     flex-direction: column;
   }
 
+  .detail-hit-tag-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   :deep(.detail-dialog) {
     width: calc(100vw - 24px) !important;
     margin-top: 8vh !important;

ruoyi-ui/tests/unit/detail-query-detail-dialog.test.js

@@ -32,6 +32,16 @@ assert(
   );
 });
 
+[
+  "命中异常标签",
+  "detail-hit-tag-section",
+  "detailData.hitTags",
+  "当前流水未命中异常标签",
+  "mapRiskLevelToTagType(tag.riskLevel)",
+].forEach((token) => {
+  assert(source.includes(token), `详情弹窗缺少异常标签结构: ${token}`);
+});
+
 const tableBlockMatch = source.match(/<el-table[\s\S]*?class="result-table"[\s\S]*?>/m);
 assert(tableBlockMatch, "未找到流水明细列表表格");
 assert(

ruoyi-ui/tests/unit/detail-query-hit-tags-list.test.js

@@ -0,0 +1,19 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const componentPath = path.resolve(
+  __dirname,
+  "../../src/views/ccdiProject/components/detail/DetailQuery.vue"
+);
+const source = fs.readFileSync(componentPath, "utf8");
+
+assert(source.includes('label="异常标签"'), "列表应新增异常标签列");
+assert(source.includes("scope.row.hitTags"), "异常标签列应读取当前行的 hitTags");
+assert(
+  source.includes('v-for="(tag, index) in scope.row.hitTags"'),
+  "异常标签列应逐个渲染命中标签"
+);
+assert(source.includes("tag.ruleName"), "异常标签列应展示标签名称");
+
+console.log("detail-query-hit-tags-list test passed");