Files
dvcp_v2_wxcp_app/src/apps/AppMonitoringObject/Detail.vue
2022-08-16 09:28:41 +08:00

733 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="detail" v-if="pageShow" :class="{active:isFrom}">
<!-- <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 style="color: #2979ff;" @click="callPhone(info.phone)">
<u-icon name="phone" color="#2979ff" size="28"></u-icon>
{{ info.phone }}
</p>
</div>
</div>
<span @click="linkTo(`./residentDetail?id=${info.id}`)">详情</span>
</div>
<AiItem label="现住地址">{{ info.countyName + info.townName + info.villageName }}</AiItem>
<AiItem label="详细地址">{{ info.currentAddress }}</AiItem>
<div class="item-info">
<label>现住地址</label>
<span></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>
<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>{{ basicNum.length }}</span>
</div>
<div class="item-info">
<label>未参加养老保险</label>
<span>{{ endNum.length }}</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: isFamilyRisk ? '#2EA222' : '#FF4466'}">({{ isFamilyRisk ? '已填写' : '未填写' }})</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('fpType', info.objectType) }}</span>
</div>
<div class="item-info">
<label>风险因素</label>
<span>{{ $dict.getLabel('fpRiskType', info.riskType) }}</span>
</div>
</div>
<div class="item-wrapper">
<div class="item-header">
<div class="left">
<h2>家庭收支情况</h2>
<i :style="{color: familyIncome ? '#2EA222' : '#FF4466'}">({{ familyIncome ? '已填写' : '未填写' }})</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>
<!-- 风险解除 -->
<div class="item-wrapper" v-if="info.status == 3">
<div class="item-header">
<div class="left">
<h2>风险解除跟踪</h2>
<i :style="{color: moveRisk ? '#2EA222' : '#FF4466'}">({{ moveRisk ? '已填写' : '未填写' }})</i>
</div>
<span
@click="linkTo(`./MonitorPoorStatus?id=${info.id}&girdId=${girdInfo.girdId}&girdName=${girdInfo.girdName}`)">编辑</span>
</div>
<div class="item-info">
<label>信息采集人</label>
<span>{{ info.updateUserName || '-' }}</span>
</div>
<div class="item-info">
<label>信息采集人电话</label>
<span>{{ info.updateUserPhone || '-' }}</span>
</div>
</div>
</div>
<div class="item-wrapper" v-if="info.status==4">
<AiItem label="审批人" :border="false">{{ info.auditUserName }}</AiItem>
<AiItem label="驳回日期" :border="false">{{ info.auditTime }}</AiItem>
<AiItem label="驳回理由" :border="false" top-label>{{ info.auditOpinion }}</AiItem>
</div>
<!-- <div class="tab-content__item" v-show="currIndex === 1 && info.status!=5">
<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> -->
<AiEmpty description="暂无数据" v-show="currIndex === 1 && info.status==5"/>
</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" v-if="$permissions('app_apppreventionreturntopoverty_del')">删除人员</div>
<div class="confirm-btn" @click="toAddView('您确认要申请纳入此监测对象吗?', '')">申请纳入监测</div>
</div>
<div class="footer-btn" v-if="info.status == 5">
<!-- <div @click="del" v-if="$permissions('app_apppreventionreturntopoverty_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) && userInfo != ''">
<div @click="del" v-if="$permissions('app_apppreventionreturntopoverty_del')">删除人员</div>
<div class="confirm-btn" @click="toAddView('您确认要将此居民纳入监测对象吗?', 1)">纳入监测</div>
</div>
<div class="footer-btn" v-if="(info.status == 5) && userInfo != ''">
<!-- <div @click="del" v-if="$permissions('app_apppreventionreturntopoverty_del')">删除人员</div> -->
<div class="confirm-btn" @click="toAddView('您确认要将此居民纳入监测对象吗?', 1)">纳入监测</div>
</div>
</div>
</div>
<AiEmpty v-else/>
</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: '',
basicNum: [],
endNum: [],
}
},
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);
},
isFamilyRisk() {
if (!this.info.id) {
return false
}
return (this.info.objectType || this.info.riskType || this.info.militaryMartyrs || this.info.dropOutOfSchool)
},
familyIncome() {
if (!this.info.id) {
return false
}
return (this.info.income1 || this.info.income2 || this.info.income3 || this.info.income4
|| this.info.income5 || this.info.income6 || this.info.income7 || this.info.income8 || this.info.income9 ||
this.info.income10 || this.info.income11 || this.info.income12 ||
this.info.income13 || this.info.income14 || this.info.income15)
},
moveRisk() {
if (!this.info.id) {
return false
}
return (this.info.fxxcIncome1 || this.info.fxxcIncome2 || this.info.fxxcIncome3 || this.info.fxxcIncome4
|| this.info.fxxcIncome5 || this.info.fxxcIncome6 || this.info.fxxcIncome7)
}
},
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
}
})
},
callPhone(phone) {
uni.makePhoneCall({phoneNumber: phone})
},
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?.data) {
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.endNum = res.data.family.filter(item =>
(item.jcbxCxyiliao == '02' || '') && (item.jcbxCzyiliao == '02' || '')
)
this.endNum = res.data.family.filter(v =>
(v.jcbxCxyanglao == '02' || '') && (v.jcbxCzyanglao == '02' || '')
)
}
this.info.ylbxCount = ylbxCount
this.info.ylCount = ylCount
this.pageShow = true
}
})
this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${this.id}&size=1000&current=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;
}
}
::v-deep.AiItem {
.normal {
padding-right: 0;
}
.label {
padding-left: 0;
}
}
}
</style>