130 lines
4.0 KiB
Vue
130 lines
4.0 KiB
Vue
<template>
|
|
<section class="document">
|
|
<div class="card">
|
|
<div class="info">
|
|
<u-image border-radius="4" :src="top.detail.avatar" width="118" height="118"/>
|
|
<div class="fill">
|
|
<b>{{ top.detail.realName || top.detail.name }}</b>
|
|
<u-row>
|
|
<span class="idNumber" v-html="IDObj.id"/>
|
|
<a @tap="showID=!showID">{{ IDObj.btn }}</a>
|
|
</u-row>
|
|
</div>
|
|
</div>
|
|
<AiCell label="性别">{{ $dict.getLabel("sex", resident.sex) || "-" }}</AiCell>
|
|
<AiCell label="出生日期">{{ resident.birthDate }}</AiCell>
|
|
<AiCell label="年龄">{{ resident.age }}</AiCell>
|
|
<AiCell label="籍贯">{{ resident.birthplaceAreaName }}</AiCell>
|
|
<AiCell label="民族">{{ $dict.getLabel("nation", resident.nation) || "-" }}</AiCell>
|
|
<AiCell label="文化程度">{{ $dict.getLabel("education", resident.education) || "-" }}</AiCell>
|
|
<AiCell label="兵役状况">{{ $dict.getLabel("militaryStatus", resident.militaryStatus) || "-" }}</AiCell>
|
|
<AiCell label="政治面貌">{{ $dict.getLabel("politicsStatus", resident.politicsStatus) || "-" }}</AiCell>
|
|
<AiCell label="职业">{{ $dict.getLabel("job", resident.job) || "-" }}</AiCell>
|
|
<AiCell label="宗教信仰">{{ $dict.getLabel("faithType", resident.faithType) || "-" }}</AiCell>
|
|
</div>
|
|
<div class="card">
|
|
<AiCell title label="联络信息"/>
|
|
<AiCell label="联系方式">{{ resident.phone }}</AiCell>
|
|
<AiCell label="现住址">{{ resident.currentAreaName + resident.currentAddress }}</AiCell>
|
|
</div>
|
|
<div class="card">
|
|
<AiCell title label="家庭信息"/>
|
|
<AiCell label="是否户主">{{ $dict.getLabel("householdName", resident.householdName) || "-" }}</AiCell>
|
|
<AiCell label="与户主关系">{{ $dict.getLabel("householdRelation", resident.householdRelation) || "-" }}</AiCell>
|
|
<AiCell label="现住址">{{ resident.householdAreaName + resident.householdAddress }}</AiCell>
|
|
</div>
|
|
<div class="card">
|
|
<AiCell title label="家庭成员"/>
|
|
<AiTable :data="family" :colConfigs="colConfigs"/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "document",
|
|
inject: ['top'],
|
|
computed: {
|
|
IDObj() {
|
|
return this.showID ? {
|
|
id: this.resident?.idNumber,
|
|
btn: '隐藏'
|
|
} : {
|
|
id: this.resident?.idNumber?.replace(/(\d{10}).+/g, '$1******'),
|
|
btn: '显示'
|
|
}
|
|
},
|
|
colConfigs() {
|
|
return [
|
|
{label: "与户主关系", prop: "householdRelation", width: '160rpx', dict: "householdRelation"},
|
|
{label: "姓名", prop: "name", width: '120rpx'},
|
|
{label: "性别", prop: "sex", dict: "sex"},
|
|
{label: "年龄", prop: "age"},
|
|
{label: "身份证号", prop: "idNumber", width: '320rpx'},
|
|
]
|
|
},
|
|
resident() {
|
|
let obj = {}
|
|
Object.keys(this.top.detail?.residentInfo?.resident || {}).map(e => {
|
|
obj[e] = this.top.detail?.residentInfo?.resident[e] || ""
|
|
})
|
|
return obj
|
|
},
|
|
family() {
|
|
return this.top.detail?.residentInfo?.family?.map(e => ({...e, householdRelation: e.householdRelation || "户主"}))
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showID: false,
|
|
familyList: []
|
|
}
|
|
},
|
|
created() {
|
|
this.$dict.load("sex", "nation", "education", "job",
|
|
"faithType", "politicsStatus", "militaryStatus", "householdRelation",
|
|
"householdName")
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.document {
|
|
overflow-y: auto;
|
|
background: #F5F5F5;
|
|
|
|
.info {
|
|
height: 186px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.fill {
|
|
color: #3C7FC8;
|
|
margin-left: 24px;
|
|
font-size: 28px;
|
|
line-height: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
b {
|
|
font-size: 36px;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.idNumber {
|
|
margin-right: 16px;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|