Files
dvcp_v2_wechat_app/src/project/new/AppResidentFile/components/document.vue
2024-06-21 13:49:48 +08:00

140 lines
4.6 KiB
Vue

<template>
<div class="document" v-if="isShow">
<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>
</div>
</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,
isShow: false,
familyList: [],
top: {}
}
},
created() {
this.$dict.load('sex', 'nation', 'education', 'job', 'faithType', 'politicsStatus', 'militaryStatus', 'householdRelation', 'householdName').then(() => {
this.isShow = true
})
// console.log('居民档案性别(无字典)', this.resident.sex)
// console.log('居民档案性别(有字典)', this.$dict.getLabel('sex', this.resident.sex))
// console.log('居民档案字典值', this.$dict.getDict('sex'))
},
onShow() {
// this.$dict.load('sex', 'nation', 'education', 'job', 'faithType', 'politicsStatus', 'militaryStatus', 'householdRelation', 'householdName')
// document.title = '居民详情'
},
}
</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>