完成专项核查家庭资产负债实现

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

@@ -1,15 +1,39 @@
 <template>
   <div class="special-check-container">
-    <div class="placeholder-content">
-      <i class="el-icon-search"></i>
-      <p>专项排查功能开发中...</p>
+    <div v-if="pageState === 'loading'" class="special-check-state">
+      <div class="state-card">
+        <el-skeleton animated :rows="6" />
+      </div>
+    </div>
+
+    <div v-else-if="pageState === 'empty'" class="special-check-state">
+      <div class="state-card">
+        <el-empty description="暂无员工家庭资产负债核查数据" />
+      </div>
+    </div>
+
+    <div v-else class="special-check-page">
+      <family-asset-liability-section
+        :rows="currentData.rows"
+        :loading="false"
+        :project-id="projectId"
+        :title="sectionTitle"
+        :subtitle="sectionSubtitle"
+      />
     </div>
   </div>
 </template>
 
 <script>
+import { createSpecialCheckLoadedData, specialCheckStateData } from "./specialCheck.mock";
+import { getFamilyAssetLiabilityList } from "@/api/ccdi/projectSpecialCheck";
+import FamilyAssetLiabilitySection from "./FamilyAssetLiabilitySection";
+
 export default {
   name: "SpecialCheck",
+  components: {
+    FamilyAssetLiabilitySection,
+  },
   props: {
     projectId: {
       type: [String, Number],
@@ -24,28 +48,85 @@ export default {
       }),
     },
   },
+  data() {
+    return {
+      pageState: "loading",
+      realData: specialCheckStateData.loading,
+      sectionTitle: "员工家庭资产负债专项核查",
+      sectionSubtitle: "按项目员工范围聚合本人及配偶的收入、资产与负债情况",
+    };
+  },
+  computed: {
+    currentData() {
+      if (this.pageState === "loaded") {
+        return this.realData;
+      }
+      return specialCheckStateData[this.pageState] || this.realData;
+    },
+  },
+  watch: {
+    projectId(newVal) {
+      if (newVal) {
+        this.loadSpecialCheckData();
+        return;
+      }
+      this.realData = specialCheckStateData.empty;
+      this.pageState = "empty";
+    },
+  },
+  created() {
+    if (this.projectId) {
+      this.loadSpecialCheckData();
+      return;
+    }
+    this.realData = specialCheckStateData.empty;
+    this.pageState = "empty";
+  },
+  methods: {
+    async loadSpecialCheckData() {
+      if (!this.projectId) {
+        this.realData = specialCheckStateData.empty;
+        this.pageState = "empty";
+        return;
+      }
+
+      this.pageState = "loading";
+      try {
+        const response = await getFamilyAssetLiabilityList(this.projectId);
+        const listData = (response && response.data) || {};
+        this.realData = createSpecialCheckLoadedData({
+          projectId: this.projectId,
+          listData,
+        });
+        this.pageState = this.realData.rows.length ? "loaded" : "empty";
+      } catch (error) {
+        this.realData = specialCheckStateData.empty;
+        this.pageState = "empty";
+        console.error("加载专项核查数据失败", error);
+      }
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .special-check-container {
-  padding: 40px 20px;
-  background: #fff;
+  min-height: 400px;
+  padding: 0 0 24px;
+}
+
+.special-check-state {
   min-height: 400px;
 }
 
-.placeholder-content {
-  text-align: center;
-  color: #909399;
+.state-card {
+  padding: 32px 24px;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+}
 
-  i {
-    font-size: 48px;
-    margin-bottom: 16px;
-  }
-
-  p {
-    font-size: 14px;
-    margin: 0;
-  }
+.special-check-page {
+  min-height: 400px;
 }
 </style>