挂载专项核查拓展查询卡片

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

@@ -0,0 +1,61 @@
+<template>
+  <section class="extended-query-card">
+    <div class="extended-query-header">
+      <div class="extended-query-title">拓展查询</div>
+      <div class="extended-query-subtitle">在专项核查同范围员工内联查采购、招聘和调动记录</div>
+    </div>
+
+    <el-tabs value="purchase" class="extended-query-tabs">
+      <el-tab-pane label="采购记录" name="purchase">
+        <div class="extended-query-placeholder">采购记录列表区域待接入</div>
+      </el-tab-pane>
+      <el-tab-pane label="招聘记录" name="recruitment">
+        <div class="extended-query-placeholder">招聘记录列表区域待接入</div>
+      </el-tab-pane>
+      <el-tab-pane label="调动记录" name="transfer">
+        <div class="extended-query-placeholder">调动记录列表区域待接入</div>
+      </el-tab-pane>
+    </el-tabs>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "ExtendedQuerySection",
+  props: {
+    projectId: {
+      type: [String, Number],
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.extended-query-card {
+  padding: 20px;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+}
+
+.extended-query-header {
+  margin-bottom: 16px;
+}
+
+.extended-query-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.extended-query-subtitle {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.extended-query-placeholder {
+  padding: 20px 0;
+  color: #64748b;
+}
+</style>

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

@@ -38,17 +38,23 @@
         </div>
       </section>
     </div>
+
+    <div v-if="projectId" class="special-check-extended-wrapper">
+      <extended-query-section :project-id="projectId" />
+    </div>
   </div>
 </template>
 
 <script>
 import { createSpecialCheckLoadedData, specialCheckStateData } from "./specialCheck.mock";
 import { getFamilyAssetLiabilityList } from "@/api/ccdi/projectSpecialCheck";
+import ExtendedQuerySection from "./ExtendedQuerySection";
 import FamilyAssetLiabilitySection from "./FamilyAssetLiabilitySection";
 
 export default {
   name: "SpecialCheck",
   components: {
+    ExtendedQuerySection,
     FamilyAssetLiabilitySection,
   },
   props: {
@@ -190,4 +196,8 @@ export default {
   line-height: 22px;
   color: #475569;
 }
+
+.special-check-extended-wrapper {
+  margin-top: 16px;
+}
 </style>

ruoyi-ui/tests/unit/special-check-extended-query-card-order.test.js

@@ -0,0 +1,18 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const source = fs.readFileSync(
+  path.resolve(__dirname, "../../src/views/ccdiProject/components/detail/SpecialCheck.vue"),
+  "utf8"
+);
+
+const familyIndex = source.indexOf("family-asset-liability-section");
+const graphIndex = source.indexOf("graph-placeholder-card");
+const extendedIndex = source.indexOf("special-check-extended-wrapper");
+
+assert(familyIndex >= 0, "缺少家庭资产负债区块");
+assert(graphIndex >= 0, "缺少图谱外链卡片");
+assert(extendedIndex >= 0, "缺少拓展查询卡片容器");
+assert(familyIndex < graphIndex, "家庭资产负债应位于图谱外链卡片前");
+assert(graphIndex < extendedIndex, "拓展查询应位于图谱外链卡片下方");

ruoyi-ui/tests/unit/special-check-extended-query-layout.test.js

@@ -0,0 +1,24 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const specialCheckSource = fs.readFileSync(
+  path.resolve(__dirname, "../../src/views/ccdiProject/components/detail/SpecialCheck.vue"),
+  "utf8"
+);
+const sectionSource = fs.readFileSync(
+  path.resolve(__dirname, "../../src/views/ccdiProject/components/detail/ExtendedQuerySection.vue"),
+  "utf8"
+);
+
+assert(specialCheckSource.includes("extended-query-section"), "专项核查主容器缺少拓展查询组件");
+assert(specialCheckSource.includes(':project-id="projectId"'), "专项核查主容器未透传 projectId");
+assert(
+  specialCheckSource.includes('<div v-if="projectId" class="special-check-extended-wrapper">'),
+  "拓展查询卡片应在 projectId 有效时独立渲染"
+);
+assert(sectionSource.includes("拓展查询"), "拓展查询组件缺少标题");
+assert(sectionSource.includes("采购记录"), "拓展查询组件缺少采购记录 Tab");
+assert(sectionSource.includes("招聘记录"), "拓展查询组件缺少招聘记录 Tab");
+assert(sectionSource.includes("调动记录"), "拓展查询组件缺少调动记录 Tab");
+assert(sectionSource.includes("required: true"), "拓展查询组件的 projectId 应为必传 props");