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

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>