149 lines
3.7 KiB
Vue
149 lines
3.7 KiB
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)"
|
|
/>
|
|
|
|
<fund-graph-section ref="fundGraphSection" />
|
|
</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";
|
|
import FundGraphSection from "./graph/FundGraphSection";
|
|
|
|
export default {
|
|
name: "SpecialCheck",
|
|
components: {
|
|
ExtendedQuerySection,
|
|
FamilyAssetLiabilitySection,
|
|
FundGraphSection,
|
|
},
|
|
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;
|
|
}
|
|
|
|
.special-check-extended-wrapper {
|
|
margin-top: 16px;
|
|
}
|
|
</style>
|