监测对象
This commit is contained in:
liuye
333
src/apps/AppMonitoringObject/MonitorFamilyMember.vue
Normal file
333
src/apps/AppMonitoringObject/MonitorFamilyMember.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<div class="familyMember" v-if="pageShow">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<div class="item-title">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<h2>{{ item.name }}</h2>
|
||||
<span>{{ item.idNumber }}</span>
|
||||
</div>
|
||||
<span>{{ $dict.getLabel('fpRelationship', item.relationship) }}</span>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span>{{ $dict.getLabel('sex', item.sex) }}</span>
|
||||
<span>{{ item.age }}岁</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-info" v-if="item.isShow">
|
||||
<div class="item-info__item">
|
||||
<label>民族</label>
|
||||
<span>{{ $dict.getLabel('fpNation', item.nation) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>政治面貌</label>
|
||||
<span>{{ $dict.getLabel('fpPoliticalOutlook', item.politicalOutlook) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>文化程度</label>
|
||||
<span>{{ $dict.getLabel('fpEducation', item.education) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>在校情况</label>
|
||||
<span>{{ $dict.getLabel('fpStudentsInSchool', item.studentsInSchool) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>健康状况</label>
|
||||
<span>{{ $dict.getLabel('fpHealth', item.health) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>劳动技能</label>
|
||||
<span>{{ $dict.getLabel('fpLaborSkills', item.laborSkills) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>务工区域</label>
|
||||
<span>{{ item.workArea }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>务工时间</label>
|
||||
<span>{{ item.workingMonths }}月</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>是否参加医疗参保</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', item.medicalInsurance) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>是否参加大病保险</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', item.sicknessInsurance) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>是否参加养老保险</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', item.endowmentInsurance) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>是否享受最低生活保障</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', item.subsistenceAllowance) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
<label>是否特困供养</label>
|
||||
<span>{{ $dict.getLabel('fpYesOrNo', item.destitute) }}</span>
|
||||
</div>
|
||||
<div class="item-info__item">
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-bottom">
|
||||
<span @click="showMore(index)">{{ item.isShow ? '收起详情' : '展开详情' }}</span>
|
||||
<span @click="toEdit(index)">编辑</span>
|
||||
<span @click="remove(index)">删除</span>
|
||||
</div>
|
||||
</div>
|
||||
<AiFixedBtn>
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAdd"></div>
|
||||
</AiFixedBtn>
|
||||
<div class="no-more" v-if="!list.length">
|
||||
<image src="/static/images/empty.png"/>
|
||||
<div>
|
||||
<span>您还未添加过家庭成员点击</span>
|
||||
<i>新增按钮</i>
|
||||
<span>试试吧~</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
id: '',
|
||||
info: {},
|
||||
pageShow: false
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
document.title = '家庭成员'
|
||||
},
|
||||
|
||||
onLoad(query) {
|
||||
uni.showLoading()
|
||||
this.id = query.id
|
||||
this.$dict.load(['fpRelationship', 'sex', 'fpNation', 'fpHealth', 'fpEducation', 'fpYesOrNo', 'fpLaborSkills', 'fpPoliticalOutlook',
|
||||
'fpRelationship', 'fpStudentsInSchool', 'fpFnancialAssistance', 'fpHealthAssistance', 'fpHousingSecurity']).then(() => {
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
|
||||
uni.$on('reload', () => {
|
||||
this.getInfo(query.id)
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
toAdd() {
|
||||
uni.navigateTo({
|
||||
url: './MonitorAddFamilyMember?id=' + this.id
|
||||
})
|
||||
},
|
||||
|
||||
toEdit(index) {
|
||||
this.$confirm('确定编辑该数据？').then(() => {
|
||||
uni.navigateTo({
|
||||
url: `./MonitorAddFamilyMember?id=${this.id}&index=${index}`
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
|
||||
remove(index) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
let familyList = JSON.parse(JSON.stringify(this.list))
|
||||
familyList.splice(index, 1)
|
||||
uni.showLoading()
|
||||
this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
|
||||
...this.info,
|
||||
familyList,
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$u.toast('删除成功')
|
||||
this.getInfo(this.id)
|
||||
}
|
||||
uni.hideLoading()
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
|
||||
showMore(index) {
|
||||
this.list[index].isShow = !this.list[index].isShow
|
||||
},
|
||||
|
||||
getInfo(id) {
|
||||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.info = res.data
|
||||
this.list = res.data.familyList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
isShow: false,
|
||||
age: this.$calcAge(item.idNumber)
|
||||
}
|
||||
})
|
||||
|
||||
this.pageShow = true
|
||||
}
|
||||
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.familyMember {
|
||||
padding: 32px 0;
|
||||
|
||||
.no-more {
|
||||
padding-top: 160px;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
width: 282px;
|
||||
height: 304px;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 280px;
|
||||
margin: 0 auto;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: #467DFE;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
flex-shrink: 0;
|
||||
background: $uni-color-primary;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 686px;
|
||||
margin: 0 auto 32px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
|
||||
.item-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 94px;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 96px;
|
||||
color: #3975C6;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding: 32px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
margin-right: 32px;
|
||||
color: #333333;
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: #3975C6;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: #F9F9F9;
|
||||
|
||||
.item-info__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 50%;
|
||||
height: 72px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
border-right: 1px solid #DDDDDD;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: #999999;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #3975C6;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user