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

<template>
  <div class="special-check-container">
    <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"
        @evidence-confirm="$emit('evidence-confirm', $event)"
      />

      <section class="graph-placeholder-card">
        <div class="graph-placeholder-header">
          <div>
            <div class="graph-placeholder-title">图谱外链展示</div>
            <div class="graph-placeholder-subtitle">用于后续接入外链图谱页面</div>
          </div>
          <el-tag size="mini" type="info" effect="plain">占位中</el-tag>
        </div>

        <div class="graph-placeholder-body">
          <div class="graph-placeholder-text">
            当前卡片用于预留专项核查图谱入口，后续接入外链地址后可在此直接跳转展示。
          </div>
          <el-button type="primary" size="small" disabled>待接入</el-button>
        </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: {
    projectId: {
      type: [String, Number],
      default: null,
    },
    projectInfo: {
      type: Object,
      default: () => ({
        projectName: "",
        updateTime: "",
        projectStatus: "0",
      }),
    },
  },
  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 {
  min-height: 400px;
  padding: 0 0 24px;
}

.special-check-state {
  min-height: 400px;
}

.state-card {
  padding: 32px 24px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ccdi-border);
  box-shadow: var(--ccdi-shadow);
}

.special-check-page {
  min-height: 400px;
}

.graph-placeholder-card {
  margin-top: 16px;
  min-height: 500px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ccdi-border);
  border-radius: 14px;
  box-shadow: var(--ccdi-shadow);
}

.graph-placeholder-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.graph-placeholder-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ccdi-text-primary);
}

.graph-placeholder-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ccdi-text-muted);
}

.graph-placeholder-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px dashed #d9e3ee;
  background: #f8fbfe;
}

.graph-placeholder-text {
  font-size: 14px;
  line-height: 22px;
  color: var(--ccdi-text-secondary);
}

.special-check-extended-wrapper {
  margin-top: 16px;
}
</style>