676 lines
19 KiB
Vue
676 lines
19 KiB
Vue
<template>
|
||
<div class="detail" v-if="pageShow" :class="[isFrom ? 'active' : '']">
|
||
<div class="tab" v-if="!isFrom">
|
||
<span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">基本信息</span>
|
||
<span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">走访日志</span>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div class="tab-content__item" v-show="currIndex === 0">
|
||
<div class="item-wrapper">
|
||
<div class="item-header item-avatar">
|
||
<div class="left">
|
||
<!-- <img :src="info.photo" alt="" v-if="info.photo" /> -->
|
||
<img :src="$cdn + 'avatar.png'" />
|
||
<div class="left-right">
|
||
<h2>{{ info.name }}</h2>
|
||
<p>{{ info.phone }}</p>
|
||
</div>
|
||
</div>
|
||
<span @click="linkTo(`./residentDetail?id=${info.id}`)">详情</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>现住地址</label>
|
||
<span>{{ info.countyName + info.townName + info.villageName }}</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>详细地址</label>
|
||
<span>{{ info.currentAddress }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="item-wrapper">
|
||
<div class="item-header">
|
||
<div class="left">
|
||
<h2>帮扶措施</h2>
|
||
</div>
|
||
<span @click="toLogList()">查看</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>采取措施</label>
|
||
<span>{{ $dict.getLabel('fpAssistanceMeasures',info.operationDesc) }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="item-wrapper">
|
||
<div class="item-header">
|
||
<div class="left">
|
||
<h2>家庭成员</h2>
|
||
<i :style="{color: info.family && info.family.length ? '#2EA222' : '#FF4466'}">({{
|
||
info.family && info.family.length ? '已填写' : '未填写'
|
||
}})</i>
|
||
</div>
|
||
<span @click="toFamily()">编辑</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>未参加医疗参保</label>
|
||
<span>{{ info.ylbxCount }}人</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>未参加养老保险</label>
|
||
<span>{{ info.ylCount }}人</span>
|
||
</div>
|
||
</div>
|
||
<div class="item-wrapper">
|
||
<div class="item-header">
|
||
<div class="left">
|
||
<h2>生产生活条件</h2>
|
||
<i :style="{color: isFamilySituation ? '#2EA222' : '#FF4466'}">({{
|
||
isFamilySituation ? '已填写' : '未填写'
|
||
}})</i>
|
||
</div>
|
||
<span @click="linkTo(`./MonitorFamilySituation?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)">编辑</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>是否危房</label>
|
||
<span>{{ $dict.getLabel('fpYesOrNo', info.dilapidatedHousehold) || '-' }}</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>是否解决安全饮水</label>
|
||
<span>{{ $dict.getLabel('fpYesOrNo', info.drinkingWaterSafety) || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="item-wrapper">
|
||
<div class="item-header">
|
||
<div class="left">
|
||
<h2>家庭风险情况</h2>
|
||
<i :style="{color: isIncome ? '#2EA222' : '#FF4466'}">({{ isIncome ? '已填写' : '未填写' }})</i>
|
||
</div>
|
||
<span @click="linkTo(`./familyRisk?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)">编辑</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>风险因素</label>
|
||
<span>{{ $dict.getLabel('fpRiskType', info.riskType) }}</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>风险是否已消除</label>
|
||
<span>{{ $dict.getLabel('fpYesOrNo', info.riskEliminated) }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="item-wrapper">
|
||
<div class="item-header">
|
||
<div class="left">
|
||
<h2>家庭收支情况</h2>
|
||
<i :style="{color: isIncome ? '#2EA222' : '#FF4466'}">({{ isIncome ? '已填写' : '未填写' }})</i>
|
||
</div>
|
||
<span @click="linkTo(`./MonitorIncome?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)">编辑</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>家庭纯收入</label>
|
||
<span>{{ info.familyIncome }}元</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>家庭人均纯收入</label>
|
||
<span>{{ info.perCapitaIncome }}元</span>
|
||
</div>
|
||
</div>
|
||
<!-- 风险解除 -->
|
||
<!-- v-if="info.status == 3" -->
|
||
<div class="item-wrapper" v-if="info.status == 3">
|
||
<div class="item-header">
|
||
<div class="left">
|
||
<h2>风险解除跟踪</h2>
|
||
<i :style="{color: isPoorStatus ? '#2EA222' : '#FF4466'}">({{ isPoorStatus ? '已填写' : '未填写' }})</i>
|
||
</div>
|
||
<span @click="linkTo(`./MonitorPoorStatus?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)">编辑</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>信息采集人</label>
|
||
<span>{{ $dict.getLabel('fpIndustrialAssistance', info.industrialAssistance) || '-' }}</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<label>信息采集人电话</label>
|
||
<span>{{ $dict.getLabel('fpHealthAssistance', info.healthAssistance) || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content__item" v-show="currIndex === 1">
|
||
<div class="log-item" v-for="(item, index) in list" :key="index">
|
||
<div class="log-item__wrapper">
|
||
<div class="log-item__user">
|
||
<div class="left">
|
||
<div class="user">
|
||
<span>{{ item.createUserName.substr(item.createUserName.length - 2) }}</span>
|
||
</div>
|
||
<h2>{{ item.createUserName }}</h2>
|
||
</div>
|
||
<div class="right">
|
||
<span>{{ item.createTime }}</span>
|
||
<u-icon name="list" color="#999" size="28" @click="edit(item.id)" style="margin-left:16px;" v-if="item.createUserId == user.id && item.operationDesc == '走访排查'"></u-icon>
|
||
</div>
|
||
</div>
|
||
<p style="color: #999999;">操作类型：{{ item.operationDesc }}</p>
|
||
<p>{{ item.detail }}</p>
|
||
<div class="imgs" v-if="item.files && item.files.length">
|
||
<image :src="img.url" @click="prevImg(item.files, img.url)" v-for="(img, index) in item.files"
|
||
:key="index"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<AiEmpty v-if="!list.length" style="padding-bottom: 20px;"></AiEmpty>
|
||
</div>
|
||
</div>
|
||
<AiFixedBtn v-if="currIndex === 1">
|
||
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog()"></div>
|
||
</AiFixedBtn>
|
||
<!-- 0：待纳入、1：监测中、2：待解除、3：已解除、4：已驳回 -->
|
||
<div v-if="checkType == 1 && currIndex != 1">
|
||
<div class="footer-btn" v-if="info.status == 1">
|
||
<div class="confirm-btn" @click="toAddView('您确认要申请解除此监测对象的风险吗？', '')">申请解除风险</div>
|
||
</div>
|
||
<div class="footer-btn" v-if="info.status == 3 || info.status == 4">
|
||
<div @click="del">删除人员</div>
|
||
<div class="confirm-btn" @click="toAddView('您确认要申请纳入此监测对象吗？', '')">申请纳入监测</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="checkType == 2 && currIndex != 1">
|
||
|
||
<div class="footer-btn" v-if="info.status == 0 && userInfo == ''">
|
||
<div class="confirm-btn" @click="toRemove('您确认要将此居民纳入监测对象吗？', 1,0)">纳入监测审核</div>
|
||
</div>
|
||
|
||
<div class="footer-btn" v-if="info.status == 1">
|
||
<div class="confirm-btn" @click="toAddView('您确认要解除此监测对象的风险吗？', 1)">消除风险</div>
|
||
</div>
|
||
|
||
<div class="footer-btn" v-if="info.status == 2">
|
||
<div class="confirm-btn" @click="toRemove('您确认要解除此监测对象的风险吗？', 1,1)">消除风险审核</div>
|
||
</div>
|
||
|
||
<div class="footer-btn" v-if="(info.status == 4 || info.status == 3 || info.status == 0) && userInfo != ''">
|
||
<div @click="del">删除人员</div>
|
||
<div class="confirm-btn" @click="toAddView('您确认要将此居民纳入监测对象吗？', 1)">纳入监测</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
export default {
|
||
name: 'detail',
|
||
|
||
data() {
|
||
return {
|
||
info: {},
|
||
pageShow: false,
|
||
currIndex: 0,
|
||
list: [],
|
||
isFrom: false,
|
||
viewAll: false,
|
||
checkType: '',
|
||
girdInfo: {},
|
||
userInfo: {},
|
||
id: '',
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
...mapState(['user']),
|
||
isIncome() {
|
||
if (!this.info.id) {
|
||
return false
|
||
}
|
||
return this.info.income8 > 0 || this.info.income8 > 0;
|
||
},
|
||
|
||
isPoorStatus() {
|
||
if (!this.info.id) {
|
||
return false
|
||
}
|
||
return (this.info.industrialAssistance || this.info.healthAssistance || this.info.employmentAssistance || this.info.educationalAssistance
|
||
|| this.info.financialAssistance || this.info.socialAssistance || this.info.publicWelfarePostAssistance);
|
||
},
|
||
|
||
isFamilySituation() {
|
||
if (!this.info.id) {
|
||
return false
|
||
}
|
||
|
||
return (this.info.drinkingWaterSafety || this.info.dilapidatedHouse && this.info.move);
|
||
|
||
|
||
}
|
||
},
|
||
|
||
onLoad(query) {
|
||
if (query.isFrom) {
|
||
this.isFrom = true
|
||
}
|
||
this.$dict.load(['fpType', 'riskEliminationMethod', 'fpRiskType', 'fpYesOrNo', 'fpNation', 'fpEducation', 'fpStudentsInSchool', 'fpHealth',
|
||
'fpLaborSkills', 'fpPoliticalOutlook', 'fpIndustrialAssistance', 'fpHealthAssistance','fpAssistanceMeasures']).then(() => {
|
||
this.isGirdUser()
|
||
this.getInfo()
|
||
})
|
||
|
||
this.id = query.id
|
||
this.getUserPopup()
|
||
},
|
||
onShow() {
|
||
document.title = '监测对象详情'
|
||
uni.$on('reload', () => {
|
||
this.getInfo()
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
isGirdUser() {
|
||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||
if (res.code == 0) {
|
||
this.checkType = res.data.checkType
|
||
this.girdInfo = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
linkTo(url) {
|
||
uni.navigateTo({url})
|
||
},
|
||
|
||
call(phone) {
|
||
if (phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
}
|
||
},
|
||
|
||
edit(id) {
|
||
uni.showActionSheet({
|
||
itemList: ['编辑', '删除'],
|
||
success: res => {
|
||
if (res.tapIndex === 0) {
|
||
uni.navigateTo({
|
||
url: `./MonitorAddLog?pid=${this.info.id}&id=${id}&type=0`
|
||
})
|
||
} else if (res.tapIndex === 1) {
|
||
this.$confirm('确定删除该数据？').then(() => {
|
||
uni.showLoading()
|
||
this.$http.post(`/app/apppreventionreturntopovertylog/delete?ids=${id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.$u.toast('删除成功')
|
||
this.getInfo()
|
||
}
|
||
uni.hideLoading()
|
||
})
|
||
}).catch(() => {
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
prevImg(urls, img) {
|
||
const imgs = urls.map(v => v.url)
|
||
uni.previewImage({
|
||
urls: imgs,
|
||
current: img
|
||
})
|
||
},
|
||
|
||
toAddLog() {
|
||
uni.navigateTo({
|
||
url: `./MonitorAddLog?pid=${this.info.id}&type=0`
|
||
})
|
||
},
|
||
|
||
toLogList() {
|
||
uni.navigateTo({
|
||
url: `./LogList?id=${this.info.id}`
|
||
})
|
||
},
|
||
|
||
changeTab(index) {
|
||
this.currIndex = index
|
||
},
|
||
|
||
getUserPopup() {
|
||
this.$http.post(`/app/apppreventionreturntopoverty/popup?id=${this.id}`).then(res => {
|
||
if (res?.code === 0) {
|
||
this.userInfo = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
getInfo() {
|
||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${this.id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.info = res.data
|
||
|
||
let ylbxCount = 0
|
||
let ylCount = 0
|
||
if(res.data.family && res.data.family.length) {
|
||
res.data.family.forEach(item => {
|
||
if (item.basicMedicalTreatment === '02') {
|
||
ylbxCount = ylbxCount + 1
|
||
}
|
||
if (item.endowmentInsurance === '02') {
|
||
ylCount = ylCount + 1
|
||
}
|
||
})
|
||
}
|
||
|
||
this.info.ylbxCount = ylbxCount
|
||
this.info.ylCount = ylCount
|
||
this.pageShow = true
|
||
}
|
||
})
|
||
this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${this.id}&size=1000¤t=1&type=0`).then(res => {
|
||
if (res.code === 0) {
|
||
this.list = res.data.records || []
|
||
}
|
||
})
|
||
},
|
||
|
||
toAddView(text, pass) {
|
||
this.$confirm('', text).then(() => {
|
||
uni.navigateTo({url: `./MonitorAddView?pass=${pass}&id=${this.info.id}&status=${this.info.status}`})
|
||
})
|
||
},
|
||
|
||
del() {
|
||
this.$confirm('', '您确认要要删除此监测对象的信息吗？').then(() => {
|
||
this.$http.post(`/app/apppreventionreturntopoverty/delete?ids=${this.id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.$u.toast('删除成功')
|
||
uni.$emit('reload')
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
})
|
||
}
|
||
})
|
||
})
|
||
},
|
||
|
||
toRemove(text, pass,type) {
|
||
this.$confirm('', text).then(() => {
|
||
uni.navigateTo({url: `./MonitorRemoveView?pass=${pass}&id=${this.info.id}&status=${this.info.status}&type=${type}`})
|
||
})
|
||
},
|
||
|
||
toFamily() {
|
||
var objectType = this.info.objectType || ''
|
||
this.linkTo(`./MonitorFamilyMember?id=${this.info.id}&houseIdNumber=${this.info.idNumber}&objectType=${objectType}`)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.detail {
|
||
padding-top: 96px;
|
||
padding-bottom: 130px;
|
||
|
||
&.active {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.tab {
|
||
display: flex;
|
||
position: fixed;
|
||
align-items: center;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
width: 100%;
|
||
height: 96px;
|
||
padding: 0 60px;
|
||
background: #FFFFFF;
|
||
border-bottom: 1px solid #D4D4D4;
|
||
box-sizing: border-box;
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
span {
|
||
position: relative;
|
||
flex: 1;
|
||
height: 96px;
|
||
line-height: 96px;
|
||
color: #000000;
|
||
text-align: center;
|
||
font-size: 32px;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
width: 192px;
|
||
height: 6px;
|
||
background: transparent;
|
||
transform: translateX(-50%);
|
||
content: ' ';
|
||
}
|
||
|
||
&.active {
|
||
color: #1365DD;
|
||
|
||
&::after {
|
||
background: #1365DD;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-wrapper {
|
||
background: #fff;
|
||
margin-bottom: 16px;
|
||
padding: 0 32px 16px;
|
||
|
||
.item-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 96px;
|
||
|
||
& > span {
|
||
color: #3975C6;
|
||
font-size: 32px;
|
||
}
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
h2 {
|
||
color: #333333;
|
||
font-size: 32px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
i {
|
||
font-style: normal;
|
||
color: #2EA222;
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 14px 0;
|
||
|
||
label {
|
||
color: #999999;
|
||
font-size: 32px;
|
||
}
|
||
|
||
span {
|
||
max-width: 496px;
|
||
text-align: right;
|
||
color: #333333;
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
|
||
.item-avatar {
|
||
height: 192px;
|
||
|
||
img {
|
||
width: 112px;
|
||
height: 112px;
|
||
margin-right: 24px;
|
||
}
|
||
|
||
.left-right {
|
||
p {
|
||
margin-top: 8px;
|
||
color: #999999;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.log-item {
|
||
padding: 0 0 0 32px;
|
||
background: #fff;
|
||
|
||
&:first-child {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
&:last-child {
|
||
.log-item__wrapper {
|
||
border: none !important;
|
||
}
|
||
}
|
||
|
||
.log-item__wrapper {
|
||
padding: 32px 32px 32px 0;
|
||
border-bottom: 1px solid #E4E5E6;
|
||
|
||
.log-item__user {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
& > div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.left {
|
||
.user, image {
|
||
width: 80px;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
margin-right: 16px;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
background: #2266FF;
|
||
|
||
span {
|
||
color: #fff;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
color: #333;
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
image {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
span {
|
||
margin-right: 6px;
|
||
color: #999999;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
|
||
p {
|
||
margin: 4px 0 16px 96px;
|
||
color: #343D65;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.imgs {
|
||
margin-left: 96px;
|
||
|
||
image {
|
||
width: 136px;
|
||
height: 136px;
|
||
margin-right: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.view-all{
|
||
text-align: center;
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
color: #3975C6;
|
||
line-height: 44px;
|
||
img{
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-left: 8px;
|
||
transform: rotate(180deg);
|
||
transition: all 0.3s ease-in-out;
|
||
vertical-align: middle;
|
||
}
|
||
.img-active{
|
||
transform: rotate(0deg);
|
||
}
|
||
}
|
||
.footer-btn{
|
||
width: 100%;
|
||
height: 112px;
|
||
line-height: 112px;
|
||
background: #FFF;
|
||
display: flex;
|
||
box-shadow: inset 0px 1px 0px 0px #DDDDDD;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
div{
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333;
|
||
}
|
||
.confirm-btn{
|
||
background-color: #3192F4;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|