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

<template>
  <div class="family-asset-liability-detail" v-loading="loading">
    <div class="detail-grid">
      <section class="detail-block">
        <div class="block-header">
          <div>
            <div class="block-title">收入明细</div>
            <div class="block-subtitle">展示本人、配偶与家庭收入汇总</div>
          </div>
        </div>
        <div class="detail-metric-list">
          <div class="detail-metric-item">
            <span class="metric-label">本人收入</span>
            <span class="metric-value">{{ formatAmount(incomeDetail.selfIncome) }}</span>
          </div>
          <div class="detail-metric-item">
            <span class="metric-label">配偶收入</span>
            <span class="metric-value">{{ formatAmount(incomeDetail.spouseIncome) }}</span>
          </div>
          <div class="detail-metric-item">
            <span class="metric-label">家庭总收入</span>
            <span class="metric-value">{{ formatAmount(incomeDetail.totalIncome) }}</span>
          </div>
        </div>
      </section>

      <section class="detail-block">
        <div class="block-header">
          <div>
            <div class="block-title">资产明细</div>
            <div class="block-subtitle">展示本人及配偶资产小计与明细列表</div>
          </div>
        </div>
        <div v-if="!assetDetail.missingSelfAssetInfo" class="detail-summary">
          <span>本人资产小计：{{ formatAmount(assetDetail.selfTotalAsset) }}</span>
          <span>配偶资产小计：{{ formatAmount(assetDetail.spouseTotalAsset) }}</span>
        </div>
        <el-table v-if="assetItems.length" :data="assetItems" size="mini" class="detail-table">
          <el-table-column prop="assetName" label="资产名称" min-width="140" />
          <el-table-column prop="assetMainType" label="资产大类" min-width="100" />
          <el-table-column prop="assetSubType" label="资产小类" min-width="120" />
          <el-table-column prop="holderName" label="持有人" min-width="100" />
          <el-table-column label="当前估值" min-width="120">
            <template slot-scope="scope">
              <span>{{ formatAmount(scope.row.currentValue) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="valuationDate" label="估值日期" min-width="120" />
        </el-table>
        <el-empty v-else :image-size="64" description="暂无资产明细" />
      </section>

      <section class="detail-block">
        <div class="block-header">
          <div>
            <div class="block-title">负债明细</div>
            <div class="block-subtitle">展示本人及配偶负债小计与明细列表</div>
          </div>
        </div>
        <div v-if="!debtDetail.missingSelfDebtInfo" class="detail-summary">
          <span>本人负债小计：{{ formatAmount(debtDetail.selfTotalDebt) }}</span>
          <span>配偶负债小计：{{ formatAmount(debtDetail.spouseTotalDebt) }}</span>
        </div>
        <el-table v-if="debtItems.length" :data="debtItems" size="mini" class="detail-table">
          <el-table-column prop="debtName" label="负债名称" min-width="140" />
          <el-table-column prop="debtMainType" label="负债大类" min-width="100" />
          <el-table-column prop="debtSubType" label="负债小类" min-width="120" />
          <el-table-column prop="creditorType" label="债权人类型" min-width="120" />
          <el-table-column prop="ownerName" label="归属人" min-width="100" />
          <el-table-column label="本金余额" min-width="120">
            <template slot-scope="scope">
              <span>{{ formatAmount(scope.row.principalBalance) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="queryDate" label="查询日期" min-width="120" />
        </el-table>
        <el-empty v-else :image-size="64" description="暂无负债明细" />
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: "FamilyAssetLiabilityDetail",
  props: {
    detail: {
      type: Object,
      default: () => ({}),
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    incomeDetail() {
      return this.detail && this.detail.incomeDetail
        ? this.detail.incomeDetail
        : {
            selfIncome: 0,
            spouseIncome: 0,
            totalIncome: 0,
          };
    },
    assetDetail() {
      return this.detail && this.detail.assetDetail
        ? this.detail.assetDetail
        : {
            missingSelfAssetInfo: false,
            selfTotalAsset: 0,
            spouseTotalAsset: 0,
            totalAsset: 0,
            items: [],
          };
    },
    debtDetail() {
      return this.detail && this.detail.debtDetail
        ? this.detail.debtDetail
        : {
            missingSelfDebtInfo: false,
            selfTotalDebt: 0,
            spouseTotalDebt: 0,
            totalDebt: 0,
            items: [],
          };
    },
    assetItems() {
      return Array.isArray(this.assetDetail.items) ? this.assetDetail.items : [];
    },
    debtItems() {
      return Array.isArray(this.debtDetail.items) ? this.debtDetail.items : [];
    },
  },
  methods: {
    formatAmount(value) {
      const amount = Number(value || 0);
      return `${amount.toLocaleString("zh-CN", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })} 元`;
    },
  },
};
</script>

<style lang="scss" scoped>
.family-asset-liability-detail {
  padding: 8px 0 4px;
}

.detail-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-block {
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  min-width: 0;
}

.block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.block-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.block-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #94a3b8;
}

.detail-metric-list {
  display: grid;
  gap: 8px;
}

.detail-metric-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: #475569;
}

.metric-value {
  font-weight: 600;
  color: #111827;
}

.detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #475569;
}

.detail-table {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.detail-table .el-table__body-wrapper) {
  overflow-x: auto;
}

@media (max-width: 1200px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}
</style>