wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wkc
2026-03-24 20:42:56 +08:00
parent 979b905682
commit c1b4514806
38 changed files with 2514 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
ruoyi-ui/src/views/ccdiProject/components/detail/FamilyAssetLiabilityDetail.vue Normal file
View File

@@ -0,0 +1,225 @@
<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>